From b2ec54e36475044cf47dbe91113fa1f89c1026f1 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 18 Apr 2024 17:22:30 +0300
Subject: [PATCH] Showcase updates

---
 assets/menu/menu.json                         |   32 +-
 components/landing/HeroSection.vue            |    8 +-
 doc/calendar/TimeDoc.vue                      |   95 -
 doc/cdn/ComponentDoc.vue                      |    2 +-
 doc/cdn/ExampleDoc.vue                        |    4 +-
 doc/common/apidoc/index.json                  | 5652 +++++++++++++++--
 doc/configuration/ZIndexDoc.vue               |    4 +-
 doc/customicons/FontAwesomeDoc.vue            |    4 +-
 doc/customicons/ImageDoc.vue                  |    4 +-
 doc/customicons/MaterialDoc.vue               |    4 +-
 doc/customicons/SVGDoc.vue                    |    4 +-
 doc/datatable/StatefulDoc.vue                 |   16 +-
 doc/datatable/edit/RowEditDoc.vue             |   16 +-
 doc/datatable/filter/AdvancedFilterDoc.vue    |   24 +-
 doc/datatable/filter/BasicFilterDoc.vue       |   16 +-
 .../rowselection/MultipleRowsSelectionDoc.vue |    8 +-
 .../rowselection/SingleRowSelectionDoc.vue    |    8 +-
 doc/datatable/samples/CustomersDoc.vue        |   24 +-
 doc/datatable/samples/ProductsDoc.vue         |   12 +-
 doc/dataview/SortingDoc.vue                   |    8 +-
 .../AccessibilityDoc.vue                      |   10 +-
 doc/{calendar => datepicker}/BasicDoc.vue     |   10 +-
 doc/{calendar => datepicker}/ButtonBarDoc.vue |    8 +-
 .../DateTemplateDoc.vue                       |   16 +-
 doc/{calendar => datepicker}/DisabledDoc.vue  |   10 +-
 doc/{calendar => datepicker}/FilledDoc.vue    |    8 +-
 .../FloatLabelDoc.vue                         |    8 +-
 doc/{calendar => datepicker}/FormatDoc.vue    |    8 +-
 doc/{calendar => datepicker}/IconDoc.vue      |   32 +-
 doc/{calendar => datepicker}/ImportDoc.vue    |    2 +-
 doc/{calendar => datepicker}/InlineDoc.vue    |   10 +-
 doc/{calendar => datepicker}/InvalidDoc.vue   |   10 +-
 doc/{calendar => datepicker}/LocaleDoc.vue    |    0
 doc/{calendar => datepicker}/MinMaxDoc.vue    |    8 +-
 .../MonthPickerDoc.vue                        |    8 +-
 doc/{calendar => datepicker}/MultipleDoc.vue  |    8 +-
 .../MultipleMonthsDoc.vue                     |    8 +-
 doc/{calendar => datepicker}/RangeDoc.vue     |    8 +-
 doc/datepicker/TimeDoc.vue                    |   95 +
 .../YearPickerDoc.vue                         |    8 +-
 .../form/VeeValidateDoc.vue                   |    8 +-
 doc/{calendar => datepicker}/pt/PTImage.vue   |    0
 doc/{dropdown => datepicker}/pt/index.vue     |    8 +-
 .../theming/StyledDoc.vue                     |    6 +-
 .../theming/TailwindDoc.vue                   |    0
 .../theming/index.vue                         |    2 +-
 doc/{sidebar => drawer}/AccessibilityDoc.vue  |   16 +-
 doc/{sidebar => drawer}/BasicDoc.vue          |   18 +-
 doc/{sidebar => drawer}/FullScreenDoc.vue     |   16 +-
 doc/{sidebar => drawer}/HeadlessDoc.vue       |   16 +-
 doc/{chips => drawer}/ImportDoc.vue           |    2 +-
 doc/{sidebar => drawer}/PositionDoc.vue       |   66 +-
 doc/{sidebar => drawer}/SizeDoc.vue           |   18 +-
 doc/{sidebar => drawer}/TemplateDoc.vue       |   16 +-
 doc/{sidebar => drawer}/pt/PTImage.vue        |    0
 doc/{chips => drawer}/pt/index.vue            |    8 +-
 doc/drawer/theming/StyledDoc.vue              |   66 +
 doc/{chips => drawer}/theming/TailwindDoc.vue |    0
 doc/{chips => drawer}/theming/index.vue       |    2 +-
 .../AccessibilityDoc.vue                      |    6 +-
 doc/{chips => inputchips}/BasicDoc.vue        |   10 +-
 doc/{chips => inputchips}/DisabledDoc.vue     |    8 +-
 doc/{chips => inputchips}/FilledDoc.vue       |    8 +-
 doc/{chips => inputchips}/FloatLabelDoc.vue   |   16 +-
 doc/{inputswitch => inputchips}/ImportDoc.vue |    2 +-
 doc/{chips => inputchips}/InvalidDoc.vue      |    8 +-
 doc/{chips => inputchips}/SeparatorDoc.vue    |    8 +-
 doc/{chips => inputchips}/TemplateDoc.vue     |   16 +-
 .../form/VeeValidateDoc.vue                   |    8 +-
 doc/{chips => inputchips}/pt/PTImage.vue      |    0
 doc/inputchips/pt/index.vue                   |   35 +
 .../theming/StyledDoc.vue                     |   10 +-
 .../theming/TailwindDoc.vue                   |    0
 doc/inputchips/theming/index.vue              |   40 +
 doc/inputotp/theming/index.vue                |    2 +-
 doc/overlaypanel/pt/index.vue                 |   35 -
 doc/overlaypanel/theming/index.vue            |   40 -
 doc/paginator/AccessibilityDoc.vue            |    4 +-
 .../AccessibilityDoc.vue                      |    8 +-
 doc/{overlaypanel => popover}/BasicDoc.vue    |   26 +-
 .../DataTableDoc.vue                          |   16 +-
 doc/{sidebar => popover}/ImportDoc.vue        |    2 +-
 doc/{overlaypanel => popover}/pt/PTImage.vue  |    0
 doc/{sidebar => popover}/pt/index.vue         |    8 +-
 .../theming/StyledDoc.vue                     |    6 +-
 .../theming/TailwindDoc.vue                   |    0
 doc/{sidebar => popover}/theming/index.vue    |    2 +-
 doc/{dropdown => select}/AccessibilityDoc.vue |   32 +-
 doc/{dropdown => select}/BasicDoc.vue         |   12 +-
 doc/{dropdown => select}/CheckmarkDoc.vue     |    8 +-
 doc/{dropdown => select}/ClearIconDoc.vue     |   10 +-
 doc/{dropdown => select}/DisabledDoc.vue      |    8 +-
 doc/{dropdown => select}/EditableDoc.vue      |    8 +-
 doc/{dropdown => select}/FilledDoc.vue        |    8 +-
 doc/{dropdown => select}/FilterDoc.vue        |   18 +-
 doc/{dropdown => select}/FloatLabelDoc.vue    |    8 +-
 doc/{dropdown => select}/GroupDoc.vue         |   16 +-
 doc/{dropdown => select}/ImportDoc.vue        |    2 +-
 doc/{dropdown => select}/InvalidDoc.vue       |    8 +-
 .../LazyVirtualScrollDoc.vue                  |    8 +-
 doc/{dropdown => select}/LoadingStateDoc.vue  |    8 +-
 doc/{dropdown => select}/TemplateDoc.vue      |   16 +-
 doc/{dropdown => select}/VirtualScrollDoc.vue |   10 +-
 .../form/VeeValidateDoc.vue                   |    8 +-
 doc/{dropdown => select}/pt/PTImage.vue       |    0
 doc/{calendar => select}/pt/index.vue         |    8 +-
 .../theming/StyledDoc.vue                     |   18 +-
 .../theming/TailwindDoc.vue                   |    0
 doc/{dropdown => select}/theming/index.vue    |    2 +-
 doc/sidebar/theming/StyledDoc.vue             |   66 -
 doc/theming/styled/ScopedTokensDoc.vue        |    8 +-
 .../styled/csslayer/SpecificityDoc.vue        |    8 +-
 .../AccessibilityDoc.vue                      |    8 +-
 .../BasicDoc.vue                              |    8 +-
 .../DisabledDoc.vue                           |    8 +-
 .../ImportDoc.vue                             |    2 +-
 .../InvalidDoc.vue                            |    8 +-
 .../PreselectionDoc.vue                       |    8 +-
 .../form/VeeValidateDoc.vue                   |    8 +-
 .../pt/PTImage.vue                            |    0
 .../pt/index.vue                              |    8 +-
 .../theming/StyledDoc.vue                     |    6 +-
 .../theming/TailwindDoc.vue                   |    0
 .../theming/index.vue                         |    2 +-
 doc/tree/selection/MultipleDoc.vue            |    6 +-
 .../selection/MultipleRowsSelectionDoc.vue    |    8 +-
 .../selection/SingleRowSelectionDoc.vue       |    8 +-
 layouts/AppConfigurator.vue                   |    2 +-
 pages/{calendar => datepicker}/index.vue      |   54 +-
 pages/{sidebar => drawer}/index.vue           |   30 +-
 pages/{chips => inputchips}/index.vue         |   32 +-
 pages/{overlaypanel => popover}/index.vue     |   18 +-
 pages/{dropdown => select}/index.vue          |   46 +-
 pages/{inputswitch => toggleswitch}/index.vue |   18 +-
 134 files changed, 6160 insertions(+), 1238 deletions(-)
 delete mode 100644 doc/calendar/TimeDoc.vue
 rename doc/{calendar => datepicker}/AccessibilityDoc.vue (93%)
 rename doc/{calendar => datepicker}/BasicDoc.vue (76%)
 rename doc/{calendar => datepicker}/ButtonBarDoc.vue (81%)
 rename doc/{calendar => datepicker}/DateTemplateDoc.vue (90%)
 rename doc/{calendar => datepicker}/DisabledDoc.vue (73%)
 rename doc/{calendar => datepicker}/FilledDoc.vue (81%)
 rename doc/{calendar => datepicker}/FloatLabelDoc.vue (84%)
 rename doc/{calendar => datepicker}/FormatDoc.vue (89%)
 rename doc/{calendar => datepicker}/IconDoc.vue (70%)
 rename doc/{calendar => datepicker}/ImportDoc.vue (86%)
 rename doc/{calendar => datepicker}/InlineDoc.vue (71%)
 rename doc/{calendar => datepicker}/InvalidDoc.vue (74%)
 rename doc/{calendar => datepicker}/LocaleDoc.vue (100%)
 rename doc/{calendar => datepicker}/MinMaxDoc.vue (87%)
 rename doc/{calendar => datepicker}/MonthPickerDoc.vue (76%)
 rename doc/{calendar => datepicker}/MultipleDoc.vue (73%)
 rename doc/{calendar => datepicker}/MultipleMonthsDoc.vue (79%)
 rename doc/{calendar => datepicker}/RangeDoc.vue (75%)
 create mode 100644 doc/datepicker/TimeDoc.vue
 rename doc/{calendar => datepicker}/YearPickerDoc.vue (77%)
 rename doc/{calendar => datepicker}/form/VeeValidateDoc.vue (89%)
 rename doc/{calendar => datepicker}/pt/PTImage.vue (100%)
 rename doc/{dropdown => datepicker}/pt/index.vue (78%)
 rename doc/{calendar => datepicker}/theming/StyledDoc.vue (93%)
 rename doc/{calendar => datepicker}/theming/TailwindDoc.vue (100%)
 rename doc/{calendar => datepicker}/theming/index.vue (96%)
 rename doc/{sidebar => drawer}/AccessibilityDoc.vue (81%)
 rename doc/{sidebar => drawer}/BasicDoc.vue (83%)
 rename doc/{sidebar => drawer}/FullScreenDoc.vue (85%)
 rename doc/{sidebar => drawer}/HeadlessDoc.vue (99%)
 rename doc/{chips => drawer}/ImportDoc.vue (88%)
 rename doc/{sidebar => drawer}/PositionDoc.vue (77%)
 rename doc/{sidebar => drawer}/SizeDoc.vue (76%)
 rename doc/{sidebar => drawer}/TemplateDoc.vue (93%)
 rename doc/{sidebar => drawer}/pt/PTImage.vue (100%)
 rename doc/{chips => drawer}/pt/index.vue (79%)
 create mode 100644 doc/drawer/theming/StyledDoc.vue
 rename doc/{chips => drawer}/theming/TailwindDoc.vue (100%)
 rename doc/{chips => drawer}/theming/index.vue (96%)
 rename doc/{chips => inputchips}/AccessibilityDoc.vue (96%)
 rename doc/{chips => inputchips}/BasicDoc.vue (73%)
 rename doc/{chips => inputchips}/DisabledDoc.vue (81%)
 rename doc/{chips => inputchips}/FilledDoc.vue (80%)
 rename doc/{chips => inputchips}/FloatLabelDoc.vue (72%)
 rename doc/{inputswitch => inputchips}/ImportDoc.vue (85%)
 rename doc/{chips => inputchips}/InvalidDoc.vue (83%)
 rename doc/{chips => inputchips}/SeparatorDoc.vue (81%)
 rename doc/{chips => inputchips}/TemplateDoc.vue (89%)
 rename doc/{chips => inputchips}/form/VeeValidateDoc.vue (89%)
 rename doc/{chips => inputchips}/pt/PTImage.vue (100%)
 create mode 100644 doc/inputchips/pt/index.vue
 rename doc/{chips => inputchips}/theming/StyledDoc.vue (78%)
 rename doc/{dropdown => inputchips}/theming/TailwindDoc.vue (100%)
 create mode 100644 doc/inputchips/theming/index.vue
 delete mode 100644 doc/overlaypanel/pt/index.vue
 delete mode 100644 doc/overlaypanel/theming/index.vue
 rename doc/{overlaypanel => popover}/AccessibilityDoc.vue (72%)
 rename doc/{overlaypanel => popover}/BasicDoc.vue (94%)
 rename doc/{overlaypanel => popover}/DataTableDoc.vue (97%)
 rename doc/{sidebar => popover}/ImportDoc.vue (87%)
 rename doc/{overlaypanel => popover}/pt/PTImage.vue (100%)
 rename doc/{sidebar => popover}/pt/index.vue (79%)
 rename doc/{overlaypanel => popover}/theming/StyledDoc.vue (82%)
 rename doc/{inputswitch => popover}/theming/TailwindDoc.vue (100%)
 rename doc/{sidebar => popover}/theming/index.vue (96%)
 rename doc/{dropdown => select}/AccessibilityDoc.vue (86%)
 rename doc/{dropdown => select}/BasicDoc.vue (63%)
 rename doc/{dropdown => select}/CheckmarkDoc.vue (71%)
 rename doc/{dropdown => select}/ClearIconDoc.vue (73%)
 rename doc/{dropdown => select}/DisabledDoc.vue (68%)
 rename doc/{dropdown => select}/EditableDoc.vue (74%)
 rename doc/{dropdown => select}/FilledDoc.vue (74%)
 rename doc/{dropdown => select}/FilterDoc.vue (88%)
 rename doc/{dropdown => select}/FloatLabelDoc.vue (82%)
 rename doc/{dropdown => select}/GroupDoc.vue (88%)
 rename doc/{dropdown => select}/ImportDoc.vue (87%)
 rename doc/{dropdown => select}/InvalidDoc.vue (75%)
 rename doc/{dropdown => select}/LazyVirtualScrollDoc.vue (90%)
 rename doc/{dropdown => select}/LoadingStateDoc.vue (66%)
 rename doc/{dropdown => select}/TemplateDoc.vue (90%)
 rename doc/{dropdown => select}/VirtualScrollDoc.vue (77%)
 rename doc/{dropdown => select}/form/VeeValidateDoc.vue (92%)
 rename doc/{dropdown => select}/pt/PTImage.vue (100%)
 rename doc/{calendar => select}/pt/index.vue (78%)
 rename doc/{dropdown => select}/theming/StyledDoc.vue (78%)
 rename doc/{overlaypanel => select}/theming/TailwindDoc.vue (100%)
 rename doc/{dropdown => select}/theming/index.vue (96%)
 delete mode 100644 doc/sidebar/theming/StyledDoc.vue
 rename doc/{inputswitch => toggleswitch}/AccessibilityDoc.vue (77%)
 rename doc/{inputswitch => toggleswitch}/BasicDoc.vue (83%)
 rename doc/{inputswitch => toggleswitch}/DisabledDoc.vue (81%)
 rename doc/{overlaypanel => toggleswitch}/ImportDoc.vue (85%)
 rename doc/{inputswitch => toggleswitch}/InvalidDoc.vue (83%)
 rename doc/{inputswitch => toggleswitch}/PreselectionDoc.vue (84%)
 rename doc/{inputswitch => toggleswitch}/form/VeeValidateDoc.vue (90%)
 rename doc/{inputswitch => toggleswitch}/pt/PTImage.vue (100%)
 rename doc/{inputswitch => toggleswitch}/pt/index.vue (77%)
 rename doc/{inputswitch => toggleswitch}/theming/StyledDoc.vue (83%)
 rename doc/{sidebar => toggleswitch}/theming/TailwindDoc.vue (100%)
 rename doc/{inputswitch => toggleswitch}/theming/index.vue (96%)
 rename pages/{calendar => datepicker}/index.vue (67%)
 rename pages/{sidebar => drawer}/index.vue (62%)
 rename pages/{chips => inputchips}/index.vue (62%)
 rename pages/{overlaypanel => popover}/index.vue (64%)
 rename pages/{dropdown => select}/index.vue (66%)
 rename pages/{inputswitch => toggleswitch}/index.vue (60%)

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index daedff1b4..5437d765e 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -66,10 +66,6 @@
                             "name": "AutoComplete",
                             "to": "/autocomplete"
                         },
-                        {
-                            "name": "Calendar",
-                            "to": "/calendar"
-                        },
                         {
                             "name": "CascadeSelect",
                             "to": "/cascadeselect"
@@ -78,17 +74,13 @@
                             "name": "Checkbox",
                             "to": "/checkbox"
                         },
-                        {
-                            "name": "Chips",
-                            "to": "/chips"
-                        },
                         {
                             "name": "ColorPicker",
                             "to": "/colorpicker"
                         },
                         {
-                            "name": "Dropdown",
-                            "to": "/dropdown"
+                            "name": "DatePicker",
+                            "to": "/datepicker"
                         },
                         {
                             "name": "Editor",
@@ -119,8 +111,8 @@
                             "to": "/inputotp"
                         },
                         {
-                            "name": "InputSwitch",
-                            "to": "/inputswitch"
+                            "name": "InputChips",
+                            "to": "/inputchips"
                         },
                         {
                             "name": "InputText",
@@ -154,6 +146,10 @@
                             "name": "SelectButton",
                             "to": "/selectbutton"
                         },
+                        {
+                            "name": "Select",
+                            "to": "/select"
+                        },
                         {
                             "name": "Slider",
                             "to": "/slider"
@@ -166,6 +162,10 @@
                             "name": "ToggleButton",
                             "to": "/togglebutton"
                         },
+                        {
+                            "name": "ToggleSwitch",
+                            "to": "/toggleswitch"
+                        },
                         {
                             "name": "TreeSelect",
                             "to": "/treeselect"
@@ -303,12 +303,12 @@
                             "to": "/dynamicdialog"
                         },
                         {
-                            "name": "OverlayPanel",
-                            "to": "/overlaypanel"
+                            "name": "Popover",
+                            "to": "/popover"
                         },
                         {
-                            "name": "Sidebar",
-                            "to": "/sidebar"
+                            "name": "Drawer",
+                            "to": "/drawer"
                         },
                         {
                             "name": "Tooltip",
diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index 5d6887a0a..0a4d2801f 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -28,14 +28,14 @@
                                 </div>
                                 <div class="flex-auto" style="width: 1%">
                                     <span class="text-secondary font-semibold block mb-3">Beneficiary</span>
-                                    <Dropdown v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
+                                    <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
                                         <template #option="slotProps">
                                             <div class="flex align-items-center gap-2">
                                                 <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" />
                                                 <span>{{ slotProps.option.name }}</span>
                                             </div>
                                         </template>
-                                    </Dropdown>
+                                    </Select>
                                 </div>
                             </div>
                             <span class="text-secondary font-medium block mt-5 mb-3">Account</span>
@@ -50,7 +50,7 @@
                                 </div>
                             </div>
                             <span class="text-secondary font-medium block mt-5 mb-3">Date</span>
-                            <Calendar v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
+                            <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
                         </div>
                         <div class="box p-4 fadein animation-duration-500">
                             <Chart type="line" :data="chartData" :options="chartOptions" />
@@ -59,7 +59,7 @@
                             <div class="flex align-items-center">
                                 <Chip label="Vue" class="mr-2 font-medium" />
                                 <Chip label="Typescript" class="mr-2 font-medium" />
-                                <InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
+                                <ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch>
                             </div>
                             <div class="mt-5 flex justify-content-center">
                                 <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
diff --git a/doc/calendar/TimeDoc.vue b/doc/calendar/TimeDoc.vue
deleted file mode 100644
index 9677423aa..000000000
--- a/doc/calendar/TimeDoc.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-3 p-fluid">
-        <div class="flex-auto">
-            <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
-            <Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
-        </div>
-        <div class="flex-auto">
-            <label for="calendar-24h" class="font-bold block mb-2"> 24h Format </label>
-            <Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
-        </div>
-        <div class="flex-auto">
-            <label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <Calendar id="calendar-timeonly" v-model="time" timeOnly />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            datetime12h: null,
-            datetime24h: null,
-            time: null,
-            code: {
-                basic: `
-<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
-<Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
-<Calendar id="calendar-timeonly" v-model="time" timeOnly />
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
-        <div class="flex-auto">
-            <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
-            <Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
-        </div>
-        <div class="flex-auto">
-            <label for="calendar-24h" class="font-bold block mb-2"> 24h Format </label>
-            <Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
-        </div>
-        <div class="flex-auto">
-            <label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <Calendar id="calendar-timeonly" v-model="time" timeOnly />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            datetime12h: null,
-            datetime24h: null,
-            time: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-3 p-fluid">
-        <div class="flex-auto">
-            <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
-            <Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
-        </div>
-        <div class="flex-auto">
-            <label for="calendar-24h" class="font-bold block mb-2"> 24h Format </label>
-            <Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
-        </div>
-        <div class="flex-auto">
-            <label for="calendar-timeonly" class="font-bold block mb-2"> Time Only </label>
-            <Calendar id="calendar-timeonly" v-model="time" timeOnly />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const datetime12h = ref();
-const datetime24h = ref();
-const time = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/cdn/ComponentDoc.vue b/doc/cdn/ComponentDoc.vue
index f6ce855e6..99cd80392 100644
--- a/doc/cdn/ComponentDoc.vue
+++ b/doc/cdn/ComponentDoc.vue
@@ -11,7 +11,7 @@ export default {
         return {
             code: {
                 basic: `
-<script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script>
+<script src="https://unpkg.com/primevue/datepicker/datepicker.min.js"><\/script>
 `
             }
         };
diff --git a/doc/cdn/ExampleDoc.vue b/doc/cdn/ExampleDoc.vue
index 6ea82ace1..43f1dfb7a 100644
--- a/doc/cdn/ExampleDoc.vue
+++ b/doc/cdn/ExampleDoc.vue
@@ -22,7 +22,7 @@ export default {
   <body>
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
     <script src="https://unpkg.com/primevue/core/core.min.js"><\/script>
-    <script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script>
+    <script src="https://unpkg.com/primevue/datepicker/datepicker.min.js"><\/script>
 
     <div id="app">
       <p-datepicker v-model="date"></p-datepicker>
@@ -43,7 +43,7 @@ export default {
       });
 
       app.use(primevue.config.default);
-      app.component('p-datepicker', primevue.calendar);
+      app.component('p-datepicker', primevue.datepicker);
 
       app.mount('#app');
     <\/script>
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 9a2a7198d..ffc4e1955 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -4979,7 +4979,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "null | HintedString<\"success\" | \"secondary\" | \"info\" | \"warning\" | \"danger\" | \"contrast\">",
+                            "type": "null | HintedString<\"success\" | \"secondary\" | \"info\" | \"warn\" | \"danger\" | \"contrast\">",
                             "default": "",
                             "description": "Severity type of the badge."
                         },
@@ -5257,12 +5257,12 @@
                             "description": "Current success state as a boolean."
                         },
                         {
-                            "name": "warning",
+                            "name": "warn",
                             "optional": false,
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Current warning state as a boolean."
+                            "description": "Current warn state as a boolean."
                         },
                         {
                             "name": "danger",
@@ -5312,12 +5312,12 @@
                             "description": "Success severity for Badge directive."
                         },
                         {
-                            "name": "warning",
+                            "name": "warn",
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Warning severity for Badge directive."
+                            "description": "warn severity for Badge directive."
                         },
                         {
                             "name": "danger",
@@ -5478,7 +5478,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,FileUploadStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,VirtualScrollerStyle"
+                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DatePickerStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DrawerStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,FileUploadStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputChipsStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PopoverStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectStyle,SelectButtonStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToggleSwitchStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,VirtualScrollerStyle"
                 }
             }
         }
@@ -6792,7 +6792,7 @@
                             "name": "badgeSeverity",
                             "optional": true,
                             "readonly": false,
-                            "type": "null | HintedString<\"success\" | \"secondary\" | \"info\" | \"warning\" | \"danger\" | \"contrast\">",
+                            "type": "null | HintedString<\"success\" | \"secondary\" | \"info\" | \"warn\" | \"danger\" | \"contrast\">",
                             "default": "",
                             "description": "Severity type of the badge."
                         },
@@ -6824,7 +6824,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "HintedString<\"success\" | \"help\" | \"secondary\" | \"info\" | \"warning\" | \"danger\" | \"contrast\">",
+                            "type": "HintedString<\"success\" | \"help\" | \"secondary\" | \"info\" | \"warn\" | \"danger\" | \"contrast\">",
                             "default": "",
                             "description": "Defines the style of the button."
                         },
@@ -7255,10 +7255,10 @@
         }
     },
     "calendar": {
-        "description": "Calendar also known as DatePicker, is a form component to work with dates.\n\n[Live Demo](https://www.primevue.org/calendar/)",
+        "description": "Calendar also known as DatePicker, is a form component to work with dates.\n\n[Live Demo](https://www.primevue.org/datepicker/)",
         "components": {
             "default": {
-                "description": "Calendar also known as DatePicker, is a form component to work with dates.",
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -7287,7 +7287,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarProps",
+                            "type": "DatePickerProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -7295,7 +7295,7 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarState",
+                            "type": "DatePickerState",
                             "default": "",
                             "description": "Defines current inline state."
                         },
@@ -7303,7 +7303,7 @@
                             "name": "context",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarContext",
+                            "type": "DatePickerContext",
                             "default": "",
                             "description": "Defines current options."
                         },
@@ -7332,7 +7332,8 @@
                             "description": "Defines passthrough(pt) options in global config."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerPassThroughMethodOptions"
                 },
                 "CalendarSharedPassThroughMethodOptions": {
                     "description": "Custom shared passthrough(pt) option method.",
@@ -7342,7 +7343,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarProps",
+                            "type": "DatePickerProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -7350,12 +7351,13 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarState",
+                            "type": "DatePickerState",
                             "default": "",
                             "description": "Defines current inline state."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerSharedPassThroughMethodOptions"
                 },
                 "CalendarResponsiveOptions": {
                     "description": "Custom Calendar responsive options metadata.",
@@ -7378,7 +7380,8 @@
                             "description": "The number of visible months on breakpoint."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerResponsiveOptions"
                 },
                 "CalendarMonthChangeEvent": {
                     "description": "Custom Calendar month change event.",
@@ -7401,7 +7404,8 @@
                             "description": "New year."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerMonthChangeEvent"
                 },
                 "CalendarYearChangeEvent": {
                     "description": "Custom Calendar year change event.",
@@ -7424,7 +7428,8 @@
                             "description": "New year."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerYearChangeEvent"
                 },
                 "CalendarBlurEvent": {
                     "description": "Custom Calendar blur event.",
@@ -7447,7 +7452,8 @@
                             "description": "Input value"
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerBlurEvent"
                 },
                 "CalendarPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
@@ -7457,7 +7463,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -7465,7 +7471,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputTextPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
+                            "type": "InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the InputText component."
                         },
@@ -7473,7 +7479,7 @@
                             "name": "dropdownButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the dropdown button's DOM element."
                         },
@@ -7481,7 +7487,7 @@
                             "name": "panel",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the panel's DOM element."
                         },
@@ -7489,7 +7495,7 @@
                             "name": "groupContainer",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the group container's DOM element."
                         },
@@ -7497,7 +7503,7 @@
                             "name": "group",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the group's DOM element."
                         },
@@ -7505,7 +7511,7 @@
                             "name": "header",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the header's DOM element."
                         },
@@ -7513,7 +7519,7 @@
                             "name": "previousButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the previous button's DOM element."
                         },
@@ -7521,7 +7527,7 @@
                             "name": "title",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the title's DOM element."
                         },
@@ -7529,7 +7535,7 @@
                             "name": "monthTitle",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the month title's DOM element."
                         },
@@ -7537,7 +7543,7 @@
                             "name": "yearTitle",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the year title's DOM element."
                         },
@@ -7545,7 +7551,7 @@
                             "name": "decadeTitle",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the decade title's DOM element."
                         },
@@ -7553,7 +7559,7 @@
                             "name": "nextButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the next button's DOM element."
                         },
@@ -7561,7 +7567,7 @@
                             "name": "container",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the container's DOM element."
                         },
@@ -7569,7 +7575,7 @@
                             "name": "table",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the table's DOM element."
                         },
@@ -7577,7 +7583,7 @@
                             "name": "tableHeader",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the table header's DOM element."
                         },
@@ -7585,7 +7591,7 @@
                             "name": "tableHeaderRow",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the table header row's DOM element."
                         },
@@ -7593,7 +7599,7 @@
                             "name": "weekHeader",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the week header's DOM element."
                         },
@@ -7601,7 +7607,7 @@
                             "name": "weekHeaderLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the week header label's DOM element."
                         },
@@ -7609,7 +7615,7 @@
                             "name": "tableHeaderCell",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the table header cell's DOM element."
                         },
@@ -7617,7 +7623,7 @@
                             "name": "weekLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the week label's DOM element."
                         },
@@ -7625,7 +7631,7 @@
                             "name": "weekDay",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the week day's DOM element."
                         },
@@ -7633,7 +7639,7 @@
                             "name": "tableBody",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the table body's DOM element."
                         },
@@ -7641,7 +7647,7 @@
                             "name": "tableBodyRow",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the table body row's DOM element."
                         },
@@ -7649,7 +7655,7 @@
                             "name": "weekNumber",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the week number's DOM element."
                         },
@@ -7657,7 +7663,7 @@
                             "name": "weekLabelContainer",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the week label container's DOM element."
                         },
@@ -7665,7 +7671,7 @@
                             "name": "day",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the day's DOM element."
                         },
@@ -7673,7 +7679,7 @@
                             "name": "dayLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the day label's DOM element."
                         },
@@ -7681,7 +7687,7 @@
                             "name": "monthPicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the month picker's DOM element."
                         },
@@ -7689,7 +7695,7 @@
                             "name": "month",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the month's DOM element."
                         },
@@ -7697,7 +7703,7 @@
                             "name": "yearPicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the year picker's DOM element."
                         },
@@ -7705,7 +7711,7 @@
                             "name": "year",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the year's DOM element."
                         },
@@ -7713,7 +7719,7 @@
                             "name": "timePicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the time picker's DOM element."
                         },
@@ -7721,7 +7727,7 @@
                             "name": "hourPicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the hour picker's DOM element."
                         },
@@ -7729,7 +7735,7 @@
                             "name": "hour",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the hour's DOM element."
                         },
@@ -7737,7 +7743,7 @@
                             "name": "separatorContainer",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the separator container's DOM element."
                         },
@@ -7745,7 +7751,7 @@
                             "name": "separator",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the separator's DOM element."
                         },
@@ -7753,7 +7759,7 @@
                             "name": "minutePicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the minute picker's DOM element."
                         },
@@ -7761,7 +7767,7 @@
                             "name": "minute",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the minute's DOM element."
                         },
@@ -7769,7 +7775,7 @@
                             "name": "secondPicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the second picker's DOM element."
                         },
@@ -7777,7 +7783,7 @@
                             "name": "second",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the second's DOM element."
                         },
@@ -7785,7 +7791,7 @@
                             "name": "ampmPicker",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the ampm picker's DOM element."
                         },
@@ -7793,7 +7799,7 @@
                             "name": "ampm",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the ampm's DOM element."
                         },
@@ -7801,7 +7807,7 @@
                             "name": "buttonbar",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the buttonbar's DOM element."
                         },
@@ -7809,7 +7815,7 @@
                             "name": "todayButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the today button's DOM element."
                         },
@@ -7817,7 +7823,7 @@
                             "name": "clearButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the clear button's DOM element."
                         },
@@ -7825,7 +7831,7 @@
                             "name": "hiddenSelectedDay",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the aria selected day's DOM element."
                         },
@@ -7833,7 +7839,7 @@
                             "name": "hiddenMonth",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the aria month's DOM element."
                         },
@@ -7841,7 +7847,7 @@
                             "name": "hiddenYear",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the aria year's DOM element."
                         },
@@ -7849,7 +7855,7 @@
                             "name": "datepickerMask",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughOptionType",
+                            "type": "DatePickerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the datepicker mask's DOM element."
                         },
@@ -7865,25 +7871,20 @@
                             "name": "transition",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarPassThroughTransitionType",
+                            "type": "DatePickerPassThroughTransitionType",
                             "default": "",
                             "description": "Used to control Vue Transition API."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerPassThroughOptions"
                 },
                 "CalendarPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "DatePickerPassThroughAttributes"
                 },
                 "CalendarState": {
                     "description": "Defines current inline state in Calendar component.",
@@ -7962,7 +7963,8 @@
                             "description": "Current view state as a string."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerState"
                 },
                 "CalendarDateContext": {
                     "description": "Defines current date options in Calendar component.",
@@ -8009,7 +8011,8 @@
                             "description": "Selectable state of the day."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerDateContext"
                 },
                 "CalendarContext": {
                     "description": "Defines current options in Calendar component.",
@@ -8019,7 +8022,7 @@
                             "name": "date",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarDateContext",
+                            "type": "DatePickerDateContext",
                             "default": "",
                             "description": "Current date."
                         },
@@ -8059,7 +8062,7 @@
                             "name": "month",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarMonthOptions",
+                            "type": "DatePickerMonthOptions",
                             "default": "",
                             "description": "Current month state."
                         },
@@ -8075,12 +8078,13 @@
                             "name": "year",
                             "optional": false,
                             "readonly": false,
-                            "type": "CalendarYearOptions",
+                            "type": "DatePickerYearOptions",
                             "default": "",
                             "description": "Current year state."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerContext"
                 },
                 "CalendarMonthOptions": {
                     "description": "Defines current month options.",
@@ -8103,7 +8107,8 @@
                             "description": "Selectable state of the month."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerMonthOptions"
                 },
                 "CalendarYearOptions": {
                     "description": "Defines current year options.",
@@ -8126,7 +8131,8 @@
                             "description": "Selectable state of the month."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerYearOptions"
                 },
                 "CalendarProps": {
                     "description": "Defines valid properties in Calendar component.",
@@ -8162,7 +8168,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "When enabled, displays the calendar as inline instead of an overlay."
+                            "description": "When enabled, displays the datepicker as inline instead of an overlay."
                         },
                         {
                             "name": "showOtherMonths",
@@ -8202,7 +8208,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon of the calendar button.",
+                            "description": "Icon of the datepicker button.",
                             "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
@@ -8253,7 +8259,7 @@
                             "name": "responsiveOptions",
                             "optional": true,
                             "readonly": false,
-                            "type": "CalendarResponsiveOptions[]",
+                            "type": "DatePickerResponsiveOptions[]",
                             "default": "",
                             "description": "An array of options for responsive design."
                         },
@@ -8466,7 +8472,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "When enabled, calendar will show week numbers."
+                            "description": "When enabled, datepicker will show week numbers."
                         },
                         {
                             "name": "manualInput",
@@ -8632,7 +8638,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<CalendarPassThroughOptions>",
+                            "type": "PassThrough<DatePickerPassThroughOptions>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -8653,7 +8659,8 @@
                             "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerProps"
                 },
                 "CalendarDateSlotOptions": {
                     "description": "Defines valid options of the date slot in Calendar component.",
@@ -8700,7 +8707,8 @@
                             "description": "Selectable state of the day."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DatePickerDateSlotOptions"
                 },
                 "CalendarSlots": {
                     "description": "Defines valid slots in Calendar component.",
@@ -8725,7 +8733,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">date</span>: <span class=\"doc-option-parameter-type\">CalendarDateSlotOptions</span>, <span class=\"doc-option-parameter-type\">// Value of the component.</span>\n }"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">date</span>: <span class=\"doc-option-parameter-type\">DatePickerDateSlotOptions</span>, <span class=\"doc-option-parameter-type\">// Value of the component.</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@@ -8852,7 +8860,8 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom dropdown button template."
                         }
-                    ]
+                    ],
+                    "extendedTypes": "DatePickerSlots"
                 },
                 "CalendarEmits": {
                     "description": "Defines valid emits in Calendar component.",
@@ -8942,7 +8951,7 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "CalendarMonthChangeEvent",
+                                    "type": "DatePickerMonthChangeEvent",
                                     "description": "Custom month change event."
                                 }
                             ],
@@ -8955,7 +8964,7 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "CalendarYearChangeEvent",
+                                    "type": "DatePickerYearChangeEvent",
                                     "description": "Custom year change event."
                                 }
                             ],
@@ -8981,7 +8990,7 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "CalendarBlurEvent",
+                                    "type": "DatePickerBlurEvent",
                                     "description": "Blur event"
                                 }
                             ],
@@ -9000,18 +9009,8 @@
                             "returnType": "void",
                             "description": "Callback to invoke when a key is pressed."
                         }
-                    ]
-                }
-            }
-        },
-        "types": {
-            "description": "Defines the custom types used by the module.",
-            "values": {
-                "CalendarPassThroughOptionType": {
-                    "values": "CalendarPassThroughAttributes | (options: CalendarPassThroughMethodOptions) => undefined | string | null | undefined"
-                },
-                "CalendarPassThroughTransitionType": {
-                    "values": "TransitionProps | (options: CalendarPassThroughMethodOptions) => TransitionProps | undefined"
+                    ],
+                    "extendedTypes": "DatePickerEmits"
                 }
             }
         }
@@ -9070,7 +9069,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedTypes": "BaseStyle"
+                    "extendedTypes": "DatePickerStyle"
                 }
             }
         }
@@ -12286,10 +12285,10 @@
         }
     },
     "chips": {
-        "description": "Chips groups a collection of contents in tabs.\n\n[Live Demo](https://www.primevue.org/chips/)",
+        "description": "Chips groups a collection of contents in tabs.\n\n[Live Demo](https://www.primevue.org/inputchips/)",
         "components": {
             "default": {
-                "description": "Chips is used to enter multiple values on an input field.",
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -12318,7 +12317,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "ChipsProps",
+                            "type": "InputChipsProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -12326,7 +12325,7 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "ChipsState",
+                            "type": "InputChipsState",
                             "default": "",
                             "description": "Defines current inline state."
                         },
@@ -12355,7 +12354,8 @@
                             "description": "Defines passthrough(pt) options in global config."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "InputChipsPassThroughMethodOptions"
                 },
                 "ChipsSharedPassThroughMethodOptions": {
                     "description": "Custom shared passthrough(pt) option method.",
@@ -12365,7 +12365,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "ChipsProps",
+                            "type": "InputChipsProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -12373,12 +12373,13 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "ChipsState",
+                            "type": "InputChipsState",
                             "default": "",
                             "description": "Defines current inline state."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "InputChipsSharedPassThroughMethodOptions"
                 },
                 "ChipsAddEvent": {
                     "description": "Custom add event.",
@@ -12402,7 +12403,8 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "ChipsRemoveEvent"
+                    "extendedBy": "ChipsRemoveEvent",
+                    "extendedTypes": "InputChipsAddEvent"
                 },
                 "ChipsRemoveEvent": {
                     "description": "Custom remove event.",
@@ -12436,7 +12438,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "InputChipsPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -12444,7 +12446,7 @@
                             "name": "container",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "InputChipsPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the container's DOM element."
                         },
@@ -12452,7 +12454,7 @@
                             "name": "token",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "InputChipsPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the token's DOM element."
                         },
@@ -12460,7 +12462,7 @@
                             "name": "label",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipPassThroughOptions<ChipsSharedPassThroughMethodOptions>",
+                            "type": "ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the Chip component."
                         },
@@ -12468,7 +12470,7 @@
                             "name": "removeTokenIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "InputChipsPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the remove token icon's DOM element."
                         },
@@ -12476,7 +12478,7 @@
                             "name": "inputToken",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "InputChipsPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the input token's DOM element."
                         },
@@ -12484,7 +12486,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "ChipsPassThroughOptionType",
+                            "type": "InputChipsPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the input's DOM element."
                         },
@@ -12497,20 +12499,15 @@
                             "description": "Used to manage all lifecycle hooks."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "InputChipsPassThroughOptions"
                 },
                 "ChipsPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "InputChipsPassThroughAttributes"
                 },
                 "ChipsState": {
                     "description": "Defines current inline state in Chips component.",
@@ -12549,7 +12546,8 @@
                             "description": "Current focused item index state as a number."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "InputChipsState"
                 },
                 "ChipsProps": {
                     "description": "Defines valid properties in Chips component.",
@@ -12601,7 +12599,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Identifier of the focus input to match a label defined for the chips."
+                            "description": "Identifier of the focus input to match a label defined for the inputchips."
                         },
                         {
                             "name": "inputClass",
@@ -12697,7 +12695,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<ChipsPassThroughOptions>",
+                            "type": "PassThrough<InputChipsPassThroughOptions>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -12718,7 +12716,8 @@
                             "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "InputChipsProps"
                 },
                 "ChipsSlots": {
                     "description": "Defines valid slots in Chips slots.",
@@ -12751,7 +12750,8 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom remove token icon template."
                         }
-                    ]
+                    ],
+                    "extendedTypes": "InputChipsSlots"
                 },
                 "ChipsEmits": {
                     "description": "Defines valid emits in Chips component.",
@@ -12777,7 +12777,7 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "ChipsAddEvent",
+                                    "type": "InputChipsAddEvent",
                                     "description": "Custom add event."
                                 }
                             ],
@@ -12790,22 +12790,15 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "ChipsRemoveEvent",
+                                    "type": "InputChipsRemoveEvent",
                                     "description": "Custom remove event."
                                 }
                             ],
                             "returnType": "void",
                             "description": "Callback to invoke when a chip is removed."
                         }
-                    ]
-                }
-            }
-        },
-        "types": {
-            "description": "Defines the custom types used by the module.",
-            "values": {
-                "ChipsPassThroughOptionType": {
-                    "values": "ChipsPassThroughAttributes | (options: ChipsPassThroughMethodOptions) => undefined | string | null | undefined"
+                    ],
+                    "extendedTypes": "InputChipsEmits"
                 }
             }
         }
@@ -12864,7 +12857,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedTypes": "BaseStyle"
+                    "extendedTypes": "InputChipsStyle"
                 }
             }
         }
@@ -13740,9 +13733,9 @@
                             "name": "filterOperatorDropdown",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<ColumnSharedPassThroughMethodOptions>",
+                            "type": "SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the Dropdown component."
+                            "description": "Used to pass attributes to the Select component."
                         },
                         {
                             "name": "filterConstraints",
@@ -13764,9 +13757,9 @@
                             "name": "filterMatchModeDropdown",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<ColumnSharedPassThroughMethodOptions>",
+                            "type": "SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the Dropdown component."
+                            "description": "Used to pass attributes to the Select component."
                         },
                         {
                             "name": "filterRemove",
@@ -15620,7 +15613,7 @@
                             "name": "overlaypanel",
                             "optional": true,
                             "readonly": false,
-                            "type": "DefaultPassThrough<OverlayPanelPassThroughOptions>",
+                            "type": "DefaultPassThrough<PopoverPassThroughOptions>",
                             "default": ""
                         },
                         {
@@ -22132,6 +22125,1845 @@
             }
         }
     },
+    "datepicker": {
+        "description": "DatePicker is a form component to work with dates.\n\n[Live Demo](https://www.primevue.org/datepicker/)",
+        "components": {
+            "default": {
+                "description": "DatePicker  is a form component to work with dates.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "DatePickerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarPassThroughMethodOptions"
+                },
+                "DatePickerSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarSharedPassThroughMethodOptions"
+                },
+                "DatePickerResponsiveOptions": {
+                    "description": "Custom DatePicker responsive options metadata.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "breakpoint",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}"
+                        },
+                        {
+                            "name": "numMonths",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "The number of visible months on breakpoint."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarResponsiveOptions"
+                },
+                "DatePickerMonthChangeEvent": {
+                    "description": "Custom DatePicker month change event.",
+                    "relatedProp": "DatePickerEmits['month-change']]",
+                    "props": [
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "New month."
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "New year."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarMonthChangeEvent"
+                },
+                "DatePickerYearChangeEvent": {
+                    "description": "Custom DatePicker year change event.",
+                    "relatedProp": "DatePickerEmits['year-change']]",
+                    "props": [
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "New month."
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "New year."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarYearChangeEvent"
+                },
+                "DatePickerBlurEvent": {
+                    "description": "Custom DatePicker blur event.",
+                    "relatedProp": "DatePickerEmits.blur",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "default": "",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Input value"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarBlurEvent"
+                },
+                "DatePickerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DatePickerProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the InputText component."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the dropdown button's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "groupContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the group container's DOM element."
+                        },
+                        {
+                            "name": "group",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the group's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "previousButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the previous button's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "monthTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the month title's DOM element."
+                        },
+                        {
+                            "name": "yearTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the year title's DOM element."
+                        },
+                        {
+                            "name": "decadeTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the decade title's DOM element."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the next button's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "tableHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the table header's DOM element."
+                        },
+                        {
+                            "name": "tableHeaderRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the table header row's DOM element."
+                        },
+                        {
+                            "name": "weekHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the week header's DOM element."
+                        },
+                        {
+                            "name": "weekHeaderLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the week header label's DOM element."
+                        },
+                        {
+                            "name": "tableHeaderCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the table header cell's DOM element."
+                        },
+                        {
+                            "name": "weekLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the week label's DOM element."
+                        },
+                        {
+                            "name": "weekDay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the week day's DOM element."
+                        },
+                        {
+                            "name": "tableBody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the table body's DOM element."
+                        },
+                        {
+                            "name": "tableBodyRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the table body row's DOM element."
+                        },
+                        {
+                            "name": "weekNumber",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the week number's DOM element."
+                        },
+                        {
+                            "name": "weekLabelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the week label container's DOM element."
+                        },
+                        {
+                            "name": "day",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the day's DOM element."
+                        },
+                        {
+                            "name": "dayLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the day label's DOM element."
+                        },
+                        {
+                            "name": "monthPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the month picker's DOM element."
+                        },
+                        {
+                            "name": "month",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the month's DOM element."
+                        },
+                        {
+                            "name": "yearPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the year picker's DOM element."
+                        },
+                        {
+                            "name": "year",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the year's DOM element."
+                        },
+                        {
+                            "name": "timePicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the time picker's DOM element."
+                        },
+                        {
+                            "name": "hourPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the hour picker's DOM element."
+                        },
+                        {
+                            "name": "hour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the hour's DOM element."
+                        },
+                        {
+                            "name": "separatorContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the separator container's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "minutePicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the minute picker's DOM element."
+                        },
+                        {
+                            "name": "minute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the minute's DOM element."
+                        },
+                        {
+                            "name": "secondPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the second picker's DOM element."
+                        },
+                        {
+                            "name": "second",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the second's DOM element."
+                        },
+                        {
+                            "name": "ampmPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the ampm picker's DOM element."
+                        },
+                        {
+                            "name": "ampm",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the ampm's DOM element."
+                        },
+                        {
+                            "name": "buttonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the buttonbar's DOM element."
+                        },
+                        {
+                            "name": "todayButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the today button's DOM element."
+                        },
+                        {
+                            "name": "clearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the clear button's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedDay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the aria selected day's DOM element."
+                        },
+                        {
+                            "name": "hiddenMonth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the aria month's DOM element."
+                        },
+                        {
+                            "name": "hiddenYear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the aria year's DOM element."
+                        },
+                        {
+                            "name": "datepickerMask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the datepicker mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughTransitionType",
+                            "default": "",
+                            "description": "Used to control Vue Transition API."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarPassThroughOptions"
+                },
+                "DatePickerPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarPassThroughAttributes"
+                },
+                "DatePickerState": {
+                    "description": "Defines current inline state in DatePicker 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": [],
+                    "extendedBy": "CalendarState"
+                },
+                "DatePickerDateContext": {
+                    "description": "Defines current date options in DatePicker component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "day",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current date."
+                        },
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current month state."
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current year state."
+                        },
+                        {
+                            "name": "today",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current today state of the calendar's day."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Selectable state of the day."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarDateContext"
+                },
+                "DatePickerContext": {
+                    "description": "Defines current options in DatePicker component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "date",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerDateContext",
+                            "default": "",
+                            "description": "Current date."
+                        },
+                        {
+                            "name": "today",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current today state of the calendar's day."
+                        },
+                        {
+                            "name": "otherMonth",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current other month state of the calendar's day."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selected state of the calendar's day or month or year."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the calendar's day or month or year."
+                        },
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerMonthOptions",
+                            "default": "",
+                            "description": "Current month state."
+                        },
+                        {
+                            "name": "monthIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current month index state."
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DatePickerYearOptions",
+                            "default": "",
+                            "description": "Current year state."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarContext"
+                },
+                "DatePickerMonthOptions": {
+                    "description": "Defines current month options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Month value."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Selectable state of the month."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarMonthOptions"
+                },
+                "DatePickerYearOptions": {
+                    "description": "Defines current year options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Year value."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Selectable state of the month."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarYearOptions"
+                },
+                "DatePickerProps": {
+                    "description": "Defines valid properties in DatePicker component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | Date | Date[] | (null | Date)[]",
+                            "default": "null",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"range\" | \"single\"",
+                            "default": "single",
+                            "description": "Defines the quantity of the selection."
+                        },
+                        {
+                            "name": "dateFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Format of the date. Defaults to PrimeVue Locale configuration."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, displays the datepicker as inline instead of an overlay."
+                        },
+                        {
+                            "name": "showOtherMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option."
+                        },
+                        {
+                            "name": "selectOtherMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true."
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, displays a button with icon next to input."
+                        },
+                        {
+                            "name": "iconDisplay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"input\" | \"button\"",
+                            "default": "'button'",
+                            "description": "Icon position of the component. This only applies if the showIcon option is set to true."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon of the datepicker button.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
+                        },
+                        {
+                            "name": "previousIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to show in the previous button.",
+                            "deprecated": "since v3.27.0. Use 'previousicon' slot."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to show in the next button.",
+                            "deprecated": "since v3.27.0. Use 'nexticon' slot."
+                        },
+                        {
+                            "name": "incrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to show in each of the increment buttons.",
+                            "deprecated": "since v3.27.0. Use 'incrementicon' slot."
+                        },
+                        {
+                            "name": "decrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to show in each of the decrement buttons.",
+                            "deprecated": "since v3.27.0. Use 'decrementicon' slot."
+                        },
+                        {
+                            "name": "numberOfMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of months to display."
+                        },
+                        {
+                            "name": "responsiveOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerResponsiveOptions[]",
+                            "default": "",
+                            "description": "An array of options for responsive design."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "769px",
+                            "description": "The breakpoint to define the maximum width boundary for datepicker panel."
+                        },
+                        {
+                            "name": "view",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"month\" | \"year\" | \"date\"",
+                            "default": "date",
+                            "description": "Type of view to display."
+                        },
+                        {
+                            "name": "monthNavigator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the month should be rendered as a dropdown instead of text.",
+                            "deprecated": "since version 3.9.0, Navigator is always on."
+                        },
+                        {
+                            "name": "yearNavigator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the year should be rendered as a dropdown instead of text.",
+                            "deprecated": "since version 3.9.0, Navigator is always on."
+                        },
+                        {
+                            "name": "yearRange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "false",
+                            "description": "The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).",
+                            "deprecated": "since version 3.9.0, Years are based on decades by default."
+                        },
+                        {
+                            "name": "minDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date",
+                            "default": "",
+                            "description": "The minimum selectable date."
+                        },
+                        {
+                            "name": "maxDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date",
+                            "default": "",
+                            "description": "The maximum selectable date."
+                        },
+                        {
+                            "name": "disabledDates",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date[]",
+                            "default": "",
+                            "description": "Array with dates to disable."
+                        },
+                        {
+                            "name": "disabledDays",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "default": "",
+                            "description": "Array with disabled weekday numbers."
+                        },
+                        {
+                            "name": "maxDateCount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum number of selectable dates in multiple mode."
+                        },
+                        {
+                            "name": "showOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When disabled, datepicker will not be visible with input focus."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "showButtonBar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display today and clear buttons at the footer."
+                        },
+                        {
+                            "name": "shortYearCutoff",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "+10",
+                            "description": "The cutoff year for determining the century for a date."
+                        },
+                        {
+                            "name": "showTime",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display timepicker."
+                        },
+                        {
+                            "name": "timeOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display timepicker only."
+                        },
+                        {
+                            "name": "hourFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"12\" | \"24\"",
+                            "default": "24",
+                            "description": "Specifies hour format."
+                        },
+                        {
+                            "name": "stepHour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Hours to change per step."
+                        },
+                        {
+                            "name": "stepMinute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Minutes to change per step."
+                        },
+                        {
+                            "name": "stepSecond",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Seconds to change per step."
+                        },
+                        {
+                            "name": "showSeconds",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show the seconds in time picker."
+                        },
+                        {
+                            "name": "hideOnDateTimeSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to hide the overlay on date selection when showTime is enabled."
+                        },
+                        {
+                            "name": "hideOnRangeSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to hide the overlay on date selection is completed when selectionMode is range."
+                        },
+                        {
+                            "name": "timeSeparator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ":",
+                            "description": "Separator of time selector."
+                        },
+                        {
+                            "name": "showWeek",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, datepicker will show week numbers."
+                        },
+                        {
+                            "name": "manualInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to allow entering the date manually via typing."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text for the input."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLElement | HintedString<\"body\" | \"self\">",
+                            "default": "body",
+                            "description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "inputClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the overlay panel."
+                        },
+                        {
+                            "name": "panelClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the overlay panel."
+                        },
+                        {
+                            "name": "todayButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the today button component."
+                        },
+                        {
+                            "name": "clearButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the clear button component."
+                        },
+                        {
+                            "name": "navigatorButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the navigator button component."
+                        },
+                        {
+                            "name": "timepickerButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the timepicker button component."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<DatePickerPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarProps"
+                },
+                "DatePickerDateSlotOptions": {
+                    "description": "Defines valid options of the date slot in DatePicker component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "day",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current date."
+                        },
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current month state."
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current year state."
+                        },
+                        {
+                            "name": "today",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current today state of the calendar's day."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Selectable state of the day."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarDateSlotOptions"
+                },
+                "DatePickerSlots": {
+                    "description": "Defines valid slots in DatePicker component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "header",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header template of panel."
+                        },
+                        {
+                            "name": "footer",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom footer template of panel."
+                        },
+                        {
+                            "name": "date",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">date</span>: <span class=\"doc-option-parameter-type\">DatePickerDateSlotOptions</span>, <span class=\"doc-option-parameter-type\">// Value of the component.</span>\n }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom date template."
+                        },
+                        {
+                            "name": "decade",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">years</span>: <span class=\"doc-option-parameter-type\">undefined</span>, <span class=\"doc-option-parameter-type\">// An array containing the start and and year of a decade to display at header of the year picker.</span>\n }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom decade template."
+                        },
+                        {
+                            "name": "weekheaderlabel",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom week header label template."
+                        },
+                        {
+                            "name": "weeklabel",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">weekNumber</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Number of the week</span>\n }",
+                                    "description": "weeklabel slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom week label template."
+                        },
+                        {
+                            "name": "dropdownicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the dropdown icon</span>\n }",
+                                    "description": "dropdown icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom dropdown icon template."
+                        },
+                        {
+                            "name": "inputicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the input icon</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Click callback</span>\n}",
+                                    "description": "input icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom input icon template."
+                        },
+                        {
+                            "name": "previousicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the previous icon</span>\n }",
+                                    "description": "previous icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom previous icon template."
+                        },
+                        {
+                            "name": "nexticon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the next icon</span>\n }",
+                                    "description": "next icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom next icon template."
+                        },
+                        {
+                            "name": "incrementicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the increment icon</span>\n }",
+                                    "description": "increment icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom increment icon template."
+                        },
+                        {
+                            "name": "decrementicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the decrement icon</span>\n }",
+                                    "description": "decrement icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom decrement icon template."
+                        },
+                        {
+                            "name": "dropdownbutton",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Toggle function.</span>\n}"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom dropdown button template."
+                        }
+                    ],
+                    "extendedBy": "CalendarSlots"
+                },
+                "DatePickerEmits": {
+                    "description": "Defines valid emits in DatePicker component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "undefined | null | Date | Date[] | (null | Date)[]",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "input",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when input field is being typed."
+                        },
+                        {
+                            "name": "date-select",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "Date",
+                                    "description": "Selected value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a date is selected."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when datepicker panel is shown."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when datepicker panel is hidden."
+                        },
+                        {
+                            "name": "today-click",
+                            "parameters": [
+                                {
+                                    "name": "date",
+                                    "optional": false,
+                                    "type": "Date",
+                                    "description": "Today as a date instance."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when today button is clicked."
+                        },
+                        {
+                            "name": "clear-click",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when clear button is clicked."
+                        },
+                        {
+                            "name": "month-change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DatePickerMonthChangeEvent",
+                                    "description": "Custom month change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a month is changed using the navigators."
+                        },
+                        {
+                            "name": "year-change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DatePickerYearChangeEvent",
+                                    "description": "Custom year change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a year is changed using the navigators."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Focus event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on focus of input field."
+                        },
+                        {
+                            "name": "blur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DatePickerBlurEvent",
+                                    "description": "Blur event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on blur of input field."
+                        },
+                        {
+                            "name": "keydown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a key is pressed."
+                        }
+                    ],
+                    "extendedBy": "CalendarEmits"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DatePickerPassThroughOptionType": {
+                    "values": "DatePickerPassThroughAttributes | (options: DatePickerPassThroughMethodOptions) => undefined | string | null | undefined"
+                },
+                "DatePickerPassThroughTransitionType": {
+                    "values": "TransitionProps | (options: DatePickerPassThroughMethodOptions) => TransitionProps | undefined"
+                }
+            }
+        }
+    },
+    "datepicker/style/DatePickerStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "DatePickerStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "CalendarStyle",
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "deferredcontent": {
         "description": "DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.\n\n[Live Demo](https://www.primevue.org/deferredcontent/)",
         "components": {
@@ -23954,11 +25786,499 @@
             }
         }
     },
-    "dropdown": {
-        "description": "Dropdown also known as Select, is used to choose an item from a collection of options.\n\n[Live Demo](https://www.primevue.org/dropdown/)",
+    "drawer": {
+        "description": "Drawer is a panel component displayed as an overlay at the edges of the screen.\n\n[Live Demo](https://primevue.org/drawer)",
         "components": {
             "default": {
-                "description": "Dropdown also known as Select, is used to choose an item from a collection of options.",
+                "description": "Drawer is a panel component displayed as an overlay.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "DrawerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DrawerProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DrawerState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarPassThroughMethodOptions"
+                },
+                "DrawerSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DrawerProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DrawerState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarSharedPassThroughMethodOptions"
+                },
+                "DrawerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DrawerProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the header content's DOM element."
+                        },
+                        {
+                            "name": "toggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the previous button's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DrawerPassThroughTransitionType",
+                            "default": "",
+                            "description": "Used to control Vue Transition API."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarPassThroughOptions"
+                },
+                "DrawerPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarPassThroughAttributes"
+                },
+                "DrawerState": {
+                    "description": "Defines current inline state in Drawer component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current container visible state as a boolean."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarState"
+                },
+                "DrawerProps": {
+                    "description": "Defines valid properties in Drawer component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the dialog."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | \"full\"",
+                            "default": "left",
+                            "description": "Specifies the position of the drawer."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Title content of the dialog."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "dismissable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether clicking outside closes the panel."
+                        },
+                        {
+                            "name": "showCloseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display a close icon inside the panel."
+                        },
+                        {
+                            "name": "closeButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass the custom value to read for the button inside the component."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to display in the drawer close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
+                        },
+                        {
+                            "name": "modal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to a modal layer behind the drawer."
+                        },
+                        {
+                            "name": "blockScroll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether background scroll should be blocked when drawer is visible."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<DrawerPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarProps"
+                },
+                "DrawerSlots": {
+                    "description": "Defines valid slots in Drawer component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
+                        },
+                        {
+                            "name": "header",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the header title</span>\n }",
+                                    "description": "header slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header template."
+                        },
+                        {
+                            "name": "closeicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the close icon</span>\n }",
+                                    "description": "close icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom close icon template."
+                        },
+                        {
+                            "name": "container",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClose</span>: <span class=\"doc-option-parameter-type line-through\">() &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Close drawer function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">closeCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close drawer function.</span>\n}",
+                                    "description": "container slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom container slot."
+                        }
+                    ],
+                    "extendedBy": "SidebarSlots"
+                },
+                "DrawerEmits": {
+                    "description": "Defines valid emits in Drawer component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when drawer gets shown."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when drawer gets hidden."
+                        }
+                    ],
+                    "extendedBy": "SidebarEmits"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DrawerPassThroughOptionType": {
+                    "values": "DrawerPassThroughAttributes | (options: DrawerPassThroughMethodOptions) => undefined | string | null | undefined"
+                },
+                "DrawerPassThroughTransitionType": {
+                    "values": "TransitionProps | (options: DrawerPassThroughMethodOptions) => TransitionProps | undefined"
+                }
+            }
+        }
+    },
+    "drawer/style/DrawerStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "DrawerStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "SidebarStyle",
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
+    "dropdown": {
+        "description": "Dropdown also known as Select, is used to choose an item from a collection of options.\n\n[Live Demo](https://www.primevue.org/select/)",
+        "components": {
+            "default": {
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -23987,7 +26307,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "DropdownProps",
+                            "type": "SelectProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -23995,7 +26315,7 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "DropdownState",
+                            "type": "SelectState",
                             "default": "",
                             "description": "Defines current inline state."
                         },
@@ -24011,7 +26331,7 @@
                             "name": "context",
                             "optional": false,
                             "readonly": false,
-                            "type": "DropdownContext",
+                            "type": "SelectContext",
                             "default": "",
                             "description": "Defines current options."
                         },
@@ -24024,7 +26344,8 @@
                             "description": "Defines passthrough(pt) options in global config."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectPassThroughMethodOptions<T>"
                 },
                 "DropdownChangeEvent": {
                     "description": "Custom change event.",
@@ -24047,7 +26368,8 @@
                             "description": "Selected option value"
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectChangeEvent"
                 },
                 "DropdownFilterEvent": {
                     "description": "Custom filter event.",
@@ -24070,7 +26392,8 @@
                             "description": "Filter value"
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectFilterEvent"
                 },
                 "DropdownPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
@@ -24080,7 +26403,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -24088,7 +26411,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the input's DOM element."
                         },
@@ -24096,7 +26419,7 @@
                             "name": "clearIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the clear icon's DOM element."
                         },
@@ -24104,7 +26427,7 @@
                             "name": "trigger",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the trigger' DOM element."
                         },
@@ -24112,7 +26435,7 @@
                             "name": "loadingIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the loading icon's DOM element."
                         },
@@ -24120,7 +26443,7 @@
                             "name": "panel",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the panel's DOM element."
                         },
@@ -24128,7 +26451,7 @@
                             "name": "header",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the header's DOM element."
                         },
@@ -24136,7 +26459,7 @@
                             "name": "filterContainer",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the filter container's DOM element."
                         },
@@ -24144,7 +26467,7 @@
                             "name": "filterInput",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the filter input's DOM element."
                         },
@@ -24152,7 +26475,7 @@
                             "name": "filterIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the filter icon's DOM element."
                         },
@@ -24160,7 +26483,7 @@
                             "name": "wrapper",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the wrapper's DOM element."
                         },
@@ -24176,7 +26499,7 @@
                             "name": "list",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the list's DOM element."
                         },
@@ -24184,7 +26507,7 @@
                             "name": "itemGroup",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the item group's DOM element."
                         },
@@ -24192,7 +26515,7 @@
                             "name": "itemGroupLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the item group label's DOM element."
                         },
@@ -24200,7 +26523,7 @@
                             "name": "item",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the item's DOM element."
                         },
@@ -24208,7 +26531,7 @@
                             "name": "itemLabel",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the item label's DOM element."
                         },
@@ -24216,7 +26539,7 @@
                             "name": "checkIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the check icon's DOM element."
                         },
@@ -24224,7 +26547,7 @@
                             "name": "blankIcon",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the bank icon's DOM element."
                         },
@@ -24232,7 +26555,7 @@
                             "name": "emptyMessage",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the empty message's DOM element."
                         },
@@ -24240,7 +26563,7 @@
                             "name": "hiddenFirstFocusableEl",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the hidden first focusable element's DOM element."
                         },
@@ -24248,7 +26571,7 @@
                             "name": "hiddenFilterResult",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the hidden filter result's DOM element."
                         },
@@ -24256,7 +26579,7 @@
                             "name": "hiddenEmptyMessage",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the hidden empty message's DOM element."
                         },
@@ -24264,7 +26587,7 @@
                             "name": "hiddenSelectedMessage",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the hidden selected message's DOM element."
                         },
@@ -24272,7 +26595,7 @@
                             "name": "hiddenLastFocusableEl",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptionType<T>",
+                            "type": "SelectPassThroughOptionType<T>",
                             "default": "",
                             "description": "Used to pass attributes to the hidden last focusable element's DOM element."
                         },
@@ -24288,25 +26611,20 @@
                             "name": "transition",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughTransitionType<any>",
+                            "type": "SelectPassThroughTransitionType<any>",
                             "default": "",
                             "description": "Used to control Vue Transition API."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectPassThroughOptions<T>"
                 },
                 "DropdownPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "SelectPassThroughAttributes"
                 },
                 "DropdownState": {
                     "description": "Defines current inline state in Dropdown component.",
@@ -24353,7 +26671,8 @@
                             "description": "Current overlay visible state as a boolean."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectState"
                 },
                 "DropdownContext": {
                     "description": "Defines current options in Dropdown component.",
@@ -24400,7 +26719,8 @@
                             "description": "Current disabled state of the item as a boolean."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectContext"
                 },
                 "DropdownProps": {
                     "description": "Defines valid properties in Dropdown component.",
@@ -24620,7 +26940,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Whether the dropdown is in loading state."
+                            "description": "Whether the select is in loading state."
                         },
                         {
                             "name": "clearIcon",
@@ -24637,7 +26957,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the dropdown.",
+                            "description": "Icon to display in the select.",
                             "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
@@ -24664,7 +26984,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Clears the filter value when hiding the dropdown."
+                            "description": "Clears the filter value when hiding the select."
                         },
                         {
                             "name": "resetFilterOnClear",
@@ -24806,7 +27126,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<DropdownPassThroughOptions<any>>",
+                            "type": "PassThrough<SelectPassThroughOptions<any>>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -24827,7 +27147,8 @@
                             "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "SelectProps"
                 },
                 "DropdownSlots": {
                     "description": "Defines valid slots in Dropdown component.",
@@ -24963,12 +27284,12 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the dropdown icon</span>\n }",
-                                    "description": "dropdown icon slot's params."
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the select icon</span>\n }",
+                                    "description": "select icon slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom dropdown icon template."
+                            "description": "Custom select icon template."
                         },
                         {
                             "name": "loadingicon",
@@ -24996,7 +27317,8 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom filter icon template."
                         }
-                    ]
+                    ],
+                    "extendedTypes": "SelectSlots"
                 },
                 "DropdownEmits": {
                     "description": "Defines valid emits in Dropdown component.",
@@ -25022,7 +27344,7 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "DropdownChangeEvent",
+                                    "type": "SelectChangeEvent",
                                     "description": "Custom change event."
                                 }
                             ],
@@ -25085,25 +27407,15 @@
                                 {
                                     "name": "event",
                                     "optional": false,
-                                    "type": "DropdownFilterEvent",
+                                    "type": "SelectFilterEvent",
                                     "description": "Custom filter event."
                                 }
                             ],
                             "returnType": "void",
                             "description": "Callback to invoke on filter input."
                         }
-                    ]
-                }
-            }
-        },
-        "types": {
-            "description": "Defines the custom types used by the module.",
-            "values": {
-                "DropdownPassThroughOptionType": {
-                    "values": "DropdownPassThroughAttributes | (options: DropdownPassThroughMethodOptions) => undefined | string | null | undefined"
-                },
-                "DropdownPassThroughTransitionType": {
-                    "values": "TransitionProps | (options: DropdownPassThroughMethodOptions) => TransitionProps | undefined"
+                    ],
+                    "extendedTypes": "SelectEmits"
                 }
             }
         }
@@ -25162,7 +27474,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedTypes": "BaseStyle"
+                    "extendedTypes": "SelectStyle"
                 }
             }
         }
@@ -29814,7 +32126,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "HintedString<\"error\" | \"success\" | \"secondary\" | \"info\" | \"contrast\" | \"warn\">",
+                            "type": "HintedString<\"error\" | \"success\" | \"secondary\" | \"info\" | \"warn\" | \"contrast\">",
                             "default": "info",
                             "description": "Severity level of the message."
                         },
@@ -30332,6 +32644,599 @@
             }
         }
     },
+    "inputchips": {
+        "description": "InputChips groups a collection of contents in tabs.\n\n[Live Demo](https://www.primevue.org/inputchips/)",
+        "components": {
+            "default": {
+                "description": "InputChips is used to enter multiple values on an input field.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputChipsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputChipsProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputChipsState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsPassThroughMethodOptions"
+                },
+                "InputChipsSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputChipsProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputChipsState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsSharedPassThroughMethodOptions"
+                },
+                "InputChipsAddEvent": {
+                    "description": "Custom add event.",
+                    "relatedProp": "InputChipsEmits.add",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "default": "",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Added/Removed item value."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsAddEvent,InputChipsRemoveEvent"
+                },
+                "InputChipsRemoveEvent": {
+                    "description": "Custom remove event.",
+                    "relatedProp": "InputChipsEmits.remove",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "default": "",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Added/Removed item value."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "InputChipsAddEvent"
+                },
+                "InputChipsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputChipsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to the Chip component."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "inputToken",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input token's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsPassThroughOptions"
+                },
+                "InputChipsPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsPassThroughAttributes"
+                },
+                "InputChipsState": {
+                    "description": "Defines current inline state in InputChips 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": [],
+                    "extendedBy": "ChipsState"
+                },
+                "InputChipsProps": {
+                    "description": "Defines valid properties in InputChips component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum number of entries allowed."
+                        },
+                        {
+                            "name": "addOnBlur",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to add an item when the input loses focus."
+                        },
+                        {
+                            "name": "allowDuplicate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to allow duplicate values or not."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Separator char to add an item when pressed in addition to the enter key."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the focus input to match a label defined for the inputchips."
+                        },
+                        {
+                            "name": "inputClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "inputProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputHTMLAttributes",
+                            "default": "",
+                            "description": "Used 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",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to display in chip remove action.",
+                            "deprecated": "since v3.27.0. Use 'removetokenicon' slot."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text for the input."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<InputChipsPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsProps"
+                },
+                "InputChipsSlots": {
+                    "description": "Defines valid slots in InputChips slots.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "chip",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Value of the component</span>\n }",
+                                    "description": "chip slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom chip template."
+                        },
+                        {
+                            "name": "removetokenicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the token.</span>\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event, <span class=\"doc-option-parameter-name\">index</span>: number) &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Remove token icon function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">removeCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event, <span class=\"doc-option-parameter-name\">index</span>: number) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Remove token icon function.</span>\n}",
+                                    "description": "remove token icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom remove token icon template."
+                        }
+                    ],
+                    "extendedBy": "ChipsSlots"
+                },
+                "InputChipsEmits": {
+                    "description": "Defines valid emits in InputChips component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any[]",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "add",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputChipsAddEvent",
+                                    "description": "Custom add event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a chip is added."
+                        },
+                        {
+                            "name": "remove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputChipsRemoveEvent",
+                                    "description": "Custom remove event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a chip is removed."
+                        }
+                    ],
+                    "extendedBy": "ChipsEmits"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputChipsPassThroughOptionType": {
+                    "values": "InputChipsPassThroughAttributes | (options: InputChipsPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "inputchips/style/InputChipsStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputChipsStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "ChipsStyle",
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "inputgroup": {
         "description": "InputGroup displays text, icon, buttons and other content can be grouped next to an input.\n\n[Live Demo](https://www.primevue.org/inputgroup/)",
         "components": {
@@ -32634,10 +35539,10 @@
         }
     },
     "inputswitch": {
-        "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
+        "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/toggleswitch/)",
         "components": {
             "default": {
-                "description": "InputSwitch is used to select a boolean value.",
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -32666,7 +35571,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "InputSwitchProps",
+                            "type": "ToggleSwitchProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -32674,7 +35579,7 @@
                             "name": "context",
                             "optional": false,
                             "readonly": false,
-                            "type": "InputSwitchContext",
+                            "type": "ToggleSwitchContext",
                             "default": "",
                             "description": "Defines current options."
                         },
@@ -32703,7 +35608,8 @@
                             "description": "Defines passthrough(pt) options in global config."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "ToggleSwitchPassThroughMethodOptions"
                 },
                 "InputSwitchPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
@@ -32713,7 +35619,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputSwitchPassThroughOptionType",
+                            "type": "ToggleSwitchPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -32721,7 +35627,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputSwitchPassThroughOptionType",
+                            "type": "ToggleSwitchPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the input's DOM element."
                         },
@@ -32729,7 +35635,7 @@
                             "name": "slider",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputSwitchPassThroughOptionType",
+                            "type": "ToggleSwitchPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the slider's DOM element."
                         },
@@ -32742,20 +35648,15 @@
                             "description": "Used to manage all lifecycle hooks."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "ToggleSwitchPassThroughOptions"
                 },
                 "InputSwitchPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "ToggleSwitchPassThroughAttributes"
                 },
                 "InputSwitchProps": {
                     "description": "Defines valid properties in InputSwitch component.",
@@ -32767,7 +35668,7 @@
                             "readonly": false,
                             "type": "string | boolean",
                             "default": "false",
-                            "description": "Specifies whether a inputswitch should be checked or not."
+                            "description": "Specifies whether a toggleswitch should be checked or not."
                         },
                         {
                             "name": "trueValue",
@@ -32869,7 +35770,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<InputSwitchPassThroughOptions>",
+                            "type": "PassThrough<ToggleSwitchPassThroughOptions>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -32890,7 +35791,8 @@
                             "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "ToggleSwitchProps"
                 },
                 "InputSwitchContext": {
                     "description": "Defines current options in InputSwitch component.",
@@ -32913,12 +35815,14 @@
                             "description": "Current disabled state of the item as a boolean."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "ToggleSwitchContext"
                 },
                 "InputSwitchSlots": {
                     "relatedProp": "",
                     "props": [],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "ToggleSwitchSlots"
                 },
                 "InputSwitchEmits": {
                     "description": "Defines valid emits in InputSwitch component.",
@@ -32977,15 +35881,8 @@
                             "returnType": "void",
                             "description": "Callback to invoke when the component loses focus."
                         }
-                    ]
-                }
-            }
-        },
-        "types": {
-            "description": "Defines the custom types used by the module.",
-            "values": {
-                "InputSwitchPassThroughOptionType": {
-                    "values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
+                    ],
+                    "extendedTypes": "ToggleSwitchEmits"
                 }
             }
         }
@@ -33044,7 +35941,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedTypes": "BaseStyle"
+                    "extendedTypes": "ToggleSwitchStyle"
                 }
             }
         }
@@ -37053,7 +39950,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "HintedString<\"error\" | \"success\" | \"secondary\" | \"info\" | \"contrast\" | \"warn\">",
+                            "type": "HintedString<\"error\" | \"success\" | \"secondary\" | \"info\" | \"warn\" | \"contrast\">",
                             "default": "info",
                             "description": "Severity level of the message."
                         },
@@ -40419,10 +43316,10 @@
         }
     },
     "overlaypanel": {
-        "description": "OverlayPanel is a container component positioned as connected to its target.\n\n[Live Demo](https://primevue.org/overlaypanel)",
+        "description": "OverlayPanel is a container component positioned as connected to its target.\n\n[Live Demo](https://primevue.org/popover)",
         "components": {
             "default": {
-                "description": "OverlayPanel, also known as Popover, is a container component that can overlay other components on page.",
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": [
@@ -40498,7 +43395,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "OverlayPanelProps",
+                            "type": "PopoverProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -40506,7 +43403,7 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "OverlayPanelState",
+                            "type": "PopoverState",
                             "default": "",
                             "description": "Defines current inline state."
                         },
@@ -40535,7 +43432,8 @@
                             "description": "Defines passthrough(pt) options in global config."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "PopoverPassThroughMethodOptions"
                 },
                 "OverlayPanelPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
@@ -40545,7 +43443,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "OverlayPanelPassThroughOptionType",
+                            "type": "PopoverPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -40553,7 +43451,7 @@
                             "name": "content",
                             "optional": true,
                             "readonly": false,
-                            "type": "OverlayPanelPassThroughOptionType",
+                            "type": "PopoverPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the content's DOM element."
                         },
@@ -40569,12 +43467,13 @@
                             "name": "transition",
                             "optional": true,
                             "readonly": false,
-                            "type": "OverlayPanelPassThroughTransitionType",
+                            "type": "PopoverPassThroughTransitionType",
                             "default": "",
                             "description": "Used to control Vue Transition API."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "PopoverPassThroughOptions"
                 },
                 "OverlayPanelPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
@@ -40587,7 +43486,8 @@
                             "type": "any"
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "PopoverPassThroughAttributes"
                 },
                 "OverlayPanelState": {
                     "description": "Defines current inline state in OverlayPanel component.",
@@ -40602,20 +43502,15 @@
                             "description": "Current visible state as a boolean."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "PopoverState"
                 },
                 "OverlayPanelBreakpoints": {
                     "description": "OverlayPanel breakpoint metadata.",
                     "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "string"
-                        }
-                    ],
-                    "methods": []
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "PopoverBreakpoints"
                 },
                 "OverlayPanelProps": {
                     "description": "Defines valid properties in OverlayPanel component.",
@@ -40657,7 +43552,7 @@
                             "name": "breakpoints",
                             "optional": true,
                             "readonly": false,
-                            "type": "OverlayPanelBreakpoints",
+                            "type": "PopoverBreakpoints",
                             "default": "",
                             "description": "Object literal to define widths per screen size."
                         },
@@ -40673,7 +43568,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<OverlayPanelPassThroughOptions>",
+                            "type": "PassThrough<PopoverPassThroughOptions>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -40702,7 +43597,8 @@
                             "description": "Specifies if pressing escape key should hide the dialog."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "PopoverProps"
                 },
                 "OverlayPanelSlots": {
                     "description": "Defines valid slots in OverlayPanel component.",
@@ -40728,7 +43624,8 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom container slot."
                         }
-                    ]
+                    ],
+                    "extendedTypes": "PopoverSlots"
                 },
                 "OverlayPanelEmits": {
                     "description": "Defines valid emits in OverlayPanel component.",
@@ -40747,18 +43644,8 @@
                             "returnType": "void",
                             "description": "Callback to invoke when the overlay is hidden."
                         }
-                    ]
-                }
-            }
-        },
-        "types": {
-            "description": "Defines the custom types used by the module.",
-            "values": {
-                "OverlayPanelPassThroughOptionType": {
-                    "values": "OverlayPanelPassThroughAttributes | (options: OverlayPanelPassThroughMethodOptions) => undefined | string | null | undefined"
-                },
-                "OverlayPanelPassThroughTransitionType": {
-                    "values": "TransitionProps | (options: OverlayPanelPassThroughMethodOptions) => TransitionProps | undefined"
+                    ],
+                    "extendedTypes": "PopoverEmits"
                 }
             }
         }
@@ -40817,7 +43704,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedTypes": "BaseStyle"
+                    "extendedTypes": "PopoverStyle"
                 }
             }
         }
@@ -44479,6 +47366,419 @@
             }
         }
     },
+    "popover": {
+        "description": "Popover is a container component positioned as connected to its target.\n\n[Live Demo](https://primevue.org/popover)",
+        "components": {
+            "default": {
+                "description": "Popover, also known as Popover, is a container component that can overlay other components on page.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "alignOverlay",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Aligns overlay panel based on the current position of the container."
+                        },
+                        {
+                            "name": "toggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                },
+                                {
+                                    "name": "target",
+                                    "type": "any",
+                                    "description": "Optional target if event.currentTarget should not be used."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Toggles the visibility of the overlay."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                },
+                                {
+                                    "name": "target",
+                                    "type": "any",
+                                    "description": "Optional target if event.currentTarget should not be used."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Shows the overlay."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Hides the overlay."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "PopoverPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PopoverProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PopoverState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelPassThroughMethodOptions"
+                },
+                "PopoverPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PopoverProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PopoverPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PopoverPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PopoverPassThroughTransitionType",
+                            "default": "",
+                            "description": "Used to control Vue Transition API."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelPassThroughOptions"
+                },
+                "PopoverPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelPassThroughAttributes"
+                },
+                "PopoverState": {
+                    "description": "Defines current inline state in Popover component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelState"
+                },
+                "PopoverBreakpoints": {
+                    "description": "Popover breakpoint metadata.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelBreakpoints"
+                },
+                "PopoverProps": {
+                    "description": "Defines valid properties in Popover component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "dismissable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables to hide the overlay when outside is clicked."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLElement | HintedString<\"body\" | \"self\">",
+                            "default": "body",
+                            "description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "breakpoints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PopoverBreakpoints",
+                            "default": "",
+                            "description": "Object literal to define widths per screen size."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<PopoverPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the dialog."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelProps"
+                },
+                "PopoverSlots": {
+                    "description": "Defines valid slots in Popover component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
+                        },
+                        {
+                            "name": "container",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClose</span>: <span class=\"doc-option-parameter-type line-through\">() &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Close overlay panel function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name line-through\">onKeydown</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Close button keydown function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">closeCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close overlay panel function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">keydownCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close button keydown function.</span>\n}",
+                                    "description": "container slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom container slot."
+                        }
+                    ],
+                    "extendedBy": "OverlayPanelSlots"
+                },
+                "PopoverEmits": {
+                    "description": "Defines valid emits in Popover component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is shown."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is hidden."
+                        }
+                    ],
+                    "extendedBy": "OverlayPanelEmits"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PopoverPassThroughOptionType": {
+                    "values": "PopoverPassThroughAttributes | (options: PopoverPassThroughMethodOptions) => undefined | string | null | undefined"
+                },
+                "PopoverPassThroughTransitionType": {
+                    "values": "TransitionProps | (options: PopoverPassThroughMethodOptions) => TransitionProps | undefined"
+                }
+            }
+        }
+    },
+    "popover/style/PopoverStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "PopoverStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "OverlayPanelStyle",
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "portal/Portal": {
         "interfaces": {
             "description": "Defines the custom interfaces used by the module.",
@@ -47095,6 +50395,1230 @@
             }
         }
     },
+    "select": {
+        "description": "Select also known as Select, is used to choose an item from a collection of options.\n\n[Live Demo](https://www.primevue.org/select/)",
+        "components": {
+            "default": {
+                "description": "Select is used to choose an item from a collection of options.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "SelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent instance."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownPassThroughMethodOptions"
+                },
+                "SelectChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "SelectEmits.change",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "default": "",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Selected option value"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownChangeEvent"
+                },
+                "SelectFilterEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "SelectEmits.filter",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "default": "",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Filter value"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownFilterEvent"
+                },
+                "SelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SelectProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the clear icon's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the trigger' DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "itemGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item group label's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "itemLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item label's DOM element."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the check icon's DOM element."
+                        },
+                        {
+                            "name": "blankIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the bank icon's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "hiddenFirstFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the hidden first focusable element's DOM element."
+                        },
+                        {
+                            "name": "hiddenFilterResult",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the hidden filter result's DOM element."
+                        },
+                        {
+                            "name": "hiddenEmptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the hidden empty message's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "hiddenLastFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the hidden last focusable element's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectPassThroughTransitionType<any>",
+                            "default": "",
+                            "description": "Used to control Vue Transition API."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownPassThroughOptions"
+                },
+                "SelectPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownPassThroughAttributes"
+                },
+                "SelectState": {
+                    "description": "Defines current inline state in Select 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": "-1",
+                            "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": [],
+                    "extendedBy": "DropdownState"
+                },
+                "SelectContext": {
+                    "description": "Defines current options in Select component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "option",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current item option."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current item index."
+                        },
+                        {
+                            "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": [],
+                    "extendedBy": "DropdownContext"
+                },
+                "SelectProps": {
+                    "description": "Defines valid properties in Select component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of select items to display as the available options."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the value of an option, defaults to the option itself when not defined."
+                        },
+                        {
+                            "name": "optionDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
+                        },
+                        {
+                            "name": "optionGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option group."
+                        },
+                        {
+                            "name": "optionGroupChildren",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function that refers to the children options of option group."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "14rem",
+                            "description": "Height of the viewport, a scrollbar is defined if height of list exceeds this value."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, displays a filter input at header."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HintedString<\"endsWith\" | \"startsWith\" | \"contains\">",
+                            "default": "contains",
+                            "description": "Defines the filtering algorithm to use when searching the options."
+                        },
+                        {
+                            "name": "filterFields",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Fields used when filtering the options, defaults to optionLabel."
+                        },
+                        {
+                            "name": "editable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, custom value instead of predefined options can be entered using the editable input field."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Default text to display when no option is selected."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A property to uniquely identify an option."
+                        },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "inputClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the overlay panel."
+                        },
+                        {
+                            "name": "panelClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the overlay panel."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLElement | HintedString<\"body\" | \"self\">",
+                            "default": "body",
+                            "description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the select is in loading state."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "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": "",
+                            "description": "Icon to display in the select.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "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": "",
+                            "description": "Icon to display in loading state.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
+                        },
+                        {
+                            "name": "resetFilterOnHide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Clears the filter value when hiding the select."
+                        },
+                        {
+                            "name": "resetFilterOnClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Clears the filter value when clicking on the clear icon."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": "",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
+                        },
+                        {
+                            "name": "autoOptionFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to focus on the first visible or selected element when the overlay panel is shown."
+                        },
+                        {
+                            "name": "autoFilterFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to focus on the filter element when the overlay panel is shown."
+                        },
+                        {
+                            "name": "selectOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the focused option is selected."
+                        },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
+                        {
+                            "name": "highlightOnSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the selected option will be add highlight class."
+                        },
+                        {
+                            "name": "checkmark",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the selected option will be shown with a check mark."
+                        },
+                        {
+                            "name": "filterMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "'{0} results are available'",
+                            "description": "Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration."
+                        },
+                        {
+                            "name": "selectionMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "'{0} items selected'",
+                            "description": "Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration."
+                        },
+                        {
+                            "name": "emptySelectionMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No selected item",
+                            "description": "Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration."
+                        },
+                        {
+                            "name": "emptyFilterMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No results found",
+                            "description": "Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No results found",
+                            "description": "Text to display when there are no options available. Defaults to value from PrimeVue locale configuration."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines a string value that labels an interactive element."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<SelectPassThroughOptions<any>>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownProps"
+                },
+                "SelectSlots": {
+                    "description": "Defines valid slots in Select component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "value",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">placeholder</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Placeholder prop value</span>\n }",
+                                    "description": "value slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom value template."
+                        },
+                        {
+                            "name": "indicator",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom indicator template.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon or loadingicon' slots."
+                        },
+                        {
+                            "name": "header",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">options</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Displayed options</span>\n }",
+                                    "description": "header slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header template of panel."
+                        },
+                        {
+                            "name": "footer",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">options</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Displayed options</span>\n }",
+                                    "description": "footer slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom footer template of panel."
+                        },
+                        {
+                            "name": "option",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">option</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Option instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the option</span>\n }",
+                                    "description": "option slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom option template."
+                        },
+                        {
+                            "name": "optiongroup",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">option</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Option instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the option</span>\n }",
+                                    "description": "option group slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom option group template."
+                        },
+                        {
+                            "name": "emptyfilter",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom empty filter template."
+                        },
+                        {
+                            "name": "empty",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom empty template."
+                        },
+                        {
+                            "name": "content",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">items</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// An array of objects to display for virtualscroller</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">styleClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">contentRef</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">el</span>: any) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Referance of the content</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">getItemOptions</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; VirtualScrollerItemOptions</span>, <span class=\"doc-option-parameter-type\">// Options of the items</span>\n}",
+                                    "description": "content slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
+                        },
+                        {
+                            "name": "loader",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">options</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Options of the loader items for virtualscroller</span>\n }",
+                                    "description": "loader slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loader template."
+                        },
+                        {
+                            "name": "clearicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the clear icon</span>\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Clear icon click function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">clearCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Clear icon click function.</span>\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 <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the select icon</span>\n }",
+                                    "description": "select icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom select icon template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the loading icon</span>\n }",
+                                    "description": "loading icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
+                        },
+                        {
+                            "name": "filtericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Style class of the filter icon</span>\n }",
+                                    "description": "filter icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom filter icon template."
+                        }
+                    ],
+                    "extendedBy": "DropdownSlots"
+                },
+                "SelectEmits": {
+                    "description": "Defines valid emits in Select component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SelectChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component receives focus."
+                        },
+                        {
+                            "name": "blur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component loses focus."
+                        },
+                        {
+                            "name": "before-show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the overlay is shown."
+                        },
+                        {
+                            "name": "before-hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the overlay is hidden."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is shown."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is hidden."
+                        },
+                        {
+                            "name": "filter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SelectFilterEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on filter input."
+                        }
+                    ],
+                    "extendedBy": "DropdownEmits"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SelectPassThroughOptionType": {
+                    "values": "SelectPassThroughAttributes | (options: SelectPassThroughMethodOptions) => undefined | string | null | undefined"
+                },
+                "SelectPassThroughTransitionType": {
+                    "values": "TransitionProps | (options: SelectPassThroughMethodOptions) => TransitionProps | undefined"
+                }
+            }
+        }
+    },
+    "select/style/SelectStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "SelectStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "DropdownStyle",
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "selectbutton": {
         "description": "SelectButton is used to choose single or multiple items from a list using buttons.\n\n[Live Demo](https://www.primevue.org/selectbutton/)",
         "components": {
@@ -47565,10 +52089,10 @@
         }
     },
     "sidebar": {
-        "description": "Sidebar is a panel component displayed as an overlay at the edges of the screen.\n\n[Live Demo](https://primevue.org/sidebar)",
+        "description": "Sidebar is a panel component displayed as an overlay at the edges of the screen.\n\n[Live Demo](https://primevue.org/drawer)",
         "components": {
             "default": {
-                "description": "Sidebar is a panel component displayed as an overlay.",
+                "description": "",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -47597,7 +52121,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "SidebarProps",
+                            "type": "DrawerProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -47605,7 +52129,7 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "SidebarState",
+                            "type": "DrawerState",
                             "default": "",
                             "description": "Defines current inline state."
                         },
@@ -47634,7 +52158,8 @@
                             "description": "Defines passthrough(pt) options in global config."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DrawerPassThroughMethodOptions"
                 },
                 "SidebarSharedPassThroughMethodOptions": {
                     "description": "Custom shared passthrough(pt) option method.",
@@ -47644,7 +52169,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "SidebarProps",
+                            "type": "DrawerProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -47652,12 +52177,13 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "SidebarState",
+                            "type": "DrawerState",
                             "default": "",
                             "description": "Defines current inline state."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DrawerSharedPassThroughMethodOptions"
                 },
                 "SidebarPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
@@ -47667,7 +52193,7 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
+                            "type": "DrawerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -47675,7 +52201,7 @@
                             "name": "header",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
+                            "type": "DrawerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the header's DOM element."
                         },
@@ -47683,7 +52209,7 @@
                             "name": "title",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
+                            "type": "DrawerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the header content's DOM element."
                         },
@@ -47691,7 +52217,7 @@
                             "name": "toggler",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions<SidebarSharedPassThroughMethodOptions>",
+                            "type": "ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the previous button's DOM element."
                         },
@@ -47699,7 +52225,7 @@
                             "name": "content",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
+                            "type": "DrawerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the content's DOM element."
                         },
@@ -47707,7 +52233,7 @@
                             "name": "mask",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
+                            "type": "DrawerPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the mask's DOM element."
                         },
@@ -47723,25 +52249,20 @@
                             "name": "transition",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughTransitionType",
+                            "type": "DrawerPassThroughTransitionType",
                             "default": "",
                             "description": "Used to control Vue Transition API."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DrawerPassThroughOptions"
                 },
                 "SidebarPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
+                    "props": [],
+                    "methods": [],
+                    "extendedTypes": "DrawerPassThroughAttributes"
                 },
                 "SidebarState": {
                     "description": "Defines current inline state in Sidebar component.",
@@ -47756,7 +52277,8 @@
                             "description": "Current container visible state as a boolean."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DrawerState"
                 },
                 "SidebarProps": {
                     "description": "Defines valid properties in Sidebar component.",
@@ -47776,7 +52298,7 @@
                             "readonly": false,
                             "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | \"full\"",
                             "default": "left",
-                            "description": "Specifies the position of the sidebar."
+                            "description": "Specifies the position of the drawer."
                         },
                         {
                             "name": "header",
@@ -47832,7 +52354,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the sidebar close button.",
+                            "description": "Icon to display in the drawer close button.",
                             "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
@@ -47841,7 +52363,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "true",
-                            "description": "Whether to a modal layer behind the sidebar."
+                            "description": "Whether to a modal layer behind the drawer."
                         },
                         {
                             "name": "blockScroll",
@@ -47849,7 +52371,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Whether background scroll should be blocked when sidebar is visible."
+                            "description": "Whether background scroll should be blocked when drawer is visible."
                         },
                         {
                             "name": "dt",
@@ -47863,7 +52385,7 @@
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<SidebarPassThroughOptions>",
+                            "type": "PassThrough<DrawerPassThroughOptions>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -47884,7 +52406,8 @@
                             "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedTypes": "DrawerProps"
                 },
                 "SidebarSlots": {
                     "description": "Defines valid slots in Sidebar component.",
@@ -47929,14 +52452,15 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClose</span>: <span class=\"doc-option-parameter-type line-through\">() &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Close sidebar function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">closeCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close sidebar function.</span>\n}",
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClose</span>: <span class=\"doc-option-parameter-type line-through\">() &rArr; void</span>, <span class=\"doc-option-parameter-type line-through\">// Close drawer function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">closeCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close drawer function.</span>\n}",
                                     "description": "container slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom container slot."
                         }
-                    ]
+                    ],
+                    "extendedTypes": "DrawerSlots"
                 },
                 "SidebarEmits": {
                     "description": "Defines valid emits in Sidebar component.",
@@ -47960,26 +52484,16 @@
                             "name": "show",
                             "parameters": [],
                             "returnType": "void",
-                            "description": "Callback to invoke when sidebar gets shown."
+                            "description": "Callback to invoke when drawer gets shown."
                         },
                         {
                             "name": "hide",
                             "parameters": [],
                             "returnType": "void",
-                            "description": "Callback to invoke when sidebar gets hidden."
+                            "description": "Callback to invoke when drawer gets hidden."
                         }
-                    ]
-                }
-            }
-        },
-        "types": {
-            "description": "Defines the custom types used by the module.",
-            "values": {
-                "SidebarPassThroughOptionType": {
-                    "values": "SidebarPassThroughAttributes | (options: SidebarPassThroughMethodOptions) => undefined | string | null | undefined"
-                },
-                "SidebarPassThroughTransitionType": {
-                    "values": "TransitionProps | (options: SidebarPassThroughMethodOptions) => TransitionProps | undefined"
+                    ],
+                    "extendedTypes": "DrawerEmits"
                 }
             }
         }
@@ -48038,7 +52552,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedTypes": "BaseStyle"
+                    "extendedTypes": "DrawerStyle"
                 }
             }
         }
@@ -49661,7 +54175,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "HintedString<\"success\" | \"help\" | \"secondary\" | \"info\" | \"warning\" | \"danger\" | \"contrast\">",
+                            "type": "HintedString<\"success\" | \"help\" | \"secondary\" | \"info\" | \"warn\" | \"danger\" | \"contrast\">",
                             "default": "",
                             "description": "Defines the style of the button."
                         },
@@ -53519,7 +58033,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "HintedString<\"success\" | \"secondary\" | \"info\" | \"warning\" | \"danger\" | \"contrast\">",
+                            "type": "HintedString<\"success\" | \"secondary\" | \"info\" | \"warn\" | \"danger\" | \"contrast\">",
                             "default": "",
                             "description": "Severity type of the tag."
                         },
@@ -55650,7 +60164,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"error\" | \"success\" | \"secondary\" | \"info\" | \"contrast\" | \"warn\"",
+                            "type": "\"error\" | \"success\" | \"secondary\" | \"info\" | \"warn\" | \"contrast\"",
                             "default": "info",
                             "description": "Severity level of the message."
                         },
@@ -56547,6 +61061,430 @@
             }
         }
     },
+    "toggleswitch": {
+        "description": "ToggleSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/toggleswitch/)",
+        "components": {
+            "default": {
+                "description": "ToggleSwitch is used to select a boolean value.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "ToggleSwitchPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleSwitchProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleSwitchContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "InputSwitchPassThroughMethodOptions"
+                },
+                "ToggleSwitchPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ToggleSwitchProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the slider's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "InputSwitchPassThroughOptions"
+                },
+                "ToggleSwitchPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "InputSwitchPassThroughAttributes"
+                },
+                "ToggleSwitchProps": {
+                    "description": "Defines valid properties in ToggleSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | boolean",
+                            "default": "false",
+                            "description": "Specifies whether a toggleswitch should be checked or not."
+                        },
+                        {
+                            "name": "trueValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "true",
+                            "description": "Value in checked state."
+                        },
+                        {
+                            "name": "falseValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "false",
+                            "description": "Value in unchecked state."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "inputClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "dt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "It generates scoped CSS variables using design tokens for the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<ToggleSwitchPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "InputSwitchProps"
+                },
+                "ToggleSwitchContext": {
+                    "description": "Defines current options in ToggleSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current checked 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": [],
+                    "extendedBy": "InputSwitchContext"
+                },
+                "ToggleSwitchSlots": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [],
+                    "extendedBy": "InputSwitchSlots"
+                },
+                "ToggleSwitchEmits": {
+                    "description": "Defines valid emits in ToggleSwitch component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component receives focus."
+                        },
+                        {
+                            "name": "blur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component loses focus."
+                        }
+                    ],
+                    "extendedBy": "InputSwitchEmits"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToggleSwitchPassThroughOptionType": {
+                    "values": "ToggleSwitchPassThroughAttributes | (options: ToggleSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "toggleswitch/style/ToggleSwitchStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "ToggleSwitchStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedBy": "InputSwitchStyle",
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "toolbar": {
         "description": "Toolbar is a grouping component for buttons and other content.\n\n[Live Demo](https://www.primevue.org/toolbar/)",
         "components": {
diff --git a/doc/configuration/ZIndexDoc.vue b/doc/configuration/ZIndexDoc.vue
index ad2e1ff39..7fa077614 100644
--- a/doc/configuration/ZIndexDoc.vue
+++ b/doc/configuration/ZIndexDoc.vue
@@ -21,8 +21,8 @@ const app = createApp(App);
 
 app.use(PrimeVue, {
     zIndex: {
-        modal: 1100,        //dialog, sidebar
-        overlay: 1000,      //dropdown, overlaypanel
+        modal: 1100,        //dialog, drawer
+        overlay: 1000,      //select, popover
         menu: 1000,         //overlay menus
         tooltip: 1100       //tooltip
     }
diff --git a/doc/customicons/FontAwesomeDoc.vue b/doc/customicons/FontAwesomeDoc.vue
index 2d545a42d..6415e68a2 100644
--- a/doc/customicons/FontAwesomeDoc.vue
+++ b/doc/customicons/FontAwesomeDoc.vue
@@ -11,11 +11,11 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown>
+<Select>
     <template #dropdownicon>
         <i class="fa-light fa-chevron-down"></i>
     </template>
-</Dropdown>
+</Select>
 `
             }
         };
diff --git a/doc/customicons/ImageDoc.vue b/doc/customicons/ImageDoc.vue
index a47665f56..2c2c29741 100644
--- a/doc/customicons/ImageDoc.vue
+++ b/doc/customicons/ImageDoc.vue
@@ -11,11 +11,11 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown>
+<Select>
     <template #dropdownicon>
         <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
     </template>
-</Dropdown>
+</Select>
 `
             }
         };
diff --git a/doc/customicons/MaterialDoc.vue b/doc/customicons/MaterialDoc.vue
index 16edc6015..4745ad008 100644
--- a/doc/customicons/MaterialDoc.vue
+++ b/doc/customicons/MaterialDoc.vue
@@ -11,11 +11,11 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown>
+<Select>
     <template #dropdownicon>
         <span class="material-icons">arrow_drop_down</span>
     </template>
-</Dropdown>
+</Select>
 `
             }
         };
diff --git a/doc/customicons/SVGDoc.vue b/doc/customicons/SVGDoc.vue
index 13b4557f7..208f276cf 100644
--- a/doc/customicons/SVGDoc.vue
+++ b/doc/customicons/SVGDoc.vue
@@ -11,7 +11,7 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown>
+<Select>
     <template #dropdownicon>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <g id="chevron-down">
@@ -19,7 +19,7 @@ export default {
             </g>
         </svg>
     </template>
-</Dropdown>
+</Select>
 `
             }
         };
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index 6c91ca402..6ecb60cc1 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -69,11 +69,11 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel }">
-                        <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
-                        </Dropdown>
+                        </Select>
                     </template>
                 </Column>
                 <template #empty> No customers found. </template>
@@ -158,11 +158,11 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel }">
-            <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
-            </Dropdown>
+            </Select>
         </template>
     </Column>
     <template #empty> No customers found. </template>
@@ -221,11 +221,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <template #empty> No customers found. </template>
@@ -349,11 +349,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <template #empty> No customers found. </template>
diff --git a/doc/datatable/edit/RowEditDoc.vue b/doc/datatable/edit/RowEditDoc.vue
index fbebe03b3..8f48cd068 100644
--- a/doc/datatable/edit/RowEditDoc.vue
+++ b/doc/datatable/edit/RowEditDoc.vue
@@ -34,11 +34,11 @@
                 </Column>
                 <Column field="inventoryStatus" header="Status" style="width: 20%">
                     <template #editor="{ data, field }">
-                        <Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+                        <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                             </template>
-                        </Dropdown>
+                        </Select>
                     </template>
                     <template #body="slotProps">
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
@@ -96,11 +96,11 @@ export default {
     </Column>
     <Column field="inventoryStatus" header="Status" style="width: 20%">
         <template #editor="{ data, field }">
-            <Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+            <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                 <template #option="slotProps">
                     <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                 </template>
-            </Dropdown>
+            </Select>
         </template>
         <template #body="slotProps">
             <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
@@ -142,11 +142,11 @@ export default {
             </Column>
             <Column field="inventoryStatus" header="Status" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                         <template #option="slotProps">
                             <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
                 <template #body="slotProps">
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
@@ -236,11 +236,11 @@ export default {
             </Column>
             <Column field="inventoryStatus" header="Status" style="width: 20%">
                 <template #editor="{ data, field }">
-                    <Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
+                    <Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                         <template #option="slotProps">
                             <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
                 <template #body="slotProps">
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index 9aa195305..c7d66e7f5 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -69,7 +69,7 @@
                         {{ formatDate(data.date) }}
                     </template>
                     <template #filter="{ filterModel }">
-                        <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                        <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                     </template>
                 </Column>
                 <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -85,11 +85,11 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel }">
-                        <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
-                        </Dropdown>
+                        </Select>
                     </template>
                 </Column>
                 <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
@@ -210,7 +210,7 @@ export default {
             {{ formatDate(data.date) }}
         </template>
         <template #filter="{ filterModel }">
-            <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
         </template>
     </Column>
     <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -226,11 +226,11 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel }">
-            <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
-            </Dropdown>
+            </Select>
         </template>
     </Column>
     <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
@@ -325,7 +325,7 @@ export default {
                     {{ formatDate(data.date) }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                 </template>
             </Column>
             <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -341,11 +341,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
@@ -532,7 +532,7 @@ export default {
                     {{ formatDate(data.date) }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                 </template>
             </Column>
             <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -548,11 +548,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index 2819437a1..059ebba9e 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -63,11 +63,11 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+                        <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
-                        </Dropdown>
+                        </Select>
                     </template>
                 </Column>
                 <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
@@ -172,11 +172,11 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel, filterCallback }">
-            <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+            <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
-            </Dropdown>
+            </Select>
         </template>
     </Column>
     <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
@@ -248,11 +248,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
@@ -404,11 +404,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <Column field="verified" header="Verified" dataType="boolean" style="min-width: 6rem">
diff --git a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
index f67099ef2..fabfed250 100644
--- a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
+++ b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
@@ -8,7 +8,7 @@
     <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center align-items-center mb-4 gap-2">
-                <InputSwitch v-model="metaKey" inputId="input-metakey" />
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@@ -33,7 +33,7 @@ export default {
             metaKey: true,
             code: {
                 basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
 
 <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -46,7 +46,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@@ -79,7 +79,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
index 88daa3068..ad59d5bd3 100644
--- a/doc/datatable/rowselection/SingleRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
@@ -12,7 +12,7 @@
     <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center align-items-center mb-4 gap-2">
-                <InputSwitch v-model="metaKey" inputId="input-metakey" />
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@@ -37,7 +37,7 @@ export default {
             metaKey: true,
             code: {
                 basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
 
 <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -50,7 +50,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
@@ -83,7 +83,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 4f7b27806..5b4f9badb 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -69,7 +69,7 @@
                         {{ formatDate(data.date) }}
                     </template>
                     <template #filter="{ filterModel }">
-                        <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                        <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                     </template>
                 </Column>
                 <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -85,11 +85,11 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel }">
-                        <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
-                        </Dropdown>
+                        </Select>
                     </template>
                 </Column>
                 <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
@@ -197,7 +197,7 @@ export default {
             {{ formatDate(data.date) }}
         </template>
         <template #filter="{ filterModel }">
-            <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+            <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
         </template>
     </Column>
     <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -213,11 +213,11 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel }">
-            <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
-            </Dropdown>
+            </Select>
         </template>
     </Column>
     <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
@@ -299,7 +299,7 @@ export default {
                     {{ formatDate(data.date) }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                 </template>
             </Column>
             <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -315,11 +315,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
@@ -492,7 +492,7 @@ export default {
                     {{ formatDate(data.date) }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                 </template>
             </Column>
             <Column field="balance" header="Balance" sortable filterField="balance" dataType="numeric" style="min-width: 10rem">
@@ -508,11 +508,11 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
-                    </Dropdown>
+                    </Select>
                 </template>
             </Column>
             <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 12rem">
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index e1d7ecb08..a50e30640 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -88,7 +88,7 @@
 
         <div class="field">
             <label for="inventoryStatus" class="mb-3">Inventory Status</label>
-            <Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
+            <Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
                 <template #value="slotProps">
                     <div v-if="slotProps.value && slotProps.value.value">
                         <Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" />
@@ -100,7 +100,7 @@
                         {{ slotProps.placeholder }}
                     </span>
                 </template>
-            </Dropdown>
+            </Select>
         </div>
 
         <div class="field">
@@ -327,7 +327,7 @@ export default {
 
             <div class="field">
 				<label for="inventoryStatus" class="mb-3">Inventory Status</label>
-				<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
+				<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 					<template #value="slotProps">
 						<div v-if="slotProps.value && slotProps.value.value">
                             <Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" />
@@ -339,7 +339,7 @@ export default {
 							{{slotProps.placeholder}}
 						</span>
 					</template>
-				</Dropdown>
+				</Select>
 			</div>
 
             <div class="field">
@@ -618,7 +618,7 @@ export default {
 
             <div class="field">
 				<label for="inventoryStatus" class="mb-3">Inventory Status</label>
-				<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
+				<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 					<template #value="slotProps">
 						<div v-if="slotProps.value && slotProps.value.value">
                             <Tag :value="slotProps.value.value" :severity="getStatusLabel(slotProps.value.label)" />
@@ -630,7 +630,7 @@ export default {
 							{{slotProps.placeholder}}
 						</span>
 					</template>
-				</Dropdown>
+				</Select>
 			</div>
 
             <div class="field">
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index a858551ff..2dffc64d0 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
-                <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
                 <div class="grid grid-nogutter">
@@ -63,7 +63,7 @@ export default {
                 basic: `
 <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
     <template #header>
-        <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+        <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
     </template>
     <template #list="slotProps">
         <div class="grid grid-nogutter">
@@ -105,7 +105,7 @@ export default {
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
-                <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
                 <div class="grid grid-nogutter">
@@ -202,7 +202,7 @@ export default {
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
-                <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+                <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
                 <div class="grid grid-nogutter">
diff --git a/doc/calendar/AccessibilityDoc.vue b/doc/datepicker/AccessibilityDoc.vue
similarity index 93%
rename from doc/calendar/AccessibilityDoc.vue
rename to doc/datepicker/AccessibilityDoc.vue
index a1449d556..57654e513 100644
--- a/doc/calendar/AccessibilityDoc.vue
+++ b/doc/datepicker/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
         </p>
         <p>
-            The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
+            The optional datepicker button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
             <i>chooseDate</i> key of the aria property from the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and
             appended to the label to be able to notify users about the current value.
         </p>
@@ -26,7 +26,7 @@
             <i>pm</i> keys.
         </p>
 
-        <p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
+        <p>DatePicker also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
 
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
 
@@ -197,12 +197,12 @@ export default {
             code: {
                 basic: `
 <label for="date1">Date</label>
-<Calendar inputId="date1" />
+<DatePicker inputId="date1" />
 
 <span id="date2">Date</span>
-<Calendar aria-labelledby="date2" />
+<DatePicker aria-labelledby="date2" />
 
-<Calendar aria-label="Date" />
+<DatePicker aria-label="Date" />
 `
             }
         };
diff --git a/doc/calendar/BasicDoc.vue b/doc/datepicker/BasicDoc.vue
similarity index 76%
rename from doc/calendar/BasicDoc.vue
rename to doc/datepicker/BasicDoc.vue
index 4cfbf95d9..6e104059f 100644
--- a/doc/calendar/BasicDoc.vue
+++ b/doc/datepicker/BasicDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
+        <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" />
+        <DatePicker v-model="date" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" />
+<DatePicker v-model="date" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" />
+        <DatePicker v-model="date" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" />
+        <DatePicker v-model="date" />
     </div>
 </template>
 
diff --git a/doc/calendar/ButtonBarDoc.vue b/doc/datepicker/ButtonBarDoc.vue
similarity index 81%
rename from doc/calendar/ButtonBarDoc.vue
rename to doc/datepicker/ButtonBarDoc.vue
index f45b54a46..b676beb36 100644
--- a/doc/calendar/ButtonBarDoc.vue
+++ b/doc/datepicker/ButtonBarDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" showButtonBar />
+        <DatePicker v-model="date" showButtonBar />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" showButtonBar />
+<DatePicker v-model="date" showButtonBar />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" showButtonBar />
+        <DatePicker v-model="date" showButtonBar />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" showButtonBar />
+        <DatePicker v-model="date" showButtonBar />
     </div>
 </template>
 
diff --git a/doc/calendar/DateTemplateDoc.vue b/doc/datepicker/DateTemplateDoc.vue
similarity index 90%
rename from doc/calendar/DateTemplateDoc.vue
rename to doc/datepicker/DateTemplateDoc.vue
index f551de20f..cf9832361 100644
--- a/doc/calendar/DateTemplateDoc.vue
+++ b/doc/datepicker/DateTemplateDoc.vue
@@ -3,12 +3,12 @@
         <p>Custom content can be placed inside date cells with the <i>date</i> slot that takes a Date as a parameter.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date">
+        <DatePicker v-model="date">
             <template #date="slotProps">
                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
                 <template v-else>{{ slotProps.date.day }}</template>
             </template>
-        </Calendar>
+        </DatePicker>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,22 +20,22 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date">
+<DatePicker v-model="date">
     <template #date="slotProps">
         <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
         <template v-else>{{ slotProps.date.day }}</template>
     </template>
-</Calendar>
+</DatePicker>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date">
+        <DatePicker v-model="date">
             <template #date="slotProps">
                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
                 <template v-else>{{ slotProps.date.day }}</template>
             </template>
-        </Calendar>
+        </DatePicker>
     </div>
 </template>
 
@@ -52,12 +52,12 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date">
+        <DatePicker v-model="date">
             <template #date="slotProps">
                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
                 <template v-else>{{ slotProps.date.day }}</template>
             </template>
-        </Calendar>
+        </DatePicker>
     </div>
 </template>
 
diff --git a/doc/calendar/DisabledDoc.vue b/doc/datepicker/DisabledDoc.vue
similarity index 73%
rename from doc/calendar/DisabledDoc.vue
rename to doc/datepicker/DisabledDoc.vue
index dd04bdb7e..f9b32657c 100644
--- a/doc/calendar/DisabledDoc.vue
+++ b/doc/datepicker/DisabledDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
+        <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" disabled />
+        <DatePicker v-model="date" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" disabled />
+<DatePicker v-model="date" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" disabled />
+        <DatePicker v-model="date" disabled />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" disabled />
+        <DatePicker v-model="date" disabled />
     </div>
 </template>
 
diff --git a/doc/calendar/FilledDoc.vue b/doc/datepicker/FilledDoc.vue
similarity index 81%
rename from doc/calendar/FilledDoc.vue
rename to doc/datepicker/FilledDoc.vue
index 12e681e32..8ae08c91f 100644
--- a/doc/calendar/FilledDoc.vue
+++ b/doc/datepicker/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" variant="filled" />
+        <DatePicker v-model="date" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" variant="filled" />
+<DatePicker v-model="date" variant="filled" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" variant="filled" />
+        <DatePicker v-model="date" variant="filled" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" variant="filled" />
+        <DatePicker v-model="date" variant="filled" />
     </div>
 </template>
 
diff --git a/doc/calendar/FloatLabelDoc.vue b/doc/datepicker/FloatLabelDoc.vue
similarity index 84%
rename from doc/calendar/FloatLabelDoc.vue
rename to doc/datepicker/FloatLabelDoc.vue
index 5c7a4f7f7..270cf1e77 100644
--- a/doc/calendar/FloatLabelDoc.vue
+++ b/doc/datepicker/FloatLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <FloatLabel>
-            <Calendar v-model="date" inputId="birth_date" />
+            <DatePicker v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
         </FloatLabel>
     </div>
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <FloatLabel>
-    <Calendar v-model="date" inputId="birth_date" />
+    <DatePicker v-model="date" inputId="birth_date" />
     <label for="birth_date">Birth Date</label>
 </FloatLabel>
 `,
@@ -27,7 +27,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <FloatLabel>
-            <Calendar v-model="date" inputId="birth_date" />
+            <DatePicker v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
         </FloatLabel>
     </div>
@@ -47,7 +47,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <FloatLabel>
-            <Calendar v-model="date" inputId="birth_date" />
+            <DatePicker v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
         </FloatLabel>
     </div>
diff --git a/doc/calendar/FormatDoc.vue b/doc/datepicker/FormatDoc.vue
similarity index 89%
rename from doc/calendar/FormatDoc.vue
rename to doc/datepicker/FormatDoc.vue
index b869493f5..b0686d6f9 100644
--- a/doc/calendar/FormatDoc.vue
+++ b/doc/datepicker/FormatDoc.vue
@@ -22,7 +22,7 @@
         </ul>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" dateFormat="dd/mm/yy" />
+        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -34,12 +34,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" dateFormat="dd/mm/yy" />
+<DatePicker v-model="date" dateFormat="dd/mm/yy" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" dateFormat="dd/mm/yy" />
+        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
     </div>
 </template>
 
@@ -56,7 +56,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" dateFormat="dd/mm/yy" />
+        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
     </div>
 </template>
 
diff --git a/doc/calendar/IconDoc.vue b/doc/datepicker/IconDoc.vue
similarity index 70%
rename from doc/calendar/IconDoc.vue
rename to doc/datepicker/IconDoc.vue
index 907ebdaeb..76f09beb9 100644
--- a/doc/calendar/IconDoc.vue
+++ b/doc/datepicker/IconDoc.vue
@@ -5,19 +5,19 @@
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <Calendar v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
+            <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
         </div>
         <div class="flex-auto">
             <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+            <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
         </div>
         <div class="flex-auto">
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+            <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="{ clickCallback }">
                     <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
                 </template>
-            </Calendar>
+            </DatePicker>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -32,32 +32,32 @@ export default {
             templatedisplay: null,
             code: {
                 basic: `
-<Calendar v-model="buttondisplay" showIcon :showOnFocus="false" />
-<Calendar v-model="icondisplay" showIcon iconDisplay="input" />
-<Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
+<DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" />
+<DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
+<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
     <template #inputicon="{ clickCallback }">
         <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
     </template>
-</Calendar>
+</DatePicker>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <Calendar v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
+            <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
         </div>
         <div class="flex-auto">
             <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+            <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
         </div>
         <div class="flex-auto">
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+            <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="{ clickCallback }">
                     <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
                 </template>
-            </Calendar>
+            </DatePicker>
         </div>
     </div>
 </template>
@@ -79,19 +79,19 @@ export default {
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
-            <Calendar v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
+            <DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
         </div>
         <div class="flex-auto">
             <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
-            <Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+            <DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
         </div>
         <div class="flex-auto">
             <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
-            <Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+            <DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
                 <template #inputicon="{ clickCallback }">
                     <InputIcon class="pi pi-clock cursor-pointer" @click="clickCallback" />
                 </template>
-            </Calendar>
+            </DatePicker>
         </div>
     </div>
 </template>
diff --git a/doc/calendar/ImportDoc.vue b/doc/datepicker/ImportDoc.vue
similarity index 86%
rename from doc/calendar/ImportDoc.vue
rename to doc/datepicker/ImportDoc.vue
index 8e80ca9eb..57eccf5e9 100644
--- a/doc/calendar/ImportDoc.vue
+++ b/doc/datepicker/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import Calendar from 'primevue/calendar';
+import DatePicker from 'primevue/datepicker';
 `
             }
         };
diff --git a/doc/calendar/InlineDoc.vue b/doc/datepicker/InlineDoc.vue
similarity index 71%
rename from doc/calendar/InlineDoc.vue
rename to doc/datepicker/InlineDoc.vue
index addd9f5ae..a349fe429 100644
--- a/doc/calendar/InlineDoc.vue
+++ b/doc/datepicker/InlineDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
+        <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" inline showWeek />
+        <DatePicker v-model="date" inline showWeek />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" inline showWeek />
+<DatePicker v-model="date" inline showWeek />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" inline showWeek />
+        <DatePicker v-model="date" inline showWeek />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" inline showWeek />
+        <DatePicker v-model="date" inline showWeek />
     </div>
 </template>
 
diff --git a/doc/calendar/InvalidDoc.vue b/doc/datepicker/InvalidDoc.vue
similarity index 74%
rename from doc/calendar/InvalidDoc.vue
rename to doc/datepicker/InvalidDoc.vue
index 0526ffc3e..d6e231e8b 100644
--- a/doc/calendar/InvalidDoc.vue
+++ b/doc/datepicker/InvalidDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
+        <p>DatePicker is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" invalid />
+        <DatePicker v-model="date" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" invalid />
+<DatePicker v-model="date" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" invalid />
+        <DatePicker v-model="date" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" invalid />
+        <DatePicker v-model="date" invalid />
     </div>
 </template>
 
diff --git a/doc/calendar/LocaleDoc.vue b/doc/datepicker/LocaleDoc.vue
similarity index 100%
rename from doc/calendar/LocaleDoc.vue
rename to doc/datepicker/LocaleDoc.vue
diff --git a/doc/calendar/MinMaxDoc.vue b/doc/datepicker/MinMaxDoc.vue
similarity index 87%
rename from doc/calendar/MinMaxDoc.vue
rename to doc/datepicker/MinMaxDoc.vue
index 50002f094..c0779e2e1 100644
--- a/doc/calendar/MinMaxDoc.vue
+++ b/doc/datepicker/MinMaxDoc.vue
@@ -3,7 +3,7 @@
         <p>Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,12 +17,12 @@ export default {
             maxDate: null,
             code: {
                 basic: `
-<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+<DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
 </template>
 
@@ -57,7 +57,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
 </template>
 
diff --git a/doc/calendar/MonthPickerDoc.vue b/doc/datepicker/MonthPickerDoc.vue
similarity index 76%
rename from doc/calendar/MonthPickerDoc.vue
rename to doc/datepicker/MonthPickerDoc.vue
index 8080fc80f..23f3ea541 100644
--- a/doc/calendar/MonthPickerDoc.vue
+++ b/doc/datepicker/MonthPickerDoc.vue
@@ -3,7 +3,7 @@
         <p>Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" view="month" dateFormat="mm/yy" />
+        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" view="month" dateFormat="mm/yy" />
+<DatePicker v-model="date" view="month" dateFormat="mm/yy" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" view="month" dateFormat="mm/yy" />
+        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" view="month" dateFormat="mm/yy" />
+        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
     </div>
 </template>
 
diff --git a/doc/calendar/MultipleDoc.vue b/doc/datepicker/MultipleDoc.vue
similarity index 73%
rename from doc/calendar/MultipleDoc.vue
rename to doc/datepicker/MultipleDoc.vue
index 6e42da1d3..b85819ffc 100644
--- a/doc/calendar/MultipleDoc.vue
+++ b/doc/datepicker/MultipleDoc.vue
@@ -3,7 +3,7 @@
         <p>In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
+        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             dates: null,
             code: {
                 basic: `
-<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
+<DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
+        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
+        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
 </template>
 
diff --git a/doc/calendar/MultipleMonthsDoc.vue b/doc/datepicker/MultipleMonthsDoc.vue
similarity index 79%
rename from doc/calendar/MultipleMonthsDoc.vue
rename to doc/datepicker/MultipleMonthsDoc.vue
index 3fe82289b..310d9dcfa 100644
--- a/doc/calendar/MultipleMonthsDoc.vue
+++ b/doc/datepicker/MultipleMonthsDoc.vue
@@ -3,7 +3,7 @@
         <p>Number of months to display is configured with the <i>numberOfMonths</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" :numberOfMonths="2" />
+        <DatePicker v-model="date" :numberOfMonths="2" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" :numberOfMonths="2" />
+<DatePicker v-model="date" :numberOfMonths="2" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" :numberOfMonths="2" />
+        <DatePicker v-model="date" :numberOfMonths="2" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" :numberOfMonths="2" />
+        <DatePicker v-model="date" :numberOfMonths="2" />
     </div>
 </template>
 
diff --git a/doc/calendar/RangeDoc.vue b/doc/datepicker/RangeDoc.vue
similarity index 75%
rename from doc/calendar/RangeDoc.vue
rename to doc/datepicker/RangeDoc.vue
index f332d9417..786a0ed6f 100644
--- a/doc/calendar/RangeDoc.vue
+++ b/doc/datepicker/RangeDoc.vue
@@ -3,7 +3,7 @@
         <p>A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
+        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             dates: null,
             code: {
                 basic: `
-<Calendar v-model="dates" selectionMode="range" :manualInput="false" />
+<DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
+        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
+        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
 </template>
 
diff --git a/doc/datepicker/TimeDoc.vue b/doc/datepicker/TimeDoc.vue
new file mode 100644
index 000000000..1e48fd59c
--- /dev/null
+++ b/doc/datepicker/TimeDoc.vue
@@ -0,0 +1,95 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-3 p-fluid">
+        <div class="flex-auto">
+            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            datetime12h: null,
+            datetime24h: null,
+            time: null,
+            code: {
+                basic: `
+<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-3 p-fluid">
+        <div class="flex-auto">
+            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            datetime12h: null,
+            datetime24h: null,
+            time: null
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-3 p-fluid">
+        <div class="flex-auto">
+            <label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
+            <DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
+            <DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
+        </div>
+        <div class="flex-auto">
+            <label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
+            <DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const datetime12h = ref();
+const datetime24h = ref();
+const time = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/YearPickerDoc.vue b/doc/datepicker/YearPickerDoc.vue
similarity index 77%
rename from doc/calendar/YearPickerDoc.vue
rename to doc/datepicker/YearPickerDoc.vue
index f1926788a..7f7731546 100644
--- a/doc/calendar/YearPickerDoc.vue
+++ b/doc/datepicker/YearPickerDoc.vue
@@ -3,7 +3,7 @@
         <p>Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" view="year" dateFormat="yy" />
+        <DatePicker v-model="date" view="year" dateFormat="yy" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" view="year" dateFormat="yy" />
+<DatePicker v-model="date" view="year" dateFormat="yy" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" view="year" dateFormat="yy" />
+        <DatePicker v-model="date" view="year" dateFormat="yy" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" view="year" dateFormat="yy" />
+        <DatePicker v-model="date" view="year" dateFormat="yy" />
     </div>
 </template>
 
diff --git a/doc/calendar/form/VeeValidateDoc.vue b/doc/datepicker/form/VeeValidateDoc.vue
similarity index 89%
rename from doc/calendar/form/VeeValidateDoc.vue
rename to doc/datepicker/form/VeeValidateDoc.vue
index b3b8d5044..11a6ff873 100644
--- a/doc/calendar/form/VeeValidateDoc.vue
+++ b/doc/datepicker/form/VeeValidateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
-            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
             <small id="date-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -48,7 +48,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
-            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
             <small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -61,7 +61,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
-            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
             <small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -104,7 +104,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
-            <Calendar id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
+            <DatePicker id="date" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="date-error" />
             <small class="p-error" id="date-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/calendar/pt/PTImage.vue b/doc/datepicker/pt/PTImage.vue
similarity index 100%
rename from doc/calendar/pt/PTImage.vue
rename to doc/datepicker/pt/PTImage.vue
diff --git a/doc/dropdown/pt/index.vue b/doc/datepicker/pt/index.vue
similarity index 78%
rename from doc/dropdown/pt/index.vue
rename to doc/datepicker/pt/index.vue
index ff5cf3e27..ea98571bb 100644
--- a/doc/dropdown/pt/index.vue
+++ b/doc/datepicker/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Dropdown Pass Through</h1>
+            <h1>DatePicker Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc.dropdown',
-                    label: 'Dropdown PT Options',
+                    id: 'pt.doc.datepicker',
+                    label: 'DatePicker PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Dropdown')
+                    data: getPTOption('DatePicker')
                 }
             ]
         };
diff --git a/doc/calendar/theming/StyledDoc.vue b/doc/datepicker/theming/StyledDoc.vue
similarity index 93%
rename from doc/calendar/theming/StyledDoc.vue
rename to doc/datepicker/theming/StyledDoc.vue
index 41d7a8d76..de76b75a6 100644
--- a/doc/calendar/theming/StyledDoc.vue
+++ b/doc/datepicker/theming/StyledDoc.vue
@@ -12,15 +12,15 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-calendar</td>
+                    <td>p-datepicker</td>
                     <td>Main container element</td>
                 </tr>
                 <tr>
-                    <td>p-calendar-w-btn</td>
+                    <td>p-datepicker-w-btn</td>
                     <td>Main container element when button is enabled.</td>
                 </tr>
                 <tr>
-                    <td>p-calendar-timeonly</td>
+                    <td>p-datepicker-timeonly</td>
                     <td>Main container element in time picker only mode.</td>
                 </tr>
                 <tr>
diff --git a/doc/calendar/theming/TailwindDoc.vue b/doc/datepicker/theming/TailwindDoc.vue
similarity index 100%
rename from doc/calendar/theming/TailwindDoc.vue
rename to doc/datepicker/theming/TailwindDoc.vue
diff --git a/doc/calendar/theming/index.vue b/doc/datepicker/theming/index.vue
similarity index 96%
rename from doc/calendar/theming/index.vue
rename to doc/datepicker/theming/index.vue
index 7207166ef..5011792a0 100644
--- a/doc/calendar/theming/index.vue
+++ b/doc/datepicker/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Calendar Theming</h1>
+            <h1>DatePicker Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/sidebar/AccessibilityDoc.vue b/doc/drawer/AccessibilityDoc.vue
similarity index 81%
rename from doc/sidebar/AccessibilityDoc.vue
rename to doc/drawer/AccessibilityDoc.vue
index 8fbffc814..656026597 100644
--- a/doc/sidebar/AccessibilityDoc.vue
+++ b/doc/drawer/AccessibilityDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            Sidebar component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
-            addition <i>aria-modal</i> is added since focus is kept within the sidebar when opened.
+            Drawer component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
+            addition <i>aria-modal</i> is added since focus is kept within the drawer when opened.
         </p>
 
         <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
@@ -24,11 +24,11 @@
                         <td>
                             <i>tab</i>
                         </td>
-                        <td>Moves focus to the next the focusable element within the sidebar.</td>
+                        <td>Moves focus to the next the focusable element within the drawer.</td>
                     </tr>
                     <tr>
                         <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the previous the focusable element within the sidebar.</td>
+                        <td>Moves focus to the previous the focusable element within the drawer.</td>
                     </tr>
                     <tr>
                         <td>
@@ -54,13 +54,13 @@
                         <td>
                             <i>enter</i>
                         </td>
-                        <td>Closes the sidebar.</td>
+                        <td>Closes the drawer.</td>
                     </tr>
                     <tr>
                         <td>
                             <i>space</i>
                         </td>
-                        <td>Closes the sidebar.</td>
+                        <td>Closes the drawer.</td>
                     </tr>
                 </tbody>
             </table>
@@ -76,9 +76,9 @@ export default {
                 basic: `
 <Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
 
-<Sidebar id="sbar" v-model:visible="visible" role="region" >
+<Drawer id="sbar" v-model:visible="visible" role="region" >
     <p>Content</p>
-</Sidebar>
+</Drawer>
 `
             }
         };
diff --git a/doc/sidebar/BasicDoc.vue b/doc/drawer/BasicDoc.vue
similarity index 83%
rename from doc/sidebar/BasicDoc.vue
rename to doc/drawer/BasicDoc.vue
index bfd6be4b2..1abae8de8 100644
--- a/doc/sidebar/BasicDoc.vue
+++ b/doc/drawer/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sidebar is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
+        <p>Drawer is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar">
+        <Drawer v-model:visible="visible" header="Drawer">
             <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>
+        </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,18 +19,18 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible" header="Sidebar">
+    <Drawer v-model:visible="visible" header="Drawer">
         <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>
+    </Drawer>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar">
+        <Drawer v-model:visible="visible" header="Drawer">
             <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>
+        </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
     </div>
 </template>
@@ -48,9 +48,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar">
+        <Drawer v-model:visible="visible" header="Drawer">
             <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>
+        </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
     </div>
 </template>
diff --git a/doc/sidebar/FullScreenDoc.vue b/doc/drawer/FullScreenDoc.vue
similarity index 85%
rename from doc/sidebar/FullScreenDoc.vue
rename to doc/drawer/FullScreenDoc.vue
index dcc590e17..d1a2cd61e 100644
--- a/doc/sidebar/FullScreenDoc.vue
+++ b/doc/drawer/FullScreenDoc.vue
@@ -3,9 +3,9 @@
         <p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" position="full">
+        <Drawer v-model:visible="visible" header="Drawer" position="full">
             <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>
+        </Drawer>
         <Button icon="pi pi-window-maximize" @click="visible = true" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,18 +19,18 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible" header="Sidebar" position="full">
+    <Drawer v-model:visible="visible" header="Drawer" position="full">
         <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>
+    </Drawer>
     <Button icon="pi pi-window-maximize" @click="visible = true" />
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" position="full">
+        <Drawer v-model:visible="visible" header="Drawer" position="full">
             <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>
+        </Drawer>
         <Button icon="pi pi-window-maximize" @click="visible = true" />
     </div>
 </template>
@@ -48,9 +48,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" position="full">
+        <Drawer v-model:visible="visible" header="Drawer" position="full">
             <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>
+        </Drawer>
         <Button icon="pi pi-window-maximize" @click="visible = true" />
     </div>
 </template>
diff --git a/doc/sidebar/HeadlessDoc.vue b/doc/drawer/HeadlessDoc.vue
similarity index 99%
rename from doc/sidebar/HeadlessDoc.vue
rename to doc/drawer/HeadlessDoc.vue
index 2f1b27927..7b1ec7bc7 100644
--- a/doc/sidebar/HeadlessDoc.vue
+++ b/doc/drawer/HeadlessDoc.vue
@@ -3,7 +3,7 @@
         <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
+        <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
                 <div class="flex flex-column h-full">
                     <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@@ -186,7 +186,7 @@
                     </div>
                 </div>
             </template>
-        </Sidebar>
+        </Drawer>
         <Button icon="pi pi-bars" @click="visible = true" />
     </div>
     <DocSectionCode :code="code" />
@@ -199,7 +199,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Sidebar v-model:visible="visible">
+<Drawer v-model:visible="visible">
     <template #container="{ closeCallback }">
         <div class="flex flex-column h-full">
             <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@@ -376,13 +376,13 @@ export default {
             </div>
         </div>
     </template>
-</Sidebar>
+</Drawer>
 <Button icon="pi pi-bars" @click="visible = true" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
+        <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
                 <div class="flex flex-column h-full">
                     <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@@ -565,7 +565,7 @@ export default {
                     </div>
                 </div>
             </template>
-        </Sidebar>
+        </Drawer>
         <Button icon="pi pi-bars" @click="visible = true" />
     </div>
 </template>
@@ -583,7 +583,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
+        <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
                 <div class="flex flex-column h-full">
                     <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
@@ -766,7 +766,7 @@ export default {
                     </div>
                 </div>
             </template>
-        </Sidebar>
+        </Drawer>
         <Button icon="pi pi-bars" @click="visible = true" />
     </div>
 </template>
diff --git a/doc/chips/ImportDoc.vue b/doc/drawer/ImportDoc.vue
similarity index 88%
rename from doc/chips/ImportDoc.vue
rename to doc/drawer/ImportDoc.vue
index 9af9410ec..2ac7335ec 100644
--- a/doc/chips/ImportDoc.vue
+++ b/doc/drawer/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import Chips from 'primevue/chips';
+import Drawer from 'primevue/drawer';
 `
             }
         };
diff --git a/doc/sidebar/PositionDoc.vue b/doc/drawer/PositionDoc.vue
similarity index 77%
rename from doc/sidebar/PositionDoc.vue
rename to doc/drawer/PositionDoc.vue
index c6d9b1fea..ea3c1287c 100644
--- a/doc/sidebar/PositionDoc.vue
+++ b/doc/drawer/PositionDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sidebar location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
+        <p>Drawer location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
     </DocSectionText>
     <div class="card">
         <div class="flex gap-2 justify-content-center">
@@ -10,21 +10,21 @@
             <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
         </div>
 
-        <Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
+        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
+        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
+        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
+        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
             <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>
+        </Drawer>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -46,21 +46,21 @@ export default {
     <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
 </div>
 
-<Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
+<Drawer v-model:visible="visibleLeft" header="Left Drawer">
     <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>
+</Drawer>
 
-<Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
+<Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
     <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>
+</Drawer>
 
-<Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
+<Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
     <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>
+</Drawer>
 
-<Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
+<Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
     <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>
+</Drawer>
 `,
                 options: `
 <template>
@@ -72,21 +72,21 @@ export default {
             <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
         </div>
 
-        <Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
+        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
+        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
+        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
+        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
             <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>
+        </Drawer>
     </div>
 </template>
 
@@ -113,21 +113,21 @@ export default {
             <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
         </div>
 
-        <Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
+        <Drawer v-model:visible="visibleLeft" header="Left Drawer">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
+        <Drawer v-model:visible="visibleRight" header="Right Drawer" position="right">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
+        <Drawer v-model:visible="visibleTop" header="Top Drawer" position="top" style="height: auto">
             <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>
+        </Drawer>
 
-        <Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
+        <Drawer v-model:visible="visibleBottom" header="Bottom Drawer" position="bottom" style="height: auto">
             <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>
+        </Drawer>
     </div>
 </template>
 
diff --git a/doc/sidebar/SizeDoc.vue b/doc/drawer/SizeDoc.vue
similarity index 76%
rename from doc/sidebar/SizeDoc.vue
rename to doc/drawer/SizeDoc.vue
index a2c791673..2ec2a682f 100644
--- a/doc/sidebar/SizeDoc.vue
+++ b/doc/drawer/SizeDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sidebar dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
+        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
+        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
             <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>
+        </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
     </div>
     <DocSectionCode :code="code" />
@@ -19,18 +19,18 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
+    <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
         <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>
+    </Drawer>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
+        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
             <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>
+        </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
     </div>
 </template>
@@ -48,9 +48,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
+        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-20rem lg:w-30rem">
             <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>
+        </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
     </div>
 </template>
diff --git a/doc/sidebar/TemplateDoc.vue b/doc/drawer/TemplateDoc.vue
similarity index 93%
rename from doc/sidebar/TemplateDoc.vue
rename to doc/drawer/TemplateDoc.vue
index bffbcffda..2836610d3 100644
--- a/doc/sidebar/TemplateDoc.vue
+++ b/doc/drawer/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>Additional content at the header section is provided using the <i>header</i> template.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
+        <Drawer v-model:visible="visible">
             <template #header>
                 <div class="flex align-items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@@ -11,7 +11,7 @@
                 </div>
             </template>
             <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>
+        </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
     <DocSectionCode :code="code" />
@@ -24,7 +24,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Sidebar v-model:visible="visible">
+<Drawer v-model:visible="visible">
     <template #header>
         <div class="flex align-items-center gap-2">
             <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
@@ -32,13 +32,13 @@ export default {
         </div>
     </template>
     <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>
+</Drawer>
 <Button icon="pi pi-plus" @click="visible = true" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
+        <Drawer v-model:visible="visible">
             <template #header>
                 <div class="flex align-items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@@ -46,7 +46,7 @@ export default {
                 </div>
             </template>
             <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>
+        </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
 </template>
@@ -64,7 +64,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
+        <Drawer v-model:visible="visible">
             <template #header>
                 <div class="flex align-items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@@ -72,7 +72,7 @@ export default {
                 </div>
             </template>
             <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>
+        </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
 </template>
diff --git a/doc/sidebar/pt/PTImage.vue b/doc/drawer/pt/PTImage.vue
similarity index 100%
rename from doc/sidebar/pt/PTImage.vue
rename to doc/drawer/pt/PTImage.vue
diff --git a/doc/chips/pt/index.vue b/doc/drawer/pt/index.vue
similarity index 79%
rename from doc/chips/pt/index.vue
rename to doc/drawer/pt/index.vue
index 30757ad87..f65755fa7 100644
--- a/doc/chips/pt/index.vue
+++ b/doc/drawer/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Chips Pass Through</h1>
+            <h1>Drawer Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc.chips',
-                    label: 'Chips PT Options',
+                    id: 'pt.doc.drawer',
+                    label: 'Drawer PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Chips')
+                    data: getPTOption('Drawer')
                 }
             ]
         };
diff --git a/doc/drawer/theming/StyledDoc.vue b/doc/drawer/theming/StyledDoc.vue
new file mode 100644
index 000000000..8a1cbff80
--- /dev/null
+++ b/doc/drawer/theming/StyledDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-drawer</td>
+                    <td>Container element</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-left</td>
+                    <td>Container element of left drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-right</td>
+                    <td>Container element of right drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-top</td>
+                    <td>Container element of top drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-bottom</td>
+                    <td>Container element of bottom drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-full</td>
+                    <td>Container element of a full screen drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-visible</td>
+                    <td>Container element when drawer is visible.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-close</td>
+                    <td>Close anchor element.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-sm</td>
+                    <td>Small sized drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-md</td>
+                    <td>Medium sized drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-lg</td>
+                    <td>Large sized drawer.</td>
+                </tr>
+                <tr>
+                    <td>p-drawer-mask</td>
+                    <td>Modal layer of the drawer.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/chips/theming/TailwindDoc.vue b/doc/drawer/theming/TailwindDoc.vue
similarity index 100%
rename from doc/chips/theming/TailwindDoc.vue
rename to doc/drawer/theming/TailwindDoc.vue
diff --git a/doc/chips/theming/index.vue b/doc/drawer/theming/index.vue
similarity index 96%
rename from doc/chips/theming/index.vue
rename to doc/drawer/theming/index.vue
index 289b364ec..423fcd69a 100644
--- a/doc/chips/theming/index.vue
+++ b/doc/drawer/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Chips Theming</h1>
+            <h1>Drawer Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/chips/AccessibilityDoc.vue b/doc/inputchips/AccessibilityDoc.vue
similarity index 96%
rename from doc/chips/AccessibilityDoc.vue
rename to doc/inputchips/AccessibilityDoc.vue
index 2e04cdeac..4375bd463 100644
--- a/doc/chips/AccessibilityDoc.vue
+++ b/doc/inputchips/AccessibilityDoc.vue
@@ -73,12 +73,12 @@ export default {
             code: {
                 basic: `
 <label for="chips1">Tags</label>
-<Chips inputId="chips1" />
+<InputChips inputId="chips1" />
 
 <span id="chips2">Tags</span>
-<Chips aria-labelledby="chips2" />
+<InputChips aria-labelledby="chips2" />
 
-<Chips aria-label="Tags" />
+<InputChips aria-label="Tags" />
 `
             }
         };
diff --git a/doc/chips/BasicDoc.vue b/doc/inputchips/BasicDoc.vue
similarity index 73%
rename from doc/chips/BasicDoc.vue
rename to doc/inputchips/BasicDoc.vue
index 10e05aae0..a50b0b0e3 100644
--- a/doc/chips/BasicDoc.vue
+++ b/doc/inputchips/BasicDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Chips is used as a controlled input with <i>v-model</i> property where it should be an array.</p>
+        <p>InputChips is used as a controlled input with <i>v-model</i> property where it should be an array.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value" />
+        <InputChips v-model="value" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" />
+<InputChips v-model="value" />
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" />
+        <InputChips v-model="value" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" />
+        <InputChips v-model="value" />
     </div>
 </template>
 
diff --git a/doc/chips/DisabledDoc.vue b/doc/inputchips/DisabledDoc.vue
similarity index 81%
rename from doc/chips/DisabledDoc.vue
rename to doc/inputchips/DisabledDoc.vue
index 5ccf6232e..2a2918b18 100644
--- a/doc/chips/DisabledDoc.vue
+++ b/doc/inputchips/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value" disabled />
+        <InputChips v-model="value" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" disabled />
+<InputChips v-model="value" disabled />
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" disabled />
+        <InputChips v-model="value" disabled />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" disabled />
+        <InputChips v-model="value" disabled />
     </div>
 </template>
 
diff --git a/doc/chips/FilledDoc.vue b/doc/inputchips/FilledDoc.vue
similarity index 80%
rename from doc/chips/FilledDoc.vue
rename to doc/inputchips/FilledDoc.vue
index 66eb74f6c..a323575e2 100644
--- a/doc/chips/FilledDoc.vue
+++ b/doc/inputchips/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value" variant="filled" />
+        <InputChips v-model="value" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" variant="filled" />
+<InputChips v-model="value" variant="filled" />
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" variant="filled" />
+        <InputChips v-model="value" variant="filled" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" variant="filled" />
+        <InputChips v-model="value" variant="filled" />
     </div>
 </template>
 
diff --git a/doc/chips/FloatLabelDoc.vue b/doc/inputchips/FloatLabelDoc.vue
similarity index 72%
rename from doc/chips/FloatLabelDoc.vue
rename to doc/inputchips/FloatLabelDoc.vue
index eda9aa707..e31519f9a 100644
--- a/doc/chips/FloatLabelDoc.vue
+++ b/doc/inputchips/FloatLabelDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card p-fluid">
         <FloatLabel>
-            <Chips id="chips" v-model="value" />
-            <label for="chips">Chips</label>
+            <InputChips id="chips" v-model="value" />
+            <label for="chips">InputChips</label>
         </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
@@ -19,16 +19,16 @@ export default {
             code: {
                 basic: `
 <FloatLabel>
-    <Chips id="chips" v-model="value" />
-    <label for="chips">Chips</label>
+    <InputChips id="chips" v-model="value" />
+    <label for="chips">InputChips</label>
 </FloatLabel>
 `,
                 options: `
 <template>
     <div class="card p-fluid">
         <FloatLabel>
-            <Chips id="chips" v-model="value" />
-            <label for="chips">Chips</label>
+            <InputChips id="chips" v-model="value" />
+            <label for="chips">InputChips</label>
         </FloatLabel>
     </div>
 </template>
@@ -47,8 +47,8 @@ export default {
 <template>
     <div class="card p-fluid">
         <FloatLabel>
-            <Chips id="chips" v-model="value" />
-            <label for="chips">Chips</label>
+            <InputChips id="chips" v-model="value" />
+            <label for="chips">InputChips</label>
         </FloatLabel>
     </div>
 </template>
diff --git a/doc/inputswitch/ImportDoc.vue b/doc/inputchips/ImportDoc.vue
similarity index 85%
rename from doc/inputswitch/ImportDoc.vue
rename to doc/inputchips/ImportDoc.vue
index d4ce239e7..4aef80d59 100644
--- a/doc/inputswitch/ImportDoc.vue
+++ b/doc/inputchips/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import InputSwitch from 'primevue/inputswitch';
+import InputChips from 'primevue/inputchips';
 `
             }
         };
diff --git a/doc/chips/InvalidDoc.vue b/doc/inputchips/InvalidDoc.vue
similarity index 83%
rename from doc/chips/InvalidDoc.vue
rename to doc/inputchips/InvalidDoc.vue
index 284b01c40..1ae889523 100644
--- a/doc/chips/InvalidDoc.vue
+++ b/doc/inputchips/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value" invalid />
+        <InputChips v-model="value" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" invalid />
+<InputChips v-model="value" invalid />
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" invalid />
+        <InputChips v-model="value" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" invalid />
+        <InputChips v-model="value" invalid />
     </div>
 </template>
 
diff --git a/doc/chips/SeparatorDoc.vue b/doc/inputchips/SeparatorDoc.vue
similarity index 81%
rename from doc/chips/SeparatorDoc.vue
rename to doc/inputchips/SeparatorDoc.vue
index 165ac6955..9c91baec0 100644
--- a/doc/chips/SeparatorDoc.vue
+++ b/doc/inputchips/SeparatorDoc.vue
@@ -3,7 +3,7 @@
         <p>A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is <i>,</i> to create a new item when comma key is pressed.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value" separator="," />
+        <InputChips v-model="value" separator="," />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" separator=","  />
+<InputChips v-model="value" separator=","  />
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" separator="," />
+        <InputChips v-model="value" separator="," />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" separator=","  />
+        <InputChips v-model="value" separator=","  />
     </div>
 </template>
 
diff --git a/doc/chips/TemplateDoc.vue b/doc/inputchips/TemplateDoc.vue
similarity index 89%
rename from doc/chips/TemplateDoc.vue
rename to doc/inputchips/TemplateDoc.vue
index d521a35d8..a851d1305 100644
--- a/doc/chips/TemplateDoc.vue
+++ b/doc/inputchips/TemplateDoc.vue
@@ -3,14 +3,14 @@
         <p>Chip content is customized using <i>item</i> slot that receives a single chip value as a parameter.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value">
+        <InputChips v-model="value">
             <template #chip="slotProps">
                 <div>
                     <span>{{ slotProps.value }} - (active) </span>
                     <i class="pi pi-user-plus" style="font-size: 14px"></i>
                 </div>
             </template>
-        </Chips>
+        </InputChips>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,26 +22,26 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value">
+<InputChips v-model="value">
     <template #chip="slotProps">
         <div>
             <span>{{ slotProps.value }} - (active) </span>
             <i class="pi pi-user-plus" style="font-size: 14px"></i>
         </div>
     </template>
-</Chips>
+</InputChips>
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value">
+        <InputChips v-model="value">
             <template #chip="slotProps">
                 <div>
                     <span>{{ slotProps.value }} - (active) </span>
                     <i class="pi pi-user-plus" style="font-size: 14px"></i>
                 </div>
             </template>
-        </Chips>
+        </InputChips>
     </div>
 </template>
 
@@ -58,14 +58,14 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value">
+        <InputChips v-model="value">
             <template #chip="slotProps">
                 <div>
                     <span>{{ slotProps.value }} - (active) </span>
                     <i class="pi pi-user-plus" style="font-size: 14px"></i>
                 </div>
             </template>
-        </Chips>
+        </InputChips>
     </div>
 </template>
 
diff --git a/doc/chips/form/VeeValidateDoc.vue b/doc/inputchips/form/VeeValidateDoc.vue
similarity index 89%
rename from doc/chips/form/VeeValidateDoc.vue
rename to doc/inputchips/form/VeeValidateDoc.vue
index f07869c2d..913286520 100644
--- a/doc/chips/form/VeeValidateDoc.vue
+++ b/doc/inputchips/form/VeeValidateDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
+            <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small id="chips-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" class="w-7rem" />
         </form>
@@ -46,7 +46,7 @@ export default {
 <template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
+            <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" class="w-7rem" />
         </form>
@@ -58,7 +58,7 @@ export default {
 <template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
+            <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" class="w-7rem" />
         </form>
@@ -100,7 +100,7 @@ export default {
 <template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
+            <InputChips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
             <small class="p-error" id="chips-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" class="w-7rem" />
         </form>
diff --git a/doc/chips/pt/PTImage.vue b/doc/inputchips/pt/PTImage.vue
similarity index 100%
rename from doc/chips/pt/PTImage.vue
rename to doc/inputchips/pt/PTImage.vue
diff --git a/doc/inputchips/pt/index.vue b/doc/inputchips/pt/index.vue
new file mode 100644
index 000000000..cc4ee34bd
--- /dev/null
+++ b/doc/inputchips/pt/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputChips 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.inputchips',
+                    label: 'InputChips PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputChips')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chips/theming/StyledDoc.vue b/doc/inputchips/theming/StyledDoc.vue
similarity index 78%
rename from doc/chips/theming/StyledDoc.vue
rename to doc/inputchips/theming/StyledDoc.vue
index d5f249936..fac59f265 100644
--- a/doc/chips/theming/StyledDoc.vue
+++ b/doc/inputchips/theming/StyledDoc.vue
@@ -13,23 +13,23 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-chips</td>
+                    <td>p-inputchips</td>
                     <td>Container element</td>
                 </tr>
                 <tr>
-                    <td>p-chips-token</td>
+                    <td>p-inputchips-token</td>
                     <td>Chip element container.</td>
                 </tr>
                 <tr>
-                    <td>p-chips-token-icon</td>
+                    <td>p-inputchips-token-icon</td>
                     <td>Icon of a chip.</td>
                 </tr>
                 <tr>
-                    <td>p-chips-token-label</td>
+                    <td>p-inputchips-token-label</td>
                     <td>label of a chip.</td>
                 </tr>
                 <tr>
-                    <td>p-chips-input-token</td>
+                    <td>p-inputchips-input-token</td>
                     <td>Container of input element.</td>
                 </tr>
             </tbody>
diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/inputchips/theming/TailwindDoc.vue
similarity index 100%
rename from doc/dropdown/theming/TailwindDoc.vue
rename to doc/inputchips/theming/TailwindDoc.vue
diff --git a/doc/inputchips/theming/index.vue b/doc/inputchips/theming/index.vue
new file mode 100644
index 000000000..563ef1277
--- /dev/null
+++ b/doc/inputchips/theming/index.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputChips Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/theming/index.vue b/doc/inputotp/theming/index.vue
index b9c44bb04..64647f842 100644
--- a/doc/inputotp/theming/index.vue
+++ b/doc/inputotp/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>InputSwitch Theming</h1>
+            <h1>InputOtp Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/overlaypanel/pt/index.vue b/doc/overlaypanel/pt/index.vue
deleted file mode 100644
index ac2aedfa7..000000000
--- a/doc/overlaypanel/pt/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<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 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')
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/doc/overlaypanel/theming/index.vue b/doc/overlaypanel/theming/index.vue
deleted file mode 100644
index 18878f39b..000000000
--- a/doc/overlaypanel/theming/index.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>OverlayPanel Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import StyledDoc from './StyledDoc.vue';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    component: StyledDoc
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/doc/paginator/AccessibilityDoc.vue b/doc/paginator/AccessibilityDoc.vue
index c063dcaac..20f35ddb9 100644
--- a/doc/paginator/AccessibilityDoc.vue
+++ b/doc/paginator/AccessibilityDoc.vue
@@ -16,7 +16,7 @@
         <p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
 
         <p>
-            Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
+            Rows per page dropdown internally uses a dropdown component, refer to the <NuxtLink to="/select">select</NuxtLink> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
             <i>aria.rowsPerPageLabel</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API.
         </p>
 
@@ -58,6 +58,6 @@
         </div>
 
         <h3>Rows Per Page Dropdown Keyboard Support</h3>
-        <p>Refer to the <NuxtLink to="/dropdown">dropdown</NuxtLink> documentation for more details about keyboard support.</p>
+        <p>Refer to the <NuxtLink to="/select">select</NuxtLink> documentation for more details about keyboard support.</p>
     </DocSectionText>
 </template>
diff --git a/doc/overlaypanel/AccessibilityDoc.vue b/doc/popover/AccessibilityDoc.vue
similarity index 72%
rename from doc/overlaypanel/AccessibilityDoc.vue
rename to doc/popover/AccessibilityDoc.vue
index f0d4a50f1..3b88b00b4 100644
--- a/doc/overlaypanel/AccessibilityDoc.vue
+++ b/doc/popover/AccessibilityDoc.vue
@@ -2,12 +2,12 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            OverlayPanel component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
-            <i>aria-modal</i> is added since focus is kept within the popup.
+            Popover component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition <i>aria-modal</i> is
+            added since focus is kept within the popup.
         </p>
-        <p>OverlayPanel adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p>
+        <p>Popover adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p>
 
-        <h3>OverlayPanel Keyboard Support</h3>
+        <h3>Popover Keyboard Support</h3>
         <p>When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.</p>
 
         <div class="doc-tablewrapper">
diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/popover/BasicDoc.vue
similarity index 94%
rename from doc/overlaypanel/BasicDoc.vue
rename to doc/popover/BasicDoc.vue
index 113ebdf91..47feb8d00 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/popover/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>OverlayPanel is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
+        <p>Popover is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
 
-        <OverlayPanel ref="op">
+        <Popover ref="op">
             <div class="flex flex-column gap-3 w-25rem">
                 <div>
                     <span class="font-medium text-900 block mb-2">Share this document</span>
@@ -19,7 +19,7 @@
                 <div>
                     <span class="font-medium text-900 block mb-2">Invite Member</span>
                     <InputGroup>
-                        <Chips disabled></Chips>
+                        <InputChips disabled></InputChips>
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
@@ -40,7 +40,7 @@
                     </ul>
                 </div>
             </div>
-        </OverlayPanel>
+        </Popover>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -58,7 +58,7 @@ export default {
                 basic: `
 <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
-<OverlayPanel ref="op">
+<Popover ref="op">
     <div class="flex flex-column gap-3 w-25rem">
         <div>
             <span class="font-medium text-900 block mb-2">Share this document</span>
@@ -72,7 +72,7 @@ export default {
         <div>
             <span class="font-medium text-900 block mb-2">Invite Member</span>
             <InputGroup>
-                <Chips disabled></Chips>
+                <InputChips disabled></InputChips>
                 <Button label="Invite" icon="pi pi-users"></Button>
             </InputGroup>
         </div>
@@ -93,14 +93,14 @@ export default {
             </ul>
         </div>
     </div>
-</OverlayPanel>
+</Popover>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
-        <OverlayPanel ref="op">
+        <Popover ref="op">
             <div class="flex flex-column gap-3 w-25rem">
                 <div>
                     <span class="font-medium text-900 block mb-2">Share this document</span>
@@ -114,7 +114,7 @@ export default {
                 <div>
                     <span class="font-medium text-900 block mb-2">Invite Member</span>
                     <InputGroup>
-                        <Chips disabled></Chips>
+                        <InputChips disabled></InputChips>
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
@@ -135,7 +135,7 @@ export default {
                     </ul>
                 </div>
             </div>
-        </OverlayPanel>
+        </Popover>
     </div>
 </template>
 
@@ -163,7 +163,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
-        <OverlayPanel ref="op">
+        <Popover ref="op">
             <div class="flex flex-column gap-3 w-25rem">
                 <div>
                     <span class="font-medium text-900 block mb-2">Share this document</span>
@@ -177,7 +177,7 @@ export default {
                 <div>
                     <span class="font-medium text-900 block mb-2">Invite Member</span>
                     <InputGroup>
-                        <Chips disabled></Chips>
+                        <InputChips disabled></InputChips>
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
@@ -198,7 +198,7 @@ export default {
                     </ul>
                 </div>
             </div>
-        </OverlayPanel>
+        </Popover>
     </div>
 </template>
 
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/popover/DataTableDoc.vue
similarity index 97%
rename from doc/overlaypanel/DataTableDoc.vue
rename to doc/popover/DataTableDoc.vue
index 33aac9f4a..433834a93 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/popover/DataTableDoc.vue
@@ -17,7 +17,7 @@
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body">
+        <Popover ref="op" appendTo="body">
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -29,7 +29,7 @@
                     <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
                 </Column>
             </DataTable>
-        </OverlayPanel>
+        </Popover>
     </div>
     <DocSectionCode :code="code" :service="['ProductService']" />
 </template>
@@ -57,7 +57,7 @@ export default {
     <span class="text-600">{{ selectedProduct.category }}</span>
 </div>
 
-<OverlayPanel ref="op" appendTo="body">
+<Popover ref="op" appendTo="body">
     <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
         <Column field="name" header="Name" sortable style="width: 50%"></Column>
         <Column header="Image" style="width: 20%">
@@ -71,7 +71,7 @@ export default {
             </template>
         </Column>
     </DataTable>
-</OverlayPanel>
+</Popover>
 `,
                 options: `
 <template>
@@ -90,7 +90,7 @@ export default {
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body">
+        <Popover ref="op" appendTo="body">
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -104,7 +104,7 @@ export default {
                     </template>
                 </Column>
             </DataTable>
-        </OverlayPanel>
+        </Popover>
     </div>
 </template>
 
@@ -152,7 +152,7 @@ export default {
             <span class="text-600">{{ selectedProduct.category }}</span>
         </div>
 
-        <OverlayPanel ref="op" appendTo="body">
+        <Popover ref="op" appendTo="body">
             <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                 <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                 <Column header="Image">
@@ -166,7 +166,7 @@ export default {
                     </template>
                 </Column>
             </DataTable>
-        </OverlayPanel>
+        </Popover>
     </div>
 </template>
 
diff --git a/doc/sidebar/ImportDoc.vue b/doc/popover/ImportDoc.vue
similarity index 87%
rename from doc/sidebar/ImportDoc.vue
rename to doc/popover/ImportDoc.vue
index 0c809aef7..0506d4cdd 100644
--- a/doc/sidebar/ImportDoc.vue
+++ b/doc/popover/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import Sidebar from 'primevue/sidebar';
+import Popover from 'primevue/popover';
 `
             }
         };
diff --git a/doc/overlaypanel/pt/PTImage.vue b/doc/popover/pt/PTImage.vue
similarity index 100%
rename from doc/overlaypanel/pt/PTImage.vue
rename to doc/popover/pt/PTImage.vue
diff --git a/doc/sidebar/pt/index.vue b/doc/popover/pt/index.vue
similarity index 79%
rename from doc/sidebar/pt/index.vue
rename to doc/popover/pt/index.vue
index 7485585fc..c5e3326d5 100644
--- a/doc/sidebar/pt/index.vue
+++ b/doc/popover/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Sidebar Pass Through</h1>
+            <h1>Popover Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc.sidebar',
-                    label: 'Sidebar PT Options',
+                    id: 'pt.doc.popover',
+                    label: 'Popover PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Sidebar')
+                    data: getPTOption('Popover')
                 }
             ]
         };
diff --git a/doc/overlaypanel/theming/StyledDoc.vue b/doc/popover/theming/StyledDoc.vue
similarity index 82%
rename from doc/overlaypanel/theming/StyledDoc.vue
rename to doc/popover/theming/StyledDoc.vue
index 242e0a875..8dd2349cf 100644
--- a/doc/overlaypanel/theming/StyledDoc.vue
+++ b/doc/popover/theming/StyledDoc.vue
@@ -13,15 +13,15 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-overlaypanel</td>
+                    <td>p-popover</td>
                     <td>Container element.</td>
                 </tr>
                 <tr>
-                    <td>p-overlaypanel-content</td>
+                    <td>p-popover-content</td>
                     <td>Content of the panel.</td>
                 </tr>
                 <tr>
-                    <td>p-overlaypanel-close</td>
+                    <td>p-popover-close</td>
                     <td>Close icon.</td>
                 </tr>
             </tbody>
diff --git a/doc/inputswitch/theming/TailwindDoc.vue b/doc/popover/theming/TailwindDoc.vue
similarity index 100%
rename from doc/inputswitch/theming/TailwindDoc.vue
rename to doc/popover/theming/TailwindDoc.vue
diff --git a/doc/sidebar/theming/index.vue b/doc/popover/theming/index.vue
similarity index 96%
rename from doc/sidebar/theming/index.vue
rename to doc/popover/theming/index.vue
index 6cc09c2d4..169457cee 100644
--- a/doc/sidebar/theming/index.vue
+++ b/doc/popover/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Sidebar Theming</h1>
+            <h1>Popover Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/dropdown/AccessibilityDoc.vue b/doc/select/AccessibilityDoc.vue
similarity index 86%
rename from doc/dropdown/AccessibilityDoc.vue
rename to doc/select/AccessibilityDoc.vue
index 93d97de4a..d87799708 100644
--- a/doc/dropdown/AccessibilityDoc.vue
+++ b/doc/select/AccessibilityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The select element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
             editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
             option to read during keyboard navigation within the popup list.
         </p>
@@ -27,7 +27,7 @@
                 <tbody>
                     <tr>
                         <td><i>tab</i></td>
-                        <td>Moves focus to the dropdown element.</td>
+                        <td>Moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>space</i></td>
@@ -47,7 +47,7 @@
                     </tr>
                     <tr>
                         <td><i>any printable character</i></td>
-                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and dropdown is not editable then first option receives the focus.</td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and select is not editable then first option receives the focus.</td>
                     </tr>
                 </tbody>
             </table>
@@ -73,15 +73,15 @@
                     </tr>
                     <tr>
                         <td><i>enter</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>space</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>escape</i></td>
-                        <td>Closes the popup, then moves focus to the dropdown element.</td>
+                        <td>Closes the popup, then moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>down arrow</i></td>
@@ -93,23 +93,23 @@
                     </tr>
                     <tr>
                         <td><i>alt</i> + <i>up arrow</i></td>
-                        <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>left arrow</i></td>
-                        <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
+                        <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
                     </tr>
                     <tr>
                         <td><i>right arrow</i></td>
-                        <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
+                        <td>If the select is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
                     </tr>
                     <tr>
                         <td><i>home</i></td>
-                        <td>If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
+                        <td>If the select is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
                     </tr>
                     <tr>
                         <td><i>end</i></td>
-                        <td>If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                        <td>If the select is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
                     </tr>
                     <tr>
                         <td><i>pageUp</i></td>
@@ -121,7 +121,7 @@
                     </tr>
                     <tr>
                         <td><i>any printable character</i></td>
-                        <td>Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.</td>
+                        <td>Moves focus to the option whose label starts with the characters being typed if select is not editable.</td>
                     </tr>
                 </tbody>
             </table>
@@ -163,11 +163,11 @@
                     </tr>
                     <tr>
                         <td><i>enter</i></td>
-                        <td>Closes the popup and moves focus to the dropdown element.</td>
+                        <td>Closes the popup and moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>escape</i></td>
-                        <td>Closes the popup and moves focus to the dropdown element.</td>
+                        <td>Closes the popup and moves focus to the select element.</td>
                     </tr>
                     <tr>
                         <td><i>tab</i></td>
@@ -186,9 +186,9 @@ export default {
             code: {
                 basic: `
 <span id="dd1"></span>Options</span>
-<Dropdown aria-labelledby="dd1" />
+<select aria-labelledby="dd1" />
 
-<Dropdown aria-label="Options" />
+<select aria-label="Options" />
 `
             }
         };
diff --git a/doc/dropdown/BasicDoc.vue b/doc/select/BasicDoc.vue
similarity index 63%
rename from doc/dropdown/BasicDoc.vue
rename to doc/select/BasicDoc.vue
index 344285ae6..52717343b 100644
--- a/doc/dropdown/BasicDoc.vue
+++ b/doc/select/BasicDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Dropdown is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
-            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+            Select is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note that,
+            when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,12 +25,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -54,7 +54,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/CheckmarkDoc.vue b/doc/select/CheckmarkDoc.vue
similarity index 71%
rename from doc/dropdown/CheckmarkDoc.vue
rename to doc/select/CheckmarkDoc.vue
index 324a21128..0edb6f5fa 100644
--- a/doc/dropdown/CheckmarkDoc.vue
+++ b/doc/select/CheckmarkDoc.vue
@@ -3,7 +3,7 @@
         <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/ClearIconDoc.vue b/doc/select/ClearIconDoc.vue
similarity index 73%
rename from doc/dropdown/ClearIconDoc.vue
rename to doc/select/ClearIconDoc.vue
index a43790fa6..33bd33838 100644
--- a/doc/dropdown/ClearIconDoc.vue
+++ b/doc/select/ClearIconDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the Dropdown.</p>
+        <p>When <i>showClear</i> is enabled, a clear icon is added to reset the Select.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/DisabledDoc.vue b/doc/select/DisabledDoc.vue
similarity index 68%
rename from doc/dropdown/DisabledDoc.vue
rename to doc/select/DisabledDoc.vue
index 8e938cdda..90dda8f1f 100644
--- a/doc/dropdown/DisabledDoc.vue
+++ b/doc/select/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
+<Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/EditableDoc.vue b/doc/select/EditableDoc.vue
similarity index 74%
rename from doc/dropdown/EditableDoc.vue
rename to doc/select/EditableDoc.vue
index 89a1a0b79..bc38d9c4f 100644
--- a/doc/dropdown/EditableDoc.vue
+++ b/doc/select/EditableDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>editable</i> is present, the input can also be entered with typing.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/FilledDoc.vue b/doc/select/FilledDoc.vue
similarity index 74%
rename from doc/dropdown/FilledDoc.vue
rename to doc/select/FilledDoc.vue
index ef3fee2e1..d1bb5c132 100644
--- a/doc/dropdown/FilledDoc.vue
+++ b/doc/select/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/FilterDoc.vue b/doc/select/FilterDoc.vue
similarity index 88%
rename from doc/dropdown/FilterDoc.vue
rename to doc/select/FilterDoc.vue
index dd7df8d72..7263b6806 100644
--- a/doc/dropdown/FilterDoc.vue
+++ b/doc/select/FilterDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Dropdown provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
+        <p>Select provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
@@ -19,7 +19,7 @@
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -43,7 +43,7 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
     <template #value="slotProps">
         <div v-if="slotProps.value" class="flex align-items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -59,12 +59,12 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</Dropdown>
+</Select>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -80,7 +80,7 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
 </template>
 
@@ -109,7 +109,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -125,7 +125,7 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
 </template>
 
diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/select/FloatLabelDoc.vue
similarity index 82%
rename from doc/dropdown/FloatLabelDoc.vue
rename to doc/select/FloatLabelDoc.vue
index c149d71af..c8a57f1b5 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/select/FloatLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <FloatLabel class="w-full md:w-14rem">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </FloatLabel>
     </div>
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <FloatLabel class="w-full md:w-14rem">
-    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
     <label for="dd-city">Select a City</label>
 </FloatLabel>
 `,
@@ -34,7 +34,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <FloatLabel class="w-full md:w-14rem">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </FloatLabel>
     </div>
@@ -61,7 +61,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <FloatLabel class="w-full md:w-14rem">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
         </FloatLabel>
     </div>
diff --git a/doc/dropdown/GroupDoc.vue b/doc/select/GroupDoc.vue
similarity index 88%
rename from doc/dropdown/GroupDoc.vue
rename to doc/select/GroupDoc.vue
index 554dc3eae..a6bf80e05 100644
--- a/doc/dropdown/GroupDoc.vue
+++ b/doc/select/GroupDoc.vue
@@ -6,14 +6,14 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -57,26 +57,26 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
             <div>{{ slotProps.option.label }}</div>
         </div>
     </template>
-</Dropdown>
+</Select>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
 </template>
 
@@ -125,14 +125,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+        <Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
                     <div>{{ slotProps.option.label }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
 </template>
 
diff --git a/doc/dropdown/ImportDoc.vue b/doc/select/ImportDoc.vue
similarity index 87%
rename from doc/dropdown/ImportDoc.vue
rename to doc/select/ImportDoc.vue
index 0a05279a1..8ee8a0a1b 100644
--- a/doc/dropdown/ImportDoc.vue
+++ b/doc/select/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import Dropdown from 'primevue/dropdown';
+import Select from 'primevue/select';
 `
             }
         };
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/select/InvalidDoc.vue
similarity index 75%
rename from doc/dropdown/InvalidDoc.vue
rename to doc/select/InvalidDoc.vue
index c40310c8d..c7dbaa3fb 100644
--- a/doc/dropdown/InvalidDoc.vue
+++ b/doc/select/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
+        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/dropdown/LazyVirtualScrollDoc.vue b/doc/select/LazyVirtualScrollDoc.vue
similarity index 90%
rename from doc/dropdown/LazyVirtualScrollDoc.vue
rename to doc/select/LazyVirtualScrollDoc.vue
index c714be829..42b0c9053 100644
--- a/doc/dropdown/LazyVirtualScrollDoc.vue
+++ b/doc/select/LazyVirtualScrollDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs" />
     <div class="card flex justify-content-center">
-        <Dropdown
+        <Select
             v-model="selectedItem"
             :options="items"
             optionLabel="label"
@@ -23,13 +23,13 @@ export default {
             loading: false,
             code: {
                 basic: `
-<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
     :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
     </div>
 </template>
@@ -72,7 +72,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
     </div>
 </template>
diff --git a/doc/dropdown/LoadingStateDoc.vue b/doc/select/LoadingStateDoc.vue
similarity index 66%
rename from doc/dropdown/LoadingStateDoc.vue
rename to doc/select/LoadingStateDoc.vue
index 03f964528..53da781b1 100644
--- a/doc/dropdown/LoadingStateDoc.vue
+++ b/doc/select/LoadingStateDoc.vue
@@ -3,7 +3,7 @@
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
+        <Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
+<Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
+        <Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
     </div>
 </template>
 
@@ -29,7 +29,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
+        <Select placeholder="Loading..." loading class="w-full md:w-14rem"></Select>
     </div>
 </template>
 
diff --git a/doc/dropdown/TemplateDoc.vue b/doc/select/TemplateDoc.vue
similarity index 90%
rename from doc/dropdown/TemplateDoc.vue
rename to doc/select/TemplateDoc.vue
index 0ce1b7d21..ef9442245 100644
--- a/doc/dropdown/TemplateDoc.vue
+++ b/doc/select/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>Options and the selected option display support templating with <i>option</i> and <i>value</i> respectively.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
@@ -19,7 +19,7 @@
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -43,7 +43,7 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
     <template #value="slotProps">
         <div v-if="slotProps.value" class="flex align-items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -59,12 +59,12 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</Dropdown>
+</Select>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -80,7 +80,7 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
 </template>
 
@@ -109,7 +109,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -125,7 +125,7 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
-        </Dropdown>
+        </Select>
     </div>
 </template>
 
diff --git a/doc/dropdown/VirtualScrollDoc.vue b/doc/select/VirtualScrollDoc.vue
similarity index 77%
rename from doc/dropdown/VirtualScrollDoc.vue
rename to doc/select/VirtualScrollDoc.vue
index c844579d2..775ae0887 100644
--- a/doc/dropdown/VirtualScrollDoc.vue
+++ b/doc/select/VirtualScrollDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>
             VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the
-            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Dropdown.
+            <NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> for more information about the available options as it is used internally by Select.
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,13 +19,13 @@ export default {
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
                 basic: `
-<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
     :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
     </div>
 </template>
@@ -44,7 +44,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+        <Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
     </div>
 </template>
diff --git a/doc/dropdown/form/VeeValidateDoc.vue b/doc/select/form/VeeValidateDoc.vue
similarity index 92%
rename from doc/dropdown/form/VeeValidateDoc.vue
rename to doc/select/form/VeeValidateDoc.vue
index 26321dd82..9afca402e 100644
--- a/doc/dropdown/form/VeeValidateDoc.vue
+++ b/doc/select/form/VeeValidateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <FloatLabel>
-                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
+                <Select id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
             </FloatLabel>
             <small id="dd-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
@@ -57,7 +57,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <FloatLabel>
-                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
+                <Select id="dd" v-model="value" :options="cities" optionLabel="name"
                     :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
             </FloatLabel>
@@ -73,7 +73,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <FloatLabel>
-                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
+                <Select id="dd" v-model="value" :options="cities" optionLabel="name"
                     :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
             </FloatLabel>
@@ -130,7 +130,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <FloatLabel>
-                <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
+                <Select id="dd" v-model="value" :options="cities" optionLabel="name"
                     :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
             </FloatLabel>
diff --git a/doc/dropdown/pt/PTImage.vue b/doc/select/pt/PTImage.vue
similarity index 100%
rename from doc/dropdown/pt/PTImage.vue
rename to doc/select/pt/PTImage.vue
diff --git a/doc/calendar/pt/index.vue b/doc/select/pt/index.vue
similarity index 78%
rename from doc/calendar/pt/index.vue
rename to doc/select/pt/index.vue
index 259fef8a9..bf9ccc9f7 100644
--- a/doc/calendar/pt/index.vue
+++ b/doc/select/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Calendar Pass Through</h1>
+            <h1>Select Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc.calendar',
-                    label: 'Calendar PT Options',
+                    id: 'pt.doc.select',
+                    label: 'Select PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Calendar')
+                    data: getPTOption('Select')
                 }
             ]
         };
diff --git a/doc/dropdown/theming/StyledDoc.vue b/doc/select/theming/StyledDoc.vue
similarity index 78%
rename from doc/dropdown/theming/StyledDoc.vue
rename to doc/select/theming/StyledDoc.vue
index fb151e889..4508958cf 100644
--- a/doc/dropdown/theming/StyledDoc.vue
+++ b/doc/select/theming/StyledDoc.vue
@@ -12,39 +12,39 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-dropdown</td>
+                    <td>p-select</td>
                     <td>Container element.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-label</td>
+                    <td>p-select-label</td>
                     <td>Element to display label of selected option.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-trigger</td>
+                    <td>p-select-trigger</td>
                     <td>Icon element.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-panel</td>
+                    <td>p-select-panel</td>
                     <td>Icon element.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-items-wrapper</td>
+                    <td>p-select-items-wrapper</td>
                     <td>Wrapper element of items list.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-items</td>
+                    <td>p-select-items</td>
                     <td>List element of items.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-item</td>
+                    <td>p-select-item</td>
                     <td>An item in the list.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-filter-container</td>
+                    <td>p-select-filter-container</td>
                     <td>Container of filter input.</td>
                 </tr>
                 <tr>
-                    <td>p-dropdown-filter</td>
+                    <td>p-select-filter</td>
                     <td>Filter element.</td>
                 </tr>
                 <tr>
diff --git a/doc/overlaypanel/theming/TailwindDoc.vue b/doc/select/theming/TailwindDoc.vue
similarity index 100%
rename from doc/overlaypanel/theming/TailwindDoc.vue
rename to doc/select/theming/TailwindDoc.vue
diff --git a/doc/dropdown/theming/index.vue b/doc/select/theming/index.vue
similarity index 96%
rename from doc/dropdown/theming/index.vue
rename to doc/select/theming/index.vue
index f5031bcdb..67b14ad45 100644
--- a/doc/dropdown/theming/index.vue
+++ b/doc/select/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>Dropdown Theming</h1>
+            <h1>Select Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/sidebar/theming/StyledDoc.vue b/doc/sidebar/theming/StyledDoc.vue
deleted file mode 100644
index 01d68fc52..000000000
--- a/doc/sidebar/theming/StyledDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>List of class names used in the styled mode.</p>
-    </DocSectionText>
-
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Element</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>p-sidebar</td>
-                    <td>Container element</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-left</td>
-                    <td>Container element of left sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-right</td>
-                    <td>Container element of right sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-top</td>
-                    <td>Container element of top sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-bottom</td>
-                    <td>Container element of bottom sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-full</td>
-                    <td>Container element of a full screen sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-visible</td>
-                    <td>Container element when sidebar is visible.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-close</td>
-                    <td>Close anchor element.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-sm</td>
-                    <td>Small sized sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-md</td>
-                    <td>Medium sized sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-lg</td>
-                    <td>Large sized sidebar.</td>
-                </tr>
-                <tr>
-                    <td>p-sidebar-mask</td>
-                    <td>Modal layer of the sidebar.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
diff --git a/doc/theming/styled/ScopedTokensDoc.vue b/doc/theming/styled/ScopedTokensDoc.vue
index dcfbe6982..2d3d45b7f 100644
--- a/doc/theming/styled/ScopedTokensDoc.vue
+++ b/doc/theming/styled/ScopedTokensDoc.vue
@@ -3,8 +3,8 @@
         <p>Design tokens can be scoped to a certain component using CSS variables. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens.</p>
     </DocSectionText>
     <div class="card flex justify-content-center gap-3">
-        <InputSwitch v-model="checked1" />
-        <InputSwitch v-model="checked2" :dt="amberSwitch" />
+        <ToggleSwitch v-model="checked1" />
+        <ToggleSwitch v-model="checked2" :dt="amberSwitch" />
     </div>
     <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
 </template>
@@ -48,8 +48,8 @@ export default {
                 basic: `
 <template>
     <div>
-        <InputSwitch v-model="checked1" />
-        <InputSwitch v-model="checked2" :dt="amberSwitch" />
+        <ToggleSwitch v-model="checked1" />
+        <ToggleSwitch v-model="checked2" :dt="amberSwitch" />
     </div>
 </template>
 
diff --git a/doc/theming/styled/csslayer/SpecificityDoc.vue b/doc/theming/styled/csslayer/SpecificityDoc.vue
index 6690dc4be..5adf9f6ba 100644
--- a/doc/theming/styled/csslayer/SpecificityDoc.vue
+++ b/doc/theming/styled/csslayer/SpecificityDoc.vue
@@ -7,12 +7,12 @@
             written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
         </p>
         <p>
-            For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, <i>.p-inputswitch .p-inputswitch-slider</i> selector needs to be overriden. Without the
-            layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
+            For example, let's assume you need to remove the rounded borders of the ToggleSwitch component defined by the theme in use. In order to achieve this, <i>.p-toggleswitch .p-toggleswitch-slider</i> selector needs to be overriden. Without
+            the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
             Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
         </p>
         <div class="card flex justify-content-center">
-            <InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
+            <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
         </div>
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
         <p>Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.</p>
@@ -27,7 +27,7 @@ export default {
             code: {
                 basic: `
 <template>
-    <InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
+    <ToggleSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
 </template>
 
 <script>
diff --git a/doc/inputswitch/AccessibilityDoc.vue b/doc/toggleswitch/AccessibilityDoc.vue
similarity index 77%
rename from doc/inputswitch/AccessibilityDoc.vue
rename to doc/toggleswitch/AccessibilityDoc.vue
index a7df07ae1..af92ea041 100644
--- a/doc/inputswitch/AccessibilityDoc.vue
+++ b/doc/toggleswitch/AccessibilityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with
+            ToggleSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with
             <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
         </p>
 
@@ -38,12 +38,12 @@ export default {
             code: {
                 basic: `
 <label for="switch1">Remember Me</label>
-<InputSwitch inputId="switch1" />
+<ToggleSwitch inputId="switch1" />
 
 <span id="switch2">Remember Me</span>
-<InputSwitch aria-labelledby="switch2" />
+<ToggleSwitch aria-labelledby="switch2" />
 
-<InputSwitch aria-label="Remember Me" />
+<ToggleSwitch aria-label="Remember Me" />
 `
             }
         };
diff --git a/doc/inputswitch/BasicDoc.vue b/doc/toggleswitch/BasicDoc.vue
similarity index 83%
rename from doc/inputswitch/BasicDoc.vue
rename to doc/toggleswitch/BasicDoc.vue
index 205711415..4104280b5 100644
--- a/doc/inputswitch/BasicDoc.vue
+++ b/doc/toggleswitch/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>Two-way value binding is defined using v-model.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" />
+        <ToggleSwitch v-model="checked" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" />
+<ToggleSwitch v-model="checked" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" />
+        <ToggleSwitch v-model="checked" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" />
+        <ToggleSwitch v-model="checked" />
     </div>
 </template>
 
diff --git a/doc/inputswitch/DisabledDoc.vue b/doc/toggleswitch/DisabledDoc.vue
similarity index 81%
rename from doc/inputswitch/DisabledDoc.vue
rename to doc/toggleswitch/DisabledDoc.vue
index ce3f37bf1..8bbcd6f3e 100644
--- a/doc/inputswitch/DisabledDoc.vue
+++ b/doc/toggleswitch/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" disabled />
+        <ToggleSwitch v-model="checked" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" disabled />
+<ToggleSwitch v-model="checked" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" disabled />
+        <ToggleSwitch v-model="checked" disabled />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" disabled />
+        <ToggleSwitch v-model="checked" disabled />
     </div>
 </template>
 
diff --git a/doc/overlaypanel/ImportDoc.vue b/doc/toggleswitch/ImportDoc.vue
similarity index 85%
rename from doc/overlaypanel/ImportDoc.vue
rename to doc/toggleswitch/ImportDoc.vue
index a6338d195..bedc30c65 100644
--- a/doc/overlaypanel/ImportDoc.vue
+++ b/doc/toggleswitch/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import OverlayPanel from 'primevue/overlaypanel';
+import ToggleSwitch from 'primevue/toggleswitch';
 `
             }
         };
diff --git a/doc/inputswitch/InvalidDoc.vue b/doc/toggleswitch/InvalidDoc.vue
similarity index 83%
rename from doc/inputswitch/InvalidDoc.vue
rename to doc/toggleswitch/InvalidDoc.vue
index 62756eb84..384ccc06a 100644
--- a/doc/inputswitch/InvalidDoc.vue
+++ b/doc/toggleswitch/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" invalid />
+        <ToggleSwitch v-model="checked" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" invalid />
+<ToggleSwitch v-model="checked" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" invalid />
+        <ToggleSwitch v-model="checked" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" invalid />
+        <ToggleSwitch v-model="checked" invalid />
     </div>
 </template>
 
diff --git a/doc/inputswitch/PreselectionDoc.vue b/doc/toggleswitch/PreselectionDoc.vue
similarity index 84%
rename from doc/inputswitch/PreselectionDoc.vue
rename to doc/toggleswitch/PreselectionDoc.vue
index 1ab8325ca..f60777ac8 100644
--- a/doc/inputswitch/PreselectionDoc.vue
+++ b/doc/toggleswitch/PreselectionDoc.vue
@@ -3,7 +3,7 @@
         <p>Enabling <i>checked</i> property displays the component as active initially.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" />
+        <ToggleSwitch v-model="checked" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: true,
             code: {
                 basic: `
-<InputSwitch v-model="checked" />
+<ToggleSwitch v-model="checked" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" />
+        <ToggleSwitch v-model="checked" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" />
+        <ToggleSwitch v-model="checked" />
     </div>
 </template>
 
diff --git a/doc/inputswitch/form/VeeValidateDoc.vue b/doc/toggleswitch/form/VeeValidateDoc.vue
similarity index 90%
rename from doc/inputswitch/form/VeeValidateDoc.vue
rename to doc/toggleswitch/form/VeeValidateDoc.vue
index 048ab0e57..4d3186932 100644
--- a/doc/inputswitch/form/VeeValidateDoc.vue
+++ b/doc/toggleswitch/form/VeeValidateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -48,7 +48,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -60,7 +60,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -103,7 +103,7 @@ export default {
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
-            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
+            <ToggleSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/inputswitch/pt/PTImage.vue b/doc/toggleswitch/pt/PTImage.vue
similarity index 100%
rename from doc/inputswitch/pt/PTImage.vue
rename to doc/toggleswitch/pt/PTImage.vue
diff --git a/doc/inputswitch/pt/index.vue b/doc/toggleswitch/pt/index.vue
similarity index 77%
rename from doc/inputswitch/pt/index.vue
rename to doc/toggleswitch/pt/index.vue
index 584d9a293..fd303c12a 100644
--- a/doc/inputswitch/pt/index.vue
+++ b/doc/toggleswitch/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>InputSwitch Pass Through</h1>
+            <h1>ToggleSwitch Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc.inputswitch',
-                    label: 'InputSwitch PT Options',
+                    id: 'pt.doc.toggleswitch',
+                    label: 'ToggleSwitch PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputSwitch')
+                    data: getPTOption('ToggleSwitch')
                 }
             ]
         };
diff --git a/doc/inputswitch/theming/StyledDoc.vue b/doc/toggleswitch/theming/StyledDoc.vue
similarity index 83%
rename from doc/inputswitch/theming/StyledDoc.vue
rename to doc/toggleswitch/theming/StyledDoc.vue
index 5df2ea33a..46ca982ae 100644
--- a/doc/inputswitch/theming/StyledDoc.vue
+++ b/doc/toggleswitch/theming/StyledDoc.vue
@@ -12,15 +12,15 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-inputswitch</td>
+                    <td>p-toggleswitch</td>
                     <td>Container element.</td>
                 </tr>
                 <tr>
-                    <td>p-inputswitch-checked</td>
+                    <td>p-toggleswitch-checked</td>
                     <td>Container element in active state.</td>
                 </tr>
                 <tr>
-                    <td>p-inputswitch-slider</td>
+                    <td>p-toggleswitch-slider</td>
                     <td>Slider element behind the handle.</td>
                 </tr>
             </tbody>
diff --git a/doc/sidebar/theming/TailwindDoc.vue b/doc/toggleswitch/theming/TailwindDoc.vue
similarity index 100%
rename from doc/sidebar/theming/TailwindDoc.vue
rename to doc/toggleswitch/theming/TailwindDoc.vue
diff --git a/doc/inputswitch/theming/index.vue b/doc/toggleswitch/theming/index.vue
similarity index 96%
rename from doc/inputswitch/theming/index.vue
rename to doc/toggleswitch/theming/index.vue
index b9c44bb04..962ab7b32 100644
--- a/doc/inputswitch/theming/index.vue
+++ b/doc/toggleswitch/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>InputSwitch Theming</h1>
+            <h1>ToggleSwitch Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
diff --git a/doc/tree/selection/MultipleDoc.vue b/doc/tree/selection/MultipleDoc.vue
index 2c90e6e49..2a5227ce2 100644
--- a/doc/tree/selection/MultipleDoc.vue
+++ b/doc/tree/selection/MultipleDoc.vue
@@ -8,7 +8,7 @@
     </DocSectionText>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
-            <InputSwitch v-model="checked" inputId="input-metakey" />
+            <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-30rem" :metaKeySelection="checked"></Tree>
@@ -34,7 +34,7 @@ export default {
 <template>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
-            <InputSwitch v-model="checked" inputId="input-metakey" />
+            <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-30rem" :metaKeySelection="checked"></Tree>
@@ -62,7 +62,7 @@ export default {
 <template>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
-            <InputSwitch v-model="checked" inputId="input-metakey" />
+            <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-30rem" :metaKeySelection="checked"></Tree>
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index 611e27a4f..ece1bc0b1 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -9,7 +9,7 @@
     <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center align-items-center mb-4 gap-2">
-                <InputSwitch v-model="metaKey" inputId="input-metakey" />
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
             <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
@@ -33,7 +33,7 @@ export default {
             metaKey: true,
             code: {
                 basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
 
 <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
     <Column field="name" header="Name" expander></Column>
@@ -45,7 +45,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
@@ -77,7 +77,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index d5abe1c95..fb78fa71d 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -9,7 +9,7 @@
     <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center align-items-center mb-4 gap-2">
-                <InputSwitch v-model="metaKey" inputId="input-metakey" />
+                <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
             <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
@@ -33,7 +33,7 @@ export default {
             metaKey: true,
             code: {
                 basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+<ToggleSwitch v-model="metaKey" inputId="input-metakey" />
 
 <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
     <Column field="name" header="Name" expander></Column>
@@ -45,7 +45,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
@@ -77,7 +77,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
+            <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 9a5dee4f2..e9147ea68 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -30,7 +30,7 @@
             <div class="config-panel-settings">
                 <div>
                     <span class="config-panel-label">Ripple</span>
-                    <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
+                    <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
                 </div>
             </div>
         </div>
diff --git a/pages/calendar/index.vue b/pages/datepicker/index.vue
similarity index 67%
rename from pages/calendar/index.vue
rename to pages/datepicker/index.vue
index c787de1b1..620163d32 100755
--- a/pages/calendar/index.vue
+++ b/pages/datepicker/index.vue
@@ -1,38 +1,30 @@
 <template>
-    <DocComponent
-        title="Vue Calendar Component"
-        header="Calendar"
-        description="Calendar, also known as DatePicker, is a form component to work with dates."
-        :componentDocs="docs"
-        :apiDocs="['Calendar']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
+    <DocComponent title="Vue DatePicker Component" header="DatePicker" description="DatePicker is a form component to work with dates." :componentDocs="docs" :apiDocs="['DatePicker']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
-import AccessibilityDoc from '@/doc/calendar/AccessibilityDoc';
-import BasicDoc from '@/doc/calendar/BasicDoc.vue';
-import ButtonBarDoc from '@/doc/calendar/ButtonBarDoc.vue';
-import DateTemplateDoc from '@/doc/calendar/DateTemplateDoc.vue';
-import DisabledDoc from '@/doc/calendar/DisabledDoc.vue';
-import FilledDoc from '@/doc/calendar/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/calendar/FloatLabelDoc.vue';
-import FormatDoc from '@/doc/calendar/FormatDoc.vue';
-import IconDoc from '@/doc/calendar/IconDoc.vue';
-import ImportDoc from '@/doc/calendar/ImportDoc.vue';
-import InlineDoc from '@/doc/calendar/InlineDoc.vue';
-import InvalidDoc from '@/doc/calendar/InvalidDoc.vue';
-import LocaleDoc from '@/doc/calendar/LocaleDoc.vue';
-import MinMaxDoc from '@/doc/calendar/MinMaxDoc.vue';
-import MonthPickerDoc from '@/doc/calendar/MonthPickerDoc.vue';
-import MultipleDoc from '@/doc/calendar/MultipleDoc.vue';
-import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc.vue';
-import RangeDoc from '@/doc/calendar/RangeDoc.vue';
-import TimeDoc from '@/doc/calendar/TimeDoc.vue';
-import YearPickerDoc from '@/doc/calendar/YearPickerDoc.vue';
-import PTComponent from '@/doc/calendar/pt/index.vue';
-import ThemingDoc from '@/doc/calendar/theming/index.vue';
+import AccessibilityDoc from '@/doc/datepicker/AccessibilityDoc';
+import BasicDoc from '@/doc/datepicker/BasicDoc.vue';
+import ButtonBarDoc from '@/doc/datepicker/ButtonBarDoc.vue';
+import DateTemplateDoc from '@/doc/datepicker/DateTemplateDoc.vue';
+import DisabledDoc from '@/doc/datepicker/DisabledDoc.vue';
+import FilledDoc from '@/doc/datepicker/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/datepicker/FloatLabelDoc.vue';
+import FormatDoc from '@/doc/datepicker/FormatDoc.vue';
+import IconDoc from '@/doc/datepicker/IconDoc.vue';
+import ImportDoc from '@/doc/datepicker/ImportDoc.vue';
+import InlineDoc from '@/doc/datepicker/InlineDoc.vue';
+import InvalidDoc from '@/doc/datepicker/InvalidDoc.vue';
+import LocaleDoc from '@/doc/datepicker/LocaleDoc.vue';
+import MinMaxDoc from '@/doc/datepicker/MinMaxDoc.vue';
+import MonthPickerDoc from '@/doc/datepicker/MonthPickerDoc.vue';
+import MultipleDoc from '@/doc/datepicker/MultipleDoc.vue';
+import MultipleMonthsDoc from '@/doc/datepicker/MultipleMonthsDoc.vue';
+import RangeDoc from '@/doc/datepicker/RangeDoc.vue';
+import TimeDoc from '@/doc/datepicker/TimeDoc.vue';
+import YearPickerDoc from '@/doc/datepicker/YearPickerDoc.vue';
+import PTComponent from '@/doc/datepicker/pt/index.vue';
+import ThemingDoc from '@/doc/datepicker/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/sidebar/index.vue b/pages/drawer/index.vue
similarity index 62%
rename from pages/sidebar/index.vue
rename to pages/drawer/index.vue
index ce33a008a..e41b4a22a 100755
--- a/pages/sidebar/index.vue
+++ b/pages/drawer/index.vue
@@ -1,26 +1,18 @@
 <template>
-    <DocComponent
-        title="Vue Sidebar Component"
-        header="Sidebar"
-        description="Sidebar, also known as Drawer, is a container component displayed as an overlay."
-        :componentDocs="docs"
-        :apiDocs="['Sidebar']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
+    <DocComponent title="Vue Drawer Component" header="Drawer" description="Drawer is a container component displayed as an overlay." :componentDocs="docs" :apiDocs="['Drawer']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
-import AccessibilityDoc from '@/doc/sidebar/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/sidebar/BasicDoc.vue';
-import FullScreenDoc from '@/doc/sidebar/FullScreenDoc.vue';
-import HeadlessDoc from '@/doc/sidebar/HeadlessDoc.vue';
-import ImportDoc from '@/doc/sidebar/ImportDoc.vue';
-import PositionDoc from '@/doc/sidebar/PositionDoc.vue';
-import SizeDoc from '@/doc/sidebar/SizeDoc.vue';
-import TemplateDoc from '@/doc/sidebar/TemplateDoc.vue';
-import PTComponent from '@/doc/sidebar/pt/index.vue';
-import ThemingDoc from '@/doc/sidebar/theming/index.vue';
+import AccessibilityDoc from '@/doc/drawer/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/drawer/BasicDoc.vue';
+import FullScreenDoc from '@/doc/drawer/FullScreenDoc.vue';
+import HeadlessDoc from '@/doc/drawer/HeadlessDoc.vue';
+import ImportDoc from '@/doc/drawer/ImportDoc.vue';
+import PositionDoc from '@/doc/drawer/PositionDoc.vue';
+import SizeDoc from '@/doc/drawer/SizeDoc.vue';
+import TemplateDoc from '@/doc/drawer/TemplateDoc.vue';
+import PTComponent from '@/doc/drawer/pt/index.vue';
+import ThemingDoc from '@/doc/drawer/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/chips/index.vue b/pages/inputchips/index.vue
similarity index 62%
rename from pages/chips/index.vue
rename to pages/inputchips/index.vue
index ad01e1275..d43056596 100755
--- a/pages/chips/index.vue
+++ b/pages/inputchips/index.vue
@@ -1,19 +1,27 @@
 <template>
-    <DocComponent title="Vue Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." :componentDocs="docs" :apiDocs="['Chips']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent
+        title="Vue InputChips Component"
+        header="InputChips"
+        description="InputChips is used to enter multiple values on an input field."
+        :componentDocs="docs"
+        :apiDocs="['InputChips']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
-import AccessibilityDoc from '@/doc/chips/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/chips/BasicDoc.vue';
-import DisabledDoc from '@/doc/chips/DisabledDoc.vue';
-import FilledDoc from '@/doc/chips/FilledDoc.vue';
-import FloatLabelDoc from '@/doc/chips/FloatLabelDoc.vue';
-import ImportDoc from '@/doc/chips/ImportDoc.vue';
-import InvalidDoc from '@/doc/chips/InvalidDoc.vue';
-import SeparatorDoc from '@/doc/chips/SeparatorDoc.vue';
-import TemplateDoc from '@/doc/chips/TemplateDoc.vue';
-import PTComponent from '@/doc/chips/pt/index.vue';
-import ThemingDoc from '@/doc/chips/theming/index.vue';
+import AccessibilityDoc from '@/doc/inputchips/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputchips/BasicDoc.vue';
+import DisabledDoc from '@/doc/inputchips/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputchips/FilledDoc.vue';
+import FloatLabelDoc from '@/doc/inputchips/FloatLabelDoc.vue';
+import ImportDoc from '@/doc/inputchips/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputchips/InvalidDoc.vue';
+import SeparatorDoc from '@/doc/inputchips/SeparatorDoc.vue';
+import TemplateDoc from '@/doc/inputchips/TemplateDoc.vue';
+import PTComponent from '@/doc/inputchips/pt/index.vue';
+import ThemingDoc from '@/doc/inputchips/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/overlaypanel/index.vue b/pages/popover/index.vue
similarity index 64%
rename from pages/overlaypanel/index.vue
rename to pages/popover/index.vue
index 1243cc65d..cc43c9a92 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/popover/index.vue
@@ -1,22 +1,22 @@
 <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."
+        header="Popover"
+        description="Popover is a container component that can overlay other components on page."
         :componentDocs="docs"
-        :apiDocs="['OverlayPanel']"
+        :apiDocs="['Popover']"
         :ptTabComponent="ptComponent"
         :themingDocs="themingDoc"
     />
 </template>
 
 <script>
-import AccessibilityDoc from '@/doc/overlaypanel/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/overlaypanel/BasicDoc.vue';
-import DataTableDoc from '@/doc/overlaypanel/DataTableDoc.vue';
-import ImportDoc from '@/doc/overlaypanel/ImportDoc.vue';
-import PTComponent from '@/doc/overlaypanel/pt/index.vue';
-import ThemingDoc from '@/doc/overlaypanel/theming/index.vue';
+import AccessibilityDoc from '@/doc/popover/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/popover/BasicDoc.vue';
+import DataTableDoc from '@/doc/popover/DataTableDoc.vue';
+import ImportDoc from '@/doc/popover/ImportDoc.vue';
+import PTComponent from '@/doc/popover/pt/index.vue';
+import ThemingDoc from '@/doc/popover/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/dropdown/index.vue b/pages/select/index.vue
similarity index 66%
rename from pages/dropdown/index.vue
rename to pages/select/index.vue
index df8e40bb3..9a1772516 100755
--- a/pages/dropdown/index.vue
+++ b/pages/select/index.vue
@@ -1,34 +1,26 @@
 <template>
-    <DocComponent
-        title="Vue Select Component"
-        header="Dropdown"
-        description="Dropdown also known as Select, is used to choose an item from a collection of options."
-        :componentDocs="docs"
-        :apiDocs="['Dropdown']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
+    <DocComponent title="Vue Select Component" header="Select" description="Select is used to choose an item from a collection of options." :componentDocs="docs" :apiDocs="['Select']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
-import AccessibilityDoc from '@/doc/dropdown/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/dropdown/BasicDoc.vue';
-import CheckmarkDoc from '@/doc/dropdown/CheckmarkDoc.vue';
-import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue';
-import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue';
-import EditableDoc from '@/doc/dropdown/EditableDoc.vue';
-import FilledDoc from '@/doc/dropdown/FilledDoc.vue';
-import FilterDoc from '@/doc/dropdown/FilterDoc.vue';
-import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc.vue';
-import GroupDoc from '@/doc/dropdown/GroupDoc.vue';
-import ImportDoc from '@/doc/dropdown/ImportDoc.vue';
-import InvalidDoc from '@/doc/dropdown/InvalidDoc.vue';
-import LazyVirtualScrollDoc from '@/doc/dropdown/LazyVirtualScrollDoc.vue';
-import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc.vue';
-import TemplateDoc from '@/doc/dropdown/TemplateDoc.vue';
-import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc.vue';
-import PTComponent from '@/doc/dropdown/pt/index.vue';
-import ThemingDoc from '@/doc/dropdown/theming/index.vue';
+import AccessibilityDoc from '@/doc/select/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/select/BasicDoc.vue';
+import CheckmarkDoc from '@/doc/select/CheckmarkDoc.vue';
+import ClearIconDoc from '@/doc/select/ClearIconDoc.vue';
+import DisabledDoc from '@/doc/select/DisabledDoc.vue';
+import EditableDoc from '@/doc/select/EditableDoc.vue';
+import FilledDoc from '@/doc/select/FilledDoc.vue';
+import FilterDoc from '@/doc/select/FilterDoc.vue';
+import FloatLabelDoc from '@/doc/select/FloatLabelDoc.vue';
+import GroupDoc from '@/doc/select/GroupDoc.vue';
+import ImportDoc from '@/doc/select/ImportDoc.vue';
+import InvalidDoc from '@/doc/select/InvalidDoc.vue';
+import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue';
+import LoadingStateDoc from '@/doc/select/LoadingStateDoc.vue';
+import TemplateDoc from '@/doc/select/TemplateDoc.vue';
+import VirtualScrollDoc from '@/doc/select/VirtualScrollDoc.vue';
+import PTComponent from '@/doc/select/pt/index.vue';
+import ThemingDoc from '@/doc/select/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/inputswitch/index.vue b/pages/toggleswitch/index.vue
similarity index 60%
rename from pages/inputswitch/index.vue
rename to pages/toggleswitch/index.vue
index 83a46eaab..ca1c54930 100755
--- a/pages/inputswitch/index.vue
+++ b/pages/toggleswitch/index.vue
@@ -1,16 +1,16 @@
 <template>
-    <DocComponent title="Vue InputSwitch Component" header="InputSwitch" description="InputSwitch is used to select a boolean value." :componentDocs="docs" :apiDocs="['InputSwitch']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent title="Vue ToggleSwitch Component" header="ToggleSwitch" description="ToggleSwitch is used to select a boolean value." :componentDocs="docs" :apiDocs="['ToggleSwitch']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
-import AccessibilityDoc from '@/doc/inputswitch/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/inputswitch/BasicDoc.vue';
-import DisabledDoc from '@/doc/inputswitch/DisabledDoc.vue';
-import ImportDoc from '@/doc/inputswitch/ImportDoc.vue';
-import InvalidDoc from '@/doc/inputswitch/InvalidDoc.vue';
-import PreselectionDoc from '@/doc/inputswitch/PreselectionDoc.vue';
-import PTComponent from '@/doc/inputswitch/pt/index.vue';
-import ThemingDoc from '@/doc/inputswitch/theming/index.vue';
+import AccessibilityDoc from '@/doc/toggleswitch/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/toggleswitch/BasicDoc.vue';
+import DisabledDoc from '@/doc/toggleswitch/DisabledDoc.vue';
+import ImportDoc from '@/doc/toggleswitch/ImportDoc.vue';
+import InvalidDoc from '@/doc/toggleswitch/InvalidDoc.vue';
+import PreselectionDoc from '@/doc/toggleswitch/PreselectionDoc.vue';
+import PTComponent from '@/doc/toggleswitch/pt/index.vue';
+import ThemingDoc from '@/doc/toggleswitch/theming/index.vue';
 
 export default {
     data() {