From b35c339fb964232759eefae28af528faa71485e6 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Sat, 7 Oct 2023 15:11:21 +0200
Subject: [PATCH] refactor: input components (#612)

* reafactor: update input components to composition-api

* reafactor: update dropdown component to composition-api

* refactor: dropdown active prop

* docs: update component documentations

* docs: remove unused inspector classes

* chore: remove unnecessary dependency

* fix: #513

* fix: #570

* fix: #530

* fix:  #516

* fix:  #515
---
 .../examples/autocomplete/infinite-scroll.vue |   10 +-
 .../theme/examples/datepicker/base.vue        |    2 +-
 .../theme/examples/datepicker/events.vue      |    2 +-
 .../theme/examples/datepicker/inspector.vue   |   36 +-
 .../examples/datepicker/programmatically.vue  |   12 +-
 .../theme/examples/datepicker/range.vue       |    4 +-
 .../theme/examples/datepicker/slots.vue       |   23 +-
 .../examples/datetimepicker/inspector.vue     |   16 +-
 .../theme/examples/datetimepicker/min-max.vue |    2 -
 .../theme/examples/dropdown/base.vue          |   40 +-
 .../theme/examples/dropdown/index.vue         |    6 +
 .../theme/examples/dropdown/inspector.vue     |   12 +-
 .../theme/examples/dropdown/multiple.vue      |   15 +-
 .../theme/examples/dropdown/position.vue      |   16 +-
 .../examples/dropdown/programmatically.vue    |   26 +
 .../theme/examples/dropdown/scrollable.vue    |    6 +-
 .../.vitepress/theme/examples/field/base.vue  |    6 +-
 .../.vitepress/theme/examples/input/base.vue  |    6 +-
 .../theme/examples/inputitems/limits.vue      |   14 +-
 .../theme/examples/timepicker/base.vue        |    1 -
 .../theme/examples/timepicker/inspector.vue   |   16 +-
 .../examples/timepicker/min-max-date.vue      |    1 +
 packages/docs-next/.vitepress/theme/index.ts  |   54 +-
 packages/docs-next/components/Autocomplete.md |  125 +-
 packages/docs-next/components/Button.md       |   29 +-
 packages/docs-next/components/Carousel.md     |   40 +-
 packages/docs-next/components/Checkbox.md     |   32 +-
 packages/docs-next/components/Collapse.md     |    8 +-
 packages/docs-next/components/Datepicker.md   |  135 +-
 .../docs-next/components/Datetimepicker.md    |   84 +-
 packages/docs-next/components/Dropdown.md     |   82 +-
 packages/docs-next/components/Field.md        |   25 +-
 packages/docs-next/components/Icon.md         |   27 +-
 packages/docs-next/components/Input.md        |   68 +-
 packages/docs-next/components/Inputitems.md   |  111 +-
 packages/docs-next/components/Loading.md      |   26 +-
 packages/docs-next/components/Menu.md         |   52 +-
 packages/docs-next/components/Modal.md        |   26 +-
 packages/docs-next/components/Notification.md |   52 +-
 packages/docs-next/components/Pagination.md   |   28 +-
 packages/docs-next/components/Radio.md        |   24 +-
 packages/docs-next/components/Select.md       |   53 +-
 packages/docs-next/components/Sidebar.md      |   24 +-
 packages/docs-next/components/Skeleton.md     |   24 +-
 packages/docs-next/components/Slider.md       |   42 +-
 packages/docs-next/components/Steps.md        |   30 +-
 packages/docs-next/components/Switch.md       |   34 +-
 packages/docs-next/components/Table.md        |  136 +-
 packages/docs-next/components/Tabs.md         |   12 +-
 packages/docs-next/components/Timepicker.md   |   91 +-
 packages/docs-next/components/Tooltip.md      |   20 +-
 packages/docs-next/components/Upload.md       |   43 +-
 packages/docs-next/docgen.config.js           |   88 +-
 packages/oruga-next/package-lock.json         |  232 +-
 packages/oruga-next/package.json              |    7 +-
 .../components/autocomplete/Autocomplete.vue  | 1716 +++++++-------
 .../src/components/autocomplete/index.ts      |    2 +-
 .../autocomplete/tests/SimpleAutocomplete.vue |   10 +-
 .../src/components/datepicker/Datepicker.vue  | 1968 +++++++----------
 .../components/datepicker/DatepickerMixin.ts  |   46 -
 .../components/datepicker/DatepickerMonth.vue |  868 ++++----
 .../components/datepicker/DatepickerTable.vue |  669 +++---
 .../datepicker/DatepickerTableRow.vue         |  787 +++----
 .../components/datepicker/PickerWrapper.vue   |  266 +++
 .../components/datepicker/datepickerUtils.ts  |  157 ++
 .../src/components/datepicker/index.ts        |    4 +-
 .../datepicker/useDatepickerShare.ts          |  182 ++
 .../datetimepicker/Datetimepicker.vue         |  960 ++++----
 .../src/components/datetimepicker/index.ts    |    2 +-
 .../src/components/dropdown/Dropdown.vue      |  920 ++++----
 .../src/components/dropdown/DropdownItem.vue  |  198 +-
 .../src/components/dropdown/index.ts          |    2 +-
 .../components/dropdown/useDropdownShare.ts   |   31 +
 .../oruga-next/src/components/field/Field.vue |  498 ++---
 .../src/components/field/FieldBody.vue        |   82 +-
 .../oruga-next/src/components/field/index.ts  |    2 +-
 .../src/components/field/useFieldShare.ts     |   87 +
 packages/oruga-next/src/components/index.ts   |    2 +-
 .../oruga-next/src/components/input/Input.vue |  704 +++---
 .../oruga-next/src/components/input/index.ts  |    2 +-
 .../src/components/inputitems/Inputitems.vue  |  850 +++----
 packages/oruga-next/src/components/plugins.ts |    2 +-
 .../src/components/select/Select.vue          |  460 ++--
 .../oruga-next/src/components/select/index.ts |    2 +-
 .../src/components/timepicker/Timepicker.vue  | 1023 +++++++--
 .../src/components/timepicker/index.ts        |    2 +-
 .../timepicker/useTimepickerShare.ts          |  243 ++
 .../src/components/tooltip/Tooltip.vue        |    4 +-
 .../src/components/upload/Upload.vue          |  420 ++--
 .../oruga-next/src/components/upload/index.ts |    2 +-
 packages/oruga-next/src/composables/index.ts  |    7 +
 .../src/composables/useClassProps.ts          |   12 +
 .../src/composables/useComputedClass.ts       |  139 ++
 .../oruga-next/src/composables/useDebounce.ts |   24 +
 .../src/composables/useEventListener.ts       |   25 +
 .../src/composables/useInputHandler.ts        |  206 ++
 .../src/composables/useMatchMedia.ts          |   28 +
 .../src/composables/usePropValue.ts           |  109 +
 .../oruga-next/src/directives/trapFocus.ts    |    2 +
 packages/oruga-next/src/types/config.ts       |   26 +-
 .../oruga-next/src/utils/FormElementMixin.ts  |  274 ---
 packages/oruga-next/src/utils/SharedProps.ts  |   10 +
 .../oruga-next/src/utils/TimepickerMixin.ts   |  861 --------
 packages/oruga-next/src/utils/helpers.ts      |  168 +-
 packages/oruga-next/src/utils/ssr.ts          |    1 +
 105 files changed, 8837 insertions(+), 8364 deletions(-)
 create mode 100644 packages/docs-next/.vitepress/theme/examples/dropdown/programmatically.vue
 delete mode 100644 packages/oruga-next/src/components/datepicker/DatepickerMixin.ts
 create mode 100644 packages/oruga-next/src/components/datepicker/PickerWrapper.vue
 create mode 100644 packages/oruga-next/src/components/datepicker/datepickerUtils.ts
 create mode 100644 packages/oruga-next/src/components/datepicker/useDatepickerShare.ts
 create mode 100644 packages/oruga-next/src/components/dropdown/useDropdownShare.ts
 create mode 100644 packages/oruga-next/src/components/field/useFieldShare.ts
 create mode 100644 packages/oruga-next/src/components/timepicker/useTimepickerShare.ts
 create mode 100644 packages/oruga-next/src/composables/index.ts
 create mode 100644 packages/oruga-next/src/composables/useClassProps.ts
 create mode 100644 packages/oruga-next/src/composables/useComputedClass.ts
 create mode 100644 packages/oruga-next/src/composables/useDebounce.ts
 create mode 100644 packages/oruga-next/src/composables/useEventListener.ts
 create mode 100644 packages/oruga-next/src/composables/useInputHandler.ts
 create mode 100644 packages/oruga-next/src/composables/useMatchMedia.ts
 create mode 100644 packages/oruga-next/src/composables/usePropValue.ts
 delete mode 100644 packages/oruga-next/src/utils/FormElementMixin.ts
 create mode 100644 packages/oruga-next/src/utils/SharedProps.ts
 delete mode 100644 packages/oruga-next/src/utils/TimepickerMixin.ts

diff --git a/packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue b/packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue
index 2b7b6cdc5..9d4720f9d 100644
--- a/packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue
+++ b/packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue
@@ -39,6 +39,8 @@ async function getAsyncData(_name) {
         data.value = [...data.value, ..._data.results];
         page.value += 1;
         totalPages.value = _data.total_pages;
+    } catch (err) {
+        console.error(err);
     } finally {
         isFetching.value = false;
     }
@@ -57,11 +59,11 @@ function getMoreAsyncData() {
                 placeholder="e.g. Fight Club"
                 field="title"
                 :loading="isFetching"
-                check-infinite-scroll
-                :debounce-typing="500"
-                @typing="getAsyncData"
+                check-scroll
+                :debounce="500"
+                @input="getAsyncData"
                 @select="(option) => (selected = option)"
-                @infinite-scroll="getMoreAsyncData">
+                @scroll-end="getMoreAsyncData">
                 <template #default="props">
                     <div class="media">
                         <div class="media-left">
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/base.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/base.vue
index 05b39f862..613da760b 100644
--- a/packages/docs-next/.vitepress/theme/examples/datepicker/base.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datepicker/base.vue
@@ -27,7 +27,7 @@ const locale = ref(); // Browser locale
                 </o-select>
             </o-field>
             <o-field>
-                <o-switch v-model="showWeekNumber">Show week number</o-switch>
+                <o-switch v-model="showWeekNumber" label="Show week number" />
             </o-field>
         </o-field>
 
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/events.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/events.vue
index b2ccf094f..987fe566b 100644
--- a/packages/docs-next/.vitepress/theme/examples/datepicker/events.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datepicker/events.vue
@@ -54,7 +54,7 @@ const events = [
 <template>
     <section>
         <o-field>
-            <o-switch v-model="bars">Bars</o-switch>
+            <o-switch v-model="bars" label="Bars" />
         </o-field>
 
         <o-datepicker
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue
index 64d075040..2fb197045 100644
--- a/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue
@@ -1,5 +1,15 @@
 <script setup>
-import { ref } from "vue";
+import { getCurrentInstance, ref } from "vue";
+
+const datepicker = ref();
+
+// get programmatic oruga access
+const app = getCurrentInstance();
+const oruga = app.appContext.config.globalProperties.$oruga;
+
+const triggerClass = oruga?.config
+    ? oruga.config.getOption("input.iconLeftClass", "o-input__icon-left")
+    : "o-input__icon-left";
 
 const events = ref([
     {
@@ -14,9 +24,7 @@ const events = ref([
 
 function openDatePicker() {
     setTimeout(() => {
-        this.$refs.datepicker.$el
-            .getElementsByClassName("o-input-iconspace-left")[0]
-            .click();
+        datepicker.value.$el.getElementsByClassName(triggerClass)[0].click();
     }, 500);
 }
 
@@ -366,15 +374,6 @@ const inspectData = [
             openDatePicker();
         },
     },
-    {
-        class: "monthRowClass",
-        description: "Class of the table row when type is month",
-        action: (cmp, data) => {
-            data.type = "month";
-            data.monthClass = "datepicker__,table__month";
-            openDatePicker();
-        },
-    },
     {
         class: "monthCellClass",
         description: "Class of the table cell when type is month",
@@ -384,17 +383,6 @@ const inspectData = [
             openDatePicker();
         },
     },
-    {
-        class: "monthCellInvisibleClass",
-        description:
-            "Class of the table cell when nearby month days are hidden when type is month",
-        action: (cmp, data) => {
-            data.type = "month";
-            data.monthClass = "datepicker__,table__month";
-            data.nearbyMonthDays = false;
-            openDatePicker();
-        },
-    },
     {
         class: "monthCellSelectedClass",
         description:
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/programmatically.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/programmatically.vue
index 873adcade..f6ef99326 100644
--- a/packages/docs-next/.vitepress/theme/examples/datepicker/programmatically.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datepicker/programmatically.vue
@@ -1,14 +1,20 @@
+<script setup>
+import { ref } from "vue";
+
+const active = ref(false);
+</script>
+
 <template>
     <section>
-        <o-field>
+        <o-field expanded>
             <o-datepicker
-                ref="datepicker"
+                v-model:active="active"
                 expanded
                 placeholder="Select a date" />
             <o-button
                 icon-left="calendar"
                 type="primary"
-                @click="$refs.datepicker.toggle()" />
+                @click="active = !active" />
         </o-field>
     </section>
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/range.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/range.vue
index d9099432f..271a194d1 100644
--- a/packages/docs-next/.vitepress/theme/examples/datepicker/range.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datepicker/range.vue
@@ -1,5 +1,7 @@
 <script setup>
-const date = new Date();
+import { ref } from "vue";
+
+const date = ref();
 </script>
 
 <template>
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/slots.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/slots.vue
index 728102bb0..a1f7a3adf 100644
--- a/packages/docs-next/.vitepress/theme/examples/datepicker/slots.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datepicker/slots.vue
@@ -51,20 +51,23 @@ onMounted(() => {
                             field="name"
                             expanded
                             @select="selectMonth" />
-                        <o-button disabled>{{ date?.getFullYear() }}</o-button>
+                        <o-button
+                            disabled
+                            :label="date?.getFullYear().toString()" />
                     </o-field>
                 </template>
                 <template #footer>
                     <div class="footer-container">
-                        <o-button variant="primary" @click="date = new Date()">
-                            <o-icon icon="calendar"></o-icon>
-                            <span>Today</span>
-                        </o-button>
-
-                        <o-button variant="danger" @click="date = null">
-                            <o-icon icon="times"></o-icon>
-                            <span>Clear</span>
-                        </o-button>
+                        <o-button
+                            variant="primary"
+                            icon-left="calendar"
+                            label="Today"
+                            @click="date = new Date()" />
+                        <o-button
+                            variant="danger"
+                            icon-left="times"
+                            label="Clear"
+                            @click="date = null" />
                     </div>
                 </template>
             </o-datepicker>
diff --git a/packages/docs-next/.vitepress/theme/examples/datetimepicker/inspector.vue b/packages/docs-next/.vitepress/theme/examples/datetimepicker/inspector.vue
index a4cc1dc6a..ba4ad7ce4 100644
--- a/packages/docs-next/.vitepress/theme/examples/datetimepicker/inspector.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datetimepicker/inspector.vue
@@ -1,8 +1,20 @@
 <script setup>
+import { getCurrentInstance, ref } from "vue";
+
+const datetimepicker = ref();
+
+// get programmatic oruga access
+const app = getCurrentInstance();
+const oruga = app.appContext.config.globalProperties.$oruga;
+
+const triggerClass = oruga?.config
+    ? oruga.config.getOption("dropdown.triggerClass", "o-drop__trigger")
+    : "o-drop__trigger";
+
 function openDatetimePicker() {
     setTimeout(() => {
-        this.$refs.datetimepicker.$el
-            .getElementsByClassName("o-drop__trigger")[0]
+        datetimepicker.value.$el
+            .getElementsByClassName(triggerClass)[0]
             .click();
     }, 500);
 }
diff --git a/packages/docs-next/.vitepress/theme/examples/datetimepicker/min-max.vue b/packages/docs-next/.vitepress/theme/examples/datetimepicker/min-max.vue
index 14a2644a2..f884baaa2 100644
--- a/packages/docs-next/.vitepress/theme/examples/datetimepicker/min-max.vue
+++ b/packages/docs-next/.vitepress/theme/examples/datetimepicker/min-max.vue
@@ -11,7 +11,6 @@ const maxDatetime = ref(null);
             <o-field label="Min Datetime">
                 <o-datetimepicker
                     v-model="minDatetime"
-                    rounded
                     placeholder="Click to select..."
                     icon="calendar"
                     editable />
@@ -19,7 +18,6 @@ const maxDatetime = ref(null);
             <o-field label="Max Datetime">
                 <o-datetimepicker
                     v-model="maxDatetime"
-                    rounded
                     placeholder="Click to select..."
                     icon="calendar"
                     editable />
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/base.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/base.vue
index 4b2ea7bb9..82f5c0b6b 100644
--- a/packages/docs-next/.vitepress/theme/examples/dropdown/base.vue
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/base.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="odocs-spaced">
-        <o-dropdown aria-role="list">
+        <o-dropdown>
             <template #trigger="{ active }">
                 <o-button
                     variant="primary"
@@ -8,12 +8,12 @@
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown :triggers="['hover']" aria-role="list">
+        <o-dropdown :triggers="['hover']">
             <template #trigger="{ active }">
                 <o-button
                     variant="info"
@@ -21,24 +21,24 @@
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown disabled aria-role="list">
+        <o-dropdown disabled>
             <template #trigger="{ active }">
                 <o-button
                     label="Disabled"
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown aria-role="list">
+        <o-dropdown>
             <template #trigger>
                 <div>
                     Custom
@@ -46,19 +46,19 @@
                 </div>
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown :triggers="['contextmenu']" aria-role="list">
+        <o-dropdown :triggers="['contextmenu']">
             <template #trigger>
                 <o-button label="Right click" role="button" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
     </section>
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/index.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/index.vue
index ffba7af33..e431814ec 100644
--- a/packages/docs-next/.vitepress/theme/examples/dropdown/index.vue
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/index.vue
@@ -10,6 +10,9 @@ import ScrollableCode from "./scrollable.vue?raw";
 
 import Position from "./position.vue";
 import PositionCode from "./position.vue?raw";
+
+import Programmatically from "./programmatically.vue";
+import ProgrammaticallyCode from "./programmatically.vue?raw";
 </script>
 
 <template>
@@ -24,4 +27,7 @@ import PositionCode from "./position.vue?raw";
 
     <h3 id="position">Position</h3>
     <ExampleViewer :component="Position" :code="PositionCode" />
+
+    <h3 id="programmatically">Programmatically</h3>
+    <ExampleViewer :component="Programmatically" :code="ProgrammaticallyCode" />
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue
index 3b5ffd030..8eb735681 100644
--- a/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue
@@ -132,7 +132,7 @@ const inspectData = [
         v-slot="props"
         :inspect-data="inspectData"
         :subitem="subitem">
-        <o-dropdown v-model="currentMenu" v-bind="props" aria-role="list">
+        <o-dropdown v-model="currentMenu" v-bind="props">
             <template #trigger="{ active }">
                 <o-button
                     ref="dropdownbtn"
@@ -140,17 +140,13 @@ const inspectData = [
                     variant="primary"
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
-            <o-dropdown-item v-bind="props" value="ac1" aria-role="listitem">
+            <o-dropdown-item v-bind="props" value="ac1">
                 Action
             </o-dropdown-item>
-            <o-dropdown-item v-bind="props" value="ac2" aria-role="listitem">
+            <o-dropdown-item v-bind="props" value="ac2">
                 Another action
             </o-dropdown-item>
-            <o-dropdown-item
-                v-bind="props"
-                value="ac3"
-                disabled
-                aria-role="listitem">
+            <o-dropdown-item v-bind="props" value="ac3" disabled>
                 Something else
             </o-dropdown-item>
         </o-dropdown>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue
index 6028f61e0..06a5dcf08 100644
--- a/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue
@@ -17,18 +17,9 @@ const selectedOptions = ref([]);
                 </o-button>
             </template>
 
-            <o-dropdown-item
-                value="option1"
-                aria-role="listitem"
-                label="Option 1" />
-            <o-dropdown-item
-                value="option2"
-                aria-role="listitem"
-                label="Option 2" />
-            <o-dropdown-item
-                value="option3"
-                aria-role="listitem"
-                label="Option 3" />
+            <o-dropdown-item value="option1" label="Option 1" />
+            <o-dropdown-item value="option2" label="Option 2" />
+            <o-dropdown-item value="option3" label="Option 3" />
         </o-dropdown>
     </section>
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/position.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/position.vue
index 77e7e733e..2dbab3f5a 100644
--- a/packages/docs-next/.vitepress/theme/examples/dropdown/position.vue
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/position.vue
@@ -1,7 +1,7 @@
 <template>
     <section>
         <o-field expanded>
-            <o-dropdown position="top-right" aria-role="list" expanded>
+            <o-dropdown position="top-right" expanded>
                 <template #trigger>
                     <o-button
                         class="dropdown-toggle"
@@ -10,14 +10,14 @@
                         expanded />
                 </template>
 
-                <o-dropdown-item aria-role="listitem" label="Action" />
-                <o-dropdown-item aria-role="listitem" label="Another action" />
-                <o-dropdown-item aria-role="listitem" label="Something else" />
+                <o-dropdown-item label="Action" />
+                <o-dropdown-item label="Another action" />
+                <o-dropdown-item label="Something else" />
             </o-dropdown>
         </o-field>
 
         <o-field expanded>
-            <o-dropdown position="bottom-left" aria-role="list" expanded>
+            <o-dropdown position="bottom-left" expanded>
                 <template #trigger>
                     <o-button
                         class="dropdown-toggle"
@@ -26,9 +26,9 @@
                         expanded />
                 </template>
 
-                <o-dropdown-item aria-role="listitem" label="Action" />
-                <o-dropdown-item aria-role="listitem" label="Another action" />
-                <o-dropdown-item aria-role="listitem" label="Something else" />
+                <o-dropdown-item label="Action" />
+                <o-dropdown-item label="Another action" />
+                <o-dropdown-item label="Something else" />
             </o-dropdown>
         </o-field>
     </section>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/programmatically.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/programmatically.vue
new file mode 100644
index 000000000..ef04d9fc9
--- /dev/null
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/programmatically.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from "vue";
+
+const active = ref(false);
+</script>
+
+<template>
+    <o-field expanded>
+        <o-dropdown v-model:active="active">
+            <template #trigger="{ active }">
+                <o-button
+                    variant="primary"
+                    label="Click me!"
+                    :icon-right="active ? 'caret-up' : 'caret-down'" />
+            </template>
+
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
+        </o-dropdown>
+        <o-button
+            label="Open / Close"
+            type="primary"
+            @click="active = !active" />
+    </o-field>
+</template>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/scrollable.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/scrollable.vue
index 85ce17daa..82bd0dd05 100644
--- a/packages/docs-next/.vitepress/theme/examples/dropdown/scrollable.vue
+++ b/packages/docs-next/.vitepress/theme/examples/dropdown/scrollable.vue
@@ -25,8 +25,7 @@ const currentMenu = ref({ icon: "users", text: "People" });
         <o-dropdown
             v-model="currentMenu"
             :scrollable="isScrollable"
-            :max-height="maxHeight"
-            aria-role="list">
+            :max-height="maxHeight">
             <template #trigger>
                 <o-button
                     variant="primary"
@@ -39,8 +38,7 @@ const currentMenu = ref({ icon: "users", text: "People" });
             <o-dropdown-item
                 v-for="(menu, index) in menus"
                 :key="index"
-                :value="menu"
-                aria-role="listitem">
+                :value="menu">
                 <div class="media">
                     <o-icon class="media-left" :icon="menu.icon" />
                     <div class="media-content">{{ menu.text }}</div>
diff --git a/packages/docs-next/.vitepress/theme/examples/field/base.vue b/packages/docs-next/.vitepress/theme/examples/field/base.vue
index 1cf1258cb..0f1b3e1cc 100644
--- a/packages/docs-next/.vitepress/theme/examples/field/base.vue
+++ b/packages/docs-next/.vitepress/theme/examples/field/base.vue
@@ -5,18 +5,18 @@
         </o-field>
 
         <o-field label="Email" variant="danger" message="This email is invalid">
-            <o-input type="email" model-value="john@" maxlength="30" />
+            <o-input type="email" model-value="john@" :maxlength="30" />
         </o-field>
 
         <o-field
             label="Username"
             variant="success"
             message="This username is available">
-            <o-input model-value="johnsilver" maxlength="30" />
+            <o-input model-value="johnsilver" :maxlength="30" />
         </o-field>
 
         <o-field label="Password" variant="warning">
-            <o-input model-value="123" type="password" maxlength="30" />
+            <o-input model-value="123" type="password" :maxlength="30" />
         </o-field>
 
         <o-field label="Subject">
diff --git a/packages/docs-next/.vitepress/theme/examples/input/base.vue b/packages/docs-next/.vitepress/theme/examples/input/base.vue
index 50376e1c7..f2e7c6811 100644
--- a/packages/docs-next/.vitepress/theme/examples/input/base.vue
+++ b/packages/docs-next/.vitepress/theme/examples/input/base.vue
@@ -11,14 +11,14 @@ const name = ref("John Silver");
         </o-field>
 
         <o-field label="Email" variant="danger" message="This email is invalid">
-            <o-input type="email" value="john@" maxlength="30" />
+            <o-input type="email" value="john@" :maxlength="30" />
         </o-field>
 
         <o-field
             label="Username"
             variant="success"
             message="This username is available">
-            <o-input value="johnsilver" maxlength="30" />
+            <o-input value="johnsilver" :maxlength="30" />
         </o-field>
 
         <o-field label="Password">
@@ -26,7 +26,7 @@ const name = ref("John Silver");
         </o-field>
 
         <o-field label="Message">
-            <o-input maxlength="200" type="textarea" />
+            <o-input :maxlength="200" type="textarea" />
         </o-field>
 
         <o-field>
diff --git a/packages/docs-next/.vitepress/theme/examples/inputitems/limits.vue b/packages/docs-next/.vitepress/theme/examples/inputitems/limits.vue
index 343e68f4b..7144c5ea3 100644
--- a/packages/docs-next/.vitepress/theme/examples/inputitems/limits.vue
+++ b/packages/docs-next/.vitepress/theme/examples/inputitems/limits.vue
@@ -1,20 +1,22 @@
 <template>
     <section>
         <o-field label="Limited to 10 characters">
-            <o-inputitems maxlength="10" :value="['Oruga', 'Vue', 'CSS']" />
+            <o-inputitems
+                :maxlength="10"
+                :model-value="['Oruga', 'Vue', 'CSS']" />
         </o-field>
 
         <o-field label="Limited to 5 tags">
             <o-inputitems
-                maxitems="5"
-                :value="['One', 'Two', 'Three', 'Four']" />
+                :maxitems="5"
+                :model-value="['One', 'Two', 'Three', 'Four']" />
         </o-field>
 
         <o-field label="Limited to 10 characters and 5 tags">
             <o-inputitems
-                maxlength="10"
-                maxitems="5"
-                :value="['Red', 'Green', 'Blue', 'White']" />
+                :maxlength="10"
+                :maxitems="5"
+                :model-value="['Red', 'Green', 'Blue', 'White']" />
         </o-field>
     </section>
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/timepicker/base.vue b/packages/docs-next/.vitepress/theme/examples/timepicker/base.vue
index ac7528c41..c26944f84 100644
--- a/packages/docs-next/.vitepress/theme/examples/timepicker/base.vue
+++ b/packages/docs-next/.vitepress/theme/examples/timepicker/base.vue
@@ -43,7 +43,6 @@ const locale = ref(); // Browser locale
         <o-field label="Select time">
             <o-timepicker
                 v-model="selected"
-                rounded
                 placeholder="Click to select..."
                 icon="clock"
                 :enable-seconds="enableSeconds"
diff --git a/packages/docs-next/.vitepress/theme/examples/timepicker/inspector.vue b/packages/docs-next/.vitepress/theme/examples/timepicker/inspector.vue
index 5f5169b3a..3d4bb514f 100644
--- a/packages/docs-next/.vitepress/theme/examples/timepicker/inspector.vue
+++ b/packages/docs-next/.vitepress/theme/examples/timepicker/inspector.vue
@@ -1,9 +1,19 @@
 <script setup>
+import { getCurrentInstance, ref } from "vue";
+
+const timepicker = ref();
+
+// get programmatic oruga access
+const app = getCurrentInstance();
+const oruga = app.appContext.config.globalProperties.$oruga;
+
+const triggerClass = oruga?.config
+    ? oruga.config.getOption("dropdown.triggerClass", "o-drop__trigger")
+    : "o-drop__trigger";
+
 function openTimePicker() {
     setTimeout(() => {
-        this.$refs.timepicker.$el
-            .getElementsByClassName("o-drop__trigger")[0]
-            .click();
+        timepicker.value.$el.getElementsByClassName(triggerClass)[0].click();
     }, 500);
 }
 
diff --git a/packages/docs-next/.vitepress/theme/examples/timepicker/min-max-date.vue b/packages/docs-next/.vitepress/theme/examples/timepicker/min-max-date.vue
index 7f74b625f..3b3dabae2 100644
--- a/packages/docs-next/.vitepress/theme/examples/timepicker/min-max-date.vue
+++ b/packages/docs-next/.vitepress/theme/examples/timepicker/min-max-date.vue
@@ -17,6 +17,7 @@ const maxTime = ref(max);
         <o-field label="Select time">
             <o-timepicker
                 placeholder="Click to select..."
+                rounded
                 :min-time="minTime"
                 :max-time="maxTime" />
         </o-field>
diff --git a/packages/docs-next/.vitepress/theme/index.ts b/packages/docs-next/.vitepress/theme/index.ts
index 35360f944..b20204875 100644
--- a/packages/docs-next/.vitepress/theme/index.ts
+++ b/packages/docs-next/.vitepress/theme/index.ts
@@ -65,34 +65,17 @@ export default {
         app.component("Expo", Expo);
         app.component("Carbon", Carbon);
 
-        // import example components
-        const examples = import.meta.glob<DefineComponent>(
-            "./examples/**/index.vue",
-            { eager: true },
-        );
-        for (const path in examples) {
-            const v = path.split("/");
-            app.component("example-" + v[2], markRaw(examples[path].default));
-        }
-
-        // import inspector components
-        const inspectors = import.meta.glob<DefineComponent>(
-            "./examples/**/inspector.vue",
-            { eager: true },
-        );
-        for (const path in inspectors) {
-            const v = path.split("/");
-            app.component(
-                "inspector-" + v[2] + "-viewer",
-                markRaw(inspectors[path].default),
-            );
-        }
-
+        // import oruga component with theme config
         app.use(Oruga, {
             iconPack: "fas",
             iconComponent: "vue-fontawesome",
         });
 
+        const oruga = useOruga();
+
+        // set oruga as global prop for docs
+        app.config.globalProperties.$oruga = oruga;
+
         if (typeof window !== "undefined") {
             const theme = loadTheme();
 
@@ -101,14 +84,12 @@ export default {
                 case "theme-bulma": {
                     bulmaConfig.iconPack = "fas";
                     bulmaConfig.iconComponent = "vue-fontawesome";
-                    const oruga = useOruga();
                     oruga.config.setOptions(bulmaConfig);
                     break;
                 }
                 case "theme-bootstrap": {
                     bootstrapConfig.iconPack = "fas";
                     bootstrapConfig.iconComponent = "vue-fontawesome";
-                    const oruga = useOruga();
                     oruga.config.setOptions(bootstrapConfig);
                     break;
                 }
@@ -120,5 +101,28 @@ export default {
             link.href = theme.cdn;
             document.head.appendChild(link);
         }
+
+        // import example components
+        const examples = import.meta.glob<DefineComponent>(
+            "./examples/**/index.vue",
+            { eager: true },
+        );
+        for (const path in examples) {
+            const v = path.split("/");
+            app.component("example-" + v[2], markRaw(examples[path].default));
+        }
+
+        // import inspector components
+        const inspectors = import.meta.glob<DefineComponent>(
+            "./examples/**/inspector.vue",
+            { eager: true },
+        );
+        for (const path in inspectors) {
+            const v = path.split("/");
+            app.component(
+                "inspector-" + v[2] + "-viewer",
+                markRaw(inspectors[path].default),
+            );
+        }
     },
 };
diff --git a/packages/docs-next/components/Autocomplete.md b/packages/docs-next/components/Autocomplete.md
index c091423ff..99bc04377 100644
--- a/packages/docs-next/components/Autocomplete.md
+++ b/packages/docs-next/components/Autocomplete.md
@@ -36,72 +36,77 @@ title: Autocomplete
 
 ### Props
 
-| Prop name            | Description                                                                                                                                            | Type                | Values                                            | Default                                                                                                                                                            |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| animation            | Transition name to apply on dropdown list                                                                                                              | string              | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code>         |
-| appendToBody         | Append autocomplete content to body                                                                                                                    | boolean             | -                                                 |                                                                                                                                                                    |
-| autocomplete         | Native options to use in HTML5 validation                                                                                                              | string              | -                                                 |                                                                                                                                                                    |
-| checkInfiniteScroll  | Makes the component check if list reached scroll end and emit infinite-scroll event.                                                                   | boolean             | -                                                 |                                                                                                                                                                    |
-| clearIcon            | Icon name to be added on the clear button                                                                                                              | string              | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;clearIcon: "close-circle", <br>}</code> |
-| clearOnSelect        | Clear input text on select                                                                                                                             | boolean             | -                                                 |                                                                                                                                                                    |
-| clearable            | Add a button/icon to clear the inputed text                                                                                                            | boolean             | -                                                 |                                                                                                                                                                    |
-| confirmKeys          | Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) | array               | -                                                 | ["Tab", "Enter"]                                                                                                                                                   |
-| customFormatter      | Function to format an option to a string for display in the input as alternative to field prop)                                                        | func                | -                                                 |                                                                                                                                                                    |
-| data                 | Options / suggestions                                                                                                                                  | array               | -                                                 | []                                                                                                                                                                 |
-| debounceTyping       | Number of milliseconds to delay before to emit typing event                                                                                            | number              | -                                                 |                                                                                                                                                                    |
-| expanded             | Makes input full width when inside a grouped or addon field                                                                                            | boolean             | -                                                 |                                                                                                                                                                    |
-| field                | Property of the object (if data is array of objects) to use as display text, and to keep track of selected option                                      | string              | -                                                 | "value"                                                                                                                                                            |
-| groupField           | Property of the object (if &lt;code&gt;data&lt;/code&gt; is array of objects) to use as display text of group                                          | string              | -                                                 |                                                                                                                                                                    |
-| groupOptions         | Property of the object (if &lt;code&gt;data&lt;/code&gt; is array of objects) to use as key to get items array of each group, optional                 | string              | -                                                 |                                                                                                                                                                    |
-| icon                 | Icon name to be added                                                                                                                                  | string              | -                                                 |                                                                                                                                                                    |
-| iconPack             | Icon pack to use                                                                                                                                       | string              | `mdi`, `fa`, `fas and any other custom icon pack` |                                                                                                                                                                    |
-| iconRight            | Icon name to be added on the right side                                                                                                                | string              | -                                                 |                                                                                                                                                                    |
-| iconRightClickable   | Clickable icon right if exists                                                                                                                         | boolean             | -                                                 |                                                                                                                                                                    |
-| itemTag              | Menu item tag name                                                                                                                                     | string \| Component | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;itemTag: "div", <br>}</code>            |
-| keepFirst            | The first option will always be pre-selected (easier to just hit enter or tab)                                                                         | boolean             | -                                                 |                                                                                                                                                                    |
-| keepOpen             | Keep open dropdown list after select                                                                                                                   | boolean             | -                                                 |                                                                                                                                                                    |
-| maxHeight            | Max height of dropdown content                                                                                                                         | string\|number      | -                                                 |                                                                                                                                                                    |
-| maxlength            | Same as native maxlength, plus character counter                                                                                                       | number\|string      | -                                                 |                                                                                                                                                                    |
-| menuPosition         | Position of dropdown                                                                                                                                   | string              | `auto`, `top`, `bottom`                           | "auto"                                                                                                                                                             |
-| menuTag              | Menu tag name                                                                                                                                          | string \| Component | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;menuTag: "div", <br>}</code>            |
-| openOnFocus          | Open dropdown list on focus                                                                                                                            | boolean             | -                                                 |                                                                                                                                                                    |
-| override             |                                                                                                                                                        | boolean             | -                                                 |                                                                                                                                                                    |
-| rounded              | Makes the element rounded                                                                                                                              | boolean             | -                                                 |                                                                                                                                                                    |
-| selectOnClickOutside | Trigger the select event for the first pre-selected option when clicking outside and &lt;code&gt;keep-first&lt;/code&gt; is enabled                    | boolean             | -                                                 |                                                                                                                                                                    |
-| selectableFooter     | Allows the footer in the autocomplete to be selectable                                                                                                 | boolean             | -                                                 |                                                                                                                                                                    |
-| selectableHeader     | Allows the header in the autocomplete to be selectable                                                                                                 | boolean             | -                                                 |                                                                                                                                                                    |
-| size                 | Vertical size of input, optional                                                                                                                       | string              | `small`, `medium`, `large`                        |                                                                                                                                                                    |
-| statusIcon           | Show status icon using field and variant prop                                                                                                          | boolean             | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                          |
-| type                 | Input type                                                                                                                                             | string              | -                                                 | "text"                                                                                                                                                             |
-| useHtml5Validation   | Enable html 5 native validation                                                                                                                        | boolean             | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                  |
-| v-model              |                                                                                                                                                        | number\|string      | -                                                 |                                                                                                                                                                    |
-| validationMessage    | The message which is shown when a validation error occurs                                                                                              | string              | -                                                 |                                                                                                                                                                    |
+| Prop name            | Description                                                                                                                                            | Type                                             | Values                                                                          | Default                                                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| animation            | Transition name to apply on dropdown list                                                                                                              | string                                           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code>         |
+| appendToBody         | Append autocomplete content to body                                                                                                                    | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;appendToBody: false<br>}</code>       |
+| autocomplete         | Native options to use in HTML5 validation                                                                                                              | string                                           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>       |
+| checkScroll          | Makes the component check if list reached scroll start or end and emit scroll events.                                                                  | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;checkScroll: false<br>}</code>        |
+| clearIcon            | Icon name to be added on the clear button                                                                                                              | string                                           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;clearIcon: "close-circle"<br>}</code> |
+| clearOnSelect        | Clear input text on select                                                                                                                             | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;clearOnSelect: false<br>}</code>      |
+| clearable            | Add a button/icon to clear the inputed text                                                                                                            | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;clearable: false<br>}</code>          |
+| confirmKeys          | Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) | array                                            | -                                                                               | <code style='white-space: nowrap; padding: 0;'>["Tab", "Enter"]</code>                                                                                           |
+| data                 | Options / suggestions                                                                                                                                  | array                                            | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                         |
+| debounce             | Number of milliseconds to delay before to emit input event                                                                                             | number                                           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;debounce: 400<br>}</code>             |
+| disabled             | Same as native input disabled                                                                                                                          | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| expanded             | Makes input full width when inside a grouped or addon field                                                                                            | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| field                | Property of the object (if data is array of objects) to use as display text, and to keep track of selected option                                      | string                                           | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"value"</code>                                                                                                    |
+| formatter            | Function to format an option to a string for display in the input (as alternative to field prop)                                                       | (value: string \| number) =&gt; string \| number | -                                                                               |                                                                                                                                                                  |
+| groupField           | Property of the object (if `data` is array of objects) to use as display text of group                                                                 | string                                           | -                                                                               |                                                                                                                                                                  |
+| groupOptions         | Property of the object (if `data` is array of objects) to use as key to get items array of each group, optional                                        | string                                           | -                                                                               |                                                                                                                                                                  |
+| icon                 | Icon name to be shown                                                                                                                                  | string                                           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>           |
+| iconClickable        | Makes the icon clickable                                                                                                                               | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| iconPack             | Icon pack to use                                                                                                                                       | string                                           | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>       |
+| iconRight            | Icon name to be added on the right side                                                                                                                | string                                           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>      |
+| iconRightClickable   | Make the icon right clickable                                                                                                                          | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| iconRightVariant     | Variant of right icon                                                                                                                                  | string                                           | -                                                                               |                                                                                                                                                                  |
+| itemTag              | Menu item tag name                                                                                                                                     | string \| Component                              | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;itemTag: "div"<br>}</code>            |
+| keepFirst            | The first option will always be pre-selected (easier to just hit enter or tab)                                                                         | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;keepFirst: false<br>}</code>          |
+| keepOpen             | Keep open dropdown list after select                                                                                                                   | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;keepOpen: false<br>}</code>           |
+| maxHeight            | Max height of dropdown content                                                                                                                         | string\|number                                   | -                                                                               |                                                                                                                                                                  |
+| maxlength            | Same as native maxlength, plus character counter                                                                                                       | number                                           | -                                                                               |                                                                                                                                                                  |
+| menuPosition         | Position of dropdown                                                                                                                                   | string                                           | `auto`, `top`, `bottom`                                                         | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;menuPosition: "auto"<br>}</code>      |
+| menuTag              | Menu tag name                                                                                                                                          | string \| Component                              | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;menuTag: "div"<br>}</code>            |
+| openOnFocus          | Open dropdown list on focus                                                                                                                            | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;openOnFocus: false<br>}</code>        |
+| placeholder          | Input placeholder                                                                                                                                      | string                                           | -                                                                               |                                                                                                                                                                  |
+| rounded              | Makes the element rounded                                                                                                                              | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| selectOnClickOutside | Trigger the select event for the first pre-selected option when clicking outside and `keep-first` is enabled                                           | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| selectableFooter     | Allows the footer in the autocomplete to be selectable                                                                                                 | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| selectableHeader     | Allows the header in the autocomplete to be selectable                                                                                                 | boolean                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| size                 | Size of the control, optional                                                                                                                          | string                                           | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;size: undefined<br>}</code>           |
+| statusIcon           | Show status icon using field and variant prop                                                                                                          | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                        |
+| type                 | Input type                                                                                                                                             | string                                           | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"text"</code>                                                                                                     |
+| useHtml5Validation   | Enable html 5 native validation                                                                                                                        | boolean                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                |
+| v-model              |                                                                                                                                                        | string\|number                                   | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                                         |
+| validationMessage    | The message which is shown when a validation error occurs                                                                                              | string                                           | -                                                                               |                                                                                                                                                                  |
+| variant              | Color of the control, optional                                                                                                                         | string                                           | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>        |
 
 ### Events
 
-| Event name        | Properties                                                                   | Description |
-| ----------------- | ---------------------------------------------------------------------------- | ----------- |
-| icon-click        |                                                                              |
-| blur              |                                                                              |
-| focus             |                                                                              |
-| invalid           |                                                                              |
-| update:modelValue |                                                                              |
-| select            | **selected** `Object` - selected option<br/>**event** `Event` - native event |
-| select-header     |                                                                              |
-| select-footer     |                                                                              |
-| infinite-scroll   |                                                                              |
-| typing            |                                                                              |
-| icon-right-click  |                                                                              |
+| Event name        | Properties                                             | Description                                           |
+| ----------------- | ------------------------------------------------------ | ----------------------------------------------------- |
+| icon-click        | **event** `Event` - native event                       | on icon click event                                   |
+| update:modelValue | **value** `string \| number` - updated modelValue prop | modelValue prop two-way binding                       |
+| input             | **value** `string \| number` - input value             | on input change event                                 |
+| select            | **value** `string \| number` - selected value          | selected element changed event                        |
+| select-header     | **event** `Event` - native event                       | header is selected                                    |
+| select-footer     | **event** `Event` - native event                       | footer is selected                                    |
+| focus             | **event** `Event` - native event                       | on input focus event                                  |
+| blur              | **event** `Event` - native event                       | on input blur event                                   |
+| invalid           | **event** `Event` - native event                       | on input invalid event                                |
+| icon-right-click  | **event** `Event` - native event                       | on icon right click event                             |
+| scroll-start      |                                                        | the scroll list inside the dropdown reached the start |
+| scroll-end        |                                                        | the scroll list inside the dropdown reached it's end  |
 
 ### Slots
 
-| Name    | Description | Bindings |
-| ------- | ----------- | -------- |
-| header  |             |          |
-| group   |             | <br/>    |
-| default |             | <br/>    |
-| empty   |             |          |
-| footer  |             |          |
+| Name    | Description | Bindings   |
+| ------- | ----------- | ---------- |
+| header  |             |            |
+| group   |             | <br/>      |
+| default |             | <br/><br/> |
+| empty   |             |            |
+| footer  |             |            |
 
 </div>
 
diff --git a/packages/docs-next/components/Button.md b/packages/docs-next/components/Button.md
index 98b030463..d9d8113c1 100644
--- a/packages/docs-next/components/Button.md
+++ b/packages/docs-next/components/Button.md
@@ -38,22 +38,21 @@ title: Button
 
 | Prop name  | Description                                         | Type                | Values                                                                          | Default                                                                                                                                         |
 | ---------- | --------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| disabled   | Button will be disabled                             | boolean             | -                                                                               |                                                                                                                                                 |
-| expanded   | Button will be expanded (full-width)                | boolean             | -                                                                               |                                                                                                                                                 |
-| iconBoth   |                                                     | boolean             | -                                                                               |                                                                                                                                                 |
-| iconLeft   | Icon name to show on the left                       | string              | -                                                                               |                                                                                                                                                 |
-| iconPack   | Icon pack to use                                    | string              | `mdi`, `fa`, `fas and any other custom icon pack`                               |                                                                                                                                                 |
-| iconRight  | Icon name to show on the right                      | string              | -                                                                               |                                                                                                                                                 |
-| inverted   |                                                     | boolean             | -                                                                               |                                                                                                                                                 |
-| label      | Button label, unnecessary when default slot is used | string              | -                                                                               | undefined                                                                                                                                       |
-| loading    | Loading style                                       | boolean             | -                                                                               |                                                                                                                                                 |
-| nativeType | Button type, like native                            | string              | -                                                                               | "button"                                                                                                                                        |
-| outlined   | Outlined style                                      | boolean             | -                                                                               |                                                                                                                                                 |
-| override   |                                                     | boolean             | -                                                                               |                                                                                                                                                 |
+| disabled   | Button will be disabled                             | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| expanded   | Button will be expanded (full-width)                | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| iconLeft   | Icon name to show on the left                       | string              | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| iconPack   | Icon pack to use                                    | string              | `mdi`, `fa`, `fas and any other custom icon pack`                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| iconRight  | Icon name to show on the right                      | string              | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| inverted   |                                                     | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| label      | Button label, unnecessary when default slot is used | string              | -                                                                               |                                                                                                                                                 |
+| loading    | Loading style                                       | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| nativeType | Button type, like native                            | string              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"button"</code>                                                                                  |
+| outlined   | Outlined style                                      | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| override   |                                                     | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
 | rounded    | Rounded style                                       | boolean             | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
-| size       | Size of button, optional                            | string              | `small`, `medium`, `large`                                                      |                                                                                                                                                 |
-| tag        | Button tag name                                     | string \| Component | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)`        | "button"                                                                                                                                        |
-| variant    | Color of the control, optional                      | string              | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                 |
+| size       | Size of button, optional                            | string              | `small`, `medium`, `large`                                                      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| tag        | Button tag name                                     | string \| Component | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)`        | <code style='white-space: nowrap; padding: 0;'>"button"</code>                                                                                  |
+| variant    | Color of the control, optional                      | string              | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Carousel.md b/packages/docs-next/components/Carousel.md
index b0fe9e91d..fa50a6944 100644
--- a/packages/docs-next/components/Carousel.md
+++ b/packages/docs-next/components/Carousel.md
@@ -38,29 +38,29 @@ title: Carousel
 
 | Prop name         | Description | Type    | Values | Default                                                                                                                                                        |
 | ----------------- | ----------- | ------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| arrow             |             | boolean | -      | true                                                                                                                                                           |
-| arrowHover        |             | boolean | -      | true                                                                                                                                                           |
-| asIndicator       |             | boolean | -      |                                                                                                                                                                |
-| autoplay          |             | boolean | -      | false                                                                                                                                                          |
-| breakpoints       |             | object  | -      | {}                                                                                                                                                             |
-| hasDrag           |             | boolean | -      | true                                                                                                                                                           |
+| arrow             |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                     |
+| arrowHover        |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                     |
+| asIndicator       |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| autoplay          |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| breakpoints       |             | object  | -      | <code style='white-space: nowrap; padding: 0;'>{}</code>                                                                                                       |
+| hasDrag           |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                     |
 | iconNext          |             | string  | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;iconNext: "chevron-right", <br>}</code> |
-| iconPack          |             | string  | -      |                                                                                                                                                                |
+| iconPack          |             | string  | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
 | iconPrev          |             | string  | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;iconPrev: "chevron-left", <br>}</code>  |
-| iconSize          |             | string  | -      |                                                                                                                                                                |
-| indicator         |             | boolean | -      | true                                                                                                                                                           |
-| indicatorInside   |             | boolean | -      | false                                                                                                                                                          |
-| indicatorMode     |             | string  | -      | "click"                                                                                                                                                        |
-| indicatorPosition |             | string  | -      | "bottom"                                                                                                                                                       |
-| indicatorStyle    |             | string  | -      | "dots"                                                                                                                                                         |
+| iconSize          |             | string  | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| indicator         |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                     |
+| indicatorInside   |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| indicatorMode     |             | string  | -      | <code style='white-space: nowrap; padding: 0;'>"click"</code>                                                                                                  |
+| indicatorPosition |             | string  | -      | <code style='white-space: nowrap; padding: 0;'>"bottom"</code>                                                                                                 |
+| indicatorStyle    |             | string  | -      | <code style='white-space: nowrap; padding: 0;'>"dots"</code>                                                                                                   |
 | interval          |             | number  | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;interval: 3500<br>}</code>              |
-| itemsToList       |             | number  | -      | 1                                                                                                                                                              |
-| itemsToShow       |             | number  | -      | 1                                                                                                                                                              |
-| modelValue        |             | number  | -      | 0                                                                                                                                                              |
-| overlay           |             | boolean | -      |                                                                                                                                                                |
-| override          |             | boolean | -      |                                                                                                                                                                |
-| pauseHover        |             | boolean | -      | false                                                                                                                                                          |
-| repeat            |             | boolean | -      | false                                                                                                                                                          |
+| itemsToList       |             | number  | -      | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                        |
+| itemsToShow       |             | number  | -      | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                        |
+| modelValue        |             | number  | -      | <code style='white-space: nowrap; padding: 0;'>0</code>                                                                                                        |
+| overlay           |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| override          |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| pauseHover        |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| repeat            |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
 
 ### Events
 
diff --git a/packages/docs-next/components/Checkbox.md b/packages/docs-next/components/Checkbox.md
index e14be380b..b25aec0be 100644
--- a/packages/docs-next/components/Checkbox.md
+++ b/packages/docs-next/components/Checkbox.md
@@ -36,22 +36,22 @@ title: Checkbox
 
 ### Props
 
-| Prop name      | Description                                                                          | Type                           | Values                                                                          | Default   |
-| -------------- | ------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------- | --------- |
-| ariaLabelledby | Accessibility label to establish relationship between the checkbox and control label | string                         | -                                                                               |           |
-| autocomplete   |                                                                                      | string                         | -                                                                               |           |
-| disabled       | Same as native disabled                                                              | boolean                        | -                                                                               |           |
-| falseValue     | Overrides the returned value when it's not checked                                   | string\|number\|boolean        | -                                                                               | false     |
-| indeterminate  | Same as native indeterminate                                                         | boolean                        | -                                                                               | false     |
-| label          | Input label, unnecessary when default slot is used                                   | string                         | -                                                                               | undefined |
-| name           | Same as native name                                                                  | string                         | -                                                                               |           |
-| nativeValue    | Same as native value                                                                 | string\|number\|boolean\|array | -                                                                               |           |
-| override       |                                                                                      | boolean                        | -                                                                               |           |
-| required       |                                                                                      | boolean                        | -                                                                               |           |
-| size           | Size of the control, optional                                                        | string                         | `small`, `medium`, `large`                                                      |           |
-| trueValue      | Overrides the returned value when it's checked                                       | string\|number\|boolean        | -                                                                               | true      |
-| v-model        |                                                                                      | string\|number\|boolean\|array | -                                                                               |           |
-| variant        | Color of the control, optional                                                       | string                         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |           |
+| Prop name      | Description                                                                          | Type                           | Values                                                                          | Default                                                     |
+| -------------- | ------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| ariaLabelledby | Accessibility label to establish relationship between the checkbox and control label | string                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| autocomplete   |                                                                                      | string                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| disabled       | Same as native disabled                                                              | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| falseValue     | Overrides the returned value when it's not checked                                   | string\|number\|boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code> |
+| indeterminate  | Same as native indeterminate                                                         | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code> |
+| label          | Input label, unnecessary when default slot is used                                   | string                         | -                                                                               |                                                             |
+| name           | Same as native name                                                                  | string                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| nativeValue    | Same as native value                                                                 | string\|number\|boolean\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| override       |                                                                                      | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| required       |                                                                                      | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| size           | Size of the control, optional                                                        | string                         | `small`, `medium`, `large`                                                      | <code style='white-space: nowrap; padding: 0;'></code>      |
+| trueValue      | Overrides the returned value when it's checked                                       | string\|number\|boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>  |
+| v-model        |                                                                                      | string\|number\|boolean\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>      |
+| variant        | Color of the control, optional                                                       | string                         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>      |
 
 ### Events
 
diff --git a/packages/docs-next/components/Collapse.md b/packages/docs-next/components/Collapse.md
index 804999dc3..184218e78 100644
--- a/packages/docs-next/components/Collapse.md
+++ b/packages/docs-next/components/Collapse.md
@@ -39,10 +39,10 @@ title: Collapse
 | Prop name | Description                                                              | Type    | Values          | Default                                                                                                                                                |
 | --------- | ------------------------------------------------------------------------ | ------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | animation | Custom animation (transition name)                                       | string  | -               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code> |
-| ariaId    |                                                                          | string  | -               | ""                                                                                                                                                     |
-| open      | Whether collapse is open or not, v-model:open to make it two-way binding | boolean | -               | true                                                                                                                                                   |
-| override  |                                                                          | boolean | -               |                                                                                                                                                        |
-| position  | Trigger position                                                         | string  | `top`, `bottom` | "top"                                                                                                                                                  |
+| ariaId    |                                                                          | string  | -               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                               |
+| open      | Whether collapse is open or not, v-model:open to make it two-way binding | boolean | -               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                             |
+| override  |                                                                          | boolean | -               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                 |
+| position  | Trigger position                                                         | string  | `top`, `bottom` | <code style='white-space: nowrap; padding: 0;'>"top"</code>                                                                                            |
 
 ### Events
 
diff --git a/packages/docs-next/components/Datepicker.md b/packages/docs-next/components/Datepicker.md
index eac74b14f..69599f9c8 100644
--- a/packages/docs-next/components/Datepicker.md
+++ b/packages/docs-next/components/Datepicker.md
@@ -36,77 +36,74 @@ title: Datepicker
 
 ### Props
 
-| Prop name                 | Description                                                 | Type           | Values                                            | Default                                                                                                                                                                 |
-| ------------------------- | ----------------------------------------------------------- | -------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| appendToBody              |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| ariaNextLabel             |                                                             | string         | -                                                 |                                                                                                                                                                         |
-| ariaPreviousLabel         |                                                             | string         | -                                                 |                                                                                                                                                                         |
-| autocomplete              | Native options to use in HTML5 validation                   | string         | -                                                 |                                                                                                                                                                         |
-| closeOnClick              |                                                             | boolean        | -                                                 | true                                                                                                                                                                    |
-| dateCreator               |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                                      |
-| dateFormatter             |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                                      |
-| dateParser                |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                                      |
-| dayNames                  |                                                             | array          | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;dayNames: undefined,<br>}</code>               |
-| disabled                  |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| editable                  |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| events                    |                                                             | array          | -                                                 |                                                                                                                                                                         |
-| expanded                  | Makes input full width when inside a grouped or addon field | boolean        | -                                                 |                                                                                                                                                                         |
-| firstDayOfWeek            |                                                             | number         | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;firstDayOfWeek: 0, <br>}</code>                |
-| focusedDate               |                                                             | Date           | -                                                 |                                                                                                                                                                         |
-| icon                      | Icon name to be added                                       | string         | -                                                 |                                                                                                                                                                         |
-| iconNext                  |                                                             | string         | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconNext: "chevron-right", <br>}</code>        |
-| iconPack                  | Icon pack to use                                            | string         | `mdi`, `fa`, `fas and any other custom icon pack` |                                                                                                                                                                         |
-| iconPrev                  |                                                             | string         | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconPrev: "chevron-left", <br>}</code>         |
-| iconRight                 |                                                             | string         | -                                                 |                                                                                                                                                                         |
-| iconRightClickable        |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| indicators                |                                                             | string         | -                                                 | "dots"                                                                                                                                                                  |
-| inline                    |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| locale                    |                                                             | string\|array  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;locale: undefined<br>}</code>                              |
-| maxDate                   |                                                             | Date           | -                                                 |                                                                                                                                                                         |
-| maxlength                 | Same as native maxlength, plus character counter            | number\|string | -                                                 |                                                                                                                                                                         |
-| minDate                   |                                                             | Date           | -                                                 |                                                                                                                                                                         |
-| mobileBreakpoint          | Mobile breakpoint as max-width value                        | string         | -                                                 |                                                                                                                                                                         |
-| mobileModal               |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileModal: true, <br>}</code>                |
-| mobileNative              |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileNative: true, <br>}</code>               |
-| modelValue                |                                                             | date\|array    | -                                                 |                                                                                                                                                                         |
-| monthNames                |                                                             | array          | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;monthNames: undefined,<br>}</code>             |
-| multiple                  |                                                             | boolean        | -                                                 | false                                                                                                                                                                   |
-| nearbyMonthDays           |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;nearbyMonthDays: true, <br>}</code>            |
-| nearbySelectableMonthDays |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;nearbySelectableMonthDays: false, <br>}</code> |
-| openOnFocus               |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| override                  |                                                             | boolean        | -                                                 |                                                                                                                                                                         |
-| placeholder               |                                                             | string         | -                                                 |                                                                                                                                                                         |
-| position                  |                                                             | string         | -                                                 |                                                                                                                                                                         |
-| range                     |                                                             | boolean        | -                                                 | false                                                                                                                                                                   |
-| rounded                   | Makes the element rounded                                   | boolean        | -                                                 |                                                                                                                                                                         |
-| rulesForFirstWeek         |                                                             | number         | -                                                 | Default function (see source code)                                                                                                                                      |
-| selectableDates           |                                                             | array\|func    | -                                                 |                                                                                                                                                                         |
-| showWeekNumber            |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;showWeekNumber: false, <br>}</code>            |
-| size                      | Size of button, optional                                    | string         | `small`, `medium`, `large`                        |                                                                                                                                                                         |
-| statusIcon                | Show status icon using field and variant prop               | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                               |
-| trapFocus                 |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;trapFocus: true, <br>}</code>                  |
-| type                      |                                                             | string         | -                                                 |                                                                                                                                                                         |
-| unselectableDates         |                                                             | array\|func    | -                                                 |                                                                                                                                                                         |
-| unselectableDaysOfWeek    |                                                             | array          | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;unselectableDaysOfWeek: undefined,<br>}</code> |
-| useHtml5Validation        | Enable html 5 native validation                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                       |
-| validationMessage         | The message which is shown when a validation error occurs   | string         | -                                                 |                                                                                                                                                                         |
-| weekNumberClickable       |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;weekNumberClickable: false, <br>}</code>       |
-| yearsRange                |                                                             | array          | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;yearsRange: [-100, 10],<br>}</code>            |
+| Prop name                 | Description                                                             | Type                                   | Values                                            | Default                                                                                                                                                               |
+| ------------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| active                    | The active state of the dropdown                                        | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| appendToBody              | Append autocomplete content to body                                     | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;appendToBody: false<br>}</code>              |
+| ariaNextLabel             | A11y next button aria label                                             | string                                 | -                                                 | <code style='white-space: nowrap; padding: 0;'>"Next Page"</code>                                                                                                     |
+| ariaPreviousLabel         | A11y previous button aria label                                         | string                                 | -                                                 | <code style='white-space: nowrap; padding: 0;'>"Previous Page"</code>                                                                                                 |
+| closeOnClick              |                                                                         | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;closeOnClick: true<br>}</code>               |
+| dateCreator               | Date creator function, default is `new Date()`                          | () =&gt; Date                          | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;dateCreator: () => new Date()<br>}</code>    |
+| dateFormatter             | Custom function to format a date into a string                          | (date: Date \| Date[]) =&gt; string    | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>icker: {<br>&nbsp;&nbsp;dateFormatter: defaultFunction<br>}</code>        |
+| dateParser                | Custom function to parse a string into a date                           | (date: string) =&gt; Date              | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>atepicker: {<br>&nbsp;&nbsp;dateParser: defaultFunction<br>}</code>       |
+| dayNames                  | Set custom day names, else use names based on locale                    | string[]                               | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;dayNames: undefined<br>}</code>              |
+| disabled                  | Same as native disabled                                                 | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| events                    | Events to display on picker                                             | DatepickerEvent[]                      | -                                                 |                                                                                                                                                                       |
+| expanded                  | Makes input full width when inside a grouped or addon field             | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| firstDayOfWeek            | Set the first day of a week                                             | number                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;firstDayOfWeek: 0<br>}</code>                |
+| focusedDate               | Set default date to focus on                                            | date                                   | -                                                 |                                                                                                                                                                       |
+| icon                      | Icon name to be shown                                                   | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>                  |
+| iconNext                  | Icon name for next icon                                                 | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconNext: "chevron-right"<br>}</code>        |
+| iconPack                  | Icon pack to use                                                        | string                                 | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>              |
+| iconPrev                  | Icon name for previous icon                                             | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconPrev: "chevron-left"<br>}</code>         |
+| iconRight                 | Icon name to be added on the right side                                 | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>             |
+| iconRightClickable        | Make the icon right clickable                                           | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| indicators                | Event indicators for style class definiton                              | string                                 | -                                                 | <code style='white-space: nowrap; padding: 0;'>"dots"</code>                                                                                                          |
+| inline                    | Display datepicker inline                                               | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| locale                    | Date format locale                                                      | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;locale: undefined<br>}</code>                            |
+| maxDate                   | Max date to select                                                      | date                                   | -                                                 |                                                                                                                                                                       |
+| minDate                   | Min date to select                                                      | date                                   | -                                                 |                                                                                                                                                                       |
+| mobileModal               | Enable dropdown mobile modal                                            | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileModal: true<br>}</code>                |
+| mobileNative              | Enable mobile native input if mobile agent                              | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileNative: true<br>}</code>               |
+| monthNames                | Set custom month names, else use names based on locale                  | string[]                               | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;monthNames: undefined<br>}</code>            |
+| multiple                  | Same as native, also push new item to v-model instead of replacing      | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| nearbyMonthDays           | Show nearby month days                                                  | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;nearbyMonthDays: true<br>}</code>            |
+| nearbySelectableMonthDays | Define if nearby month days can be selected                             | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;nearbySelectableMonthDays: false<br>}</code> |
+| openOnFocus               |                                                                         | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;openOnFocus: true<br>}</code>                |
+| placeholder               | Input placeholder                                                       | string                                 | -                                                 |                                                                                                                                                                       |
+| position                  | Dropdown position                                                       | string                                 | -                                                 |                                                                                                                                                                       |
+| range                     | Enable date range selection                                             | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| readonly                  | Same as native input readonly                                           | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                            |
+| rounded                   | Makes the input rounded                                                 | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                           |
+| rulesForFirstWeek         | Rules for the first week : 1 for the 1st January, 4 for the 4th January | number                                 | -                                                 | Default function (see source code)                                                                                                                                    |
+| selectableDates           | Define a list of dates which can be selected                            | Date[] \| ((date: Date) =&gt; boolean) | -                                                 | Default function (see source code)                                                                                                                                    |
+| showWeekNumber            | Show weeek numbers                                                      | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;showWeekNumber: false<br>}</code>            |
+| size                      | Size of the control input, optional                                     | string                                 | `small`, `medium`, `large`                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;size: undefined<br>}</code>                  |
+| trapFocus                 | Dropdown trapFocus                                                      | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code>                  |
+| type                      | Define picker mode                                                      | string                                 | `date`, `month`                                   | <code style='white-space: nowrap; padding: 0;'>"date"</code>                                                                                                          |
+| unselectableDates         | Define a list of dates which can not be selected                        | Date[] \| ((date: Date) =&gt; boolean) | -                                                 | Default function (see source code)                                                                                                                                    |
+| unselectableDaysOfWeek    | Define a list of weeks which can not be selected                        | number[]                               | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>atepicker: {<br>&nbsp;&nbsp;unselectableDaysOfWeek: undefined<br>}</code> |
+| useHtml5Validation        | Enable html 5 native validation                                         | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                     |
+| v-model                   |                                                                         | Date \| Date[]                         | -                                                 |                                                                                                                                                                       |
+| validationMessage         | The message which is shown when a validation error occurs               | string                                 | -                                                 |                                                                                                                                                                       |
+| weekNumberClickable       | Define if weeek numbers are clickable                                   | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;weekNumberClickable: false<br>}</code>       |
+| yearsRange                | Define the range of years to show                                       | number[]                               | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;yearsRange: [-100<br>}</code>                |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| icon-right-click  |            |
-| range-start       |            |
-| range-end         |            |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
-| change-month      |            |
-| change-year       |            |
-| active-change     |            |
+| Event name        | Properties                                           | Description                      |
+| ----------------- | ---------------------------------------------------- | -------------------------------- |
+| focus             | **event** `Event` - native event                     | on input focus event             |
+| blur              | **event** `Event` - native event                     | on input blur event              |
+| invalid           | **event** `Event` - native event                     | on input invalid event           |
+| icon-click        | **event** `Event` - native event                     | on icon click event              |
+| icon-right-click  | **event** `Event` - native event                     | on icon right click event        |
+| range-start       | **value** `Date` - range start date                  | on range start is selected event |
+| range-end         | **value** `Date` - range end date                    | on range end is selected event   |
+| update:modelValue | **value** `Date \| Date[]` - updated modelValue prop | modelValue prop two-way binding  |
+| update:active     | **value** `boolean` - updated active prop            | active prop two-way binding      |
+| change-month      | **value** `number` - month number                    | on month change event            |
+| change-year       | **value** `number` - year number                     | on year change event             |
 
 ### Slots
 
@@ -114,7 +111,7 @@ title: Datepicker
 | ------- | ----------- | -------- |
 | trigger |             |          |
 | header  |             |          |
-| table   |             |          |
+| body    |             |          |
 | footer  |             |          |
 
 </div>
diff --git a/packages/docs-next/components/Datetimepicker.md b/packages/docs-next/components/Datetimepicker.md
index f9ac5fbe1..7be0a51a1 100644
--- a/packages/docs-next/components/Datetimepicker.md
+++ b/packages/docs-next/components/Datetimepicker.md
@@ -36,51 +36,51 @@ title: Datetimepicker
 
 ### Props
 
-| Prop name          | Description                                                 | Type           | Values                                            | Default                                                                                                                                           |
-| ------------------ | ----------------------------------------------------------- | -------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| appendToBody       |                                                             | boolean        | -                                                 |                                                                                                                                                   |
-| autocomplete       | Native options to use in HTML5 validation                   | string         | -                                                 |                                                                                                                                                   |
-| datepicker         |                                                             | object         | -                                                 |                                                                                                                                                   |
-| datetimeCreator    |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                |
-| datetimeFormatter  |                                                             | func           | -                                                 |                                                                                                                                                   |
-| datetimeParser     |                                                             | func           | -                                                 |                                                                                                                                                   |
-| disabled           |                                                             | boolean        | -                                                 |                                                                                                                                                   |
-| editable           |                                                             | boolean        | -                                                 | false                                                                                                                                             |
-| expanded           | Makes input full width when inside a grouped or addon field | boolean        | -                                                 |                                                                                                                                                   |
-| icon               | Icon name to be added                                       | string         | -                                                 |                                                                                                                                                   |
-| iconPack           | Icon pack to use                                            | string         | `mdi`, `fa`, `fas and any other custom icon pack` |                                                                                                                                                   |
-| iconRight          |                                                             | string         | -                                                 |                                                                                                                                                   |
-| iconRightClickable |                                                             | boolean        | -                                                 |                                                                                                                                                   |
-| inline             |                                                             | boolean        | -                                                 |                                                                                                                                                   |
-| locale             |                                                             | string\|array  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;locale: undefined<br>}</code>        |
-| maxDatetime        |                                                             | date           | -                                                 |                                                                                                                                                   |
-| maxlength          | Same as native maxlength, plus character counter            | number\|string | -                                                 |                                                                                                                                                   |
-| minDatetime        |                                                             | date           | -                                                 |                                                                                                                                                   |
-| mobileNative       |                                                             | boolean        | -                                                 | true                                                                                                                                              |
-| modelValue         |                                                             | date           | -                                                 |                                                                                                                                                   |
-| openOnFocus        |                                                             | boolean        | -                                                 |                                                                                                                                                   |
-| override           |                                                             | boolean        | -                                                 |                                                                                                                                                   |
-| placeholder        |                                                             | string         | -                                                 |                                                                                                                                                   |
-| position           |                                                             | string         | -                                                 |                                                                                                                                                   |
-| rounded            | Makes the element rounded                                   | boolean        | -                                                 |                                                                                                                                                   |
-| size               |                                                             | string         | -                                                 |                                                                                                                                                   |
-| statusIcon         | Show status icon using field and variant prop               | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>         |
-| timepicker         |                                                             | object         | -                                                 |                                                                                                                                                   |
-| useHtml5Validation | Enable html 5 native validation                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code> |
-| validationMessage  | The message which is shown when a validation error occurs   | string         | -                                                 |                                                                                                                                                   |
+| Prop name          | Description                                               | Type                      | Values                                            | Default                                                                                                                                                                            |
+| ------------------ | --------------------------------------------------------- | ------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| active             | The active state of the dropdown                          | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| appendToBody       | Append autocomplete content to body                       | boolean                   | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;appendToBody: false<br>}</code>                           |
+| datepicker         | Define props for the underlying datepicker component      | DatepickerProps           | -                                                 |                                                                                                                                                                                    |
+| datetimeCreator    | Date creator function, default is `new Date()`            | (date: Date) =&gt; Date   | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datetimepicker: {<br>&nbsp;&nbsp;datetimeCreator: (d: Date) => new Date(d)<br>}</code> |
+| datetimeFormatter  | Custom function to format a date into a string            | (date: Date) =&gt; string | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>imepicker: {<br>&nbsp;&nbsp;dateFormatter: defaultFunction<br>}</code>                 |
+| datetimeParser     | Custom function to parse a string into a date             | (date: string) =&gt; Date | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>atetimepicker: {<br>&nbsp;&nbsp;dateParser: defaultFunction<br>}</code>                |
+| disabled           | Same as native disabled                                   | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| expanded           |                                                           | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| icon               | Icon name to be shown                                     | string                    | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>                               |
+| iconPack           | Icon pack to use                                          | string                    | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>                           |
+| iconRight          | Icon name to be added on the right side                   | string                    | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>                          |
+| iconRightClickable | Make the icon right clickable                             | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| inline             | Display datetimepicker inline                             | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| locale             | Date format locale                                        | string                    | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;locale: undefined<br>}</code>                                         |
+| maxDatetime        | Max date to select                                        | date                      | -                                                 |                                                                                                                                                                                    |
+| minDatetime        | Min date to select                                        | date                      | -                                                 |                                                                                                                                                                                    |
+| mobileNative       | Enable mobile native input if mobile agent                | boolean                   | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileNative: true<br>}</code>                            |
+| openOnFocus        |                                                           | boolean                   | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datetimepicker: {<br>&nbsp;&nbsp;openOnFocus: true<br>}</code>                         |
+| placeholder        | Input placeholder                                         | string                    | -                                                 |                                                                                                                                                                                    |
+| position           | Dropdown position                                         | string                    | -                                                 |                                                                                                                                                                                    |
+| readonly           | Same as native input readonly                             | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| rounded            | Makes the input rounded                                   | boolean                   | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                        |
+| size               | Size of the control input, optional                       | string                    | `small`, `medium`, `large`                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datetimepicker: {<br>&nbsp;&nbsp;size: undefined<br>}</code>                           |
+| timepicker         | Define props for the underlying timepicker component      | TimepickerProps           | -                                                 |                                                                                                                                                                                    |
+| useHtml5Validation | Enable html 5 native validation                           | boolean                   | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                                  |
+| v-model            |                                                           | date                      | -                                                 |                                                                                                                                                                                    |
+| validationMessage  | The message which is shown when a validation error occurs | string                    | -                                                 |                                                                                                                                                                                    |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| active-change     |            |
-| icon-right-click  |            |
-| change-month      |            |
-| change-year       |            |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
+| Event name        | Properties                                           | Description                      |
+| ----------------- | ---------------------------------------------------- | -------------------------------- |
+| change-month      | **value** `number` - month number                    | on month change event            |
+| change-year       | **value** `number` - year number                     | on year change event             |
+| icon-click        | **event** `Event` - native event                     | on icon click event              |
+| icon-right-click  | **event** `Event` - native event                     | on icon right click event        |
+| update:modelValue | **value** `Date \| Date[]` - updated modelValue prop | modelValue prop two-way binding  |
+| update:active     | **value** `boolean` - updated active prop            | active prop two-way binding      |
+| range-start       | **value** `Date` - range start date                  | on range start is selected event |
+| range-end         | **value** `Date` - range end date                    | on range end is selected event   |
+| focus             | **event** `Event` - native event                     | on input focus event             |
+| blur              | **event** `Event` - native event                     | on input blur event              |
+| invalid           | **event** `Event` - native event                     | on input invalid event           |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Dropdown.md b/packages/docs-next/components/Dropdown.md
index 91aae84fd..0e2cfd5c1 100644
--- a/packages/docs-next/components/Dropdown.md
+++ b/packages/docs-next/components/Dropdown.md
@@ -36,38 +36,37 @@ title: Dropdown
 
 ### Props
 
-| Prop name              | Description                                                                                                                                            | Type                                   | Values                                   | Default                                                                                                                                                |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| animation              | Custom animation (transition name)                                                                                                                     | string                                 | -                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code> |
-| appendToBody           | Append dropdown content to body                                                                                                                        | boolean                                | -                                        |                                                                                                                                                        |
-| appendToBodyCopyParent |                                                                                                                                                        | boolean                                | -                                        |                                                                                                                                                        |
-| ariaRole               | Role attribute to be passed to list container for better accessibility. Use menu only in situations where your dropdown is related to navigation menus | string                                 | `list`, `menu`, `dialog`                 | null                                                                                                                                                   |
-| canClose               | Can close dropdown by pressing escape or by clicking outside                                                                                           | array\|boolean                         | `escape`, `outside`                      | true                                                                                                                                                   |
-| closeOnClick           | Close dropdown when content is clicked                                                                                                                 | boolean                                | -                                        | true                                                                                                                                                   |
-| disabled               | Dropdown disabled                                                                                                                                      | boolean                                | -                                        |                                                                                                                                                        |
-| expanded               | Dropdown will be expanded (full-width)                                                                                                                 | boolean                                | -                                        |                                                                                                                                                        |
-| inline                 | Dropdown content (items) are shown inline, trigger is removed                                                                                          | boolean                                | -                                        |                                                                                                                                                        |
-| label                  | Trigger label, unnecessary when trgger slot is used                                                                                                    | string                                 | -                                        | undefined                                                                                                                                              |
-| maxHeight              | Max height of dropdown content                                                                                                                         | string\|number                         | -                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;maxHeight: 200<br>}</code>      |
-| menuTag                | Dropdown menu tag name                                                                                                                                 | string \| Component                    | -                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;menuTag: "div"<br>}</code>      |
-| mobileBreakpoint       | Mobile breakpoint as max-width value                                                                                                                   | string                                 | -                                        |                                                                                                                                                        |
-| mobileModal            | Dropdown content (items) are shown into a modal on mobile                                                                                              | boolean                                | -                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;mobileModal: true, <br>}</code> |
-| multiple               | Allows multiple selections                                                                                                                             | boolean                                | -                                        |                                                                                                                                                        |
-| override               |                                                                                                                                                        | boolean                                | -                                        |                                                                                                                                                        |
-| position               | Optional, position of the dropdown relative to the trigger                                                                                             | string                                 | `top-right`, `top-left`, `bottom-left`   |                                                                                                                                                        |
-| scrollable             | Dropdown content will be scrollable                                                                                                                    | boolean                                | -                                        |                                                                                                                                                        |
-| trapFocus              | Trap focus inside the dropdown.                                                                                                                        | boolean                                | -                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code>     |
-| triggerTabindex        | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key)                                                           | number                                 | -                                        | 0                                                                                                                                                      |
-| triggers               | Dropdown will be triggered by any events                                                                                                               | array                                  | `click`, `hover`, `contextmenu`, `focus` | ["click"]                                                                                                                                              |
-| v-model                |                                                                                                                                                        | string\|number\|boolean\|object\|array | -                                        | null                                                                                                                                                   |
+| Prop name    | Description                                                                                                                                                      | Type                                   | Values                                                 | Default                                                                                                                                                    |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| active       | The active state of the dropdown                                                                                                                                 | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| animation    | Custom animation (transition name)                                                                                                                               | string                                 | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code>       |
+| appendToBody | Append dropdown content to body                                                                                                                                  | boolean                                | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;appendToBody: false<br>}</code> |
+| ariaRole     | Role attribute to be passed to the list container for better accessibility.<br/>Use menu only in situations where your dropdown is related to a navigation menu. | string                                 | `list`, `menu`, `dialog`                               | <code style='white-space: nowrap; padding: 0;'>"list"</code>                                                                                               |
+| canClose     | Can close dropdown by pressing escape or by clicking outside                                                                                                     | array\|boolean                         | `escape`, `outside`                                    | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                 |
+| closeOnClick | Close dropdown when content is clicked                                                                                                                           | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                 |
+| disabled     | Dropdown is disabled                                                                                                                                             | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| expanded     | Dropdown will be expanded (full-width)                                                                                                                           | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| inline       | Dropdown content (items) are shown inline, trigger is removed                                                                                                    | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| label        | Trigger label, unnecessary when trgger slot is used                                                                                                              | string                                 | -                                                      |                                                                                                                                                            |
+| maxHeight    | Max height of dropdown content                                                                                                                                   | number                                 | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;maxHeight: 200<br>}</code>          |
+| menuTag      | Dropdown menu tag name                                                                                                                                           | string \| Component                    | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;menuTag: "div"<br>}</code>          |
+| mobileModal  | Dropdown content (items) are shown into a modal on mobile                                                                                                        | boolean                                | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;mobileModal: true<br>}</code>       |
+| multiple     | Allows multiple selections                                                                                                                                       | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| position     | Optional, position of the dropdown relative to the trigger                                                                                                       | string                                 | `top-right`, `top-left`, `bottom-left`, `bottom-right` |                                                                                                                                                            |
+| scrollable   | Dropdown content will be scrollable                                                                                                                              | boolean                                | -                                                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                |
+| tabindex     | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key)                                                                     | number                                 | -                                                      | <code style='white-space: nowrap; padding: 0;'>0</code>                                                                                                    |
+| trapFocus    | Trap focus inside the dropdown.                                                                                                                                  | boolean                                | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code>         |
+| triggerTag   | Dropdown trigger tag name                                                                                                                                        | string \| Component                    | -                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;triggerTag: "div"<br>}</code>       |
+| triggers     | Dropdown will be triggered by any events                                                                                                                         | string[]                               | `click`, `hover`, `contextmenu`, `focus`               | Default function (see source code)                                                                                                                         |
+| v-model      |                                                                                                                                                                  | string\|number\|boolean\|object\|array | -                                                      |                                                                                                                                                            |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| update:modelValue |            |
-| active-change     |            |
-| change            |            |
+| Event name        | Properties                                                                     | Description                     |
+| ----------------- | ------------------------------------------------------------------------------ | ------------------------------- |
+| update:modelValue | **value** `[String, Number, Boolean, Object, Array]` - updated modelValue prop | modelValue prop two-way binding |
+| update:active     | **value** `boolean` - updated active prop                                      | active prop two-way binding     |
+| change            | **value** `any` - selected value                                               | change event                    |
 
 ### Slots
 
@@ -88,22 +87,21 @@ title: Dropdown
 
 ### Props
 
-| Prop name | Description                                           | Type                                   | Values | Default                                                                                                                                           |
-| --------- | ----------------------------------------------------- | -------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaRole  |                                                       | string                                 | -      | ""                                                                                                                                                |
-| clickable | Item is clickable and emit an event                   | boolean                                | -      | true                                                                                                                                              |
-| disabled  | Item is disabled                                      | boolean                                | -      |                                                                                                                                                   |
-| label     | Item label, unnecessary when default slot is used     | string                                 | -      | undefined                                                                                                                                         |
-| override  |                                                       | boolean                                | -      |                                                                                                                                                   |
-| tabindex  |                                                       | number\|string                         | -      | 0                                                                                                                                                 |
-| tag       | Dropdown item tag name                                | string \| Component                    | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;itemTag: "div"<br>}</code> |
-| value     | The value that will be returned on events and v-model | string\|number\|boolean\|object\|array | -      |                                                                                                                                                   |
+| Prop name | Description                                                                                                                                                          | Type                | Values                 | Default                                                                                                                                           |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ariaRole  | Role attribute to be passed to the item container for better accessibility.<br/>Use menuitem only in situations where your dropdown is related to a navigation menu. | string              | `listitem`, `menuitem` | <code style='white-space: nowrap; padding: 0;'>"listitem"</code>                                                                                  |
+| clickable | Item is clickable and emit an event                                                                                                                                  | boolean             | -                      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                        |
+| disabled  | Item is disabled                                                                                                                                                     | boolean             | -                      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                       |
+| label     | Item label, unnecessary when default slot is used                                                                                                                    | string              | -                      |                                                                                                                                                   |
+| tabindex  | Set the tabindex attribute on the dropdown item div (-1 to prevent selection via tab key)                                                                            | number\|string      | -                      | <code style='white-space: nowrap; padding: 0;'>0</code>                                                                                           |
+| tag       | Dropdown item tag name                                                                                                                                               | string \| Component | -                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;itemTag: "div"<br>}</code> |
+| value     | The value that will be returned on events and v-model                                                                                                                | T                   | -                      | Default function (see source code)                                                                                                                |
 
 ### Events
 
-| Event name | Properties | Description |
-| ---------- | ---------- | ----------- |
-| click      |            |
+| Event name | Properties                                                                                                  | Description   |
+| ---------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
+| click      | **value** `[String, Number, Boolean, Object, Array]` - value prop data<br/>**event** `event` - Native Event | onclick event |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Field.md b/packages/docs-next/components/Field.md
index 576f802b5..2b57e1e3c 100644
--- a/packages/docs-next/components/Field.md
+++ b/packages/docs-next/components/Field.md
@@ -36,19 +36,18 @@ title: Field
 
 ### Props
 
-| Prop name        | Description                                                                                                      | Type    | Values                                                                          | Default |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------- | ------- |
-| addons           | Field automatically attach controls together                                                                     | boolean | -                                                                               | true    |
-| groupMultiline   | Allow controls to fill up multiple lines, making it responsive                                                   | boolean | -                                                                               |         |
-| grouped          | Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page)   | boolean | -                                                                               |         |
-| horizontal       | Group label and control on the same line for horizontal forms                                                    | boolean | -                                                                               |         |
-| label            | Field label                                                                                                      | string  | -                                                                               |         |
-| labelFor         | Same as native for set on the label                                                                              | string  | -                                                                               |         |
-| labelSize        | Vertical size of input, optional                                                                                 | string  | `small`, `medium`, `large`                                                      |         |
-| message          | Help message text                                                                                                | string  | -                                                                               |         |
-| mobileBreakpoint | Mobile breakpoint as max-width value                                                                             | string  | -                                                                               |         |
-| override         |                                                                                                                  | boolean | -                                                                               |         |
-| variant          | Color of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocomplete | string  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |         |
+| Prop name        | Description                                                                                                           | Type    | Values                                                                          | Default                                                                                                                                                     |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| addons           | Field automatically attach controls together                                                                          | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
+| groupMultiline   | Allow controls to fill up multiple lines, making it responsive                                                        | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| grouped          | Direct child components/elements of Field will be grouped horizontally<br/>(see which ones at the top of the page).   | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| horizontal       | Group label and control on the same line for horizontal forms                                                         | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| label            | Field label                                                                                                           | string  | -                                                                               |                                                                                                                                                             |
+| labelFor         | Same as native for set on the label                                                                                   | string  | -                                                                               |                                                                                                                                                             |
+| labelSize        | Vertical size of input, optional                                                                                      | string  | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;labelsize: undefined<br>}</code>        |
+| message          | Help message text                                                                                                     | string  | -                                                                               |                                                                                                                                                             |
+| mobileBreakpoint | Mobile breakpoint as max-width value                                                                                  | string  | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;mobileBreakpoint: undefined<br>}</code> |
+| variant          | Color of the field and help message, also adds a matching icon, optional.<br/>Used by Input, Select and Autocomplete. | string  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                             |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Icon.md b/packages/docs-next/components/Icon.md
index f9443caaf..20bca156f 100644
--- a/packages/docs-next/components/Icon.md
+++ b/packages/docs-next/components/Icon.md
@@ -36,20 +36,19 @@ title: Icon
 
 ### Props
 
-| Prop name   | Description                                                                                                          | Type           | Values                                                                                                                             | Default |
-| ----------- | -------------------------------------------------------------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| both        |                                                                                                                      | boolean        | -                                                                                                                                  |         |
-| clickable   | When true makes icon clickable                                                                                       | boolean        | -                                                                                                                                  |         |
-| component   | Icon component name                                                                                                  | string         | -                                                                                                                                  |         |
-| customClass | Add class to icon font, optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classes | string         | -                                                                                                                                  |         |
-| customSize  | Overrides icon font size, optional                                                                                   | string         | `Depends on library: null (smallest)`, `fa-lg`, `fa-2x`, `fa-3x`, `fa-4x`, `fa-5x`, `mdi-18px`, `mdi-24px`, `mdi-36px`, `mdi-48px` |         |
-| icon        | Icon name                                                                                                            | string         | -                                                                                                                                  |         |
-| override    |                                                                                                                      | boolean        | -                                                                                                                                  |         |
-| pack        | Icon pack to use                                                                                                     | string         | `mdi`, `fa`, `fas and any other custom icon pack`                                                                                  |         |
-| rotation    | Rotation 0-360                                                                                                       | number\|string | -                                                                                                                                  |         |
-| size        | Icon size, optional                                                                                                  | string         | `small`, `medium`, `large`                                                                                                         |         |
-| spin        | Enable spin effect on icon                                                                                           | boolean        | -                                                                                                                                  |         |
-| variant     | Color of the icon, optional                                                                                          | string\|object | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color`                                                    |         |
+| Prop name   | Description                                                                                                          | Type           | Values                                                                                                                             | Default                                                |
+| ----------- | -------------------------------------------------------------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| clickable   | When true makes icon clickable                                                                                       | boolean        | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| component   | Icon component name                                                                                                  | string         | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| customClass | Add class to icon font, optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classes | string         | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| customSize  | Overrides icon font size, optional                                                                                   | string         | `Depends on library: null (smallest)`, `fa-lg`, `fa-2x`, `fa-3x`, `fa-4x`, `fa-5x`, `mdi-18px`, `mdi-24px`, `mdi-36px`, `mdi-48px` | <code style='white-space: nowrap; padding: 0;'></code> |
+| icon        | Icon name                                                                                                            | string         | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| override    |                                                                                                                      | boolean        | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| pack        | Icon pack to use                                                                                                     | string         | `mdi`, `fa`, `fas and any other custom icon pack`                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| rotation    | Rotation 0-360                                                                                                       | number\|string | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| size        | Icon size, optional                                                                                                  | string         | `small`, `medium`, `large`                                                                                                         | <code style='white-space: nowrap; padding: 0;'></code> |
+| spin        | Enable spin effect on icon                                                                                           | boolean        | -                                                                                                                                  | <code style='white-space: nowrap; padding: 0;'></code> |
+| variant     | Color of the icon, optional                                                                                          | string\|object | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color`                                                    | <code style='white-space: nowrap; padding: 0;'></code> |
 
 </div>
 
diff --git a/packages/docs-next/components/Input.md b/packages/docs-next/components/Input.md
index 53e50af24..b704c6407 100644
--- a/packages/docs-next/components/Input.md
+++ b/packages/docs-next/components/Input.md
@@ -36,43 +36,43 @@ title: Input
 
 ### Props
 
-| Prop name          | Description                                                 | Type           | Values                                                                          | Default                                                                                                                                                     |
-| ------------------ | ----------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| autocomplete       | Native options to use in HTML5 validation                   | string         | -                                                                               |                                                                                                                                                             |
-| autosize           | Automatically adjust height in textarea                     | boolean        | -                                                                               | false                                                                                                                                                       |
-| clearIcon          | Icon name to be added on the clear button                   | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearIcon: "close-circle", <br>}</code> |
-| clearable          | Add a button/icon to clear the inputed text                 | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearable: false<br>}</code>            |
-| expanded           | Makes input full width when inside a grouped or addon field | boolean        | -                                                                               |                                                                                                                                                             |
-| hasCounter         | Show character counter when maxlength prop is passed        | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;counter: false<br>}</code>              |
-| icon               | Icon name to be added                                       | string         | -                                                                               |                                                                                                                                                             |
-| iconClickable      | Makes the icon clickable                                    | boolean        | -                                                                               |                                                                                                                                                             |
-| iconPack           | Icon pack to use                                            | string         | `mdi`, `fa`, `fas and any other custom icon pack`                               |                                                                                                                                                             |
-| iconRight          | Icon name to be added on the right side                     | string         | -                                                                               |                                                                                                                                                             |
-| iconRightClickable | Make the icon right clickable                               | boolean        | -                                                                               |                                                                                                                                                             |
-| iconRightVariant   | Variant of right icon                                       | string         | -                                                                               |                                                                                                                                                             |
-| maxlength          | Same as native maxlength, plus character counter            | number\|string | -                                                                               |                                                                                                                                                             |
-| override           |                                                             | boolean        | -                                                                               |                                                                                                                                                             |
-| passwordReveal     | Adds the reveal password functionality                      | boolean        | -                                                                               |                                                                                                                                                             |
-| rounded            | Makes the element rounded                                   | boolean        | -                                                                               |                                                                                                                                                             |
-| size               | Vertical size of input, optional                            | string         | `small`, `medium`, `large`                                                      |                                                                                                                                                             |
-| statusIcon         | Show status icon using field and variant prop               | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                   |
-| type               | Input type, like native                                     | string         | `Any native input type`, `and textarea`                                         | "text"                                                                                                                                                      |
-| useHtml5Validation | Enable html 5 native validation                             | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>           |
-| v-model            |                                                             | number\|string | -                                                                               |                                                                                                                                                             |
-| validationMessage  | The message which is shown when a validation error occurs   | string         | -                                                                               |                                                                                                                                                             |
-| variant            | Color of the control, optional                              | string         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                             |
+| Prop name          | Description                                                 | Type           | Values                                                                          | Default                                                                                                                                                   |
+| ------------------ | ----------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autocomplete       | Native options to use in HTML5 validation                   | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>       |
+| autosize           | Automatically adjust height in textarea                     | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| clearIcon          | Icon name to be added on the clear button                   | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearIcon: "close-circle"<br>}</code> |
+| clearable          | Add a button/icon to clear the inputed text                 | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearable: false<br>}</code>          |
+| disabled           | Same as native disabled                                     | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| expanded           | Makes input full width when inside a grouped or addon field | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| hasCounter         | Show character counter when maxlength prop is passed        | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;counter: false<br>}</code>            |
+| icon               | Icon name to be shown                                       | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>           |
+| iconClickable      | Makes the icon clickable                                    | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| iconPack           | Icon pack to use                                            | string         | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>       |
+| iconRight          | Icon name to be added on the right side                     | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>      |
+| iconRightClickable | Make the icon right clickable                               | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| iconRightVariant   | Variant of right icon                                       | string         | -                                                                               |                                                                                                                                                           |
+| maxlength          | Same as native maxlength, plus character counter            | number         | -                                                                               |                                                                                                                                                           |
+| passwordReveal     | Adds the reveal password functionality                      | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| placeholder        | Input placeholder                                           | string         | -                                                                               |                                                                                                                                                           |
+| rounded            | Makes the element rounded                                   | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| size               | Size of the control, optional                               | string         | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;size: undefined<br>}</code>           |
+| statusIcon         | Show status icon using field and variant prop               | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                 |
+| type               | Input type, like native                                     | string         | `Any native input type`, `and textarea`                                         | <code style='white-space: nowrap; padding: 0;'>"text"</code>                                                                                              |
+| useHtml5Validation | Enable html 5 native validation                             | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>         |
+| v-model            |                                                             | string\|number | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                                  |
+| validationMessage  | The message which is shown when a validation error occurs   | string         | -                                                                               |                                                                                                                                                           |
+| variant            | Color of the control, optional                              | string         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>        |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
-| input             |            |
-| icon-click        |            |
-| icon-right-click  |            |
+| Event name        | Properties                                             | Description                     |
+| ----------------- | ------------------------------------------------------ | ------------------------------- |
+| update:modelValue | **value** `string \| number` - updated modelValue prop | modelValue prop two-way binding |
+| focus             | **event** `Event` - native event                       | on input focus event            |
+| blur              | **event** `Event` - native event                       | on input blur event             |
+| invalid           | **event** `Event` - native event                       | on input invalid event          |
+| icon-click        | **event** `Event` - native event                       | on icon click event             |
+| icon-right-click  | **event** `Event` - native event                       | on icon right click event       |
 
 </div>
 
diff --git a/packages/docs-next/components/Inputitems.md b/packages/docs-next/components/Inputitems.md
index 297fb66cd..97a5462ac 100644
--- a/packages/docs-next/components/Inputitems.md
+++ b/packages/docs-next/components/Inputitems.md
@@ -6,7 +6,7 @@ title: Inputitems
 
 <div class="vp-doc">
 
-> A simple item input field that can have autocomplete functionality
+> A simple tag input field that can have autocomplete functionality
 
 <Carbon />
 </div>
@@ -36,67 +36,66 @@ title: Inputitems
 
 ### Props
 
-| Prop name           | Description                                                                                                                                                            | Type           | Values                                                                          | Default                                                                                                                                                                   |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| allowAutocomplete   | Add autocomplete feature (if true, any Autocomplete props may be used too)                                                                                             | boolean        | -                                                                               |                                                                                                                                                                           |
-| allowDuplicates     | Allows adding the same item multiple time                                                                                                                              | boolean        | -                                                                               | false                                                                                                                                                                     |
-| allowNew            | When autocomplete, it allow to add new items                                                                                                                           | boolean        | -                                                                               |                                                                                                                                                                           |
-| appendToBody        | Append autocomplete content to body                                                                                                                                    | boolean        | -                                                                               |                                                                                                                                                                           |
-| ariaCloseLabel      | Accessibility label for the close button                                                                                                                               | string         | -                                                                               |                                                                                                                                                                           |
-| autocomplete        | Native options to use in HTML5 validation                                                                                                                              | string         | -                                                                               |                                                                                                                                                                           |
-| beforeAdding        | Function to validate the value of the item before adding                                                                                                               | func           | -                                                                               | Default function (see source code)                                                                                                                                        |
-| checkInfiniteScroll | Makes the autocomplete component check if list reached scroll end and emit infinite-scroll event                                                                       | boolean        | -                                                                               | false                                                                                                                                                                     |
-| closable            | Add close/delete button to the item                                                                                                                                    | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;closable: true, <br>}</code>                     |
-| closeIcon           | Icon name of close icon on selected item                                                                                                                               | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;closeIcon: "close", <br>}</code>                 |
-| confirmKeys         | Array of keys<br/>(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)<br/>which will add a item when typing (default comma, tab and enter) | array          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;confirmKeys: [ ",", "Tab", "Enter",]<br>}</code> |
-| createItem          | Function to create a new item to push into v-model (items)                                                                                                             | func           | -                                                                               | Default function (see source code)                                                                                                                                        |
-| data                | Items data                                                                                                                                                             | array          | -                                                                               | []                                                                                                                                                                        |
-| disabled            | Input will be disabled                                                                                                                                                 | boolean        | -                                                                               |                                                                                                                                                                           |
-| expanded            | Makes input full width when inside a grouped or addon field                                                                                                            | boolean        | -                                                                               |                                                                                                                                                                           |
-| field               | Property of the object (if data is array of objects) to use as display text                                                                                            | string         | -                                                                               | "value"                                                                                                                                                                   |
-| groupField          | Property of the object (if data is array of objects) to use as display text of group                                                                                   | string         | -                                                                               |                                                                                                                                                                           |
-| groupOptions        | Property of the object (if data is array of objects) to use as key to get items array of each group, optional                                                          | string         | -                                                                               |                                                                                                                                                                           |
-| hasCounter          | Show counter when maxlength or maxtags props are passed                                                                                                                | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;hasCounter: true, <br>}</code>                   |
-| icon                | Icon name to be added                                                                                                                                                  | string         | -                                                                               |                                                                                                                                                                           |
-| iconPack            | Icon pack to use                                                                                                                                                       | string         | `mdi`, `fa`, `fas and any other custom icon pack`                               |                                                                                                                                                                           |
-| keepFirst           | The first option will always be pre-selected (easier to just hit enter or tab)                                                                                         | boolean        | -                                                                               |                                                                                                                                                                           |
-| maxitems            | Limits the number of items, plus item counter                                                                                                                          | number\|string | -                                                                               |                                                                                                                                                                           |
-| maxlength           | Same as native maxlength, plus character counter                                                                                                                       | number\|string | -                                                                               |                                                                                                                                                                           |
-| onPasteSeparators   | Array of chars used to split when pasting a new string                                                                                                                 | array          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;onPasteSeparators: [","],<br>}</code>            |
-| openOnFocus         | Opens a dropdown with choices when the input field is focused                                                                                                          | boolean        | -                                                                               |                                                                                                                                                                           |
-| override            |                                                                                                                                                                        | boolean        | -                                                                               |                                                                                                                                                                           |
-| removeOnKeys        | Allow removing last item when pressing given keys, if input is empty                                                                                                   | array          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;removeOnKeys: [ "Backspace",]<br>}</code>        |
-| rounded             | Makes the element rounded                                                                                                                                              | boolean        | -                                                                               |                                                                                                                                                                           |
-| size                | Vertical size of input, optional                                                                                                                                       | string         | `small`, `medium`, `large`                                                      |                                                                                                                                                                           |
-| statusIcon          | Show status icon using field and variant prop                                                                                                                          | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                                 |
-| useHtml5Validation  | Enable html 5 native validation                                                                                                                                        | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                         |
-| v-model             |                                                                                                                                                                        | array          | -                                                                               | []                                                                                                                                                                        |
-| validationMessage   | The message which is shown when a validation error occurs                                                                                                              | string         | -                                                                               |                                                                                                                                                                           |
-| variant             | Color of the each items, optional                                                                                                                                      | string         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                                           |
+| Prop name          | Description                                                                                                                                                            | Type                          | Values                                                                          | Default                                                                                                                                                          |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| allowAutocomplete  | Add autocomplete feature (if true, any Autocomplete props may be used too)                                                                                             | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| allowDuplicates    | Allows adding the same item multiple time                                                                                                                              | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| allowNew           | When autocomplete, it allow to add new items                                                                                                                           | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| appendToBody       | Append autocomplete content to body                                                                                                                                    | boolean                       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;appendToBody: false<br>}</code>         |
+| ariaCloseLabel     | Accessibility label for the close button                                                                                                                               | string                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;ariaCloseLabel: undefined<br>}</code>   |
+| autocomplete       | Native options to use in HTML5 validation                                                                                                                              | string                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>         |
+| beforeAdding       | Function to validate the value of the item before adding                                                                                                               | (value: string) =&gt; boolean | -                                                                               | Default function (see source code)                                                                                                                               |
+| checkScroll        | Makes the component check if list reached scroll start or end and emit scroll events.                                                                                  | boolean                       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;checkScroll: false<br>}</code>          |
+| closable           | Add close/delete button to the item                                                                                                                                    | boolean                       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;closable: true<br>}</code>              |
+| closeIcon          | Icon name of close icon on selected item                                                                                                                               | string                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;closeIcon: "close"<br>}</code>          |
+| confirmKeys        | Array of keys<br/>(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)<br/>which will add a item when typing (default comma, tab and enter) | array                         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>nputitems: {<br>&nbsp;&nbsp;confirmKeys: ["<br>}</code>              |
+| createItem         | Function to create a new item to push into v-model (items)                                                                                                             | (value: any) =&gt; any        | -                                                                               | Default function (see source code)                                                                                                                               |
+| data               | Items data                                                                                                                                                             | array                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                         |
+| disabled           | Same as native input disabled                                                                                                                                          | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| expanded           | Makes input full width when inside a grouped or addon field                                                                                                            | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| field              | Property of the object (if data is array of objects) to use as display text                                                                                            | string                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"value"</code>                                                                                                    |
+| groupField         | Property of the object (if `data` is array of objects) to use as display text of group                                                                                 | string                        | -                                                                               |                                                                                                                                                                  |
+| groupOptions       | Property of the object (if `data` is array of objects) to use as key to get items array of each group, optional                                                        | string                        | -                                                                               |                                                                                                                                                                  |
+| hasCounter         | Show counter when maxlength or maxtags props are passed                                                                                                                | boolean                       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;hasCounter: true<br>}</code>            |
+| icon               | Icon name to be shown                                                                                                                                                  | string                        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>             |
+| iconPack           | Icon pack to use                                                                                                                                                       | string                        | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>         |
+| keepFirst          | The first option will always be pre-selected (easier to just hit enter or tab)                                                                                         | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| maxitems           | Limits the number of items, plus item counter                                                                                                                          | number                        | -                                                                               |                                                                                                                                                                  |
+| maxlength          | Same as native maxlength, plus character counter                                                                                                                       | number                        | -                                                                               |                                                                                                                                                                  |
+| openOnFocus        | Opens a dropdown with choices when the input field is focused                                                                                                          | boolean                       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| pasteSeparators    | Array of chars used to split when pasting a new string                                                                                                                 | string[]                      | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;pasteSeparators: ["<br>}</code>         |
+| placeholder        | Input placeholder                                                                                                                                                      | string                        | -                                                                               |                                                                                                                                                                  |
+| removeOnKeys       | Allow removing last item when pressing given keys, if input is empty                                                                                                   | array                         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;removeOnKeys: ["Backspace"]<br>}</code> |
+| size               | Vertical size of the input control, optional                                                                                                                           | string                        | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;size: undefined<br>}</code>             |
+| useHtml5Validation | Enable html 5 native validation                                                                                                                                        | boolean                       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                |
+| v-model            |                                                                                                                                                                        | array                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                         |
+| variant            | Color of the each items, optional                                                                                                                                      | string                        | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>inputitems: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>          |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| infinite-scroll   |            |
-| icon-right-click  |            |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
-| add               |            |
-| remove            |            |
-| typing            |            |
+| Event name        | Properties                                  | Description                                           |
+| ----------------- | ------------------------------------------- | ----------------------------------------------------- |
+| scroll-start      |                                             | the scroll list inside the dropdown reached the start |
+| scroll-end        |                                             | the scroll list inside the dropdown reached it's end  |
+| icon-click        | **event** `Event` - native event            | on icon click event                                   |
+| icon-right-click  | **event** `Event` - native event            | on icon right click event                             |
+| update:modelValue | **value** `any[]` - updated modelValue prop | modelValue prop two-way binding                       |
+| input             | **value** `any` - input value               | on input change event                                 |
+| add               | **value** `any` - added item                | new item got added                                    |
+| remove            | **value** `any` - removed item              | item got removed                                      |
+| focus             | **event** `Event` - native event            | on input focus event                                  |
+| blur              | **event** `Event` - native event            | on input blur event                                   |
+| invalid           | **event** `Event` - native event            | on input invalid event                                |
 
 ### Slots
 
-| Name     | Description | Bindings |
-| -------- | ----------- | -------- |
-| selected |             |          |
-| header   |             |          |
-| default  |             | <br/>    |
-| empty    |             |          |
-| footer   |             |          |
+| Name     | Description | Bindings   |
+| -------- | ----------- | ---------- |
+| selected |             |            |
+| header   |             |            |
+| default  |             | <br/><br/> |
+| empty    |             |            |
+| footer   |             |            |
 
 </div>
 
diff --git a/packages/docs-next/components/Loading.md b/packages/docs-next/components/Loading.md
index 69eee4724..a753721e1 100644
--- a/packages/docs-next/components/Loading.md
+++ b/packages/docs-next/components/Loading.md
@@ -36,20 +36,18 @@ title: Loading
 
 ### Props
 
-| Prop name    | Description                                                                      | Type                      | Values | Default                                                                                                                                               |
-| ------------ | -------------------------------------------------------------------------------- | ------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| active       | Whether loading is active or not, use v-model:active to make it two-way binding  | boolean                   | -      |                                                                                                                                                       |
-| animation    |                                                                                  | string                    | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code> |
-| canCancel    | Can close Loading by pressing escape or clicking outside                         | boolean                   | -      | false                                                                                                                                                 |
-| container    |                                                                                  | object\|func\|HTMLElement | -      |                                                                                                                                                       |
-| fullPage     | Loader will overlay the full page                                                | boolean                   | -      | true                                                                                                                                                  |
-| icon         | Icon name                                                                        | string                    | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;icon: "loading"<br>}</code>     |
-| iconSize     |                                                                                  | string                    | -      | "medium"                                                                                                                                              |
-| iconSpin     | Enable spin effect on icon                                                       | boolean                   | -      | true                                                                                                                                                  |
-| onCancel     | Callback function to call after user canceled (pressed escape / clicked outside) | func                      | -      | Default function (see source code)                                                                                                                    |
-| override     |                                                                                  | boolean                   | -      |                                                                                                                                                       |
-| programmatic |                                                                                  | object                    | -      |                                                                                                                                                       |
-| promise      |                                                                                  | Promise                   | -      |                                                                                                                                                       |
+| Prop name | Description                                                                      | Type                      | Values | Default                                                                                                                                               |
+| --------- | -------------------------------------------------------------------------------- | ------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| active    | Whether loading is active or not, use v-model:active to make it two-way binding  | boolean                   | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                |
+| animation |                                                                                  | string                    | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code> |
+| canCancel | Can close Loading by pressing escape or clicking outside                         | boolean                   | -      | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| container |                                                                                  | object\|func\|HTMLElement | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                |
+| fullPage  | Loader will overlay the full page                                                | boolean                   | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                            |
+| icon      | Icon name                                                                        | string                    | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;icon: "loading"<br>}</code>     |
+| iconSize  |                                                                                  | string                    | -      | <code style='white-space: nowrap; padding: 0;'>"medium"</code>                                                                                        |
+| iconSpin  | Enable spin effect on icon                                                       | boolean                   | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                            |
+| onCancel  | Callback function to call after user canceled (pressed escape / clicked outside) | func                      | -      | Default function (see source code)                                                                                                                    |
+| override  |                                                                                  | boolean                   | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                |
 
 ### Events
 
diff --git a/packages/docs-next/components/Menu.md b/packages/docs-next/components/Menu.md
index b6c27e8fa..1d1956a8a 100644
--- a/packages/docs-next/components/Menu.md
+++ b/packages/docs-next/components/Menu.md
@@ -36,11 +36,11 @@ title: Menu
 
 ### Props
 
-| Prop name | Description | Type    | Values | Default |
-| --------- | ----------- | ------- | ------ | ------- |
-| accordion |             | boolean | -      | true    |
-| activable |             | boolean | -      | true    |
-| override  |             | boolean | -      |         |
+| Prop name | Description | Type    | Values | Default                                                    |
+| --------- | ----------- | ------- | ------ | ---------------------------------------------------------- |
+| accordion |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>true</code> |
+| activable |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'>true</code> |
+| override  |             | boolean | -      | <code style='white-space: nowrap; padding: 0;'></code>     |
 
 ### Slots
 
@@ -60,14 +60,14 @@ title: Menu
 
 ### Props
 
-| Prop name | Description         | Type    | Values                     | Default |
-| --------- | ------------------- | ------- | -------------------------- | ------- |
-| ariaRole  |                     | string  | -                          |         |
-| icon      |                     | string  | -                          |         |
-| iconPack  |                     | string  | -                          |         |
-| label     |                     | string  | -                          |         |
-| override  |                     | boolean | -                          |         |
-| size      | Icon size, optional | string  | `small`, `medium`, `large` |         |
+| Prop name | Description         | Type    | Values                     | Default                                                |
+| --------- | ------------------- | ------- | -------------------------- | ------------------------------------------------------ |
+| ariaRole  |                     | string  | -                          | <code style='white-space: nowrap; padding: 0;'></code> |
+| icon      |                     | string  | -                          | <code style='white-space: nowrap; padding: 0;'></code> |
+| iconPack  |                     | string  | -                          | <code style='white-space: nowrap; padding: 0;'></code> |
+| label     |                     | string  | -                          | <code style='white-space: nowrap; padding: 0;'></code> |
+| override  |                     | boolean | -                          | <code style='white-space: nowrap; padding: 0;'></code> |
+| size      | Icon size, optional | string  | `small`, `medium`, `large` | <code style='white-space: nowrap; padding: 0;'></code> |
 
 ### Slots
 
@@ -92,19 +92,19 @@ title: Menu
 
 ### Props
 
-| Prop name | Description         | Type                | Values                     | Default |
-| --------- | ------------------- | ------------------- | -------------------------- | ------- |
-| active    |                     | boolean             | -                          |         |
-| animation |                     | string              | -                          | "slide" |
-| ariaRole  |                     | string              | -                          | ""      |
-| disabled  |                     | boolean             | -                          |         |
-| expanded  |                     | boolean             | -                          |         |
-| icon      |                     | string              | -                          |         |
-| iconPack  |                     | string              | -                          |         |
-| label     |                     | string              | -                          |         |
-| override  |                     | boolean             | -                          |         |
-| size      | Icon size, optional | string              | `small`, `medium`, `large` |         |
-| tag       |                     | string \| Component | -                          | "a"     |
+| Prop name | Description         | Type                | Values                     | Default                                                       |
+| --------- | ------------------- | ------------------- | -------------------------- | ------------------------------------------------------------- |
+| active    |                     | boolean             | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| animation |                     | string              | -                          | <code style='white-space: nowrap; padding: 0;'>"slide"</code> |
+| ariaRole  |                     | string              | -                          | <code style='white-space: nowrap; padding: 0;'>""</code>      |
+| disabled  |                     | boolean             | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| expanded  |                     | boolean             | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| icon      |                     | string              | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| iconPack  |                     | string              | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| label     |                     | string              | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| override  |                     | boolean             | -                          | <code style='white-space: nowrap; padding: 0;'></code>        |
+| size      | Icon size, optional | string              | `small`, `medium`, `large` | <code style='white-space: nowrap; padding: 0;'></code>        |
+| tag       |                     | string \| Component | -                          | <code style='white-space: nowrap; padding: 0;'>"a"</code>     |
 
 ### Events
 
diff --git a/packages/docs-next/components/Modal.md b/packages/docs-next/components/Modal.md
index 9cb23d28e..33787b08b 100644
--- a/packages/docs-next/components/Modal.md
+++ b/packages/docs-next/components/Modal.md
@@ -38,27 +38,25 @@ title: Modal
 
 | Prop name        | Description                                                                                                                                                            | Type           | Values                             | Default                                                                                                                                                                            |
 | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| active           | Whether modal is active or not, use v-model:active to make it two-way binding                                                                                          | boolean        | -                                  |                                                                                                                                                                                    |
+| active           | Whether modal is active or not, use v-model:active to make it two-way binding                                                                                          | boolean        | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
 | animation        | Custom animation (transition name)                                                                                                                                     | string         | -                                  | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;animation: "zoom-out", <br>}</code>                            |
-| ariaLabel        |                                                                                                                                                                        | string         | -                                  |                                                                                                                                                                                    |
-| ariaModal        |                                                                                                                                                                        | boolean        | -                                  |                                                                                                                                                                                    |
-| ariaRole         |                                                                                                                                                                        | string         | -                                  |                                                                                                                                                                                    |
+| ariaLabel        |                                                                                                                                                                        | string         | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
+| ariaModal        |                                                                                                                                                                        | boolean        | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
+| ariaRole         |                                                                                                                                                                        | string         | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
 | autoFocus        | Automatically focus modal when active                                                                                                                                  | boolean        | -                                  | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;autoFocus: true<br>}</code>                                    |
 | canCancel        | Can close Modal by clicking 'X', pressing escape or clicking outside                                                                                                   | array\|boolean | `escape`, `x`, `outside`, `button` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;canCancel: [ "escape", "x", "outside", "button", ]<br>}</code> |
 | closeIcon        | Icon name                                                                                                                                                              | string         | -                                  | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;closeIcon: "close"<br>}</code>                                 |
-| closeIconSize    |                                                                                                                                                                        | string         | -                                  | "medium"                                                                                                                                                                           |
-| component        | Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close')          |                | -                                  |                                                                                                                                                                                    |
-| content          | Text content                                                                                                                                                           | string         | -                                  |                                                                                                                                                                                    |
+| closeIconSize    |                                                                                                                                                                        | string         | -                                  | <code style='white-space: nowrap; padding: 0;'>"medium"</code>                                                                                                                     |
+| component        | Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close')          |                | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
+| content          | Text content                                                                                                                                                           | string         | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
 | destroyOnHide    | Destroy modal on hide                                                                                                                                                  | boolean        | -                                  | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;destroyOnHide: true, <br>}</code>                              |
-| events           | Events to be binded to the injected component                                                                                                                          | object         | -                                  |                                                                                                                                                                                    |
-| fullScreen       | Display modal as full screen                                                                                                                                           | boolean        | -                                  |                                                                                                                                                                                    |
-| mobileBreakpoint | Mobile breakpoint as max-width value                                                                                                                                   | string         | -                                  |                                                                                                                                                                                    |
+| events           | Events to be binded to the injected component                                                                                                                          | object         | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
+| fullScreen       | Display modal as full screen                                                                                                                                           | boolean        | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
+| mobileBreakpoint | Mobile breakpoint as max-width value                                                                                                                                   | string         | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
 | onCancel         | Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)                                                                         | func           | -                                  | Default function (see source code)                                                                                                                                                 |
 | onClose          | Callback function to call after close (programmatically close or user canceled)                                                                                        | func           | -                                  | Default function (see source code)                                                                                                                                                 |
-| override         |                                                                                                                                                                        | boolean        | -                                  |                                                                                                                                                                                    |
-| programmatic     |                                                                                                                                                                        | object         | -                                  |                                                                                                                                                                                    |
-| promise          |                                                                                                                                                                        | Promise        | -                                  |                                                                                                                                                                                    |
-| props            | Props to be binded to the injected component                                                                                                                           | object         | -                                  |                                                                                                                                                                                    |
+| override         |                                                                                                                                                                        | boolean        | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
+| props            | Props to be binded to the injected component                                                                                                                           | object         | -                                  | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                             |
 | scroll           | clip to remove the body scrollbar, keep to have a non scrollable scrollbar to avoid shifting background, but will set body to position fixed, might break some layouts | string         | `keep`, `clip`                     | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;scroll: "keep"<br>}</code>                                     |
 | trapFocus        | Trap focus inside the modal.                                                                                                                                           | boolean        | -                                  | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code>                                    |
 | width            | Width of the Modal                                                                                                                                                     | string\|number | -                                  | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;width: 960<br>}</code>                                         |
diff --git a/packages/docs-next/components/Notification.md b/packages/docs-next/components/Notification.md
index c061c5bb4..c6f1316ad 100644
--- a/packages/docs-next/components/Notification.md
+++ b/packages/docs-next/components/Notification.md
@@ -38,26 +38,26 @@ title: Notification
 
 | Prop name      | Description                                                                                                                                                   | Type           | Values                                                                          | Default                                                                                                                                                     |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| active         | Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding                                       | boolean        | -                                                                               | true                                                                                                                                                        |
-| animation      | Custom animation (transition name).                                                                                                                           | string         | -                                                                               | "fade"                                                                                                                                                      |
-| ariaCloseLabel | Label for the close button, to be read by accessibility screenreaders.                                                                                        | string         | -                                                                               |                                                                                                                                                             |
-| autoClose      | Hide notification after duration only not programmatic.                                                                                                       | boolean        | -                                                                               | false                                                                                                                                                       |
-| closable       | Adds an 'X' button that closes the notification.                                                                                                              | boolean        | -                                                                               | false                                                                                                                                                       |
+| active         | Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding                                       | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
+| animation      | Custom animation (transition name).                                                                                                                           | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"fade"</code>                                                                                                |
+| ariaCloseLabel | Label for the close button, to be read by accessibility screenreaders.                                                                                        | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| autoClose      | Hide notification after duration only not programmatic.                                                                                                       | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| closable       | Adds an 'X' button that closes the notification.                                                                                                              | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
 | closeIcon      | Close icon name                                                                                                                                               | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>notification: {<br>&nbsp;&nbsp;closeIcon: "close", <br>}</code> |
-| closeIconSize  | Size of close icon                                                                                                                                            | string         | -                                                                               | "small"                                                                                                                                                     |
-| component      | Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') |                | -                                                                               |                                                                                                                                                             |
-| duration       | Visibility duration in miliseconds.                                                                                                                           | number         | -                                                                               | 2000                                                                                                                                                        |
-| events         | Events to be binded to the injected component                                                                                                                 | object         | -                                                                               | {}                                                                                                                                                          |
-| hasIcon        | Adds an icon on the left side depending on the type (or the icon prop if defined).                                                                            | boolean        | -                                                                               |                                                                                                                                                             |
-| icon           | Icon name to use with has-icon.                                                                                                                               | string         | -                                                                               |                                                                                                                                                             |
-| iconPack       | Icon pack to use.                                                                                                                                             | string         | -                                                                               |                                                                                                                                                             |
-| iconSize       | Icon size                                                                                                                                                     | string         | -                                                                               | "large"                                                                                                                                                     |
-| message        | Message text (can contain HTML).                                                                                                                              | string         | -                                                                               |                                                                                                                                                             |
-| override       |                                                                                                                                                               | boolean        | -                                                                               |                                                                                                                                                             |
-| position       | Which position the notification will appear when programmatically                                                                                             | string         | `top-right`, `top`, `top-left`, `bottom-right`, `bottom`, `bottom-left`         |                                                                                                                                                             |
-| props          | Props to be binded to the injected component                                                                                                                  | object         | -                                                                               |                                                                                                                                                             |
-| type           | Type (color) of the notification, optional.                                                                                                                   | string         | -                                                                               |                                                                                                                                                             |
-| variant        | Color of the control, optional                                                                                                                                | string\|object | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                             |
+| closeIconSize  | Size of close icon                                                                                                                                            | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"small"</code>                                                                                               |
+| component      | Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') |                | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| duration       | Visibility duration in miliseconds.                                                                                                                           | number         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>2000</code>                                                                                                  |
+| events         | Events to be binded to the injected component                                                                                                                 | object         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>{}</code>                                                                                                    |
+| hasIcon        | Adds an icon on the left side depending on the type (or the icon prop if defined).                                                                            | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| icon           | Icon name to use with has-icon.                                                                                                                               | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| iconPack       | Icon pack to use.                                                                                                                                             | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| iconSize       | Icon size                                                                                                                                                     | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"large"</code>                                                                                               |
+| message        | Message text (can contain HTML).                                                                                                                              | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| override       |                                                                                                                                                               | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| position       | Which position the notification will appear when programmatically                                                                                             | string         | `top-right`, `top`, `top-left`, `bottom-right`, `bottom`, `bottom-left`         | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| props          | Props to be binded to the injected component                                                                                                                  | object         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| type           | Type (color) of the notification, optional.                                                                                                                   | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| variant        | Color of the control, optional                                                                                                                                | string\|object | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
 
 ### Events
 
@@ -88,16 +88,14 @@ title: Notification
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | container         | DOM element the toast will be created on. Note that this also changes the position of the toast from fixed to absolute. Meaning that the container should be fixed. | string        | -                                                                       | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>notification: {<br>&nbsp;&nbsp;containerElement: undefined, <br>}</code> |
 | duration          | Visibility duration in miliseconds.                                                                                                                                 | number        | -                                                                       | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>notification: {<br>&nbsp;&nbsp;duration: 1000, <br>}</code>              |
-| indefinite        | Show the Notification indefinitely until it is dismissed when programmatically.                                                                                     | boolean       | -                                                                       | false                                                                                                                                                                |
-| message           | Message text (can contain HTML).                                                                                                                                    | string\|array | -                                                                       |                                                                                                                                                                      |
+| indefinite        | Show the Notification indefinitely until it is dismissed when programmatically.                                                                                     | boolean       | -                                                                       | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                          |
+| message           | Message text (can contain HTML).                                                                                                                                    | string\|array | -                                                                       | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                               |
 | onClose           | Callback function to call after close (programmatically close or user canceled)                                                                                     | func          | -                                                                       | Default function (see source code)                                                                                                                                   |
-| override          |                                                                                                                                                                     | boolean       | -                                                                       |                                                                                                                                                                      |
-| position          | Which position the notification will appear when programmatically.                                                                                                  | string        | `top-right`, `top`, `top-left`, `bottom-right`, `bottom`, `bottom-left` | "top"                                                                                                                                                                |
-| programmatic      |                                                                                                                                                                     | object        | -                                                                       |                                                                                                                                                                      |
-| promise           |                                                                                                                                                                     | Promise       | -                                                                       |                                                                                                                                                                      |
-| propsNotification |                                                                                                                                                                     | object        | -                                                                       |                                                                                                                                                                      |
+| override          |                                                                                                                                                                     | boolean       | -                                                                       | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                               |
+| position          | Which position the notification will appear when programmatically.                                                                                                  | string        | `top-right`, `top`, `top-left`, `bottom-right`, `bottom`, `bottom-left` | <code style='white-space: nowrap; padding: 0;'>"top"</code>                                                                                                          |
+| propsNotification |                                                                                                                                                                     | object        | -                                                                       | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                               |
 | queue             | If should queue with others notices (snackbar/toast/notification).                                                                                                  | boolean       | -                                                                       | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>notification: {<br>&nbsp;&nbsp;noticeQueue: undefined, <br>}</code>      |
-| type              | Type (color) of the notification, optional.                                                                                                                         | string        | -                                                                       |                                                                                                                                                                      |
+| type              | Type (color) of the notification, optional.                                                                                                                         | string        | -                                                                       | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                               |
 
 ### Events
 
diff --git a/packages/docs-next/components/Pagination.md b/packages/docs-next/components/Pagination.md
index 18188de20..078c7ac84 100644
--- a/packages/docs-next/components/Pagination.md
+++ b/packages/docs-next/components/Pagination.md
@@ -38,24 +38,24 @@ title: Pagination
 
 | Prop name         | Description                                                         | Type    | Values                                            | Default                                                                                                                                                          |
 | ----------------- | ------------------------------------------------------------------- | ------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaCurrentLabel  |                                                                     | string  | -                                                 |                                                                                                                                                                  |
-| ariaNextLabel     |                                                                     | string  | -                                                 |                                                                                                                                                                  |
-| ariaPageLabel     |                                                                     | string  | -                                                 |                                                                                                                                                                  |
-| ariaPreviousLabel |                                                                     | string  | -                                                 |                                                                                                                                                                  |
-| current           | Current page number, use v-model:current to make it two-way binding | number  | -                                                 | 1                                                                                                                                                                |
+| ariaCurrentLabel  |                                                                     | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| ariaNextLabel     |                                                                     | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| ariaPageLabel     |                                                                     | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| ariaPreviousLabel |                                                                     | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| current           | Current page number, use v-model:current to make it two-way binding | number  | -                                                 | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                          |
 | iconNext          | Icon to use for next button                                         | string  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconNext: "chevron-right", <br>}</code> |
-| iconPack          | Icon pack to use                                                    | string  | `mdi`, `fa`, `fas and any other custom icon pack` |                                                                                                                                                                  |
+| iconPack          | Icon pack to use                                                    | string  | `mdi`, `fa`, `fas and any other custom icon pack` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
 | iconPrev          | Icon to use for previous button                                     | string  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconPrev: "chevron-left", <br>}</code>  |
-| mobileBreakpoint  | Mobile breakpoint as max-width value                                | string  | -                                                 |                                                                                                                                                                  |
+| mobileBreakpoint  | Mobile breakpoint as max-width value                                | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
 | order             | Buttons order, optional                                             | string  | `centered`, `right`, `left`                       | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;order: "right", <br>}</code>            |
-| override          |                                                                     | boolean | -                                                 |                                                                                                                                                                  |
+| override          |                                                                     | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
 | perPage           | Items count for each page                                           | number  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;perPage: 20<br>}</code>                 |
-| rangeAfter        | Number of pagination items to show after current page               | number  | -                                                 | 1                                                                                                                                                                |
-| rangeBefore       | Number of pagination items to show before current page              | number  | -                                                 | 1                                                                                                                                                                |
-| rounded           | Rounded button styles                                               | boolean | -                                                 |                                                                                                                                                                  |
-| simple            | Simple style                                                        | boolean | -                                                 |                                                                                                                                                                  |
-| size              | Pagination size, optional                                           | string  | `small`, `medium`, `large`                        |                                                                                                                                                                  |
-| total             | Total count of items                                                | number  | -                                                 |                                                                                                                                                                  |
+| rangeAfter        | Number of pagination items to show after current page               | number  | -                                                 | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                          |
+| rangeBefore       | Number of pagination items to show before current page              | number  | -                                                 | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                          |
+| rounded           | Rounded button styles                                               | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| simple            | Simple style                                                        | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| size              | Pagination size, optional                                           | string  | `small`, `medium`, `large`                        | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
+| total             | Total count of items                                                | number  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                           |
 
 ### Events
 
diff --git a/packages/docs-next/components/Radio.md b/packages/docs-next/components/Radio.md
index 21cfd2175..6b3b983d5 100644
--- a/packages/docs-next/components/Radio.md
+++ b/packages/docs-next/components/Radio.md
@@ -36,18 +36,18 @@ title: Radio
 
 ### Props
 
-| Prop name      | Description                                                                          | Type                           | Values                                                                          | Default   |
-| -------------- | ------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------- | --------- |
-| ariaLabelledby | Accessibility label to establish relationship between the checkbox and control label | string                         | -                                                                               |           |
-| disabled       | Same as native disabled                                                              | boolean                        | -                                                                               |           |
-| label          | Input label, unnecessary when default slot is used                                   | string                         | -                                                                               | undefined |
-| name           | Same as native name                                                                  | string                         | -                                                                               |           |
-| nativeValue    | Same as native value                                                                 | string\|number\|boolean\|array | -                                                                               |           |
-| override       |                                                                                      | boolean                        | -                                                                               |           |
-| required       |                                                                                      | boolean                        | -                                                                               |           |
-| size           | Size of the control, optional                                                        | string                         | `small`, `medium`, `large`                                                      |           |
-| v-model        |                                                                                      | string\|number\|boolean\|array | -                                                                               |           |
-| variant        | Color of the control, optional                                                       | string                         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |           |
+| Prop name      | Description                                                                          | Type                           | Values                                                                          | Default                                                |
+| -------------- | ------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| ariaLabelledby | Accessibility label to establish relationship between the checkbox and control label | string                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| disabled       | Same as native disabled                                                              | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| label          | Input label, unnecessary when default slot is used                                   | string                         | -                                                                               |                                                        |
+| name           | Same as native name                                                                  | string                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| nativeValue    | Same as native value                                                                 | string\|number\|boolean\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| override       |                                                                                      | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| required       |                                                                                      | boolean                        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| size           | Size of the control, optional                                                        | string                         | `small`, `medium`, `large`                                                      | <code style='white-space: nowrap; padding: 0;'></code> |
+| v-model        |                                                                                      | string\|number\|boolean\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code> |
+| variant        | Color of the control, optional                                                       | string                         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code> |
 
 ### Events
 
diff --git a/packages/docs-next/components/Select.md b/packages/docs-next/components/Select.md
index af23b6b97..3e08eb067 100644
--- a/packages/docs-next/components/Select.md
+++ b/packages/docs-next/components/Select.md
@@ -36,34 +36,37 @@ title: Select
 
 ### Props
 
-| Prop name          | Description                                                 | Type                                   | Values                                                                          | Default                                                                                                                                                 |
-| ------------------ | ----------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| autocomplete       | Native options to use in HTML5 validation                   | string                                 | -                                                                               |                                                                                                                                                         |
-| expanded           | Makes input full width when inside a grouped or addon field | boolean                                | -                                                                               |                                                                                                                                                         |
-| icon               | Icon name to be added                                       | string                                 | -                                                                               |                                                                                                                                                         |
-| iconPack           | Icon pack to use                                            | string                                 | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;iconPack: undefined, <br>}</code>  |
-| iconRight          | Icon name to be added on the right side                     | string                                 | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;iconRight: undefined, <br>}</code> |
-| maxlength          | Same as native maxlength, plus character counter            | number\|string                         | -                                                                               |                                                                                                                                                         |
-| multiple           |                                                             | boolean                                | -                                                                               |                                                                                                                                                         |
-| nativeSize         | Same as native size                                         | string\|number                         | -                                                                               |                                                                                                                                                         |
-| override           |                                                             | boolean                                | -                                                                               |                                                                                                                                                         |
-| placeholder        | Text when nothing is selected                               | string                                 | -                                                                               |                                                                                                                                                         |
-| rounded            | Makes the element rounded                                   | boolean                                | -                                                                               |                                                                                                                                                         |
-| size               | Vertical size of input, optional                            | string                                 | `small`, `medium`, `large`                                                      |                                                                                                                                                         |
-| statusIcon         | Show status icon using field and variant prop               | boolean                                | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>               |
-| useHtml5Validation | Enable html 5 native validation                             | boolean                                | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>       |
-| v-model            |                                                             | string\|number\|boolean\|object\|array | -                                                                               | null                                                                                                                                                    |
-| validationMessage  | The message which is shown when a validation error occurs   | string                                 | -                                                                               |                                                                                                                                                         |
-| variant            | Color of the control, optional                              | string                                 | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                         |
+| Prop name          | Description                                                 | Type                                   | Values                                                                          | Default                                                                                                                                               |
+| ------------------ | ----------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autocomplete       | Native options to use in HTML5 validation                   | string                                 | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>  |
+| expanded           | Makes input full width when inside a grouped or addon field | boolean                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| icon               | Icon name to be shown                                       | string                                 | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>      |
+| iconClickable      | Makes the icon clickable                                    | boolean                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| iconPack           | Icon pack to use                                            | string                                 | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>  |
+| iconRight          | Icon name to be added on the right side                     | string                                 | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code> |
+| iconRightClickable | Make the icon right clickable                               | boolean                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| iconRightVariant   | Variant of right icon                                       | string                                 | -                                                                               |                                                                                                                                                       |
+| multiple           | Allow multiple selection                                    | boolean                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| nativeSize         | Same as native size                                         | string\|number                         | -                                                                               |                                                                                                                                                       |
+| placeholder        | Text when nothing is selected                               | string                                 | -                                                                               |                                                                                                                                                       |
+| rounded            | Makes the element rounded                                   | boolean                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| size               | Vertical size of input, optional                            | string                                 | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;size: undefined<br>}</code>      |
+| statusIcon         | Show status icon using field and variant prop               | boolean                                | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>             |
+| useHtml5Validation | Enable html 5 native validation                             | boolean                                | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>     |
+| v-model            |                                                             | string\|number\|boolean\|object\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'>null</code>                                                                                            |
+| validationMessage  | The message which is shown when a validation error occurs   | string                                 | -                                                                               |                                                                                                                                                       |
+| variant            | Color of the control, optional                              | string                                 | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>   |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
+| Event name        | Properties                                                                      | Description                     |
+| ----------------- | ------------------------------------------------------------------------------- | ------------------------------- |
+| update:modelValue | **value** ` [String, Number, Boolean, Object, Array]` - updated modelValue prop | modelValue prop two-way binding |
+| focus             | **event** `Event` - native event                                                | on input focus event            |
+| blur              | **event** `Event` - native event                                                | on input blur event             |
+| invalid           | **event** `Event` - native event                                                | on input invalid event          |
+| icon-click        | **event** `Event` - native event                                                | on icon click event             |
+| icon-right-click  | **event** `Event` - native event                                                | on icon right click event       |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Sidebar.md b/packages/docs-next/components/Sidebar.md
index 42579d5f8..117a2467f 100644
--- a/packages/docs-next/components/Sidebar.md
+++ b/packages/docs-next/components/Sidebar.md
@@ -39,21 +39,21 @@ title: Sidebar
 | Prop name          | Description                                                                                               | Type           | Values                                                                          | Default                                                                                                                                                               |
 | ------------------ | --------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | canCancel          | Sidebar cancel options                                                                                    | array\|boolean | `true`, `false`, `'escape'`, `'outside'`                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>sidebar: {<br>&nbsp;&nbsp;canCancel: [ "escape", "outside", ]<br>}</code> |
-| expandOnHover      | Expand sidebar on hover when reduced or mobile is reduce                                                  | boolean        | -                                                                               |                                                                                                                                                                       |
-| expandOnHoverFixed | Expand sidebar on hover with fixed position when reduced or mobile is reduce                              | boolean        | -                                                                               |                                                                                                                                                                       |
-| fullheight         | Show sidebar in fullheight                                                                                | boolean        | -                                                                               |                                                                                                                                                                       |
-| fullwidth          | Show sidebar in fullwidth                                                                                 | boolean        | -                                                                               |                                                                                                                                                                       |
-| mobile             | Custom layout on mobile                                                                                   | string         | `fullwidth`, `reduced`, `hidden`                                                |                                                                                                                                                                       |
-| mobileBreakpoint   | Mobile breakpoint as max-width value                                                                      | string         | -                                                                               |                                                                                                                                                                       |
+| expandOnHover      | Expand sidebar on hover when reduced or mobile is reduce                                                  | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| expandOnHoverFixed | Expand sidebar on hover with fixed position when reduced or mobile is reduce                              | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| fullheight         | Show sidebar in fullheight                                                                                | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| fullwidth          | Show sidebar in fullwidth                                                                                 | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| mobile             | Custom layout on mobile                                                                                   | string         | `fullwidth`, `reduced`, `hidden`                                                | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| mobileBreakpoint   | Mobile breakpoint as max-width value                                                                      | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
 | onCancel           | Callback on cancel                                                                                        | func           | -                                                                               | Default function (see source code)                                                                                                                                    |
-| open               | To control the behaviour of the sidebar programmatically, use the v-model:open to make it two-way binding | boolean        | -                                                                               |                                                                                                                                                                       |
-| overlay            | Show an overlay like modal                                                                                | boolean        | -                                                                               |                                                                                                                                                                       |
-| override           |                                                                                                           | boolean        | -                                                                               |                                                                                                                                                                       |
+| open               | To control the behaviour of the sidebar programmatically, use the v-model:open to make it two-way binding | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| overlay            | Show an overlay like modal                                                                                | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| override           |                                                                                                           | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
 | position           | Skeleton position in relation to the window                                                               | string         | `fixed`, `absolute`, `static`                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>sidebar: {<br>&nbsp;&nbsp;position: "fixed", <br>}</code>                 |
-| reduce             | Show a small sidebar                                                                                      | boolean        | -                                                                               |                                                                                                                                                                       |
-| right              | Show the sidebar on right                                                                                 | boolean        | -                                                                               |                                                                                                                                                                       |
+| reduce             | Show a small sidebar                                                                                      | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
+| right              | Show the sidebar on right                                                                                 | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
 | scroll             |                                                                                                           | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>sidebar: {<br>&nbsp;&nbsp;scroll: "clip"<br>}</code>                      |
-| variant            | Color of the sidebar, optional                                                                            | string\|object | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                                       |
+| variant            | Color of the sidebar, optional                                                                            | string\|object | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                                |
 
 ### Events
 
diff --git a/packages/docs-next/components/Skeleton.md b/packages/docs-next/components/Skeleton.md
index db9a6d704..0e2a2816e 100644
--- a/packages/docs-next/components/Skeleton.md
+++ b/packages/docs-next/components/Skeleton.md
@@ -36,18 +36,18 @@ title: Skeleton
 
 ### Props
 
-| Prop name | Description                                  | Type           | Values                      | Default |
-| --------- | -------------------------------------------- | -------------- | --------------------------- | ------- |
-| active    | Show or hide loader                          | boolean        | -                           | true    |
-| animated  | Show a loading animation                     | boolean        | -                           | true    |
-| circle    | Show a circle shape                          | boolean        | -                           |         |
-| count     | Number of shapes to display                  | number         | -                           | 1       |
-| height    | Custom height                                | number\|string | -                           |         |
-| override  |                                              | boolean        | -                           |         |
-| position  | Skeleton position in relation to the element | string         | `left`, `centered`, `right` | "left"  |
-| rounded   | Rounded style                                | boolean        | -                           | true    |
-| size      | Size of skeleton                             | string         | `small`, `medium`, `large`  |         |
-| width     | Custom width                                 | number\|string | -                           |         |
+| Prop name | Description                                  | Type           | Values                      | Default                                                      |
+| --------- | -------------------------------------------- | -------------- | --------------------------- | ------------------------------------------------------------ |
+| active    | Show or hide loader                          | boolean        | -                           | <code style='white-space: nowrap; padding: 0;'>true</code>   |
+| animated  | Show a loading animation                     | boolean        | -                           | <code style='white-space: nowrap; padding: 0;'>true</code>   |
+| circle    | Show a circle shape                          | boolean        | -                           | <code style='white-space: nowrap; padding: 0;'></code>       |
+| count     | Number of shapes to display                  | number         | -                           | <code style='white-space: nowrap; padding: 0;'>1</code>      |
+| height    | Custom height                                | number\|string | -                           | <code style='white-space: nowrap; padding: 0;'></code>       |
+| override  |                                              | boolean        | -                           | <code style='white-space: nowrap; padding: 0;'></code>       |
+| position  | Skeleton position in relation to the element | string         | `left`, `centered`, `right` | <code style='white-space: nowrap; padding: 0;'>"left"</code> |
+| rounded   | Rounded style                                | boolean        | -                           | <code style='white-space: nowrap; padding: 0;'>true</code>   |
+| size      | Size of skeleton                             | string         | `small`, `medium`, `large`  | <code style='white-space: nowrap; padding: 0;'></code>       |
+| width     | Custom width                                 | number\|string | -                           | <code style='white-space: nowrap; padding: 0;'></code>       |
 
 </div>
 
diff --git a/packages/docs-next/components/Slider.md b/packages/docs-next/components/Slider.md
index ea8b4207f..cd37420c7 100644
--- a/packages/docs-next/components/Slider.md
+++ b/packages/docs-next/components/Slider.md
@@ -38,26 +38,26 @@ title: Slider
 
 | Prop name         | Description                                      | Type          | Values                                                                          | Default                                                                                                                                         |
 | ----------------- | ------------------------------------------------ | ------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaLabel         |                                                  | string\|array | -                                                                               |                                                                                                                                                 |
-| biggerSliderFocus | Increases slider size on focus                   | boolean       | -                                                                               | false                                                                                                                                           |
-| customFormatter   | Function to format the tooltip label for display | func          | -                                                                               |                                                                                                                                                 |
-| disabled          |                                                  | boolean       | -                                                                               | false                                                                                                                                           |
-| format            |                                                  | string        | -                                                                               | "raw"                                                                                                                                           |
-| indicator         |                                                  | boolean       | -                                                                               | false                                                                                                                                           |
-| lazy              | Update v-model only when dragging is finished    | boolean       | -                                                                               | false                                                                                                                                           |
+| ariaLabel         |                                                  | string\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| biggerSliderFocus | Increases slider size on focus                   | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                     |
+| customFormatter   | Function to format the tooltip label for display | func          | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| disabled          |                                                  | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                     |
+| format            |                                                  | string        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"raw"</code>                                                                                     |
+| indicator         |                                                  | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                     |
+| lazy              | Update v-model only when dragging is finished    | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                     |
 | locale            |                                                  | string\|array | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;locale: undefined<br>}</code>      |
-| max               | Maximum value                                    | number        | -                                                                               | 100                                                                                                                                             |
-| min               | Minimum value                                    | number        | -                                                                               | 0                                                                                                                                               |
-| override          |                                                  | boolean       | -                                                                               |                                                                                                                                                 |
+| max               | Maximum value                                    | number        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>100</code>                                                                                       |
+| min               | Minimum value                                    | number        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>0</code>                                                                                         |
+| override          |                                                  | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
 | rounded           | Rounded thumb                                    | boolean       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>slider: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
-| size              | Vertical size of slider, optional                | string        | `small`, `medium`, `large`                                                      |                                                                                                                                                 |
-| step              | Step interval of ticks                           | number        | -                                                                               | 1                                                                                                                                               |
-| ticks             | Show tick marks                                  | boolean       | -                                                                               | false                                                                                                                                           |
+| size              | Vertical size of slider, optional                | string        | `small`, `medium`, `large`                                                      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| step              | Step interval of ticks                           | number        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                         |
+| ticks             | Show tick marks                                  | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                     |
 | tooltip           | Show tooltip when thumb is being dragged         | boolean       | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>slider: {<br>&nbsp;&nbsp;tooltip: true<br>}</code>  |
-| tooltipAlways     | Tooltip displays always                          | boolean       | -                                                                               | false                                                                                                                                           |
-| tooltipVariant    | Color of the tooltip                             | string        | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                 |
-| v-model           |                                                  | number\|array | -                                                                               | 0                                                                                                                                               |
-| variant           | Color of the slider                              | string        | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                 |
+| tooltipAlways     | Tooltip displays always                          | boolean       | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                     |
+| tooltipVariant    | Color of the tooltip                             | string        | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
+| v-model           |                                                  | number\|array | -                                                                               | <code style='white-space: nowrap; padding: 0;'>0</code>                                                                                         |
+| variant           | Color of the slider                              | string        | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                          |
 
 ### Events
 
@@ -87,10 +87,10 @@ title: Slider
 
 ### Props
 
-| Prop name | Description          | Type    | Values | Default |
-| --------- | -------------------- | ------- | ------ | ------- |
-| override  |                      | boolean | -      |         |
-| value     | Value of single tick | number  | -      | 0       |
+| Prop name | Description          | Type    | Values | Default                                                 |
+| --------- | -------------------- | ------- | ------ | ------------------------------------------------------- |
+| override  |                      | boolean | -      | <code style='white-space: nowrap; padding: 0;'></code>  |
+| value     | Value of single tick | number  | -      | <code style='white-space: nowrap; padding: 0;'>0</code> |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Steps.md b/packages/docs-next/components/Steps.md
index 565defe5e..14a9e9a7f 100644
--- a/packages/docs-next/components/Steps.md
+++ b/packages/docs-next/components/Steps.md
@@ -38,17 +38,17 @@ title: Steps
 
 | Prop name         | Description                                                                                                                   | Type    | Values                                            | Default                                                                                                                                                     |
 | ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| animated          | Step navigation is animated                                                                                                   | boolean | -                                                 | true                                                                                                                                                        |
-| ariaNextLabel     |                                                                                                                               | string  | -                                                 |                                                                                                                                                             |
-| ariaPreviousLabel |                                                                                                                               | string  | -                                                 |                                                                                                                                                             |
-| hasNavigation     | Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items. | boolean | -                                                 | true                                                                                                                                                        |
+| animated          | Step navigation is animated                                                                                                   | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
+| ariaNextLabel     |                                                                                                                               | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| ariaPreviousLabel |                                                                                                                               | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| hasNavigation     | Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items. | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
 | iconNext          | Icon to use for navigation button                                                                                             | string  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;iconNext: "chevron-right", <br>}</code> |
-| iconPack          | Icon pack to use for the navigation                                                                                           | string  | `mdi`, `fa`, `fas and any other custom icon pack` |                                                                                                                                                             |
+| iconPack          | Icon pack to use for the navigation                                                                                           | string  | `mdi`, `fa`, `fas and any other custom icon pack` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
 | iconPrev          | Icon to use for navigation button                                                                                             | string  | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;iconPrev: "chevron-left", <br>}</code>  |
-| labelPosition     | Position of the marker label, optional                                                                                        | string  | `bottom`, `right`, `left`                         | "bottom"                                                                                                                                                    |
-| mobileBreakpoint  | Mobile breakpoint as max-width value                                                                                          | string  | -                                                 |                                                                                                                                                             |
-| override          |                                                                                                                               | boolean | -                                                 |                                                                                                                                                             |
-| rounded           | Rounded step markers                                                                                                          | boolean | -                                                 | true                                                                                                                                                        |
+| labelPosition     | Position of the marker label, optional                                                                                        | string  | `bottom`, `right`, `left`                         | <code style='white-space: nowrap; padding: 0;'>"bottom"</code>                                                                                              |
+| mobileBreakpoint  | Mobile breakpoint as max-width value                                                                                          | string  | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| override          |                                                                                                                               | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                      |
+| rounded           | Rounded step markers                                                                                                          | boolean | -                                                 | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
 
 ### Slots
 
@@ -69,12 +69,12 @@ title: Steps
 
 ### Props
 
-| Prop name | Description                                                                                                                         | Type           | Values | Default   |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | --------- |
-| clickable | Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not                          | boolean        | -      | undefined |
-| override  |                                                                                                                                     | boolean        | -      |           |
-| step      | Step marker content (when there is no icon)                                                                                         | string\|number | -      |           |
-| variant   | Default style for the step, optional This will override parent type. Could be used to set a completed step to "success" for example | string\|object | -      |           |
+| Prop name | Description                                                                                                                         | Type           | Values | Default                                                |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | ------------------------------------------------------ |
+| clickable | Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not                          | boolean        | -      |                                                        |
+| override  |                                                                                                                                     | boolean        | -      | <code style='white-space: nowrap; padding: 0;'></code> |
+| step      | Step marker content (when there is no icon)                                                                                         | string\|number | -      | <code style='white-space: nowrap; padding: 0;'></code> |
+| variant   | Default style for the step, optional This will override parent type. Could be used to set a completed step to "success" for example | string\|object | -      | <code style='white-space: nowrap; padding: 0;'></code> |
 
 </div>
 
diff --git a/packages/docs-next/components/Switch.md b/packages/docs-next/components/Switch.md
index 2b79c1809..af7f0b03f 100644
--- a/packages/docs-next/components/Switch.md
+++ b/packages/docs-next/components/Switch.md
@@ -36,23 +36,23 @@ title: Switch
 
 ### Props
 
-| Prop name      | Description                                                                         | Type                    | Values                                                                          | Default   |
-| -------------- | ----------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------- | --------- |
-| ariaLabelledby | Accessibility label to establish relationship between the switch and control label' | string                  | -                                                                               |           |
-| disabled       |                                                                                     | boolean                 | -                                                                               |           |
-| falseValue     | Overrides the returned value when it's not checked                                  | string\|number\|boolean | -                                                                               | false     |
-| label          | Input label, unnecessary when default slot is used                                  | string                  | -                                                                               | undefined |
-| name           | Name attribute on native checkbox                                                   | string                  | -                                                                               |           |
-| nativeValue    | Same as native value                                                                | string\|number\|boolean | -                                                                               |           |
-| override       |                                                                                     | boolean                 | -                                                                               |           |
-| passiveVariant | Color of the switch when is passive, optional                                       | string                  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |           |
-| position       | Label position                                                                      | string                  | -                                                                               | "right"   |
-| required       |                                                                                     | boolean                 | -                                                                               |           |
-| rounded        | Rounded style                                                                       | boolean                 | -                                                                               | true      |
-| size           | Vertical size of switch, optional                                                   | string                  | `small`, `medium`, `large`                                                      |           |
-| trueValue      | Overrides the returned value when it's checked                                      | string\|number\|boolean | -                                                                               | true      |
-| v-model        |                                                                                     | string\|number\|boolean | -                                                                               |           |
-| variant        | Color of the switch, optional                                                       | string                  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |           |
+| Prop name      | Description                                                                         | Type                    | Values                                                                          | Default                                                       |
+| -------------- | ----------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| ariaLabelledby | Accessibility label to establish relationship between the switch and control label' | string                  | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| disabled       |                                                                                     | boolean                 | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| falseValue     | Overrides the returned value when it's not checked                                  | string\|number\|boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>   |
+| label          | Input label, unnecessary when default slot is used                                  | string                  | -                                                                               |                                                               |
+| name           | Name attribute on native checkbox                                                   | string                  | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| nativeValue    | Same as native value                                                                | string\|number\|boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| override       |                                                                                     | boolean                 | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| passiveVariant | Color of the switch when is passive, optional                                       | string                  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>        |
+| position       | Label position                                                                      | string                  | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"right"</code> |
+| required       |                                                                                     | boolean                 | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| rounded        | Rounded style                                                                       | boolean                 | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>    |
+| size           | Vertical size of switch, optional                                                   | string                  | `small`, `medium`, `large`                                                      | <code style='white-space: nowrap; padding: 0;'></code>        |
+| trueValue      | Overrides the returned value when it's checked                                      | string\|number\|boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>    |
+| v-model        |                                                                                     | string\|number\|boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>        |
+| variant        | Color of the switch, optional                                                       | string                  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>        |
 
 ### Events
 
diff --git a/packages/docs-next/components/Table.md b/packages/docs-next/components/Table.md
index 7619d1716..2b4d987d5 100644
--- a/packages/docs-next/components/Table.md
+++ b/packages/docs-next/components/Table.md
@@ -38,66 +38,66 @@ title: Table
 
 | Prop name             | Description                                                                                                               | Type           | Values                                                                          | Default                                                                                                                                                        |
 | --------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaCurrentLabel      |                                                                                                                           | string         | -                                                                               |                                                                                                                                                                |
-| ariaNextLabel         |                                                                                                                           | string         | -                                                                               |                                                                                                                                                                |
-| ariaPageLabel         |                                                                                                                           | string         | -                                                                               |                                                                                                                                                                |
-| ariaPreviousLabel     |                                                                                                                           | string         | -                                                                               |                                                                                                                                                                |
-| backendFiltering      | Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend              | boolean        | -                                                                               |                                                                                                                                                                |
-| backendPagination     | Rows won't be paginated with Javascript, use with page-change event to paginate in your backend                           | boolean        | -                                                                               |                                                                                                                                                                |
-| backendSorting        | Columns won't be sorted with Javascript, use with sort event to sort in your backend                                      | boolean        | -                                                                               |                                                                                                                                                                |
-| bordered              | Border to all cells                                                                                                       | boolean        | -                                                                               |                                                                                                                                                                |
-| checkable             | Rows can be checked (multiple)                                                                                            | boolean        | -                                                                               |                                                                                                                                                                |
-| checkboxPosition      | Position of the checkbox (if checkable is true)                                                                           | string         | `left`, `right`                                                                 | "left"                                                                                                                                                         |
-| checkboxVariant       | Color of the checkbox when checkable, optional                                                                            | string         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | undefined                                                                                                                                                      |
-| checkedRows           | Set which rows are checked, use v-model:checkedRows to make it two-way binding                                            | array          | -                                                                               | []                                                                                                                                                             |
-| columns               | Table columns                                                                                                             | array          | -                                                                               | []                                                                                                                                                             |
-| currentPage           | Current page of table data (if paginated), use v-model:currentPage to make it two-way binding                             | number         | -                                                                               | 1                                                                                                                                                              |
-| customDetailRow       | Custom style on details                                                                                                   | boolean        | -                                                                               | false                                                                                                                                                          |
-| customIsChecked       | Custom method to verify if row is checked, works when is checkable. Useful for backend pagination                         | func           | -                                                                               |                                                                                                                                                                |
-| customRowKey          | Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)         | string         | -                                                                               |                                                                                                                                                                |
-| data                  | Table data                                                                                                                | array          | -                                                                               | []                                                                                                                                                             |
-| debounceSearch        | Filtering debounce time (in milliseconds)                                                                                 | number         | -                                                                               |                                                                                                                                                                |
-| defaultSort           | Sets the default sort column and order — e.g. ['first_name', 'desc']                                                      | string\|array  | -                                                                               |                                                                                                                                                                |
-| defaultSortDirection  | Sets the default sort column direction on the first click                                                                 | string         | `asc`, `desc`                                                                   | "asc"                                                                                                                                                          |
-| detailIcon            | Icon name of detail action                                                                                                | string         | -                                                                               | "chevron-right"                                                                                                                                                |
-| detailKey             | Use a unique key of your data Object when use detailed or opened detailed. (id recommended)                               | string         | -                                                                               | ""                                                                                                                                                             |
-| detailTransition      |                                                                                                                           | string         | -                                                                               | ""                                                                                                                                                             |
-| detailed              | Allow row details                                                                                                         | boolean        | -                                                                               |                                                                                                                                                                |
-| draggable             | Allows rows to be draggable                                                                                               | boolean        | -                                                                               | false                                                                                                                                                          |
-| draggableColumn       | Allows columns to be draggable                                                                                            | boolean        | -                                                                               | false                                                                                                                                                          |
-| filtersEvent          | Add a native event to filter                                                                                              | string         | -                                                                               | ""                                                                                                                                                             |
-| focusable             | Table can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hovering | boolean        | -                                                                               |                                                                                                                                                                |
+| ariaCurrentLabel      |                                                                                                                           | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| ariaNextLabel         |                                                                                                                           | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| ariaPageLabel         |                                                                                                                           | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| ariaPreviousLabel     |                                                                                                                           | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| backendFiltering      | Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend              | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| backendPagination     | Rows won't be paginated with Javascript, use with page-change event to paginate in your backend                           | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| backendSorting        | Columns won't be sorted with Javascript, use with sort event to sort in your backend                                      | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| bordered              | Border to all cells                                                                                                       | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| checkable             | Rows can be checked (multiple)                                                                                            | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| checkboxPosition      | Position of the checkbox (if checkable is true)                                                                           | string         | `left`, `right`                                                                 | <code style='white-space: nowrap; padding: 0;'>"left"</code>                                                                                                   |
+| checkboxVariant       | Color of the checkbox when checkable, optional                                                                            | string         | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                                |
+| checkedRows           | Set which rows are checked, use v-model:checkedRows to make it two-way binding                                            | array          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                       |
+| columns               | Table columns                                                                                                             | array          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                       |
+| currentPage           | Current page of table data (if paginated), use v-model:currentPage to make it two-way binding                             | number         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                        |
+| customDetailRow       | Custom style on details                                                                                                   | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| customIsChecked       | Custom method to verify if row is checked, works when is checkable. Useful for backend pagination                         | func           | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| customRowKey          | Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)         | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| data                  | Table data                                                                                                                | array          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                       |
+| debounceSearch        | Filtering debounce time (in milliseconds)                                                                                 | number         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| defaultSort           | Sets the default sort column and order — e.g. ['first_name', 'desc']                                                      | string\|array  | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| defaultSortDirection  | Sets the default sort column direction on the first click                                                                 | string         | `asc`, `desc`                                                                   | <code style='white-space: nowrap; padding: 0;'>"asc"</code>                                                                                                    |
+| detailIcon            | Icon name of detail action                                                                                                | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>"chevron-right"</code>                                                                                          |
+| detailKey             | Use a unique key of your data Object when use detailed or opened detailed. (id recommended)                               | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                                       |
+| detailTransition      |                                                                                                                           | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                                       |
+| detailed              | Allow row details                                                                                                         | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| draggable             | Allows rows to be draggable                                                                                               | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| draggableColumn       | Allows columns to be draggable                                                                                            | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| filtersEvent          | Add a native event to filter                                                                                              | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                                       |
+| focusable             | Table can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hovering | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
 | hasDetailedVisible    | Controls the visibility of the trigger that toggles the detailed rows.                                                    | func           | -                                                                               | Default function (see source code)                                                                                                                             |
-| headerCheckable       | Show check/uncheck all checkbox in table header when checkable                                                            | boolean        | -                                                                               | true                                                                                                                                                           |
-| height                | Table fixed height                                                                                                        | number\|string | -                                                                               |                                                                                                                                                                |
-| hoverable             | Rows are highlighted when hovering                                                                                        | boolean        | -                                                                               |                                                                                                                                                                |
-| iconPack              | Icon pack to use                                                                                                          | string         | -                                                                               |                                                                                                                                                                |
+| headerCheckable       | Show check/uncheck all checkbox in table header when checkable                                                            | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                     |
+| height                | Table fixed height                                                                                                        | number\|string | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| hoverable             | Rows are highlighted when hovering                                                                                        | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| iconPack              | Icon pack to use                                                                                                          | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
 | isRowCheckable        | Custom method to verify if a row is checkable, works when is checkable                                                    | func           | -                                                                               | Default function (see source code)                                                                                                                             |
 | isRowSelectable       | Custom method to verify if a row is selectable, works when is selected.                                                   | func           | -                                                                               | Default function (see source code)                                                                                                                             |
-| loading               | Loading state                                                                                                             | boolean        | -                                                                               |                                                                                                                                                                |
-| mobileBreakpoint      | Mobile breakpoint as max-width value                                                                                      | string         | -                                                                               |                                                                                                                                                                |
+| loading               | Loading state                                                                                                             | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| mobileBreakpoint      | Mobile breakpoint as max-width value                                                                                      | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
 | mobileCards           | Rows appears as cards on mobile (collapse rows)                                                                           | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;mobileCards: true<br>}</code>              |
-| mobileSortPlaceholder | Text when nothing is selected                                                                                             | string         | -                                                                               |                                                                                                                                                                |
-| narrowed              | Makes the cells narrower                                                                                                  | boolean        | -                                                                               |                                                                                                                                                                |
-| openedDetailed        | Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop) | array          | -                                                                               | []                                                                                                                                                             |
-| override              |                                                                                                                           | boolean        | -                                                                               |                                                                                                                                                                |
-| paginated             | Adds pagination to the table                                                                                              | boolean        | -                                                                               |                                                                                                                                                                |
-| paginationOrder       | Pagination buttons order if paginated                                                                                     | string         | -                                                                               |                                                                                                                                                                |
+| mobileSortPlaceholder | Text when nothing is selected                                                                                             | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| narrowed              | Makes the cells narrower                                                                                                  | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| openedDetailed        | Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop) | array          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>[]</code>                                                                                                       |
+| override              |                                                                                                                           | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| paginated             | Adds pagination to the table                                                                                              | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| paginationOrder       | Pagination buttons order if paginated                                                                                     | string         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
 | paginationPosition    | Pagination position (if paginated)                                                                                        | string         | `bottom`, `top`, `bot`                                                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationPosition: "bottom", <br>}</code> |
-| paginationRounded     | Rounded pagination if paginated                                                                                           | boolean        | -                                                                               |                                                                                                                                                                |
+| paginationRounded     | Rounded pagination if paginated                                                                                           | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
 | paginationSize        | Size of pagination if paginated                                                                                           | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;paginationSize: "small", <br>}</code>      |
 | perPage               | How many rows per page (if paginated)                                                                                     | number\|string | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;perPage: 20<br>}</code>                    |
 | rowClass              | Add a class to row based on the return                                                                                    | func           | -                                                                               | Default function (see source code)                                                                                                                             |
-| scrollable            | Add a horizontal scrollbar when table is too wide                                                                         | boolean        | -                                                                               |                                                                                                                                                                |
-| selected              | Set which row is selected, use v-model:selected to make it two-way binding                                                | object         | -                                                                               |                                                                                                                                                                |
-| showDetailIcon        | Allow chevron icon and column to be visible                                                                               | boolean        | -                                                                               | true                                                                                                                                                           |
+| scrollable            | Add a horizontal scrollbar when table is too wide                                                                         | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| selected              | Set which row is selected, use v-model:selected to make it two-way binding                                                | object         | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| showDetailIcon        | Allow chevron icon and column to be visible                                                                               | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                     |
 | showHeader            | Show header                                                                                                               | boolean        | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;showHeader: true<br>}</code>               |
 | sortIcon              | Sets the header sorting icon                                                                                              | string         | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;sortIcon: "arrow-up", <br>}</code>         |
 | sortIconSize          | Sets the size of the sorting icon                                                                                         | string         | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;sortIconSize: "small", <br>}</code>        |
-| stickyCheckbox        | Make the checkbox column sticky when checkable                                                                            | boolean        | -                                                                               | false                                                                                                                                                          |
-| stickyHeader          | Show a sticky table header                                                                                                | boolean        | -                                                                               |                                                                                                                                                                |
-| striped               | Whether table is striped                                                                                                  | boolean        | -                                                                               |                                                                                                                                                                |
-| total                 | Total number of table data if backend-pagination is enabled                                                               | number\|string | -                                                                               | 0                                                                                                                                                              |
+| stickyCheckbox        | Make the checkbox column sticky when checkable                                                                            | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                    |
+| stickyHeader          | Show a sticky table header                                                                                                | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| striped               | Whether table is striped                                                                                                  | boolean        | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                         |
+| total                 | Total number of table data if backend-pagination is enabled                                                               | number\|string | -                                                                               | <code style='white-space: nowrap; padding: 0;'>0</code>                                                                                                        |
 
 ### Events
 
@@ -160,25 +160,25 @@ title: Table
 
 ### Props
 
-| Prop name        | Description                                                        | Type                                         | Values                      | Default                            |
-| ---------------- | ------------------------------------------------------------------ | -------------------------------------------- | --------------------------- | ---------------------------------- |
-| customKey        |                                                                    | string\|number                               | -                           |                                    |
-| customSearch     |                                                                    | func                                         | -                           |                                    |
-| customSort       |                                                                    | func                                         | -                           |                                    |
-| field            |                                                                    | string                                       | -                           |                                    |
-| headerSelectable |                                                                    | boolean                                      | -                           |                                    |
-| label            |                                                                    | string                                       | -                           |                                    |
-| meta             |                                                                    | string\|number\|boolean\|func\|object\|array | -                           |                                    |
-| numeric          |                                                                    | boolean                                      | -                           |                                    |
-| position         | Optional, position of column content                               | string                                       | `left`, `centered`, `right` |                                    |
-| searchable       |                                                                    | boolean                                      | -                           |                                    |
-| sortable         |                                                                    | boolean                                      | -                           |                                    |
-| sticky           |                                                                    | boolean                                      | -                           |                                    |
-| subheading       |                                                                    | string                                       | -                           |                                    |
-| tdAttrs          | Adds native attributes to td :td-attrs="(row, column)" =&gt; ({})" | func                                         | -                           | Default function (see source code) |
-| thAttrs          | Adds native attributes to th :th-attrs="(column)" =&gt; ({})"      | func                                         | -                           | Default function (see source code) |
-| visible          |                                                                    | boolean                                      | -                           | true                               |
-| width            |                                                                    | number\|string                               | -                           |                                    |
+| Prop name        | Description                                                        | Type                                         | Values                      | Default                                                    |
+| ---------------- | ------------------------------------------------------------------ | -------------------------------------------- | --------------------------- | ---------------------------------------------------------- |
+| customKey        |                                                                    | string\|number                               | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| customSearch     |                                                                    | func                                         | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| customSort       |                                                                    | func                                         | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| field            |                                                                    | string                                       | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| headerSelectable |                                                                    | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| label            |                                                                    | string                                       | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| meta             |                                                                    | string\|number\|boolean\|func\|object\|array | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| numeric          |                                                                    | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| position         | Optional, position of column content                               | string                                       | `left`, `centered`, `right` | <code style='white-space: nowrap; padding: 0;'></code>     |
+| searchable       |                                                                    | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| sortable         |                                                                    | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| sticky           |                                                                    | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| subheading       |                                                                    | string                                       | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
+| tdAttrs          | Adds native attributes to td :td-attrs="(row, column)" =&gt; ({})" | func                                         | -                           | Default function (see source code)                         |
+| thAttrs          | Adds native attributes to th :th-attrs="(column)" =&gt; ({})"      | func                                         | -                           | Default function (see source code)                         |
+| visible          |                                                                    | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'>true</code> |
+| width            |                                                                    | number\|string                               | -                           | <code style='white-space: nowrap; padding: 0;'></code>     |
 
 </div>
 
diff --git a/packages/docs-next/components/Tabs.md b/packages/docs-next/components/Tabs.md
index 93e0c057d..910788749 100644
--- a/packages/docs-next/components/Tabs.md
+++ b/packages/docs-next/components/Tabs.md
@@ -39,10 +39,10 @@ title: Tabs
 | Prop name | Description                                     | Type    | Values            | Default                                                                                                                                       |
 | --------- | ----------------------------------------------- | ------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | animated  | Tab will have an animation                      | boolean | -                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;animated: true<br>}</code> |
-| expanded  | Tabs will be expanded (full-width)              | boolean | -                 |                                                                                                                                               |
-| multiline | Show tab items multiline when there is no space | boolean | -                 |                                                                                                                                               |
-| override  |                                                 | boolean | -                 |                                                                                                                                               |
-| type      | Tab type                                        | string  | `boxed`, `toggle` | "default"                                                                                                                                     |
+| expanded  | Tabs will be expanded (full-width)              | boolean | -                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                        |
+| multiline | Show tab items multiline when there is no space | boolean | -                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                        |
+| override  |                                                 | boolean | -                 | <code style='white-space: nowrap; padding: 0;'></code>                                                                                        |
+| type      | Tab type                                        | string  | `boxed`, `toggle` | <code style='white-space: nowrap; padding: 0;'>"default"</code>                                                                               |
 
 ### Slots
 
@@ -66,8 +66,8 @@ title: Tabs
 
 | Prop name | Description           | Type                | Values | Default                                                                                                                                          |
 | --------- | --------------------- | ------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| disabled  | Item will be disabled | boolean             | -      |                                                                                                                                                  |
-| override  |                       | boolean             | -      |                                                                                                                                                  |
+| disabled  | Item will be disabled | boolean             | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                           |
+| override  |                       | boolean             | -      | <code style='white-space: nowrap; padding: 0;'></code>                                                                                           |
 | tag       | Tabs item tag name    | string \| Component | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code> |
 
 </div>
diff --git a/packages/docs-next/components/Timepicker.md b/packages/docs-next/components/Timepicker.md
index 3343f160d..f382c8ee0 100644
--- a/packages/docs-next/components/Timepicker.md
+++ b/packages/docs-next/components/Timepicker.md
@@ -36,52 +36,57 @@ title: Timepicker
 
 ### Props
 
-| Prop name             | Description                                                 | Type           | Values                                            | Default                                                                                                                                                   |
-| --------------------- | ----------------------------------------------------------- | -------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| appendToBody          |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| autocomplete          | Native options to use in HTML5 validation                   | string         | -                                                 |                                                                                                                                                           |
-| defaultMinutes        |                                                             | number         | -                                                 |                                                                                                                                                           |
-| defaultSeconds        |                                                             | number         | -                                                 |                                                                                                                                                           |
-| disabled              |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| editable              |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| enableSeconds         |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| expanded              | Makes input full width when inside a grouped or addon field | boolean        | -                                                 |                                                                                                                                                           |
-| hourFormat            |                                                             | string         | -                                                 |                                                                                                                                                           |
-| icon                  | Icon name to be added                                       | string         | -                                                 |                                                                                                                                                           |
-| iconPack              | Icon pack to use                                            | string         | `mdi`, `fa`, `fas and any other custom icon pack` |                                                                                                                                                           |
-| incrementHours        |                                                             | number         | -                                                 | 1                                                                                                                                                         |
-| incrementMinutes      |                                                             | number         | -                                                 | 1                                                                                                                                                         |
-| incrementSeconds      |                                                             | number         | -                                                 | 1                                                                                                                                                         |
-| inline                |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| maxTime               |                                                             | date           | -                                                 |                                                                                                                                                           |
-| maxlength             | Same as native maxlength, plus character counter            | number\|string | -                                                 |                                                                                                                                                           |
-| minTime               |                                                             | date           | -                                                 |                                                                                                                                                           |
-| mobileBreakpoint      | Mobile breakpoint as max-width value                        | string         | -                                                 |                                                                                                                                                           |
-| mobileNative          |                                                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;mobileNative: true, <br>}</code> |
-| openOnFocus           |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| override              |                                                             | boolean        | -                                                 |                                                                                                                                                           |
-| placeholder           |                                                             | string         | -                                                 |                                                                                                                                                           |
-| position              |                                                             | string         | -                                                 |                                                                                                                                                           |
-| resetOnMeridianChange |                                                             | boolean        | -                                                 | false                                                                                                                                                     |
-| rounded               | Makes the element rounded                                   | boolean        | -                                                 |                                                                                                                                                           |
-| size                  | Size of button, optional                                    | string         | `small`, `medium`, `large`                        |                                                                                                                                                           |
-| statusIcon            | Show status icon using field and variant prop               | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                 |
-| timeCreator           |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                        |
-| timeFormatter         |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                        |
-| timeParser            |                                                             | func           | -                                                 | Default function (see source code)                                                                                                                        |
-| unselectableTimes     |                                                             | array          | -                                                 |                                                                                                                                                           |
-| useHtml5Validation    | Enable html 5 native validation                             | boolean        | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>         |
-| v-model               |                                                             | date           | -                                                 |                                                                                                                                                           |
-| validationMessage     | The message which is shown when a validation error occurs   | string         | -                                                 |                                                                                                                                                           |
+| Prop name             | Description                                                 | Type                                   | Values                                            | Default                                                                                                                                                            |
+| --------------------- | ----------------------------------------------------------- | -------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| active                | The active state of the dropdown                            | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| appendToBody          | Append autocomplete content to body                         | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;appendToBody: false<br>}</code>           |
+| closeOnClick          |                                                             | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;closeOnClick: true<br>}</code>            |
+| defaultMinutes        |                                                             | number                                 | -                                                 |                                                                                                                                                                    |
+| defaultSeconds        |                                                             | number                                 | -                                                 |                                                                                                                                                                    |
+| disabled              | Same as native disabled                                     | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| enableSeconds         |                                                             | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| expanded              | Makes input full width when inside a grouped or addon field | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| hourFormat            |                                                             | string                                 | -                                                 |                                                                                                                                                                    |
+| icon                  | Icon name to be shown                                       | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>               |
+| iconPack              | Icon pack to use                                            | string                                 | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>           |
+| iconRight             | Icon name to be added on the right side                     | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>          |
+| iconRightClickable    | Make the icon right clickable                               | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| incrementHours        |                                                             | number                                 | -                                                 | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                            |
+| incrementMinutes      |                                                             | number                                 | -                                                 | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                            |
+| incrementSeconds      |                                                             | number                                 | -                                                 | <code style='white-space: nowrap; padding: 0;'>1</code>                                                                                                            |
+| inline                | Display datepicker inline                                   | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| locale                | Date format locale                                          | string                                 | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;locale: undefined<br>}</code>                         |
+| maxTime               | Max time to select                                          | Date                                   | -                                                 |                                                                                                                                                                    |
+| minTime               | Min time to select                                          | Date                                   | -                                                 |                                                                                                                                                                    |
+| mobileModal           | Enable dropdown mobile modal                                | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileModal: true<br>}</code>             |
+| mobileNative          | Enable mobile native input if mobile agent                  | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;mobileNative: true<br>}</code>            |
+| openOnFocus           |                                                             | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;openOnFocus: true<br>}</code>             |
+| placeholder           | Input placeholder                                           | string                                 | -                                                 |                                                                                                                                                                    |
+| position              | Dropdown position                                           | string                                 | -                                                 |                                                                                                                                                                    |
+| readonly              | Same as native input readonly                               | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| resetOnMeridianChange |                                                             | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| rounded               | Makes the input rounded                                     | boolean                                | -                                                 | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                        |
+| size                  | Size of the button, optional                                | string                                 | `small`, `medium`, `large`                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;size: undefined<br>}</code>               |
+| timeCreator           | time creator function, default is `new Date()`              | () =&gt; Date                          | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>timepicker: {<br>&nbsp;&nbsp;timeCreator: () => new Date()<br>}</code> |
+| timeFormatter         | Custom function to format a date into a string              | (date: Date) =&gt; string              | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>icker: {<br>&nbsp;&nbsp;timeFormatter: defaultFunction<br>}</code>     |
+| timeParser            | Custom function to parse a string into a date               | (date: string) =&gt; Date              | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>imepicker: {<br>&nbsp;&nbsp;timeParser: defaultFunction<br>}</code>    |
+| trapFocus             | Dropdown trapFocus                                          | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code>               |
+| unselectableTimes     | Define a list of times which can not be selected            | Date[] \| ((date: Date) =&gt; boolean) | -                                                 | Default function (see source code)                                                                                                                                 |
+| useHtml5Validation    | Enable html 5 native validation                             | boolean                                | -                                                 | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>                  |
+| v-model               |                                                             | Date                                   | -                                                 |                                                                                                                                                                    |
+| validationMessage     | The message which is shown when a validation error occurs   | string                                 | -                                                 |                                                                                                                                                                    |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
+| Event name        | Properties                                 | Description                     |
+| ----------------- | ------------------------------------------ | ------------------------------- |
+| focus             | **event** `Event` - native event           | on input focus event            |
+| blur              | **event** `Event` - native event           | on input blur event             |
+| invalid           | **event** `Event` - native event           | on input invalid event          |
+| icon-click        | **event** `Event` - native event           | on icon click event             |
+| icon-right-click  | **event** `Event` - native event           | on icon right click event       |
+| update:modelValue | **value** `Date` - updated modelValue prop | modelValue prop two-way binding |
+| update:active     | **value** `boolean` - updated active prop  | active prop two-way binding     |
 
 ### Slots
 
diff --git a/packages/docs-next/components/Tooltip.md b/packages/docs-next/components/Tooltip.md
index 0930ca409..e3d907ba8 100644
--- a/packages/docs-next/components/Tooltip.md
+++ b/packages/docs-next/components/Tooltip.md
@@ -38,19 +38,19 @@ title: Tooltip
 
 | Prop name    | Description                                                                     | Type                | Values                                                                          | Default                                                                                                                                                 |
 | ------------ | ------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| active       | Whether tooltip is active or not, use v-model:active to make it two-way binding | boolean             | -                                                                               | true                                                                                                                                                    |
-| always       | Tooltip will be always active                                                   | boolean             | -                                                                               |                                                                                                                                                         |
-| animated     | Tooltip will have an animation                                                  | boolean             | -                                                                               | true                                                                                                                                                    |
+| active       | Whether tooltip is active or not, use v-model:active to make it two-way binding | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                              |
+| always       | Tooltip will be always active                                                   | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
+| animated     | Tooltip will have an animation                                                  | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                              |
 | animation    | Tooltip default animation                                                       | string              | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tooltip: {<br>&nbsp;&nbsp;animation: "fade", <br>}</code>   |
-| appendToBody | Append tooltip content to body                                                  | boolean             | -                                                                               |                                                                                                                                                         |
-| autoClose    | Tooltip auto close options                                                      | array\|boolean      | `true`, `false`, `'inside'`, `'outside'`                                        | true                                                                                                                                                    |
-| delay        | Tooltip delay before it appears (number in ms)                                  | number              | -                                                                               |                                                                                                                                                         |
-| label        | Tooltip text                                                                    | string              | -                                                                               |                                                                                                                                                         |
-| multiline    | Tooltip will be multilined                                                      | boolean             | -                                                                               |                                                                                                                                                         |
-| override     |                                                                                 | boolean             | -                                                                               |                                                                                                                                                         |
+| appendToBody | Append tooltip content to body                                                  | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
+| autoClose    | Tooltip auto close options                                                      | array\|boolean      | `true`, `false`, `'inside'`, `'outside'`                                        | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                              |
+| delay        | Tooltip delay before it appears (number in ms)                                  | number              | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
+| label        | Tooltip text                                                                    | string              | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
+| multiline    | Tooltip will be multilined                                                      | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
+| override     |                                                                                 | boolean             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
 | position     | Tooltip position in relation to the element                                     | Position \| "auto"  | `top`, `bottom`, `left`, `right`, ``                                            | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tooltip: {<br>&nbsp;&nbsp;position: "top"<br>}</code>       |
 | triggers     | Tooltip trigger events                                                          | array               | `hover`, `click`, `focus`, `contextmenu`                                        | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tooltip: {<br>&nbsp;&nbsp;triggers: [ "hover",]<br>}</code> |
-| variant      | Color of the tooltip                                                            | string\|func\|array | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                         |
+| variant      | Color of the tooltip                                                            | string\|func\|array | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                  |
 
 ### Events
 
diff --git a/packages/docs-next/components/Upload.md b/packages/docs-next/components/Upload.md
index f4164a6cd..a51372fe1 100644
--- a/packages/docs-next/components/Upload.md
+++ b/packages/docs-next/components/Upload.md
@@ -36,34 +36,27 @@ title: Upload
 
 ### Props
 
-| Prop name          | Description                                                           | Type                | Values                                                                          | Default                                                                                                                                           |
-| ------------------ | --------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| accept             | Same as native accept                                                 | string              | -                                                                               |                                                                                                                                                   |
-| autocomplete       | Native options to use in HTML5 validation                             | string              | -                                                                               |                                                                                                                                                   |
-| disabled           | Same as native disabled                                               | boolean             | -                                                                               |                                                                                                                                                   |
-| dragDrop           | Accepts drag & drop and change its style                              | boolean             | -                                                                               |                                                                                                                                                   |
-| expanded           | Upload will be expanded (full-width)                                  | boolean             | -                                                                               | false                                                                                                                                             |
-| icon               | Icon name to be added                                                 | string              | -                                                                               |                                                                                                                                                   |
-| iconPack           | Icon pack to use                                                      | string              | `mdi`, `fa`, `fas and any other custom icon pack`                               |                                                                                                                                                   |
-| maxlength          | Same as native maxlength, plus character counter                      | number\|string      | -                                                                               |                                                                                                                                                   |
-| multiple           | Same as native, also push new item to v-model instead of replacing    | boolean             | -                                                                               |                                                                                                                                                   |
-| native             | Replace last chosen files every time (like native file input element) | boolean             | -                                                                               | false                                                                                                                                             |
-| override           |                                                                       | boolean             | -                                                                               |                                                                                                                                                   |
-| rounded            | Makes the element rounded                                             | boolean             | -                                                                               |                                                                                                                                                   |
-| statusIcon         | Show status icon using field and variant prop                         | boolean             | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>         |
-| useHtml5Validation | Enable html 5 native validation                                       | boolean             | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code> |
-| v-model            |                                                                       | object\|File\|array | -                                                                               |                                                                                                                                                   |
-| validationMessage  | The message which is shown when a validation error occurs             | string              | -                                                                               |                                                                                                                                                   |
-| variant            | Color of the control, optional                                        | string              | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                   |
+| Prop name          | Description                                                           | Type                                                 | Values                                                                          | Default                                                                                                                                             |
+| ------------------ | --------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| accept             | Same as native accept                                                 | string                                               | -                                                                               |                                                                                                                                                     |
+| disabled           | Same as native disabled                                               | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
+| dragDrop           | Accepts drag & drop and change its style                              | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
+| expanded           | Upload will be expanded (full-width)                                  | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
+| multiple           | Same as native, also push new item to v-model instead of replacing    | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                         |
+| native             | Replace last chosen files every time (like native file input element) | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                          |
+| useHtml5Validation | Enable html 5 native validation                                       | boolean                                              | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>   |
+| v-model            |                                                                       | object \| typeof File \| object[] \| (typeof File)[] | -                                                                               |                                                                                                                                                     |
+| validationMessage  | The message which is shown when a validation error occurs             | string                                               | -                                                                               |                                                                                                                                                     |
+| variant            | Color of the control, optional                                        | string                                               | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>upload: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |
 
 ### Events
 
-| Event name        | Properties | Description |
-| ----------------- | ---------- | ----------- |
-| blur              |            |
-| focus             |            |
-| invalid           |            |
-| update:modelValue |            |
+| Event name        | Properties                                                                 | Description                     |
+| ----------------- | -------------------------------------------------------------------------- | ------------------------------- |
+| update:modelValue | **value** `Object \| Object[] \| File \| File[]` - updated modelValue prop | modelValue prop two-way binding |
+| focus             | **event** `Event` - native event                                           | on input focus event            |
+| blur              | **event** `Event` - native event                                           | on input blur event             |
+| invalid           | **event** `Event` - native event                                           | on input invalid event          |
 
 ### Slots
 
diff --git a/packages/docs-next/docgen.config.js b/packages/docs-next/docgen.config.js
index 7b72374ea..1f323c8c4 100644
--- a/packages/docs-next/docgen.config.js
+++ b/packages/docs-next/docgen.config.js
@@ -29,6 +29,7 @@ const IGNORE = [
     "DatepickerTable",
     "DatepickerTableRow",
     "DatepickerMonth",
+    "PickerWrapper",
     "NotificationNotice",
     "CarouselItem",
 ];
@@ -69,7 +70,7 @@ module.exports = {
         events: (events) => renderEvents(events, { hasSubComponents: true}),
         slots: (slots) => renderSlots(slots, { hasSubComponents: true}),
         component: (renderedUsage, doc, config, fileName, requiresMd, { isSubComponent }) => {
-            const { displayName, description, tags, functional } = doc;
+            const { displayName, description, tags, functional, docsBlocks } = doc;
             const { deprecated, author, since, version, see, link, style } =
                 tags || {};
             const component = getComponent(fileName);
@@ -92,7 +93,9 @@ ${version ? `Version: ${version[0].description}\n` : ""}
 ${see ? see.map((s) => `[See](${s.description})\n`) : ""}
 ${link ? link.map((l) => `[See](${l.description})\n`) : ""}
 <Carbon />
-</div>`
+</div>
+${docsBlocks ? docsBlocks : ""}
+`
 }
 ${!isSubComponent ? `
 <div class="vp-example">
@@ -163,40 +166,73 @@ function tmplProps(props, name) {
             if (!(IGNORE_CLASSES[name.toLowerCase()] && IGNORE_CLASSES[name.toLowerCase()].indexOf(p) >= 0)) 
                 return;
         }
-        const n = pr.type && pr.type.name ? pr.type.name : "";
-        let d = pr.defaultValue && pr.defaultValue.value ? pr.defaultValue.value : "";
+        if(pr.tags?.ignore) return;
+        
+        const n = pr.type?.name ? pr.type.name : "";
+        let d = pr.defaultValue?.value ? pr.defaultValue.value : "";
         const v = pr.values ? pr.values.map((pv) => `\`${pv}\``).join(", ") : "-";
         const t = pr.description ? pr.description : "";
 
-        if (
-            d.indexOf("getValueByPath") >= 0 &&
+        if(d === "undefined") d = "";
+        else if (
+            d.indexOf("getOption") >= 0 &&
             d.indexOf("const ") < 0 &&
             d.indexOf("if ") < 0 &&
             d.indexOf("else ") < 0
         ) {
-            const params = d
-                .substring(d.lastIndexOf("("), d.lastIndexOf(")"))
-                .replace(/\r\n/g, "")
-                .split(",");
             let configParts = null;
-            if (params.length > 3) {
-                // In case last param contains a ','
-                params[2] = params.slice(2).join(",");
-            }
-            if (params[1]) {
-                configParts = params[1].trim().split(".");
-            }
-            if (configParts && configParts[0] && configParts[1]) {
-                const value = `${configParts[1].replace(/'|"/g, "")}: ${params[2]}`;
-                d = `<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>${configParts[0].replace(/'|"/g,"")}: {<br>&nbsp;&nbsp;${value}<br>}</code>`;
-            }
-            if (configParts && configParts.length == 1) {
-                const value = `${configParts[0].replace(/'|"/g, "")}: ${params[2]}`;
-                d = `<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;${value}<br>}</code>`;
+            if(d.includes("getOptions")) {
+                // old components
+                const params = d.substring(d.lastIndexOf("("), d.lastIndexOf(")"))
+                    .replace(/\r\n/g, "")
+                    .split(",");
+                if (params.length > 3) {
+                    // In case last param contains a ','
+                    params[2] = params.slice(2).join(",");
+                }
+                if (params[1]) {
+                    configParts = params[1].trim().split(".");
+                }
+                if (configParts && configParts[0] && configParts[1]) {
+                    const value = `${configParts[1].replace(/'|"/g, "")}: ${params[2]}`;
+                    d = `<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>${configParts[0].replace(/'|"/g,"")}: {<br>&nbsp;&nbsp;${value}<br>}</code>`;
+                }
+                if (configParts && configParts.length == 1) {
+                    const value = `${configParts[0].replace(/'|"/g, "")}: ${params[2]}`;
+                    d = `<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;${value}<br>}</code>`;
+                }
+            } else {
+                // refactored components
+                const clear = (s) => s.replace(/'|"/g, "");
+                // get default params
+                let f = d.replace(/\r\n/g, "")
+                    .substring(d.lastIndexOf("getOption(") + "getOption(".length);
+                // remove function prop invokation
+               if(f.lastIndexOf('(') > 0) f = f.substring(0, f.lastIndexOf('('));
+               if(f.lastIndexOf(')') > 0) f = f.substring(0, f.lastIndexOf(')'));
+                const params = f.split(",");
+                if (params.length > 3) {
+                    // In case last param contains a ','
+                    params[2] = params.slice(2).join(",");
+                }
+                if (params[0]) {
+                    configParts = params[0].trim().split(".");
+                }
+                if (configParts && configParts[0] && configParts[1]) {
+                    const value = `${clear(configParts[1])}: ${params[1]}`;
+                    d = `<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>${clear(configParts[0])}: {<br>&nbsp;&nbsp;${value}<br>}</code>`;
+                }
+                if (configParts && configParts.length == 1) {
+                    const value = `${clear(configParts[0])}: ${params[1]}`;
+                    d = `<div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;${value}<br>}</code>`;
+                }
             }
+        } else if(d.includes("=>")) {
+            d = "Default function (see source code)";
+        }
+        else {
+            d = `<code style='white-space: nowrap; padding: 0;'>${d}</code>`;
         }
-
-        d = d.includes("=>") ? "Default function (see source code)" : d;
 
         ret += `| ${mdclean(p)} | ${mdclean(t)} | ${mdclean(n)} | ${mdclean(v)} | ${d} |` + "\n";
     });
diff --git a/packages/oruga-next/package-lock.json b/packages/oruga-next/package-lock.json
index fd849a049..0be6736a8 100644
--- a/packages/oruga-next/package-lock.json
+++ b/packages/oruga-next/package-lock.json
@@ -18,7 +18,6 @@
         "@types/jest": "24.0.19",
         "@types/node": "^18.11.12",
         "@vitejs/plugin-vue": "^4.3.4",
-        "@vue/compiler-sfc": "^3.2.45",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-standard": "^8.0.1",
         "@vue/eslint-config-typescript": "^12.0.0",
@@ -48,7 +47,7 @@
         "vite-plugin-dts": "^3.5.4",
         "vite-plugin-istanbul": "^5.0.0",
         "vite-tsconfig-paths": "^4.2.1",
-        "vue": "^3.2.45",
+        "vue": "^3.3.4",
         "vue-tsc": "^1.8.11"
       },
       "peerDependencies": {
@@ -3269,84 +3268,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
+      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
+        "@babel/parser": "^7.21.3",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-core/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+        "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
+      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-core": "3.3.4",
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
+      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@babel/parser": "^7.20.15",
+        "@vue/compiler-core": "3.3.4",
+        "@vue/compiler-dom": "3.3.4",
+        "@vue/compiler-ssr": "3.3.4",
+        "@vue/reactivity-transform": "3.3.4",
+        "@vue/shared": "3.3.4",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
+        "magic-string": "^0.30.0",
         "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+        "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
+      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.3.4",
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/eslint-config-prettier": {
@@ -3527,43 +3495,6 @@
         }
       }
     },
-    "node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
-      "dev": true,
-      "dependencies": {
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
-      "dev": true
-    },
     "node_modules/@vue/language-core/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3589,52 +3520,65 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
-      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
+      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/shared": "3.3.4"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
+      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
       "dev": true,
       "dependencies": {
-        "@vue/shared": "3.2.45"
+        "@babel/parser": "^7.20.15",
+        "@vue/compiler-core": "3.3.4",
+        "@vue/shared": "3.3.4",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.0"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
-      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
+      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
       "dev": true,
       "dependencies": {
-        "@vue/reactivity": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/reactivity": "3.3.4",
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
-      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
+      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
       "dev": true,
       "dependencies": {
-        "@vue/runtime-core": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "csstype": "^2.6.8"
+        "@vue/runtime-core": "3.3.4",
+        "@vue/shared": "3.3.4",
+        "csstype": "^3.1.1"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
-      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
+      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-ssr": "3.3.4",
+        "@vue/shared": "3.3.4"
       },
       "peerDependencies": {
-        "vue": "3.2.45"
+        "vue": "3.3.4"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
       "dev": true
     },
     "node_modules/@vue/tsconfig": {
@@ -5691,9 +5635,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
       "dev": true
     },
     "node_modules/cypress": {
@@ -10221,14 +10165,23 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.4",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
+      "integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
       "dev": true,
       "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
+    "node_modules/magic-string/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -13271,13 +13224,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
-      "dev": true
-    },
     "node_modules/spawn-command": {
       "version": "0.0.2-1",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
@@ -14637,16 +14583,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
-      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
+      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-sfc": "3.2.45",
-        "@vue/runtime-dom": "3.2.45",
-        "@vue/server-renderer": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.3.4",
+        "@vue/compiler-sfc": "3.3.4",
+        "@vue/runtime-dom": "3.3.4",
+        "@vue/server-renderer": "3.3.4",
+        "@vue/shared": "3.3.4"
       }
     },
     "node_modules/vue-eslint-parser": {
diff --git a/packages/oruga-next/package.json b/packages/oruga-next/package.json
index b94152261..ea811cb1e 100644
--- a/packages/oruga-next/package.json
+++ b/packages/oruga-next/package.json
@@ -37,13 +37,13 @@
   "scripts": {
     "dev": "vite",
     "build:vue": "rimraf dist && vite build && vite build --mode minify",
-    "build:vue:watch": "vite build --watch",
+    "build:vue:watch": "vite build --mode minify --watch",
     "build:style": "npm run build:scss && npm run build:scss-vars && npm run build:scss-full",
     "build:scss-vars": "sass --no-charset ../oruga/src/scss/oruga-full-vars.scss | node ../oruga/build/banner.js > dist/oruga-full-vars.css && cleancss -o dist/oruga-full-vars.min.css dist/oruga-full-vars.css",
     "build:scss-full": "sass --no-charset ../oruga/src/scss/oruga-full.scss | node ../oruga/build/banner.js > dist/oruga-full.css && cleancss -o dist/oruga-full.min.css dist/oruga-full.css",
     "build:scss": "sass --no-charset ../oruga/src/scss/oruga.scss | node ../oruga/build/banner.js > dist/oruga.css && cleancss -o dist/oruga.min.css dist/oruga.css",
     "build:style:watch": "concurrently \"sass ../oruga/src/scss/oruga-full-vars.scss dist/oruga-full-vars.css --watch\" \"sass ../oruga/src/scss/oruga.scss dist/oruga.css --watch\"",
-    "build:lib": "rimraf dist && npm run build:vue && npm run build:style",
+    "build:lib": "rimraf dist && npm run test:ts && npm run build:vue && npm run build:style",
     "build:lib:watch": "npm link && concurrently \"npm run build:vue:watch\" \"npm run build:style:watch\"",
     "publish:lib": "cp -R ../oruga/src/scss ./src && cp ../../README.md . && npm run build:lib && npm publish",
     "test": "rm -rf .nyc_output coverage && NODE_ENV=test cypress run --component",
@@ -76,7 +76,6 @@
     "@types/jest": "24.0.19",
     "@types/node": "^18.11.12",
     "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -106,7 +105,7 @@
     "vite-plugin-dts": "^3.5.4",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "vue": "^3.2.45",
+    "vue": "^3.3.4",
     "vue-tsc": "^1.8.11"
   },
   "nyc": {
diff --git a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
index 1c4c86d61..b8ee9686c 100644
--- a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
+++ b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
@@ -1,917 +1,955 @@
-<script lang="ts">
-import type { Component, PropType } from "vue";
-import { defineComponent } from "vue";
-
-import Input from "../input/Input.vue";
-
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import FormElementMixin from "../../utils/FormElementMixin";
-
+<script setup lang="ts">
+import {
+    computed,
+    nextTick,
+    ref,
+    watch,
+    onMounted,
+    onBeforeUpdate,
+    onUnmounted,
+    useAttrs,
+    toRaw,
+    type PropType,
+    type Component,
+} from "vue";
+
+import OInput from "../input/Input.vue";
+
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useEventListener,
+    useInputHandler,
+    useDebounce,
+} from "@/composables";
 import {
     getValueByPath,
     removeElement,
     createAbsoluteElement,
     toCssDimension,
-    debounce,
-} from "../../utils/helpers";
-import { getOptions } from "../../utils/config";
+} from "@/utils/helpers";
+import { isClient } from "@/utils/ssr";
+import type { BindProp } from "@/types";
 
 /**
  * Extended input that provide suggestions while the user types
  * @displayName Autocomplete
  * @style _autocomplete.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OAutocomplete",
     configField: "autocomplete",
-    components: {
-        [Input.name]: Input,
-    },
-    mixins: [BaseComponentMixin, FormElementMixin],
     inheritAttrs: false,
-    emits: [
-        "update:modelValue",
-        "select",
-        "select-header",
-        "select-footer",
-        "infinite-scroll",
-        "typing",
-        "focus",
-        "blur",
-        "invalid",
-        "icon-click",
-        "icon-right-click",
-    ],
-    props: {
-        /** @model */
-        modelValue: [Number, String],
-        /** Options / suggestions */
-        data: {
-            type: Array,
-            default: () => [],
-        },
-        /** Native options to use in HTML5 validation */
-        autocomplete: String,
-        /**
-         * Vertical size of input, optional
-         * @values small, medium, large
-         */
-        size: String,
-        /** Property of the object (if data is array of objects) to use as display text, and to keep track of selected option */
-        field: {
-            type: String,
-            default: "value",
-        },
-        /** The first option will always be pre-selected (easier to just hit enter or tab) */
-        keepFirst: Boolean,
-        /** Clear input text on select */
-        clearOnSelect: Boolean,
-        /** Open dropdown list on focus */
-        openOnFocus: Boolean,
-        /** Function to format an option to a string for display in the input as alternative to field prop) */
-        customFormatter: Function,
-        /** Makes the component check if list reached scroll end and emit infinite-scroll event. */
-        checkInfiniteScroll: Boolean,
-        /** Keep open dropdown list after select */
-        keepOpen: Boolean,
-        /** Add a button/icon to clear the inputed text */
-        clearable: Boolean,
-        /**
-         * Icon name to be added on the clear button
-         */
-        clearIcon: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "autocomplete.clearIcon",
-                    "close-circle",
-                );
-            },
-        },
-        /** Max height of dropdown content */
-        maxHeight: [String, Number],
-        /**
-         * Position of dropdown
-         * @values auto, top, bottom
-         */
-        menuPosition: {
-            type: String,
-            default: "auto",
-        },
-        /** Transition name to apply on dropdown list */
-        animation: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "autocomplete.animation",
-                    "fade",
-                );
-            },
-        },
-        /** Property of the object (if <code>data</code> is array of objects) to use as display text of group */
-        groupField: String,
-        /** Property of the object (if <code>data</code> is array of objects) to use as key to get items array of each group, optional */
-        groupOptions: String,
-        /** Number of milliseconds to delay before to emit typing event */
-        debounceTyping: Number,
-        /** Icon name to be added on the right side */
-        iconRight: String,
-        /** Clickable icon right if exists */
-        iconRightClickable: Boolean,
-        /** Append autocomplete content to body */
-        appendToBody: Boolean,
-        /** Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) */
-        confirmKeys: {
-            type: Array,
-            default: () => ["Tab", "Enter"],
-        },
-        /** Input type */
-        type: {
-            type: String,
-            default: "text",
-        },
-        /**
-         * Menu tag name
-         */
-        menuTag: {
-            type: [String, Object, Function] as PropType<string | Component>,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "autocomplete.menuTag",
-                    "div",
-                );
-            },
-        },
-        /**
-         * Menu item tag name
-         */
-        itemTag: {
-            type: [String, Object, Function] as PropType<string | Component>,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "autocomplete.itemTag",
-                    "div",
-                );
-            },
-        },
-        /** Trigger the select event for the first pre-selected option when clicking outside and <code>keep-first</code> is enabled */
-        selectOnClickOutside: Boolean,
-        /** Allows the header in the autocomplete to be selectable */
-        selectableHeader: Boolean,
-        /** Allows the footer in the autocomplete to be selectable */
-        selectableFooter: Boolean,
-        rootClass: [String, Function, Array],
-        menuClass: [String, Function, Array],
-        expandedClass: [String, Function, Array],
-        menuPositionClass: [String, Function, Array],
-        itemClass: [String, Function, Array],
-        itemHoverClass: [String, Function, Array],
-        itemGroupTitleClass: [String, Function, Array],
-        itemEmptyClass: [String, Function, Array],
-        itemHeaderClass: [String, Function, Array],
-        itemFooterClass: [String, Function, Array],
-        inputClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "autocomplete.inputClasses",
-                    {},
-                );
-            },
-        },
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: { type: [String, Number], default: "" },
+    /** Input type */
+    type: { type: String, default: "text" },
+    /** Menu tag name */
+    menuTag: {
+        type: [String, Object, Function] as PropType<string | Component>,
+        default: () => getOption("autocomplete.menuTag", "div"),
     },
-    data() {
-        return {
-            selected: null,
-            hovered: null,
-            headerHovered: null,
-            footerHovered: null,
-            isActive: false,
-            newValue: this.modelValue,
-            ariaAutocomplete: this.keepFirst ? "both" : "list",
-            newAutocomplete: this.autocomplete || "off",
-            isListInViewportVertically: true,
-            hasFocus: false,
-            itemRefs: [],
-            width: undefined,
-            bodyEl: undefined, // Used to append to body
-        };
+    /** Menu item tag name */
+    itemTag: {
+        type: [String, Object, Function] as PropType<string | Component>,
+        default: () => getOption("autocomplete.itemTag", "div"),
     },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-acp"),
-                {
-                    [this.computedClass("expandedClass", "o-acp--expanded")]:
-                        this.expanded,
-                },
-            ];
-        },
-        menuClasses() {
-            return [
-                this.computedClass("menuClass", "o-acp__menu"),
-                {
-                    [this.computedClass(
-                        "menuPositionClass",
-                        "o-acp__menu--",
-                        this.newDropdownPosition,
-                    )]: !this.appendToBody,
-                },
-            ];
-        },
-        itemClasses() {
-            return [this.computedClass("itemClass", "o-acp__item")];
-        },
-        itemEmptyClasses() {
-            return [
-                ...this.itemClasses,
-                this.computedClass("itemEmptyClass", "o-acp__item--empty"),
-            ];
-        },
-        itemGroupClasses() {
-            return [
-                ...this.itemClasses,
-                this.computedClass(
-                    "itemGroupTitleClass",
-                    "o-acp__item-group-title",
-                ),
-            ];
-        },
-        itemHeaderClasses() {
-            return [
-                ...this.itemClasses,
-                this.computedClass("itemHeaderClass", "o-acp__item-header"),
-                {
-                    [this.computedClass(
-                        "itemHoverClass",
-                        "o-acp__item--hover",
-                    )]: this.headerHovered,
-                },
-            ];
-        },
-        itemFooterClasses() {
-            return [
-                ...this.itemClasses,
-                this.computedClass("itemFooterClass", "o-acp__item-footer"),
-                {
-                    [this.computedClass(
-                        "itemHoverClass",
-                        "o-acp__item--hover",
-                    )]: this.footerHovered,
-                },
-            ];
-        },
-        inputBind() {
-            return {
-                ...this.$attrs,
-                ...this.inputClasses,
-            };
-        },
-        computedData() {
-            if (this.groupField) {
-                if (this.groupOptions) {
-                    const newData = [];
-                    this.data.forEach((option) => {
-                        const group = getValueByPath(option, this.groupField);
-                        const items = getValueByPath(option, this.groupOptions);
-                        newData.push({ group, items });
-                    });
-                    return newData;
-                } else {
-                    const tmp = {};
-                    this.data.forEach((option) => {
-                        const group = getValueByPath(option, this.groupField);
-                        if (!tmp[group]) tmp[group] = [];
-                        tmp[group].push(option);
-                    });
-                    const newData = [];
-                    Object.keys(this.data).forEach((group) => {
-                        newData.push({ group, items: this.data[group] });
-                    });
-                    return newData;
-                }
-            }
-            return [{ items: this.data }];
-        },
-        isEmpty() {
-            if (!this.computedData) return true;
-            return !this.computedData.some(
-                (element) => element.items && element.items.length,
-            );
-        },
-        /**
-         * White-listed items to not close when clicked.
-         * Add input, dropdown and all children.
-         */
-        whiteList() {
-            const whiteList = [];
-            whiteList.push(this.$refs.input.$el.querySelector("input"));
-            whiteList.push(this.$refs.dropdown);
-            // Add all children from dropdown
-            if (this.$refs.dropdown !== undefined) {
-                const children = this.$refs.dropdown.querySelectorAll("*");
-                for (const child of children) {
-                    whiteList.push(child);
-                }
-            }
-            return whiteList;
+    /** Options / suggestions */
+    data: { type: Array, default: () => [] },
+    /**
+     * Size of the control, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("autocomplete.size"),
+    },
+    /**
+     * Color of the control, optional
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant: {
+        type: String,
+        default: () => getOption("autocomplete.variant"),
+    },
+    /** Property of the object (if data is array of objects) to use as display text, and to keep track of selected option */
+    field: { type: String, default: "value" },
+    /** Property of the object (if `data` is array of objects) to use as display text of group */
+    groupField: { type: String, default: undefined },
+    /** Property of the object (if `data` is array of objects) to use as key to get items array of each group, optional */
+    groupOptions: { type: String, default: undefined },
+    /** Function to format an option to a string for display in the input (as alternative to field prop) */
+    formatter: {
+        type: Function as PropType<(value: string | number) => string | number>,
+        default: undefined,
+    },
+    /** Input placeholder */
+    placeholder: { type: String, default: undefined },
+    /** Makes input full width when inside a grouped or addon field */
+    expanded: { type: Boolean, default: false },
+    /** Makes the element rounded */
+    rounded: { type: Boolean, default: false },
+    /** Same as native input disabled */
+    disabled: { type: Boolean, default: false },
+    /** Same as native maxlength, plus character counter */
+    maxlength: { type: Number, default: undefined },
+    /** Makes the component check if list reached scroll start or end and emit scroll events. */
+    checkScroll: {
+        type: Boolean,
+        default: () => getOption("autocomplete.checkScroll", false),
+    },
+    /** Number of milliseconds to delay before to emit input event */
+    debounce: {
+        type: Number,
+        default: () => getOption("autocomplete.debounce", 400),
+    },
+    /** The first option will always be pre-selected (easier to just hit enter or tab) */
+    keepFirst: {
+        type: Boolean,
+        default: () => getOption("autocomplete.keepFirst", false),
+    },
+    /** Clear input text on select */
+    clearOnSelect: {
+        type: Boolean,
+        default: () => getOption("autocomplete.clearOnSelect", false),
+    },
+    /** Open dropdown list on focus */
+    openOnFocus: {
+        type: Boolean,
+        default: () => getOption("autocomplete.openOnFocus", false),
+    },
+    /** Keep open dropdown list after select */
+    keepOpen: {
+        type: Boolean,
+        default: () => getOption("autocomplete.keepOpen", false),
+    },
+    /** Max height of dropdown content */
+    maxHeight: { type: [String, Number], default: undefined },
+    /** Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) */
+    confirmKeys: {
+        type: Array,
+        default: () => ["Tab", "Enter"],
+    },
+    /**
+     * Position of dropdown
+     * @values auto, top, bottom
+     */
+    menuPosition: {
+        type: String,
+        default: () => getOption("autocomplete.menuPosition", "auto"),
+        validator: (value: string) => {
+            return ["auto", "top", "bottom"].indexOf(value) >= 0;
         },
+    },
+    /** Transition name to apply on dropdown list */
+    animation: {
+        type: String,
+        default: () => getOption("autocomplete.animation", "fade"),
+    },
+    /** Trigger the select event for the first pre-selected option when clicking outside and `keep-first` is enabled */
+    selectOnClickOutside: { type: Boolean, default: false },
+    /** Allows the header in the autocomplete to be selectable */
+    selectableHeader: { type: Boolean, default: false },
+    /** Allows the footer in the autocomplete to be selectable */
+    selectableFooter: { type: Boolean, default: false },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("autocomplete.iconPack", undefined),
+    },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("autocomplete.icon", undefined),
+    },
+    /** Makes the icon clickable */
+    iconClickable: { type: Boolean, default: false },
+    /** Icon name to be added on the right side */
+    iconRight: {
+        type: String,
+        default: () => getOption("autocomplete.iconRight", undefined),
+    },
+    /** Make the icon right clickable */
+    iconRightClickable: { type: Boolean, default: false },
+    /** Variant of right icon */
+    iconRightVariant: { type: String, default: undefined },
+    /** Add a button/icon to clear the inputed text */
+    clearable: {
+        type: Boolean,
+        default: () => getOption("autocomplete.clearable", false),
+    },
+    /** Icon name to be added on the clear button */
+    clearIcon: {
+        type: String,
+        default: () => getOption("autocomplete.clearIcon", "close-circle"),
+    },
+    /** Show status icon using field and variant prop */
+    statusIcon: {
+        type: Boolean,
+        default: () => getOption("statusIcon", true),
+    },
+    /** Native options to use in HTML5 validation */
+    autocomplete: {
+        type: String,
+        default: () => getOption("autocomplete.autocomplete", "off"),
+    },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    /** Append autocomplete content to body */
+    appendToBody: {
+        type: Boolean,
+        default: () => getOption("autocomplete.appendToBody", false),
+    },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "menuClass",
+        "expandedClass",
+        "menuPositionClass",
+        "itemClass",
+        "itemHoverClass",
+        "itemGroupTitleClass",
+        "itemEmptyClass",
+        "itemHeaderClass",
+        "itemFooterClass",
+    ]),
+    inputClasses: {
+        type: Object,
+        default: () => getOption("autocomplete.inputClasses", {}),
+    },
+});
 
-        newDropdownPosition() {
-            if (
-                this.menuPosition === "top" ||
-                (this.menuPosition === "auto" &&
-                    !this.isListInViewportVertically)
-            ) {
-                return "top";
-            }
-            return "bottom";
-        },
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {string | number} updated modelValue prop
+     */
+    (e: "update:modelValue", value: string | number): void;
+    /**
+     * on input change event
+     * @param value {string | number} input value
+     */
+    (e: "input", value: string | number): void;
+    /**
+     * selected element changed event
+     * @param value {string | number} selected value
+     */
+    (e: "select", value: string | number, evt: Event): void;
+    /**
+     * header is selected
+     * @param event {Event} native event
+     */
+    (e: "select-header", event: Event): void;
+    /**
+     * footer is selected
+     * @param event {Event} native event
+     */
+    (e: "select-footer", event: Event): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+    /** the scroll list inside the dropdown reached the start */
+    (e: "scroll-start"): void;
+    /** the scroll list inside the dropdown reached it's end */
+    (e: "scroll-end"): void;
+}>();
+
+const inputRef = ref<InstanceType<typeof OInput>>();
+const dropdownRef = ref<HTMLElement>();
+const footerRef = ref<HTMLElement>();
+const headerRef = ref<HTMLElement>();
+const itemRefs = ref([]);
+
+function setItemRef(el: HTMLElement): void {
+    if (el) itemRefs.value.push(el);
+}
+
+// use form input functionalities
+const { checkHtml5Validity, onInvalid, onFocus, onBlur, isFocused } =
+    useInputHandler(inputRef, emits, props);
+
+const vmodel = useVModelBinding<string | number>(props, emits, {
+    passive: true,
+});
 
-        newIconRight() {
-            if (this.clearable && this.newValue && this.clearIcon) {
-                return this.clearIcon;
-            }
-            return this.iconRight;
-        },
+const isActive = ref(false);
 
-        newIconRightClickable() {
-            if (this.clearable) {
-                return true;
-            }
-            return this.iconRightClickable;
-        },
+const selectedOption = ref(null);
+const hoveredOption = ref(null);
+const headerHovered = ref(false);
+const footerHovered = ref(false);
+const isListInViewportVertically = ref(true);
+const width = ref(undefined);
 
-        menuStyle() {
-            return {
-                maxHeight: toCssDimension(this.maxHeight),
-            };
-        },
+onBeforeUpdate(() => {
+    width.value = inputRef.value ? inputRef.value.$el.clientWidth : undefined;
+    itemRefs.value = [];
+});
 
-        $elementRef() {
-            return "input";
-        },
+/**
+ * When updating input's value
+ *   1. If value isn't the same as selected, set null
+ *   2. Close dropdown if value is clear or else open it
+ */
+watch(
+    () => vmodel.value,
+    (value) => {
+        // Check if selected is invalid
+        const currentValue = getValue(selectedOption.value);
+        if (currentValue && currentValue !== value) {
+            setSelected(null, false);
+        }
+        // Close dropdown if input is clear or else open it
+        if (isFocused.value && (!props.openOnFocus || value)) {
+            isActive.value = !!value;
+        }
     },
-    watch: {
-        /**
-         * When v-model is changed:
-         *   1. Update internal value.
-         *   2. If it's invalid, validate again.
-         */
-        modelValue(value) {
-            this.newValue = value;
-        },
-
-        /**
-         * When dropdown is toggled, check the visibility to know when
-         * to open upwards.
-         */
-        isActive(active) {
-            if (this.menuPosition === "auto") {
-                if (active) {
-                    this.calcDropdownInViewportVertical();
-                } else {
-                    // Timeout to wait for the animation to finish before recalculating
-                    setTimeout(() => {
-                        this.calcDropdownInViewportVertical();
-                    }, 100);
-                }
+);
+
+/** Select first option if "keep-first" */
+watch(
+    () => props.data,
+    () => {
+        // Keep first option always pre-selected
+        if (props.keepFirst) {
+            nextTick(() => {
+                if (isActive.value) selectFirstOption();
+                else setHovered(null);
+            });
+        } else if (hoveredOption.value) {
+            // reset hovered if list doesn't contain it
+            const hoveredValue = getValue(hoveredOption.value);
+            const data = computedData.value
+                .map((d) => d.items)
+                .reduce((a, b) => [...a, ...b], []);
+            if (!data.some((d) => getValue(d) === hoveredValue)) {
+                setHovered(null);
             }
-        },
+        }
+    },
+);
+
+// add outisde click event listener
+if (isClient) useEventListener("click", clickedOutside);
+
+/** Close dropdown if clicked outside. */
+function clickedOutside(event: PointerEvent): void {
+    if (
+        !isFocused.value &&
+        Array.isArray(whiteList.value) &&
+        whiteList.value.indexOf(event.target as HTMLElement) < 0
+    ) {
+        if (
+            props.keepFirst &&
+            hoveredOption.value &&
+            props.selectOnClickOutside
+        ) {
+            setSelected(hoveredOption.value, true);
+        } else {
+            isActive.value = false;
+        }
+    }
+}
+
+const computedData = computed<{ items: any; group?: any }[]>(() => {
+    if (props.groupField) {
+        if (props.groupOptions)
+            return props.data.map((option) => {
+                const group = getValueByPath(option, props.groupField);
+                const items = getValueByPath(option, props.groupOptions);
+                return { group, items };
+            });
+        else
+            return Object.keys(props.data).map((group) => ({
+                group,
+                items: props.data[group],
+            }));
+    }
+    return [{ items: props.data }];
+});
 
-        /**
-         * When updating input's value
-         *   1. Emit changes
-         *   2. If value isn't the same as selected, set null
-         *   3. Close dropdown if value is clear or else open it
-         */
-        newValue(value) {
-            this.$emit("update:modelValue", value);
-            // Check if selected is invalid
-            const currentValue = this.getValue(this.selected);
-            if (currentValue && currentValue !== value) {
-                this.setSelected(null, false);
-            }
-            // Close dropdown if input is clear or else open it
-            if (this.hasFocus && (!this.openOnFocus || value)) {
-                this.isActive = !!value;
-            }
-        },
+const isEmpty = computed(() =>
+    !computedData.value
+        ? true
+        : !computedData.value.some(
+              (element) => element.items && element.items.length,
+          ),
+);
 
-        /**
-         * Select first option if "keep-first
-         */
-        data() {
-            // Keep first option always pre-selected
-            if (this.keepFirst) {
-                this.$nextTick(() => {
-                    if (this.isActive) {
-                        this.selectFirstOption(this.computedData);
-                    } else {
-                        this.setHovered(null);
-                    }
-                });
-            } else {
-                if (this.hovered) {
-                    // reset hovered if list doesn't contain it
-                    const hoveredValue = this.getValue(this.hovered);
-                    const data = this.computedData
-                        .map((d) => d.items)
-                        .reduce((a, b) => [...a, ...b], []);
-                    if (!data.some((d) => this.getValue(d) === hoveredValue)) {
-                        this.setHovered(null);
-                    }
-                }
-            }
-        },
+/**
+ * White-listed items to not close when clicked.
+ * Add input, dropdown and all children.
+ */
+const whiteList = computed(() => {
+    const whiteList: Element[] = [];
+    whiteList.push(inputRef.value.$el.querySelector("input"));
+    whiteList.push(dropdownRef.value);
+    // Add all children from dropdown
+    if (dropdownRef.value !== undefined) {
+        const children = dropdownRef.value.querySelectorAll("*");
+        for (const child of children) {
+            whiteList.push(child);
+        }
+    }
+    return whiteList;
+});
 
-        debounceTyping: {
-            handler(value) {
-                this.debouncedEmitTyping = debounce(this.emitTyping, value);
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        itemOptionClasses(option) {
-            return [
-                ...this.itemClasses,
-                {
-                    [this.computedClass(
-                        "itemHoverClass",
-                        "o-acp__item--hover",
-                    )]: option === this.hovered,
-                },
-            ];
-        },
+const dropdownPosition = computed(() =>
+    props.menuPosition === "top" ||
+    (props.menuPosition === "auto" && !isListInViewportVertically.value)
+        ? "top"
+        : "bottom",
+);
 
-        /**
-         * Set which option is currently hovered.
-         */
-        setHovered(option) {
-            if (option === undefined) return;
+const menuStyle = computed(() => ({
+    maxHeight: toCssDimension(props.maxHeight),
+}));
 
-            this.hovered = option;
-        },
+/**
+ * Return display text for a input option.
+ * If object, get value from path based on given field, or else just the value.
+ * Apply a formatter function to the label if given.
+ */
+function getValue(option): string {
+    if (!option) return "";
 
-        /**
-         * Set which option is currently selected, update v-model,
-         * update input value and close dropdown.
-         */
-        setSelected(option, closeDropdown = true, event = undefined) {
-            if (option === undefined) return;
-            this.selected = option;
-            /**
-             * @property {Object} selected selected option
-             * @property {Event} event native event
-             */
-            this.$emit("select", this.selected, event);
-            if (this.selected !== null) {
-                if (this.clearOnSelect) {
-                    const input = this.$refs.input;
-                    input.newValue = "";
-                    input.$refs.input.value = "";
-                } else {
-                    this.newValue = this.getValue(this.selected);
-                }
-                this.setHovered(null);
-            }
-            closeDropdown &&
-                this.$nextTick(() => {
-                    this.isActive = false;
-                });
-            this.checkValidity();
-        },
+    const property =
+        props.field && typeof option === "object"
+            ? getValueByPath(option, props.field)
+            : option;
 
-        /**
-         * Select first option
-         */
-        selectFirstOption(computedData) {
-            this.$nextTick(() => {
-                const nonEmptyElements = computedData.filter(
-                    (element) => element.items && element.items.length,
-                );
-                if (nonEmptyElements.length) {
-                    const option = nonEmptyElements[0].items[0];
-                    this.setHovered(option);
-                } else {
-                    this.setHovered(null);
-                }
-            });
-        },
+    const label =
+        typeof props.formatter === "function"
+            ? props.formatter(property)
+            : property;
 
-        /**
-         * Key listener.
-         * Select the hovered option.
-         */
-        keydown(event) {
-            const { key } = event; // cannot destructure preventDefault (https://stackoverflow.com/a/49616808/2774496)
-            // prevent emit submit event
-            if (key === "Enter") event.preventDefault();
-            // Close dropdown on Tab & no hovered
-            if (key === "Escape" || key === "Tab") {
-                this.isActive = false;
-            }
-            if (this.confirmKeys.indexOf(key) >= 0) {
-                // If adding by comma, don't add the comma to the input
-                if (key === ",") event.preventDefault();
-                // Close dropdown on select by Tab
-                const closeDropdown = !this.keepOpen || key === "Tab";
-                if (this.hovered === null) {
-                    // header and footer uses headerHovered && footerHovered. If header or footer
-                    // was selected then fire event otherwise just return so a value isn't selected
-                    this.checkIfHeaderOrFooterSelected(
-                        event,
-                        null,
-                        closeDropdown,
-                    );
-                    return;
-                }
-                this.setSelected(this.hovered, closeDropdown, event);
-            }
-        },
+    return label || "";
+}
 
-        selectHeaderOrFoterByClick(event, origin) {
-            this.checkIfHeaderOrFooterSelected(event, { origin: origin });
-        },
+/** Set which option is currently hovered. */
+function setHovered(option): void {
+    if (option === undefined) return;
+    hoveredOption.value = option;
+}
 
-        /**
-         * Check if header or footer was selected.
-         */
-        checkIfHeaderOrFooterSelected(
-            event,
-            triggerClick,
-            closeDropdown = true,
-        ) {
-            if (
-                this.selectableHeader &&
-                (this.headerHovered ||
-                    (triggerClick && triggerClick.origin === "header"))
-            ) {
-                this.$emit("select-header", event);
-                this.headerHovered = false;
-                if (triggerClick) this.setHovered(null);
-                if (closeDropdown) this.isActive = false;
-            }
-            if (
-                this.selectableFooter &&
-                (this.footerHovered ||
-                    (triggerClick && triggerClick.origin === "footer"))
-            ) {
-                this.$emit("select-footer", event);
-                this.footerHovered = false;
-                if (triggerClick) this.setHovered(null);
-                if (closeDropdown) this.isActive = false;
-            }
-        },
+/**
+ * Set which option is currently selected, update v-model,
+ * update input value and close dropdown.
+ */
+function setSelected(option, closeDropdown = true, event = undefined): void {
+    if (option === undefined) return;
+    selectedOption.value = option;
+    emits("select", selectedOption.value, event);
+    if (selectedOption.value !== null) {
+        if (props.clearOnSelect) {
+            const input = inputRef.value.$el.querySelector("input");
+            input.value = "";
+        } else {
+            vmodel.value = getValue(selectedOption.value);
+        }
+        setHovered(null);
+    }
+    if (closeDropdown) nextTick(() => (isActive.value = false));
+    checkHtml5Validity();
+}
+
+/** Select first option */
+function selectFirstOption(): void {
+    nextTick(() => {
+        const nonEmptyElements = computedData.value.filter(
+            (element) => element.items && element.items.length,
+        );
+        if (nonEmptyElements.length) {
+            const option = nonEmptyElements[0].items[0];
+            setHovered(option);
+        } else {
+            setHovered(null);
+        }
+    });
+}
+
+/** Check if header or footer was selected. */
+function selectHeaderOrFoterByClick(
+    event: Event,
+    origin?: "header" | "footer",
+    closeDropdown = true,
+): void {
+    if (
+        props.selectableHeader &&
+        (headerHovered.value || origin === "header")
+    ) {
+        emits("select-header", event);
+        headerHovered.value = false;
+        if (origin) setHovered(null);
+        if (closeDropdown) isActive.value = false;
+    }
+    if (
+        props.selectableFooter &&
+        (footerHovered.value || origin === "footer")
+    ) {
+        emits("select-footer", event);
+        footerHovered.value = false;
+        if (origin) setHovered(null);
+        if (closeDropdown) isActive.value = false;
+    }
+}
+
+// --- Event Handler ---
 
-        /**
-         * Close dropdown if clicked outside.
-         */
-        clickedOutside(event) {
-            if (!this.hasFocus && this.whiteList.indexOf(event.target) < 0) {
-                if (
-                    this.keepFirst &&
-                    this.hovered &&
-                    this.selectOnClickOutside
-                ) {
-                    this.setSelected(this.hovered, true);
-                } else {
-                    this.isActive = false;
-                }
-            }
-        },
+/**
+ * Arrows keys listener.
+ * If dropdown is active, set hovered option, or else just open.
+ */
+function navigateItem(direction: 1 | -1): void {
+    if (!isActive.value) {
+        isActive.value = true;
+        return;
+    }
+
+    const data = computedData.value
+        .map((d) => d.items)
+        .reduce((a, b) => [...a, ...b], []);
+
+    // add header / footer if selectable
+    if (headerRef.value && props.selectableHeader) data.unshift(undefined);
+    if (footerRef.value && props.selectableFooter) data.push(undefined);
+
+    // define current index
+    let index;
+    if (headerHovered.value) index = 0 + direction;
+    else if (footerHovered.value) index = data.length - 1 + direction;
+    else index = data.indexOf(toRaw(hoveredOption.value)) + direction;
+
+    // check if index overflow
+    index = index > data.length - 1 ? data.length - 1 : index;
+    // check if index underflow
+    index = index < 0 ? 0 : index;
+
+    // set hover state
+    footerHovered.value = false;
+    headerHovered.value = false;
+    if (footerRef.value && props.selectableFooter && index === data.length - 1)
+        footerHovered.value = true;
+    else if (headerRef.value && props.selectableHeader && index === 0)
+        headerHovered.value = true;
+    else setHovered(data[index] !== undefined ? data[index] : null);
+
+    // get items from input
+    let items = itemRefs.value || [];
+    if (headerRef.value && props.selectableHeader)
+        items = [headerRef.value, ...items];
+    if (footerRef.value && props.selectableFooter)
+        items = [...items, footerRef.value];
+
+    const element = items[index];
+    if (!element) return;
+
+    // define scroll position
+    const dropdownMenu = dropdownRef.value;
+    const visMin = dropdownMenu.scrollTop;
+    const visMax =
+        dropdownMenu.scrollTop +
+        dropdownMenu.clientHeight -
+        element.clientHeight;
+
+    if (element.offsetTop < visMin) {
+        // is scolled top
+        dropdownMenu.scrollTop = element.offsetTop;
+    } else if (element.offsetTop >= visMax) {
+        // is scolled bottom
+        dropdownMenu.scrollTop =
+            element.offsetTop -
+            dropdownMenu.clientHeight +
+            element.clientHeight;
+    }
+    // trigger scroll
+    if (props.checkScroll) checkDropdownScroll();
+}
 
-        /**
-         * Return display text for the input.
-         * If object, get value from path, or else just the value.
-         */
-        getValue(option) {
-            if (option === null) return;
+/**
+ * Key listener.
+ * Select the hovered option.
+ */
+function onKeydown(event: KeyboardEvent): void {
+    // prevent emit submit event
+    if (event.key === "Enter") event.preventDefault();
+    // Close dropdown on Tab & no hovered
+    if (event.key === "Escape" || event.key === "Tab") {
+        isActive.value = false;
+    }
+    if (props.confirmKeys.indexOf(event.key) >= 0) {
+        // If adding by comma, don't add the comma to the input
+        if (event.key === ",") event.preventDefault();
+        // Close dropdown on select by Tab
+        const closeDropdown = !props.keepOpen || event.key === "Tab";
+        if (hoveredOption.value === null) {
+            // header and footer uses headerHovered && footerHovered. If header or footer
+            // was selected then fire event otherwise just return so a value isn't selected
+            selectHeaderOrFoterByClick(event, null, closeDropdown);
+            return;
+        }
+        setSelected(hoveredOption.value, closeDropdown, event);
+    }
+}
 
-            if (typeof this.customFormatter !== "undefined") {
-                return this.customFormatter(option);
-            }
-            return typeof option === "object"
-                ? getValueByPath(option, this.field)
-                : option;
-        },
+/**
+ * Focus listener.
+ * If value is the same as selected, select all text.
+ */
+function handleFocus(event: Event): void {
+    if (getValue(selectedOption.value) === vmodel.value) {
+        inputRef.value.$el.querySelector("input").select();
+    }
+    if (props.openOnFocus) {
+        isActive.value = true;
+        if (props.keepFirst)
+            // If open on focus, update the hovered
+            selectFirstOption();
+    }
+    onFocus(event);
+}
+
+/** emit input change event */
+function onInput(value: string | number): void {
+    const currentValue = getValue(selectedOption.value);
+    if (currentValue && currentValue === vmodel.value) return;
+    debouncedInput(value);
+}
+
+let debouncedInput = useDebounce(emitInput, props.debounce || 0);
+
+watch(
+    () => props.debounce,
+    (value) => {
+        debouncedInput = useDebounce(emitInput, value);
+    },
+);
 
-        /**
-         * Check if the scroll list inside the dropdown
-         * reached it's end.
-         */
-        checkIfReachedTheEndOfScroll() {
-            const list = this.$refs.dropdown;
-            const footerHeight = this.$slots.footer
-                ? this.$refs.footer.clientHeight
-                : 0;
-            if (
-                list.clientHeight !== list.scrollHeight &&
-                list.scrollTop + list.clientHeight + footerHeight >=
-                    list.scrollHeight
-            ) {
-                this.$emit("infinite-scroll");
-            }
-        },
+function emitInput(value: string | number): void {
+    emits("input", value);
+    checkHtml5Validity();
+}
 
-        /**
-         * Calculate if the dropdown is vertically visible when activated,
-         * otherwise it is openened upwards.
-         */
-        calcDropdownInViewportVertical() {
-            this.$nextTick(() => {
-                /**
-                 * this.$refs.dropdown may be undefined
-                 * when Autocomplete is conditional rendered
-                 */
-                if (!this.$refs.dropdown) return;
-
-                const rect = this.$refs.dropdown.getBoundingClientRect();
-
-                this.isListInViewportVertically =
-                    rect.top >= 0 &&
-                    rect.bottom <=
-                        (window.innerHeight ||
-                            document.documentElement.clientHeight);
-                if (this.appendToBody) {
-                    this.updateAppendToBody();
-                }
-            });
-        },
+// --- Icon Feature ---
+
+const computedIconRight = computed(() =>
+    props.clearable && vmodel.value && props.clearIcon
+        ? props.clearIcon
+        : props.iconRight,
+);
+
+const computedIconRightClickable = computed(() =>
+    props.clearable ? true : props.iconRightClickable,
+);
 
+function rightIconClick(event: Event): void {
+    if (props.clearable) {
+        vmodel.value = "";
+        setSelected(null, false);
+        if (props.openOnFocus) inputRef.value.$el.focus();
+    } else emits("icon-right-click", event);
+}
+
+// --- Resize Feature ---
+
+// add resize event listener
+if (isClient && props.menuPosition === "auto") {
+    useEventListener("resize", calcDropdownInViewportVertical, window);
+}
+
+/**
+ * When dropdown is toggled, check the visibility to know when
+ * to open upwards.
+ */
+watch(isActive, (active) => {
+    if (props.menuPosition === "auto") {
+        if (active) calcDropdownInViewportVertical();
+        else
+            window.requestAnimationFrame(() =>
+                calcDropdownInViewportVertical(),
+            );
+    }
+});
+
+/**
+ * Calculate if the dropdown is vertically visible when activated,
+ * otherwise it is openened upwards.
+ */
+function calcDropdownInViewportVertical(): void {
+    nextTick(() => {
         /**
-         * Arrows keys listener.
-         * If dropdown is active, set hovered option, or else just open.
+         * dropdownRef may be undefined
+         * when Autocomplete is conditional rendered
          */
-        keyArrows(direction) {
-            const sum = direction === "down" ? 1 : -1;
-            if (this.isActive) {
-                const data = this.computedData
-                    .map((d) => d.items)
-                    .reduce((a, b) => [...a, ...b], []);
-
-                if (this.$slots.header && this.selectableHeader) {
-                    data.unshift(undefined);
-                }
-                if (this.$slots.footer && this.selectableFooter) {
-                    data.push(undefined);
-                }
-                let index;
-                if (this.headerHovered) {
-                    index = 0 + sum;
-                } else if (this.footerHovered) {
-                    index = data.length - 1 + sum;
-                } else {
-                    index = data.indexOf(this.hovered) + sum;
-                }
+        if (!dropdownRef.value) return;
 
-                index = index > data.length - 1 ? data.length - 1 : index;
-                index = index < 0 ? 0 : index;
-
-                this.footerHovered = false;
-                this.headerHovered = false;
-                this.setHovered(data[index] !== undefined ? data[index] : null);
-                if (
-                    this.$slots.footer &&
-                    this.selectableFooter &&
-                    index === data.length - 1
-                ) {
-                    this.footerHovered = true;
-                }
-                if (
-                    this.$slots.header &&
-                    this.selectableHeader &&
-                    index === 0
-                ) {
-                    this.headerHovered = true;
-                }
+        const rect = dropdownRef.value.getBoundingClientRect();
 
-                const list = this.$refs.dropdown;
-                let items = this.itemRefs || [];
+        isListInViewportVertically.value =
+            rect.top >= 0 &&
+            rect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight);
+        if (props.appendToBody) {
+            updateAppendToBody();
+        }
+    });
+}
 
-                if (this.$slots.header && this.selectableHeader) {
-                    items = [this.$refs.header, ...items];
-                }
-                if (this.$slots.footer && this.selectableFooter) {
-                    items = [...items, this.$refs.footer];
-                }
-                const element = items[index];
+// --- InfitiveScroll Feature ---
 
-                if (!element) return;
+onMounted(() => {
+    if (props.checkScroll && dropdownRef.value) {
+        dropdownRef.value.addEventListener("scroll", checkDropdownScroll);
+    }
+});
 
-                const visMin = list.scrollTop;
-                const visMax =
-                    list.scrollTop + list.clientHeight - element.clientHeight;
+onUnmounted(() => {
+    if (props.checkScroll && dropdownRef.value) {
+        dropdownRef.value.removeEventListener("scroll", checkDropdownScroll);
+    }
+});
 
-                if (element.offsetTop < visMin) {
-                    list.scrollTop = element.offsetTop;
-                } else if (element.offsetTop >= visMax) {
-                    list.scrollTop =
-                        element.offsetTop -
-                        list.clientHeight +
-                        element.clientHeight;
-                }
-            } else {
-                this.isActive = true;
-            }
-        },
+/** Check if the scroll list inside the dropdown reached the top or it's end. */
+function checkDropdownScroll(): void {
+    const dropdown = dropdownRef.value;
+    const trashhold = 15;
+    const headerHeight = headerRef.value ? headerRef.value.clientHeight : 0;
+    const footerHeight = footerRef.value
+        ? footerRef.value.clientHeight + trashhold
+        : 0;
+    if (dropdown.clientHeight !== dropdown.scrollHeight) {
+        console.log(
+            dropdown.scrollTop,
+            dropdown.clientHeight,
+            footerHeight,
+            ">=",
+            dropdown.scrollHeight,
+        );
+        if (
+            dropdown.scrollTop + dropdown.clientHeight + footerHeight >=
+            dropdown.scrollHeight
+        )
+            emits("scroll-end");
+        else if (dropdown.scrollTop <= headerHeight) {
+            emits("scroll-start");
+        }
+    }
+}
 
-        /**
-         * Focus listener.
-         * If value is the same as selected, select all text.
-         */
-        focused(event) {
-            if (this.getValue(this.selected) === this.newValue) {
-                this.$el.querySelector("input").select();
-            }
-            if (this.openOnFocus) {
-                this.isActive = true;
-                if (this.keepFirst) {
-                    // If open on focus, update the hovered
-                    this.selectFirstOption(this.computedData);
-                }
-            }
-            this.hasFocus = true;
-            this.$emit("focus", event);
-        },
+// --- AppendToBody Feature ---
 
-        /**
-         * Blur listener.
-         */
-        onBlur(event) {
-            this.hasFocus = false;
-            this.$emit("blur", event);
-        },
-        onInput() {
-            const currentValue = this.getValue(this.selected);
-            if (currentValue && currentValue === this.newValue) return;
-            if (this.debounceTyping) {
-                this.debouncedEmitTyping();
-            } else {
-                this.emitTyping();
-            }
-        },
-        emitTyping() {
-            this.$emit("typing", this.newValue);
-            this.checkValidity();
-        },
-        rightIconClick(event) {
-            if (this.clearable) {
-                this.newValue = "";
-                this.setSelected(null, false);
-                if (this.openOnFocus) {
-                    this.$refs.input.$el.focus();
-                }
-            } else {
-                this.$emit("icon-right-click", event);
-            }
-        },
-        checkValidity() {
-            if (this.useHtml5Validation) {
-                this.$nextTick(() => {
-                    this.checkHtml5Validity();
-                });
-            }
-        },
-        setItemRef(el) {
-            if (el) {
-                this.itemRefs.push(el);
-            }
-        },
-        updateAppendToBody() {
-            const dropdownMenu = this.$refs.dropdown;
-            const trigger = this.$refs.input.$el;
-            if (dropdownMenu && trigger) {
-                // update wrapper dropdown
-                const root = this.$data.bodyEl;
-                root.classList.forEach((item) =>
-                    root.classList.remove(...item.split(" ")),
-                );
-                this.rootClasses.forEach((item) => {
-                    if (item) {
-                        if (typeof item === "object") {
-                            Object.keys(item)
-                                .filter((key) => key && item[key])
-                                .forEach((key) => root.classList.add(key));
-                        } else {
-                            root.classList.add(...item.split(" "));
-                        }
-                    }
-                });
-                const rect = trigger.getBoundingClientRect();
-                let top = rect.top + window.scrollY;
-                const left = rect.left + window.scrollX;
-                if (this.newDropdownPosition !== "top") {
-                    top += trigger.clientHeight;
+const bodyEl = ref(); // Used to append to body
+
+onMounted(() => {
+    if (props.appendToBody) {
+        bodyEl.value = createAbsoluteElement(dropdownRef.value);
+        updateAppendToBody();
+    }
+});
+
+onUnmounted(() => {
+    if (props.appendToBody) removeElement(bodyEl.value);
+});
+
+function updateAppendToBody(): void {
+    const dropdownMenu = dropdownRef.value;
+    const trigger = inputRef.value.$el;
+    if (dropdownMenu && trigger) {
+        // update wrapper dropdown
+        const root = bodyEl.value;
+        root.classList.forEach((item) =>
+            root.classList.remove(...item.split(" ")),
+        );
+        rootClasses.value.forEach((item) => {
+            if (item) {
+                if (typeof item === "object") {
+                    Object.keys(item)
+                        .filter((key) => key && item[key])
+                        .forEach((key) => root.classList.add(key));
                 } else {
-                    top -= dropdownMenu.clientHeight;
+                    root.classList.add(...item.split(" "));
                 }
-                dropdownMenu.style.position = "absolute";
-                dropdownMenu.style.top = `${top}px`;
-                dropdownMenu.style.left = `${left}px`;
-                dropdownMenu.style.width = `${trigger.clientWidth}px`;
-                dropdownMenu.style.maxWidth = `${trigger.clientWidth}px`;
-                dropdownMenu.style.zIndex = "9999";
             }
-        },
-    },
-    created() {
-        if (typeof window !== "undefined") {
-            document.addEventListener("click", this.clickedOutside);
-            if (this.menuPosition === "auto")
-                window.addEventListener(
-                    "resize",
-                    this.calcDropdownInViewportVertical,
-                );
+        });
+        const rect = trigger.getBoundingClientRect();
+        let top = rect.top + window.scrollY;
+        const left = rect.left + window.scrollX;
+        if (dropdownPosition.value !== "top") {
+            top += trigger.clientHeight;
+        } else {
+            top -= dropdownMenu.clientHeight;
         }
+        dropdownMenu.style.position = "absolute";
+        dropdownMenu.style.top = `${top}px`;
+        dropdownMenu.style.left = `${left}px`;
+        dropdownMenu.style.width = `${trigger.clientWidth}px`;
+        dropdownMenu.style.maxWidth = `${trigger.clientWidth}px`;
+        dropdownMenu.style.zIndex = "9999";
+    }
+}
+
+// --- Computed Component Classes ---
+
+const attrs = useAttrs();
+const inputBind = computed(() => ({
+    ...attrs,
+    ...props.inputClasses,
+}));
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-acp"),
+    {
+        [useComputedClass("expandedClass", "o-acp--expanded")]: props.expanded,
     },
-    mounted() {
-        const list = this.$refs.dropdown;
-        if (this.checkInfiniteScroll && list) {
-            list.addEventListener("scroll", this.checkIfReachedTheEndOfScroll);
-        }
-        if (this.appendToBody) {
-            this.$data.bodyEl = createAbsoluteElement(list);
-            this.updateAppendToBody();
-        }
+]);
+
+const menuClasses = computed(() => [
+    useComputedClass("menuClass", "o-acp__menu"),
+    {
+        [useComputedClass(
+            "menuPositionClass",
+            "o-acp__menu--",
+            dropdownPosition.value,
+        )]: !props.appendToBody,
     },
-    beforeUpdate() {
-        this.width = this.$refs.input
-            ? this.$refs.input.$el.clientWidth
-            : undefined;
-        this.itemRefs = [];
+]);
+
+const itemClasses = computed(() => [
+    useComputedClass("itemClass", "o-acp__item"),
+]);
+
+const itemEmptyClasses = computed(() => [
+    ...itemClasses.value,
+    useComputedClass("itemEmptyClass", "o-acp__item--empty"),
+]);
+
+const itemGroupClasses = computed(() => [
+    ...itemClasses.value,
+    useComputedClass("itemGroupTitleClass", "o-acp__item-group-title"),
+]);
+
+const itemHeaderClasses = computed(() => [
+    ...itemClasses.value,
+    useComputedClass("itemHeaderClass", "o-acp__item-header"),
+    {
+        [useComputedClass("itemHoverClass", "o-acp__item--hover")]:
+            headerHovered.value,
     },
-    beforeUnmount() {
-        if (typeof window !== "undefined") {
-            document.removeEventListener("click", this.clickedOutside);
-            if (this.menuPosition === "auto")
-                window.removeEventListener(
-                    "resize",
-                    this.calcDropdownInViewportVertical,
-                );
-        }
-        if (this.checkInfiniteScroll && this.$refs.dropdown) {
-            const list = this.$refs.dropdown;
-            list.removeEventListener(
-                "scroll",
-                this.checkIfReachedTheEndOfScroll,
-            );
-        }
-        if (this.appendToBody) {
-            removeElement(this.$data.bodyEl);
-        }
+]);
+
+const itemFooterClasses = computed(() => [
+    ...itemClasses.value,
+    useComputedClass("itemFooterClass", "o-acp__item-footer"),
+    {
+        [useComputedClass("itemHoverClass", "o-acp__item--hover")]:
+            footerHovered.value,
     },
+]);
+
+function itemOptionClasses(option): BindProp {
+    return [
+        ...itemClasses.value,
+        {
+            [useComputedClass("itemHoverClass", "o-acp__item--hover")]:
+                toRaw(option) === toRaw(hoveredOption.value),
+        },
+    ];
+}
+
+// --- Expose Public Functionalities ---
+
+const rootRef = ref();
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => rootRef.value),
+    // expose the input element
+    $inputRef: computed(() => inputRef.value.$inputRef),
 });
 </script>
 
 <template>
-    <div :class="rootClasses">
+    <div ref="rootRef" :class="rootClasses">
         <o-input
+            ref="inputRef"
+            v-model="vmodel"
             v-bind="inputBind"
-            v-model="newValue"
-            ref="input"
             :type="type"
             :size="size"
             :rounded="rounded"
             :icon="icon"
-            :icon-right="newIconRight"
-            :icon-right-clickable="newIconRightClickable"
+            :icon-right="computedIconRight"
+            :icon-right-clickable="computedIconRightClickable"
             :icon-pack="iconPack"
+            :placeholder="placeholder"
             :maxlength="maxlength"
-            :autocomplete="newAutocomplete"
+            :autocomplete="autocomplete"
             :use-html5-validation="false"
-            :aria-autocomplete="ariaAutocomplete"
+            :aria-autocomplete="keepFirst ? 'both' : 'list'"
             :expanded="expanded"
-            @update:modelValue="onInput"
-            @focus="focused"
+            :disabled="disabled"
+            @update:model-value="onInput"
+            @focus="handleFocus"
             @blur="onBlur"
             @invalid="onInvalid"
-            @keydown="keydown"
-            @keydown.up.prevent="keyArrows('up')"
-            @keydown.down.prevent="keyArrows('down')"
-            @icon-right-click="rightIconClick"
-            @icon-click="(event) => $emit('icon-click', event)" />
+            @keydown="onKeydown"
+            @keydown.up.prevent="navigateItem(-1)"
+            @keydown.down.prevent="navigateItem(1)"
+            @icon-click="(event) => $emit('icon-click', event)"
+            @icon-right-click="rightIconClick" />
 
         <transition :name="animation">
             <component
+                :is="menuTag"
                 v-show="
                     isActive &&
                     (!isEmpty || $slots.empty || $slots.header || $slots.footer)
                 "
-                :is="menuTag"
+                ref="dropdownRef"
                 :class="menuClasses"
-                :style="menuStyle"
-                ref="dropdown">
+                :style="menuStyle">
                 <component
-                    v-if="$slots.header"
                     :is="itemTag"
-                    ref="header"
+                    v-if="$slots.header"
+                    ref="headerRef"
                     role="button"
                     :tabindex="0"
                     :class="itemHeaderClasses"
@@ -920,8 +958,8 @@ export default defineComponent({
                 </component>
                 <template v-for="(element, groupindex) in computedData">
                     <component
-                        v-if="element.group"
                         :is="itemTag"
+                        v-if="element.group"
                         :key="groupindex + 'group'"
                         :class="itemGroupClasses">
                         <slot
@@ -933,32 +971,38 @@ export default defineComponent({
                             {{ element.group }}
                         </span>
                     </component>
+
                     <component
+                        :is="itemTag"
                         v-for="(option, index) in element.items"
                         :key="groupindex + ':' + index"
-                        :is="itemTag"
-                        :class="itemOptionClasses(option)"
                         :ref="setItemRef"
+                        :class="itemOptionClasses(option)"
+                        role="button"
+                        :tabindex="0"
                         @click.stop="setSelected(option, !keepOpen, $event)">
                         <slot
                             v-if="$slots.default"
                             :option="option"
+                            :value="getValue(option)"
                             :index="index" />
                         <span v-else>
                             {{ getValue(option) }}
                         </span>
                     </component>
                 </template>
+
                 <component
-                    v-if="isEmpty && $slots.empty"
                     :is="itemTag"
+                    v-if="isEmpty && $slots.empty"
                     :class="itemEmptyClasses">
                     <slot name="empty" />
                 </component>
+
                 <component
-                    v-if="$slots.footer"
                     :is="itemTag"
-                    ref="footer"
+                    v-if="$slots.footer"
+                    ref="footerRef"
                     role="button"
                     :tabindex="0"
                     :class="itemFooterClasses"
diff --git a/packages/oruga-next/src/components/autocomplete/index.ts b/packages/oruga-next/src/components/autocomplete/index.ts
index 1fc5b68ad..bf3cc32d0 100644
--- a/packages/oruga-next/src/components/autocomplete/index.ts
+++ b/packages/oruga-next/src/components/autocomplete/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Autocomplete from "./Autocomplete.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/autocomplete/tests/SimpleAutocomplete.vue b/packages/oruga-next/src/components/autocomplete/tests/SimpleAutocomplete.vue
index 285b161d5..9c579a065 100644
--- a/packages/oruga-next/src/components/autocomplete/tests/SimpleAutocomplete.vue
+++ b/packages/oruga-next/src/components/autocomplete/tests/SimpleAutocomplete.vue
@@ -3,6 +3,10 @@ import { defineComponent } from "vue";
 import OAutocomplete from "../Autocomplete.vue";
 import OField from "../../field/Field.vue";
 export default defineComponent({
+    components: {
+        [OAutocomplete.name]: OAutocomplete,
+        [OField.name]: OField,
+    },
     data() {
         return {
             data: [
@@ -23,10 +27,6 @@ export default defineComponent({
             selected: null,
         };
     },
-    components: {
-        [OAutocomplete.name]: OAutocomplete,
-        [OField.name]: OField,
-    },
     computed: {
         filteredDataArray(): string[] {
             return this.data.filter((option: any) => {
@@ -51,8 +51,8 @@ export default defineComponent({
     <p class="content"><b>Selected:</b> {{ selected }}</p>
     <o-field label="Find a JS framework">
         <o-autocomplete
-            rounded
             v-model="name"
+            rounded
             :data="filteredDataArray"
             placeholder="e.g. jQuery"
             icon="search"
diff --git a/packages/oruga-next/src/components/datepicker/Datepicker.vue b/packages/oruga-next/src/components/datepicker/Datepicker.vue
index fb4032a28..204918308 100644
--- a/packages/oruga-next/src/components/datepicker/Datepicker.vue
+++ b/packages/oruga-next/src/components/datepicker/Datepicker.vue
@@ -1,1239 +1,833 @@
-<script lang="ts">
-import type { App, PropType } from "vue";
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, ref, watch, type PropType } from "vue";
 
-import FormElementMixin from "../../utils/FormElementMixin";
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import MatchMediaMixin from "../../utils/MatchMediaMixin";
+import OButton from "../button/Button.vue";
+import OSelect from "../select/Select.vue";
+import OPickerWrapper from "./PickerWrapper.vue";
+import ODatepickerTable from "./DatepickerTable.vue";
+import ODatepickerMonth from "./DatepickerMonth.vue";
 
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
 import {
-    isMobile,
-    getMonthNames,
-    getWeekdayNames,
-    matchWithGroups,
-    getValueByPath,
-} from "../../utils/helpers";
-import { getOptions } from "../../utils/config";
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useMatchMedia,
+    usePropBinding,
+} from "@/composables";
 
-import Dropdown from "../dropdown/Dropdown.vue";
-import DropdownItem from "../dropdown/DropdownItem.vue";
-import Field from "../field/Field.vue";
-import Input from "../input/Input.vue";
-import Select from "../select/Select.vue";
-import Icon from "../icon/Icon.vue";
+import { getMonthNames, getWeekdayNames } from "./datepickerUtils";
 
-import DatepickerTable from "./DatepickerTable.vue";
-import DatepickerMonth from "./DatepickerMonth.vue";
-
-const defaultDateFormatter = (date, vm) => {
-    const targetDates = Array.isArray(date) ? date : [date];
-    const dates = targetDates.map((date) => {
-        const d = new Date(
-            date.getFullYear(),
-            date.getMonth(),
-            date.getDate(),
-            12,
-        );
-        return !vm.isTypeMonth ? vm.dtf.format(d) : vm.dtfMonth.format(d);
-    });
-    return !vm.multiple ? dates.join(" - ") : dates.join(", ");
-};
-
-const defaultDateParser = (date, vm) => {
-    if (vm.dtf.formatToParts && typeof vm.dtf.formatToParts === "function") {
-        const formatRegex = (vm.isTypeMonth ? vm.dtfMonth : vm.dtf)
-            .formatToParts(new Date(2000, 11, 25))
-            .map((part) => {
-                if (part.type === "literal") {
-                    return part.value;
-                }
-                return `((?!=<${part.type}>)\\d+)`;
-            })
-            .join("");
-        const dateGroups = matchWithGroups(formatRegex, date);
-
-        // We do a simple validation for the group.
-        // If it is not valid, it will fallback to Date.parse below
-        if (
-            dateGroups.year &&
-            dateGroups.year.length === 4 &&
-            dateGroups.month &&
-            dateGroups.month <= 12
-        ) {
-            if (vm.isTypeMonth)
-                return new Date(dateGroups.year, dateGroups.month - 1);
-            else if (dateGroups.day && dateGroups.day <= 31) {
-                return new Date(
-                    dateGroups.year,
-                    dateGroups.month - 1,
-                    dateGroups.day,
-                    12,
-                );
-            }
-        }
-    }
-    // Fallback if formatToParts is not supported or if we were not able to parse a valid date
-    if (!vm.isTypeMonth) return new Date(Date.parse(date));
-    if (date) {
-        const s = date.split("/");
-        const year = s[0].length === 4 ? s[0] : s[1];
-        const month = s[0].length === 2 ? s[0] : s[1];
-        if (year && month) {
-            return new Date(
-                parseInt(year, 10),
-                parseInt(month, 10) - 1,
-                1,
-                0,
-                0,
-                0,
-                0,
-            );
-        }
-    }
-    return null;
-};
+import {
+    useDatepickerShare,
+    type DatepickerEvent,
+    type FocusedDate,
+} from "./useDatepickerShare";
 
 /**
  * An input with a simple dropdown/modal for selecting a date, uses native datepicker for mobile
  * @displayName Datepicker
  * @style _datepicker.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "ODatepicker",
-    components: {
-        [DatepickerTable.name]: DatepickerTable,
-        [DatepickerMonth.name]: DatepickerMonth,
-        [Field.name]: Field,
-        [Input.name]: Input,
-        [Select.name]: Select,
-        [Icon.name]: Icon,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem,
-    },
     configField: "datepicker",
-    mixins: [BaseComponentMixin, FormElementMixin, MatchMediaMixin],
     inheritAttrs: false,
-    provide() {
-        return {
-            $datepicker: this,
-        };
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: {
+        type: [Date, Array] as PropType<Date | Date[]>,
+        default: undefined,
     },
-    emits: [
-        "update:modelValue",
-        "focus",
-        "blur",
-        "invalid",
-        "change-month",
-        "change-year",
-        "range-start",
-        "range-end",
-        "active-change",
-        "icon-right-click",
-    ],
-    props: {
-        modelValue: {
-            type: [Date, Array],
-        },
-        dayNames: {
-            type: Array,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.dayNames",
-                    undefined,
-                );
-            },
-        },
-        monthNames: {
-            type: Array,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.monthNames",
-                    undefined,
-                );
-            },
-        },
-        firstDayOfWeek: {
-            type: Number,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.firstDayOfWeek",
-                    0,
-                );
-            },
-        },
-        /**
-         * Size of button, optional
-         * @values small, medium, large
-         */
-        size: String,
-        inline: Boolean,
-        minDate: Date as PropType<Date>,
-        maxDate: Date as PropType<Date>,
-        focusedDate: Date as PropType<Date>,
-        placeholder: String,
-        editable: Boolean,
-        disabled: Boolean,
-        unselectableDates: [Array, Function],
-        unselectableDaysOfWeek: {
-            type: Array,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.unselectableDaysOfWeek",
-                    undefined,
-                );
-            },
-        },
-        selectableDates: [Array, Function],
-        dateFormatter: {
-            type: Function,
-            default: (date: string, vm: App) => {
-                const dateFormatter = getValueByPath(
-                    getOptions(),
-                    "datepicker.dateFormatter",
-                    undefined,
-                );
-                if (typeof dateFormatter === "function") {
-                    return dateFormatter(date);
-                } else {
-                    return defaultDateFormatter(date, vm);
-                }
-            },
-        },
-        dateParser: {
-            type: Function,
-            default: (date: string, vm: App) => {
-                const dateParser = getValueByPath(
-                    getOptions(),
-                    "datepicker.dateParser",
-                    undefined,
-                );
-                if (typeof dateParser === "function") {
-                    return dateParser(date);
-                } else {
-                    return defaultDateParser(date, vm);
-                }
-            },
-        },
-        dateCreator: {
-            type: Function,
-            default: () => {
-                const dateCreator = getValueByPath(
-                    getOptions(),
-                    "datepicker.dateCreator",
-                    undefined,
-                );
-                if (typeof dateCreator === "function") {
-                    return dateCreator();
-                } else {
-                    return new Date();
-                }
-            },
-        },
-        mobileNative: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.mobileNative",
-                    true,
-                );
-            },
-        },
-        position: String,
-        iconRight: String,
-        iconRightClickable: Boolean,
-        events: Array,
-        indicators: {
-            type: String,
-            default: "dots",
-        },
-        openOnFocus: Boolean,
-        iconPrev: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.iconPrev",
-                    "chevron-left",
-                );
-            },
-        },
-        iconNext: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.iconNext",
-                    "chevron-right",
-                );
-            },
-        },
-        yearsRange: {
-            type: Array,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.yearsRange",
-                    [-100, 10],
-                );
-            },
-        },
-        type: {
-            type: String,
-            validator: (value: string) => {
-                return ["month"].indexOf(value) >= 0;
-            },
-        },
-        nearbyMonthDays: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.nearbyMonthDays",
-                    true,
-                );
-            },
-        },
-        nearbySelectableMonthDays: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.nearbySelectableMonthDays",
-                    false,
-                );
-            },
-        },
-        showWeekNumber: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.showWeekNumber",
-                    false,
-                );
-            },
-        },
-        weekNumberClickable: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.weekNumberClickable",
-                    false,
-                );
-            },
-        },
-        rulesForFirstWeek: {
-            type: Number,
-            default: () => 4,
-        },
-        range: {
-            type: Boolean,
-            default: false,
-        },
-        closeOnClick: {
-            type: Boolean,
-            default: true,
-        },
-        multiple: {
-            type: Boolean,
-            default: false,
-        },
-        mobileModal: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.mobileModal",
-                    true,
-                );
-            },
-        },
-        trapFocus: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.trapFocus",
-                    true,
-                );
-            },
-        },
-        locale: {
-            type: [String, Array],
-            default: () => {
-                return getValueByPath(getOptions(), "locale");
-            },
-        },
-        appendToBody: Boolean,
-        ariaNextLabel: String,
-        ariaPreviousLabel: String,
-        rootClass: [String, Function, Array],
-        sizeClass: [String, Function, Array],
-        boxClass: [String, Function, Array],
-        headerClass: [String, Function, Array],
-        headerButtonsClass: [String, Function, Array],
-        headerButtonsSizeClass: [String, Function, Array],
-        prevBtnClass: [String, Function, Array],
-        nextBtnClass: [String, Function, Array],
-        listsClass: [String, Function, Array],
-        footerClass: [String, Function, Array],
-        tableClass: [String, Function, Array],
-        tableHeadClass: [String, Function, Array],
-        tableHeadCellClass: [String, Function, Array],
-        tableBodyClass: [String, Function, Array],
-        tableRowClass: [String, Function, Array],
-        tableCellClass: [String, Function, Array],
-        tableCellSelectedClass: [String, Function, Array],
-        tableCellFirstSelectedClass: [String, Function, Array],
-        tableCellInvisibleClass: [String, Function, Array],
-        tableCellWithinSelectedClass: [String, Function, Array],
-        tableCellLastSelectedClass: [String, Function, Array],
-        tableCellFirstHoveredClass: [String, Function, Array],
-        tableCellWithinHoveredClass: [String, Function, Array],
-        tableCellLastHoveredClass: [String, Function, Array],
-        tableCellTodayClass: [String, Function, Array],
-        tableCellSelectableClass: [String, Function, Array],
-        tableCellUnselectableClass: [String, Function, Array],
-        tableCellNearbyClass: [String, Function, Array],
-        tableCellEventsClass: [String, Function, Array],
-        tableEventsClass: [String, Function, Array],
-        tableEventVariantClass: [String, Function, Array],
-        tableEventClass: [String, Function, Array],
-        tableEventIndicatorsClass: [String, Function, Array],
-        mobileClass: [String, Function, Array],
-        /* datapickermonth classes */
-        monthClass: [String, Function, Array],
-        monthBodyClass: [String, Function, Array],
-        monthTableClass: [String, Function, Array],
-        monthCellClass: [String, Function, Array],
-        monthCellSelectedClass: [String, Function, Array],
-        monthCellFirstSelectedClass: [String, Function, Array],
-        monthCellWithinSelectedClass: [String, Function, Array],
-        monthCellLastSelectedClass: [String, Function, Array],
-        monthCellWithinHoveredRangeClass: [String, Function, Array],
-        monthCellFirstHoveredClass: [String, Function, Array],
-        monthCellWithinHoveredClass: [String, Function, Array],
-        monthCellLastHoveredClass: [String, Function, Array],
-        monthCellTodayClass: [String, Function, Array],
-        monthCellSelectableClass: [String, Function, Array],
-        monthCellUnselectableClass: [String, Function, Array],
-        monthCellEventsClass: [String, Function, Array],
-        inputClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.inputClasses",
-                    {},
-                );
-            },
-        },
-        dropdownClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "datepicker.dropdownClasses",
-                    {},
-                );
-            },
-        },
-        selectListClasses: Object,
+    /** The active state of the dropdown */
+    active: { type: Boolean, default: false },
+    /**
+     * Define picker mode
+     * @values date, month
+     */
+    type: {
+        type: String,
+        default: "date",
+        validator: (value: string) => ["month", "date"].indexOf(value) >= 0,
     },
-    data() {
-        const focusedDate =
-            (Array.isArray(this.modelValue)
-                ? this.modelValue[0]
-                : this.modelValue) ||
-            this.focusedDate ||
-            this.dateCreator();
-
-        if (
-            !this.modelValue &&
-            this.maxDate &&
-            this.maxDate.getFullYear() < focusedDate.getFullYear()
-        ) {
-            focusedDate.setFullYear(this.maxDate.getFullYear());
-        }
-
-        return {
-            dateSelected: this.modelValue,
-            focusedDateData: {
-                day: focusedDate.getDate(),
-                month: focusedDate.getMonth(),
-                year: focusedDate.getFullYear(),
-            },
-        };
+    /** Set custom day names, else use names based on locale */
+    dayNames: {
+        type: Array as PropType<string[]>,
+        default: () => getOption("datepicker.dayNames", undefined),
     },
-    computed: {
-        inputBind() {
-            return {
-                ...this.$attrs,
-                ...this.inputClasses,
-            };
-        },
-        dropdownBind() {
-            return {
-                "root-class": this.computedClass(
-                    "dropdownClasses.rootClass",
-                    "o-dpck__dropdown",
-                ),
-                ...this.dropdownClasses,
-            };
-        },
-        selectListBind() {
-            return {
-                ...this.selectListClasses,
-            };
-        },
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-dpck"),
-                {
-                    [this.computedClass("sizeClass", "o-dpck--", this.size)]:
-                        this.size,
-                },
-                {
-                    [this.computedClass("mobileClass", "o-dpck--mobile")]:
-                        this.isMatchMedia,
-                },
-            ];
-        },
-        boxClasses() {
-            return [this.computedClass("boxClass", "o-dpck__box")];
-        },
-        headerClasses() {
-            return [this.computedClass("headerClass", "o-dpck__header")];
-        },
-        headerButtonsClasses() {
-            return [
-                this.computedClass(
-                    "headerButtonsClass",
-                    "o-dpck__header__buttons",
-                ),
-                {
-                    [this.computedClass(
-                        "headerButtonsSizeClass",
-                        "o-dpck__header__buttons--",
-                        this.size,
-                    )]: this.size,
-                },
-            ];
-        },
-        prevBtnClasses() {
-            return [
-                this.computedClass("prevBtnClass", "o-dpck__header__previous"),
-            ];
-        },
-        nextBtnClasses() {
-            return [this.computedClass("nextBtnClass", "o-dpck__header__next")];
-        },
-        listsClasses() {
-            return [this.computedClass("listsClass", "o-dpck__header__list")];
-        },
-        footerClasses() {
-            return [this.computedClass("footerClass", "o-dpck__footer")];
-        },
-
-        computedValue: {
-            get() {
-                return this.dateSelected;
-            },
-            set(value) {
-                this.updateInternalState(value);
-                if (!this.multiple) this.togglePicker(false);
-                this.$emit("update:modelValue", value);
-                if (this.useHtml5Validation) {
-                    this.$nextTick(() => {
-                        this.checkHtml5Validity();
-                    });
-                }
-            },
-        },
-        formattedValue() {
-            return this.formatValue(this.computedValue);
-        },
-        localeOptions() {
-            return new Intl.DateTimeFormat(this.locale, {
-                year: "numeric",
-                month: "numeric",
-            }).resolvedOptions();
-        },
-        dtf() {
-            return new Intl.DateTimeFormat(
-                this.locale /*, { timeZone: 'UTC' }*/,
-            );
-        },
-        dtfMonth() {
-            return new Intl.DateTimeFormat(this.locale, {
-                year: this.localeOptions.year || "numeric",
-                month: this.localeOptions.month || "2-digit",
-                // timeZone: 'UTC'
-            });
-        },
-        newMonthNames() {
-            if (Array.isArray(this.monthNames)) {
-                return this.monthNames;
-            }
-            return getMonthNames(this.locale);
-        },
-        newDayNames() {
-            if (Array.isArray(this.dayNames)) {
-                return this.dayNames;
-            }
-            return getWeekdayNames(this.locale);
-        },
-        listOfMonths() {
-            let minMonth = 0;
-            let maxMonth = 12;
-            if (
-                this.minDate &&
-                this.focusedDateData.year === this.minDate.getFullYear()
-            ) {
-                minMonth = this.minDate.getMonth();
-            }
-            if (
-                this.maxDate &&
-                this.focusedDateData.year === this.maxDate.getFullYear()
-            ) {
-                maxMonth = this.maxDate.getMonth();
-            }
-            return this.newMonthNames.map((name, index) => {
-                return {
-                    name: name,
-                    index: index,
-                    disabled: index < minMonth || index > maxMonth,
-                };
-            });
-        },
-        /*
-         * Returns an array of years for the year dropdown. If earliest/latest
-         * dates are set by props, range of years will fall within those dates.
-         */
-        listOfYears() {
-            let latestYear = this.focusedDateData.year + this.yearsRange[1];
-            if (this.maxDate && this.maxDate.getFullYear() < latestYear) {
-                latestYear = Math.max(
-                    this.maxDate.getFullYear(),
-                    this.focusedDateData.year,
-                );
-            }
-
-            let earliestYear = this.focusedDateData.year + this.yearsRange[0];
-            if (this.minDate && this.minDate.getFullYear() > earliestYear) {
-                earliestYear = Math.min(
-                    this.minDate.getFullYear(),
-                    this.focusedDateData.year,
-                );
-            }
-
-            const arrayOfYears = [];
-            for (let i = earliestYear; i <= latestYear; i++) {
-                arrayOfYears.push(i);
-            }
-
-            return arrayOfYears.reverse();
-        },
-
-        showPrev() {
-            if (!this.minDate) return false;
-            if (this.isTypeMonth) {
-                return this.focusedDateData.year <= this.minDate.getFullYear();
-            }
-            const dateToCheck = new Date(
-                this.focusedDateData.year,
-                this.focusedDateData.month,
-            );
-            const date = new Date(
-                this.minDate.getFullYear(),
-                this.minDate.getMonth(),
-            );
-            return dateToCheck <= date;
-        },
-
-        showNext() {
-            if (!this.maxDate) return false;
-            if (this.isTypeMonth) {
-                return this.focusedDateData.year >= this.maxDate.getFullYear();
-            }
-            const dateToCheck = new Date(
-                this.focusedDateData.year,
-                this.focusedDateData.month,
-            );
-            const date = new Date(
-                this.maxDate.getFullYear(),
-                this.maxDate.getMonth(),
-            );
-            return dateToCheck >= date;
-        },
-
-        isMobile() {
-            return this.mobileNative && isMobile.any();
-        },
-
-        isTypeMonth() {
-            return this.type === "month";
-        },
-
-        ariaRole() {
-            return !this.inline ? "dialog" : undefined;
-        },
-
-        $elementRef() {
-            return "input";
-        },
+    /** Set custom month names, else use names based on locale */
+    monthNames: {
+        type: Array as PropType<string[]>,
+        default: () => getOption("datepicker.monthNames", undefined),
     },
-    watch: {
-        /**
-         * When v-model is changed:
-         *   1. Update internal value.
-         *   2. If it's invalid, validate again.
-         */
-        modelValue(value) {
-            this.updateInternalState(value);
-            if (!this.multiple) this.togglePicker(false);
-        },
-
-        focusedDate(value) {
-            if (value) {
-                this.focusedDateData = {
-                    day: value.getDate(),
-                    month: value.getMonth(),
-                    year: value.getFullYear(),
-                };
-            }
-        },
-
-        /*
-         * Emit input event on month and/or year change
-         */
-        "focusedDateData.month"(value) {
-            this.$emit("change-month", value);
-        },
-        "focusedDateData.year"(value) {
-            this.$emit("change-year", value);
-        },
+    /**
+     * Size of the control input, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("datepicker.size"),
     },
-    methods: {
-        /*
-         * Parse string into date
-         */
-        onChange(value) {
-            const date = this.dateParser(value, this);
-            if (
-                date &&
-                (!isNaN(date) ||
-                    (Array.isArray(date) &&
-                        date.length === 2 &&
-                        !isNaN(date[0]) &&
-                        !isNaN(date[1])))
-            ) {
-                this.computedValue = date;
-            } else {
-                // Force refresh input value when not valid date
-                this.computedValue = null;
-                if (this.$refs.input) {
-                    this.$refs.input.newValue = this.computedValue;
-                }
-            }
-        },
-
-        /*
-         * Format date into string
-         */
-        formatValue(value) {
-            if (Array.isArray(value)) {
-                const isArrayWithValidDates =
-                    Array.isArray(value) && value.every((v) => !isNaN(v));
-                return isArrayWithValidDates
-                    ? this.dateFormatter([...value], this)
-                    : null;
-            }
-            return value && !isNaN(value)
-                ? this.dateFormatter(value, this)
-                : null;
-        },
-
-        /*
-         * Either decrement month by 1 if not January or decrement year by 1
-         * and set month to 11 (December) or decrement year when 'month'
-         */
-        prev() {
-            if (this.disabled) return;
-
-            if (this.isTypeMonth) {
-                this.focusedDateData.year -= 1;
-            } else {
-                if (this.focusedDateData.month > 0) {
-                    this.focusedDateData.month -= 1;
-                } else {
-                    this.focusedDateData.month = 11;
-                    this.focusedDateData.year -= 1;
-                }
-            }
-        },
-
-        /*
-         * Either increment month by 1 if not December or increment year by 1
-         * and set month to 0 (January) or increment year when 'month'
-         */
-        next() {
-            if (this.disabled) return;
-
-            if (this.isTypeMonth) {
-                this.focusedDateData.year += 1;
-            } else {
-                if (this.focusedDateData.month < 11) {
-                    this.focusedDateData.month += 1;
-                } else {
-                    this.focusedDateData.month = 0;
-                    this.focusedDateData.year += 1;
-                }
-            }
-        },
-
-        formatNative(value) {
-            return this.isTypeMonth
-                ? this.formatYYYYMM(value)
-                : this.formatYYYYMMDD(value);
-        },
-
-        /*
-         * Format date into string 'YYYY-MM-DD'
-         */
-        formatYYYYMMDD(value: string) {
-            const date = new Date(value);
-            if (value && !isNaN(date.getTime())) {
-                const year = date.getFullYear();
-                const month = date.getMonth() + 1;
-                const day = date.getDate();
-                return (
-                    year +
-                    "-" +
-                    ((month < 10 ? "0" : "") + month) +
-                    "-" +
-                    ((day < 10 ? "0" : "") + day)
-                );
-            }
-            return "";
-        },
+    /** Set default date to focus on */
+    focusedDate: { type: Date, default: undefined },
+    /** Events to display on picker */
+    events: { type: Array as PropType<DatepickerEvent[]>, default: undefined },
+    /** Event indicators for style class definiton */
+    indicators: { type: String, default: "dots" },
+    /** Min date to select */
+    minDate: { type: Date, default: undefined },
+    /** Max date to select */
+    maxDate: { type: Date, default: undefined },
+    /** Enable date range selection */
+    range: { type: Boolean, default: false },
+    /** Makes input full width when inside a grouped or addon field */
+    expanded: { type: Boolean, default: false },
+    /** Makes the input rounded */
+    rounded: { type: Boolean, default: false },
+    /** Display datepicker inline */
+    inline: { type: Boolean, default: false },
+    /** Input placeholder */
+    placeholder: { type: String, default: undefined },
+    /** Same as native input readonly */
+    readonly: { type: Boolean, default: true },
+    /** Same as native, also push new item to v-model instead of replacing */
+    multiple: { type: Boolean, default: false },
+    /** Same as native disabled */
+    disabled: { type: Boolean, default: false },
+    openOnFocus: {
+        type: Boolean,
+        default: () => getOption("datepicker.openOnFocus", true),
+    },
+    closeOnClick: {
+        type: Boolean,
+        default: () => getOption("datepicker.closeOnClick", true),
+    },
+    /** Date format locale */
+    locale: {
+        type: String,
+        default: () => getOption("locale"),
+    },
+    /** Custom function to format a date into a string */
+    dateFormatter: {
+        type: Function as PropType<(date: Date | Date[]) => string>,
+        default: (
+            date: Date | Date[],
+            defaultFunction: (date: Date | Date[]) => string,
+        ) => getOption("datepicker.dateFormatter", defaultFunction)(date),
+    },
+    /** Custom function to parse a string into a date */
+    dateParser: {
+        type: Function as PropType<(date: string) => Date>,
+        default: (date: string, defaultFunction: (date: string) => Date) =>
+            getOption("datepicker.dateParser", defaultFunction)(date),
+    },
+    /** Date creator function, default is `new Date()` */
+    dateCreator: {
+        type: Function as PropType<() => Date>,
+        default: () => getOption("datepicker.dateCreator", () => new Date())(),
+    },
+    /** Define a list of dates which can be selected */
+    selectableDates: {
+        type: [Array, Function] as PropType<Date[] | ((date: Date) => boolean)>,
+        default: () => [],
+    },
+    /** Define a list of dates which can not be selected */
+    unselectableDates: {
+        type: [Array, Function] as PropType<Date[] | ((date: Date) => boolean)>,
+        default: () => [],
+    },
+    /** Define a list of weeks which can not be selected */
+    unselectableDaysOfWeek: {
+        type: Array as PropType<number[]>,
+        default: () =>
+            getOption("datepicker.unselectableDaysOfWeek", undefined),
+    },
+    /** Show nearby month days */
+    nearbyMonthDays: {
+        type: Boolean,
+        default: () => getOption("datepicker.nearbyMonthDays", true),
+    },
+    /** Define if nearby month days can be selected */
+    nearbySelectableMonthDays: {
+        type: Boolean,
+        default: () => getOption("datepicker.nearbySelectableMonthDays", false),
+    },
+    /** Show weeek numbers */
+    showWeekNumber: {
+        type: Boolean,
+        default: () => getOption("datepicker.showWeekNumber", false),
+    },
+    /** Define if weeek numbers are clickable */
+    weekNumberClickable: {
+        type: Boolean,
+        default: () => getOption("datepicker.weekNumberClickable", false),
+    },
+    /** Set the first day of a week */
+    firstDayOfWeek: {
+        type: Number,
+        default: () => getOption("datepicker.firstDayOfWeek", 0),
+    },
+    /** Rules for the first week : 1 for the 1st January, 4 for the 4th January */
+    rulesForFirstWeek: { type: Number, default: () => 4 },
+    /** Define the range of years to show */
+    yearsRange: {
+        type: Array as PropType<number[]>,
+        default: () => getOption("datepicker.yearsRange", [-100, 10]),
+    },
+    /** Dropdown trapFocus */
+    trapFocus: {
+        type: Boolean,
+        default: () => getOption("datepicker.trapFocus", true),
+    },
+    /** Dropdown position */
+    position: { type: String, default: undefined },
+    /** Enable dropdown mobile modal */
+    mobileModal: {
+        type: Boolean,
+        default: () => getOption("datepicker.mobileModal", true),
+    },
+    /** Enable mobile native input if mobile agent */
+    mobileNative: {
+        type: Boolean,
+        default: () => getOption("datepicker.mobileNative", true),
+    },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("datepicker.iconPack", undefined),
+    },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("datepicker.icon", undefined),
+    },
+    /** Icon name to be added on the right side */
+    iconRight: {
+        type: String,
+        default: () => getOption("datepicker.iconRight", undefined),
+    },
+    /** Make the icon right clickable */
+    iconRightClickable: { type: Boolean, default: false },
+    /** Icon name for previous icon */
+    iconPrev: {
+        type: String,
+        default: () => getOption("datepicker.iconPrev", "chevron-left"),
+    },
+    /** Icon name for next icon */
+    iconNext: {
+        type: String,
+        default: () => getOption("datepicker.iconNext", "chevron-right"),
+    },
+    /** Append autocomplete content to body */
+    appendToBody: {
+        type: Boolean,
+        default: () => getOption("datepicker.appendToBody", false),
+    },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    /** A11y next button aria label */
+    ariaNextLabel: { type: String, default: "Next Page" },
+    /** A11y previous button aria label  */
+    ariaPreviousLabel: { type: String, default: "Previous Page" },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "sizeClass",
+        "boxClass",
+        "headerClass",
+        "headerButtonsClass",
+        "headerButtonsSizeClass",
+        "prevBtnClass",
+        "nextBtnClass",
+        "listsClass",
+        "footerClass",
+        "tableClass",
+        "tableHeadClass",
+        "tableHeadCellClass",
+        "tableBodyClass",
+        "tableRowClass",
+        "tableCellClass",
+        "tableCellSelectedClass",
+        "tableCellFirstSelectedClass",
+        "tableCellInvisibleClass",
+        "tableCellWithinSelectedClass",
+        "tableCellLastSelectedClass",
+        "tableCellFirstHoveredClass",
+        "tableCellWithinHoveredClass",
+        "tableCellLastHoveredClass",
+        "tableCellTodayClass",
+        "tableCellSelectableClass",
+        "tableCellUnselectableClass",
+        "tableCellNearbyClass",
+        "tableCellEventsClass",
+        "tableEventsClass",
+        "tableEventVariantClass",
+        "tableEventClass",
+        "tableEventIndicatorsClass",
+        "mobileClass",
+        /* datapickermonth classes */
+        "monthClass",
+        "monthBodyClass",
+        "monthTableClass",
+        "monthCellClass",
+        "monthCellSelectedClass",
+        "monthCellFirstSelectedClass",
+        "monthCellWithinSelectedClass",
+        "monthCellLastSelectedClass",
+        "monthCellWithinHoveredRangeClass",
+        "monthCellFirstHoveredClass",
+        "monthCellWithinHoveredClass",
+        "monthCellLastHoveredClass",
+        "monthCellTodayClass",
+        "monthCellSelectableClass",
+        "monthCellUnselectableClass",
+        "monthCellEventsClass",
+    ]),
+    inputClasses: {
+        type: Object,
+        default: () => getOption("datepicker.inputClasses", {}),
+    },
+    dropdownClasses: {
+        type: Object,
+        default: () => getOption("datepicker.dropdownClasses", {}),
+    },
+    selectListClasses: {
+        type: Object,
+        default: () => getOption("datepicker.selectListClasses", {}),
+    },
+});
 
-        /*
-         * Format date into string 'YYYY-MM'
-         */
-        formatYYYYMM(value: string) {
-            const date = new Date(value);
-            if (value && !isNaN(date.getTime())) {
-                const year = date.getFullYear();
-                const month = date.getMonth() + 1;
-                return year + "-" + ((month < 10 ? "0" : "") + month);
-            }
-            return "";
-        },
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {Date | Date[]} updated modelValue prop
+     */
+    (e: "update:modelValue", value: Date | Date[]): void;
+    /**
+     * active prop two-way binding
+     * @param value {boolean} updated active prop
+     */
+    (e: "update:active", value: boolean): void;
+    /**
+     * on range start is selected event
+     * @param value {Date} range start date
+     */
+    (e: "range-start", value: Date): void;
+    /**
+     * on range end is selected event
+     * @param value {Date} range end date
+     */
+    (e: "range-end", value: Date): void;
+    /**
+     * on month change event
+     * @param value {number} month number
+     */
+    (e: "change-month", value: number): void;
+    /**
+     * on year change event
+     * @param value {number} year number
+     */
+    (e: "change-year", value: number): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+}>();
+
+const { defaultDateFormatter, defaultDateParser } = useDatepickerShare(props);
+
+const { isMobile } = useMatchMedia();
+
+const vmodel = useVModelBinding<Date | Date[]>(props, emits, { passive: true });
+
+/** Dropdown active state */
+const isActive = usePropBinding<boolean>("active", props, emits);
+
+/** modelValue formated into string */
+const formattedValue = computed(() =>
+    Array.isArray(vmodel.value)
+        ? (props.dateFormatter as any)([...vmodel.value], defaultDateFormatter)
+        : (props.dateFormatter as any)(vmodel.value, defaultDateFormatter),
+);
+
+const isTypeMonth = computed(() => props.type === "month");
 
-        /*
-         * Parse date from string
-         */
-        onChangeNativePicker(event) {
-            const date = event.target.value;
-            const s = date ? date.split("-") : [];
-            if (s.length === 3) {
-                const year = parseInt(s[0], 10);
-                const month = parseInt(s[1]) - 1;
-                const day = parseInt(s[2]);
-                this.computedValue = new Date(year, month, day);
-            } else {
-                this.computedValue = null;
-            }
-        },
-        updateInternalState(value) {
-            if (this.dateSelected === value) return;
+/**
+ * When v-model is changed:
+ *   1. Update internal value.
+ *   2. If it's invalid, validate again.
+ */
+watch(
+    () => props.modelValue,
+    (value) => {
+        // updateInternalState
+        if (vmodel.value !== value) {
             const isArray = Array.isArray(value);
             const currentDate = isArray
                 ? !value.length
-                    ? this.dateCreator()
+                    ? props.dateCreator()
                     : value[value.length - 1]
                 : !value
-                ? this.dateCreator()
+                ? props.dateCreator()
                 : value;
             if (
                 !isArray ||
                 (isArray &&
-                    this.dateSelected &&
-                    value.length > this.dateSelected.length)
+                    Array.isArray(vmodel.value) &&
+                    value.length > vmodel.value.length)
             ) {
-                this.focusedDateData = {
+                focusedDateData.value = {
                     day: currentDate.getDate(),
                     month: currentDate.getMonth(),
                     year: currentDate.getFullYear(),
                 };
             }
-            this.dateSelected = value;
-        },
+        }
+    },
+);
+
+watch(
+    () => props.focusedDate,
+    (value) => {
+        if (value) {
+            focusedDateData.value = {
+                day: value.getDate(),
+                month: value.getMonth(),
+                year: value.getFullYear(),
+            };
+        }
+    },
+);
+
+const _initialDate =
+    (Array.isArray(props.modelValue)
+        ? props.modelValue[0]
+        : props.modelValue) ||
+    props.focusedDate ||
+    props.dateCreator();
+
+if (
+    !props.modelValue &&
+    props.maxDate &&
+    props.maxDate.getFullYear() < _initialDate.getFullYear()
+) {
+    _initialDate.setFullYear(props.maxDate.getFullYear());
+}
+
+const focusedDateData = ref<FocusedDate>({
+    day: _initialDate.getDate(),
+    month: _initialDate.getMonth(),
+    year: _initialDate.getFullYear(),
+});
 
-        /*
-         * Toggle datepicker
-         */
-        togglePicker(active) {
-            if (this.$refs.dropdown) {
-                const isActive =
-                    typeof active === "boolean"
-                        ? active
-                        : !this.$refs.dropdown.isActive;
-                if (isActive) {
-                    this.$refs.dropdown.isActive = isActive;
-                } else if (this.closeOnClick) {
-                    this.$refs.dropdown.isActive = isActive;
-                }
-            }
-        },
+/*
+ * Emit input event on month and/or year change
+ */
+watch(
+    () => focusedDateData.value.month,
+    (value) => emits("change-month", value),
+);
+watch(
+    () => focusedDateData.value.year,
+    (value) => emits("change-year", value),
+);
+
+const computedMonthNames = computed(() =>
+    Array.isArray(props.monthNames)
+        ? props.monthNames
+        : getMonthNames(props.locale),
+);
+
+const listOfMonths = computed(() => {
+    let minMonth = 0;
+    let maxMonth = 12;
+    if (
+        props.minDate &&
+        focusedDateData.value.year === props.minDate.getFullYear()
+    ) {
+        minMonth = props.minDate.getMonth();
+    }
+    if (
+        props.maxDate &&
+        focusedDateData.value.year === props.maxDate.getFullYear()
+    ) {
+        maxMonth = props.maxDate.getMonth();
+    }
+    return computedMonthNames.value.map((name, index) => ({
+        name: name,
+        index: index,
+        disabled: index < minMonth || index > maxMonth,
+    }));
+});
 
-        /*
-         * Call default onFocus method and show datepicker
-         */
-        handleOnFocus(event) {
-            this.onFocus(event);
-            if (this.openOnFocus) {
-                this.togglePicker(true);
-            }
-        },
+const computedDayNames = computed(() => {
+    if (Array.isArray(props.dayNames)) return props.dayNames;
+    return getWeekdayNames(props.locale);
+});
 
-        /*
-         * Toggle dropdown
-         */
-        toggle() {
-            if (this.mobileNative && this.isMobile) {
-                const input = this.$refs.input.$refs.input;
-                input.focus();
-                input.click();
-                return;
-            }
-            this.$refs.dropdown.toggle();
-        },
+/*
+ * Returns an array of years for the year dropdown. If earliest/latest
+ * dates are set by props, range of years will fall within those dates.
+ */
+const listOfYears = computed(() => {
+    let latestYear = focusedDateData.value.year + props.yearsRange[1];
+    if (props.maxDate && props.maxDate.getFullYear() < latestYear) {
+        latestYear = Math.max(
+            props.maxDate.getFullYear(),
+            focusedDateData.value.year,
+        );
+    }
 
-        /*
-         * Avoid dropdown toggle when is already visible
-         */
-        onInputClick(event) {
-            if (this.$refs.dropdown.isActive) {
-                event.stopPropagation();
-            }
-        },
+    let earliestYear = focusedDateData.value.year + props.yearsRange[0];
+    if (props.minDate && props.minDate.getFullYear() > earliestYear) {
+        earliestYear = Math.min(
+            props.minDate.getFullYear(),
+            focusedDateData.value.year,
+        );
+    }
 
-        /**
-         * Keypress event that is bound to the document.
-         */
-        keyPress({ key }) {
-            if (
-                this.$refs.dropdown &&
-                this.$refs.dropdown.isActive &&
-                (key === "Escape" || key === "Esc")
-            ) {
-                this.togglePicker(false);
-            }
-        },
+    return Array.from(
+        { length: latestYear - earliestYear || 1 },
+        (value, index) => earliestYear + index,
+    ).reverse();
+});
 
-        /**
-         * Emit 'blur' event on dropdown is not active (closed)
-         */
-        onActiveChange(value) {
-            if (!value) {
-                this.onBlur();
-            }
-            this.$emit("active-change", value);
-        },
+const showPrev = computed(() => {
+    if (!props.minDate) return true;
+    if (isTypeMonth.value)
+        return focusedDateData.value.year > props.minDate.getFullYear();
+
+    const dateToCheck = new Date(
+        focusedDateData.value.year,
+        focusedDateData.value.month,
+    );
+    const date = new Date(
+        props.minDate.getFullYear(),
+        props.minDate.getMonth(),
+    );
+    return dateToCheck > date;
+});
 
-        changeFocus(day) {
-            this.focusedDateData = {
-                day: day.getDate(),
-                month: day.getMonth(),
-                year: day.getFullYear(),
-            };
-        },
-    },
-    created() {
-        if (typeof window !== "undefined") {
-            document.addEventListener("keyup", this.keyPress);
+/**
+ * Either decrement month by 1 if not January or decrement year by 1
+ * and set month to 11 (December) or decrement year when 'month'
+ */
+function prev(): void {
+    if (props.disabled) return;
+
+    if (isTypeMonth.value) {
+        focusedDateData.value.year -= 1;
+    } else {
+        if (focusedDateData.value.month > 0) {
+            focusedDateData.value.month -= 1;
+        } else {
+            focusedDateData.value.month = 11;
+            focusedDateData.value.year -= 1;
         }
-    },
-    beforeUnmount() {
-        if (typeof window !== "undefined") {
-            document.removeEventListener("keyup", this.keyPress);
+    }
+}
+
+const showNext = computed(() => {
+    if (!props.maxDate) return true;
+    if (isTypeMonth.value)
+        return focusedDateData.value.year < props.maxDate.getFullYear();
+
+    const dateToCheck = new Date(
+        focusedDateData.value.year,
+        focusedDateData.value.month,
+    );
+    const date = new Date(
+        props.maxDate.getFullYear(),
+        props.maxDate.getMonth(),
+    );
+    return dateToCheck < date;
+});
+
+/**
+ * Either increment month by 1 if not December or increment year by 1
+ * and set month to 0 (January) or increment year when 'month'
+ */
+function next(): void {
+    if (props.disabled) return;
+    if (isTypeMonth.value) {
+        focusedDateData.value.year += 1;
+    } else {
+        if (focusedDateData.value.month < 11) {
+            focusedDateData.value.month += 1;
+        } else {
+            focusedDateData.value.month = 0;
+            focusedDateData.value.year += 1;
         }
+    }
+}
+
+function formatNative(value: Date | Date[]): string {
+    if (Array.isArray(value)) value = value[0];
+
+    if (!value) return "";
+    const date = new Date(value);
+
+    if (isTypeMonth.value) {
+        // Format date into string 'YYYY-MM'
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        return year + "-" + ((month < 10 ? "0" : "") + month);
+    } else {
+        // Format date into string 'YYYY-MM-DD'
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        return (
+            year +
+            "-" +
+            ((month < 10 ? "0" : "") + month) +
+            "-" +
+            ((day < 10 ? "0" : "") + day)
+        );
+    }
+}
+
+// --- Event Handler ---
+
+/** Parse string into date */
+function onChange(value: string): void {
+    const date = (props.dateParser as any)(value, defaultDateParser);
+
+    if (
+        date &&
+        Array.isArray(date) &&
+        date.length === 2 &&
+        !isNaN(date[0]) &&
+        !isNaN(date[1])
+    ) {
+        vmodel.value = date;
+    } else {
+        vmodel.value = null;
+    }
+}
+
+/** Parse date from string */
+function onChangeNativePicker(value: string): void {
+    const s = value ? value.split("-") : [];
+    if (s.length === 3) {
+        const year = parseInt(s[0], 10);
+        const month = parseInt(s[1]) - 1;
+        const day = parseInt(s[2]);
+        vmodel.value = new Date(year, month, day);
+    } else {
+        vmodel.value = null;
+    }
+}
+
+// --- Computed Component Classes ---
+
+const selectListBind = computed(() => ({
+    ...props.selectListClasses,
+}));
+
+const dropdownClass = computed(() =>
+    useComputedClass("dropdownClasses.rootClass", "o-dpck__dropdown"),
+);
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-dpck"),
+    {
+        [useComputedClass("sizeClass", "o-dpck--", props.size)]: props.size,
+    },
+    {
+        [useComputedClass("mobileClass", "o-dpck--mobile")]: isMobile.value,
+    },
+    {
+        [useComputedClass("expandedClass", "o-dpck--expanded")]: props.expanded,
     },
+]);
+
+const boxClasses = computed(() => [
+    useComputedClass("boxClass", "o-dpck__box"),
+]);
+
+const headerClasses = computed(() => [
+    useComputedClass("headerClass", "o-dpck__header"),
+]);
+
+const headerButtonsClasses = computed(() => [
+    useComputedClass("headerButtonsClass", "o-dpck__header__buttons"),
+    {
+        [useComputedClass(
+            "headerButtonsSizeClass",
+            "o-dpck__header__buttons--",
+            props.size,
+        )]: props.size,
+    },
+]);
+
+const prevBtnClasses = computed(() => [
+    useComputedClass("prevBtnClass", "o-dpck__header__previous"),
+]);
+
+const nextBtnClasses = computed(() => [
+    useComputedClass("nextBtnClass", "o-dpck__header__next"),
+]);
+
+const listsClasses = computed(() => [
+    useComputedClass("listsClass", "o-dpck__header__list"),
+]);
+
+const footerClasses = computed(() => [
+    useComputedClass("footerClass", "o-dpck__footer"),
+]);
+
+// --- Expose Public Functionalities ---
+
+const wrapperRef = ref<typeof OPickerWrapper>();
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => wrapperRef.value.$el),
+    // expose the input element
+    $inputRef: computed(() => wrapperRef.value.$inputRef),
 });
 </script>
 
 <template>
-    <div :class="rootClasses">
-        <o-dropdown
-            v-if="!isMobile || inline"
-            ref="dropdown"
-            v-bind="dropdownBind"
-            :position="position"
-            :disabled="disabled"
-            :inline="inline"
-            :mobile-modal="mobileModal"
-            :trap-focus="trapFocus"
-            :aria-role="ariaRole"
-            :aria-modal="!inline"
-            :trigger-tabindex="-1"
-            :append-to-body="appendToBody"
-            append-to-body-copy-parent
-            @active-change="onActiveChange">
-            <template #trigger v-if="!inline">
-                <slot name="trigger">
-                    <o-input
-                        ref="input"
-                        autocomplete="off"
-                        :model-value="formattedValue"
-                        :expanded="expanded"
-                        :placeholder="placeholder"
-                        :size="size"
-                        :icon="icon"
-                        :icon-right="iconRight"
-                        :icon-right-clickable="iconRightClickable"
+    <OPickerWrapper
+        ref="wrapperRef"
+        v-bind="$attrs"
+        v-model:active="isActive"
+        :value="vmodel"
+        :picker-props="props"
+        :formatted-value="formattedValue"
+        :native-type="!isTypeMonth ? 'date' : 'month'"
+        :native-value="formatNative(vmodel)"
+        :native-max="formatNative(maxDate)"
+        :native-min="formatNative(minDate)"
+        :stay-open="multiple"
+        :dropdown-class="dropdownClass"
+        :root-classes="rootClasses"
+        :box-classes="boxClasses"
+        @change="onChange"
+        @native-change="onChangeNativePicker"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        @invalid="$emit('invalid', $event)"
+        @icon-click="$emit('icon-click', $event)"
+        @icon-right-click="$emit('icon-right-click', $event)">
+        <template v-if="$slots.trigger" #trigger>
+            <slot name="trigger" />
+        </template>
+        <header :class="headerClasses">
+            <slot name="header">
+                <div :class="headerButtonsClasses">
+                    <OButton
+                        v-if="!disabled"
+                        :class="prevBtnClasses"
+                        :disabled="!showPrev"
+                        :aria-label="ariaPreviousLabel"
                         :icon-pack="iconPack"
-                        :rounded="rounded"
-                        :disabled="disabled"
-                        :readonly="!editable"
-                        v-bind="inputBind"
-                        :use-html5-validation="false"
-                        @click="onInputClick"
-                        @icon-right-click="$emit('icon-right-click')"
-                        @keyup.enter="togglePicker(true)"
-                        @change="onChange($event.target.value)"
-                        @focus="handleOnFocus" />
-                </slot>
-            </template>
-            <o-dropdown-item
-                override
-                tag="div"
-                :item-class="boxClasses"
-                :disabled="disabled"
-                :clickable="false">
-                <header :class="headerClasses">
-                    <slot name="header">
-                        <div :class="headerButtonsClasses">
-                            <a
-                                v-show="!showPrev && !disabled"
-                                :class="prevBtnClasses"
-                                role="button"
-                                href="#"
-                                :aria-label="ariaPreviousLabel"
-                                @click.prevent="prev"
-                                @keydown.enter.prevent="prev"
-                                @keydown.space.prevent="prev">
-                                <o-icon
-                                    :icon="iconPrev"
-                                    :pack="iconPack"
-                                    both
-                                    clickable />
-                            </a>
-                            <a
-                                v-show="!showNext && !disabled"
-                                :class="nextBtnClasses"
-                                role="button"
-                                href="#"
-                                :aria-label="ariaNextLabel"
-                                @click.prevent="next"
-                                @keydown.enter.prevent="next"
-                                @keydown.space.prevent="next">
-                                <o-icon
-                                    :icon="iconNext"
-                                    :pack="iconPack"
-                                    both
-                                    clickable />
-                            </a>
-                            <div :class="listsClasses">
-                                <o-select
-                                    v-if="!isTypeMonth"
-                                    v-model="focusedDateData.month"
-                                    :disabled="disabled"
-                                    :size="size"
-                                    v-bind="selectListBind">
-                                    <option
-                                        v-for="month in listOfMonths"
-                                        :value="month.index"
-                                        :key="month.name"
-                                        :disabled="month.disabled">
-                                        {{ month.name }}
-                                    </option>
-                                </o-select>
-                                <o-select
-                                    v-model="focusedDateData.year"
-                                    :disabled="disabled"
-                                    :size="size"
-                                    v-bind="selectListBind">
-                                    <option
-                                        v-for="year in listOfYears"
-                                        :value="year"
-                                        :key="year">
-                                        {{ year }}
-                                    </option>
-                                </o-select>
-                            </div>
-                        </div>
-                    </slot>
-                </header>
-                <slot name="table">
-                    <o-datepicker-table
-                        v-if="!isTypeMonth"
-                        v-model="computedValue"
-                        :day-names="newDayNames"
-                        :month-names="newMonthNames"
-                        :first-day-of-week="firstDayOfWeek"
-                        :rules-for-first-week="rulesForFirstWeek"
-                        :min-date="minDate"
-                        :max-date="maxDate"
-                        :focused="focusedDateData"
-                        :disabled="disabled"
-                        :unselectable-dates="unselectableDates"
-                        :unselectable-days-of-week="unselectableDaysOfWeek"
-                        :selectable-dates="selectableDates"
-                        :events="events"
-                        :indicators="indicators"
-                        :date-creator="dateCreator"
-                        :type-month="isTypeMonth"
-                        :nearby-month-days="nearbyMonthDays"
-                        :nearby-selectable-month-days="
-                            nearbySelectableMonthDays
-                        "
-                        :show-week-number="showWeekNumber"
-                        :week-number-clickable="weekNumberClickable"
-                        :range="range"
-                        :multiple="multiple"
-                        :table-class="tableClass"
-                        :table-head-class="tableHeadClass"
-                        :table-head-cell-class="tableHeadCellClass"
-                        :table-body-class="tableBodyClass"
-                        :table-row-class="tableRowClass"
-                        :table-cell-class="tableCellClass"
-                        :table-cell-selected-class="tableCellSelectedClass"
-                        :table-cell-first-selected-class="
-                            tableCellFirstSelectedClass
-                        "
-                        :table-cell-invisible-class="tableCellInvisibleClass"
-                        :table-cell-within-selected-class="
-                            tableCellWithinSelectedClass
-                        "
-                        :table-cell-last-selected-class="
-                            tableCellLastSelectedClass
-                        "
-                        :table-cell-first-hovered-class="
-                            tableCellFirstHoveredClass
-                        "
-                        :table-cell-within-hovered-class="
-                            tableCellWithinHoveredClass
-                        "
-                        :table-cell-last-hovered-class="
-                            tableCellLastHoveredClass
-                        "
-                        :table-cell-today-class="tableCellTodayClass"
-                        :table-cell-selectable-class="tableCellSelectableClass"
-                        :table-cell-unselectable-class="
-                            tableCellUnselectableClass
-                        "
-                        :table-cell-nearby-class="tableCellNearbyClass"
-                        :table-cell-events-class="tableCellEventsClass"
-                        :table-events-class="tableEventsClass"
-                        :table-event-variant-class="tableEventVariantClass"
-                        :table-event-class="tableEventClass"
-                        :table-event-indicators-class="
-                            tableEventIndicatorsClass
-                        "
-                        @range-start="(date) => $emit('range-start', date)"
-                        @range-end="(date) => $emit('range-end', date)"
-                        @close="togglePicker(false)"
-                        @update:focused="focusedDateData = $event" />
-                    <o-datepicker-month
-                        v-if="isTypeMonth"
-                        v-model="computedValue"
-                        :month-names="newMonthNames"
-                        :min-date="minDate"
-                        :max-date="maxDate"
-                        :focused="focusedDateData"
-                        :disabled="disabled"
-                        :unselectable-dates="unselectableDates"
-                        :unselectable-days-of-week="unselectableDaysOfWeek"
-                        :selectable-dates="selectableDates"
-                        :events="events"
-                        :indicators="indicators"
-                        :date-creator="dateCreator"
-                        :range="range"
-                        :multiple="multiple"
-                        :month-class="monthClass"
-                        :month-body-class="monthBodyClass"
-                        :month-table-class="monthTableClass"
-                        :month-cell-class="monthCellClass"
-                        :month-cell-selected-class="monthCellSelectedClass"
-                        :month-cell-first-selected-class="
-                            monthCellFirstSelectedClass
-                        "
-                        :month-cell-within-selected-class="
-                            monthCellWithinSelectedClass
-                        "
-                        :month-cell-last-selected-class="
-                            monthCellLastSelectedClass
-                        "
-                        :month-cell-within-hovered-range-class="
-                            monthCellWithinHoveredRangeClass
-                        "
-                        :month-cell-first-hovered-class="
-                            monthCellFirstHoveredClass
-                        "
-                        :month-cell-within-hovered-class="
-                            monthCellWithinHoveredClass
-                        "
-                        :month-cell-last-hovered-class="
-                            monthCellLastHoveredClass
-                        "
-                        :month-cell-today-class="monthCellTodayClass"
-                        :month-cell-selectable-class="monthCellSelectableClass"
-                        :month-cell-unselectable-class="
-                            monthCellUnselectableClass
-                        "
-                        :month-cell-events-class="monthCellEventsClass"
-                        @range-start="(date) => $emit('range-start', date)"
-                        @range-end="(date) => $emit('range-end', date)"
-                        @close="togglePicker(false)"
-                        @change-focus="changeFocus"
-                        @update:focused="focusedDateData = $event" />
-                </slot>
-                <footer
-                    v-if="$slots.footer !== undefined"
-                    :class="footerClasses">
-                    <slot name="footer" />
-                </footer>
-            </o-dropdown-item>
-        </o-dropdown>
-
-        <o-input
-            v-else
-            ref="input"
-            :type="!isTypeMonth ? 'date' : 'month'"
-            autocomplete="off"
-            :value="formatNative(computedValue)"
-            :placeholder="placeholder"
-            :size="size"
-            :icon="icon"
-            :icon-pack="iconPack"
-            :rounded="rounded"
-            :max="formatNative(maxDate)"
-            :min="formatNative(minDate)"
-            :disabled="disabled"
-            :readonly="false"
-            v-bind="$attrs"
-            :use-html5-validation="false"
-            @change="onChangeNativePicker"
-            @focus="onFocus"
-            @blur="onBlur"
-            @invalid="onInvalid" />
-    </div>
+                        :icon-left="iconPrev"
+                        outlined
+                        @click.prevent="prev"
+                        @keydown.enter.prevent="prev"
+                        @keydown.space.prevent="prev" />
+
+                    <OButton
+                        v-if="!disabled"
+                        :class="nextBtnClasses"
+                        :disabled="!showNext"
+                        :aria-label="ariaNextLabel"
+                        :icon-pack="iconPack"
+                        :icon-left="iconNext"
+                        outlined
+                        @click.prevent="next"
+                        @keydown.enter.prevent="next"
+                        @keydown.space.prevent="next" />
+
+                    <div :class="listsClasses">
+                        <o-select
+                            v-if="!isTypeMonth"
+                            v-model="focusedDateData.month"
+                            :disabled="disabled"
+                            :size="size"
+                            v-bind="selectListBind">
+                            <option
+                                v-for="month in listOfMonths"
+                                :key="month.name"
+                                :value="month.index"
+                                :disabled="month.disabled">
+                                {{ month.name }}
+                            </option>
+                        </o-select>
+                        <o-select
+                            v-model="focusedDateData.year"
+                            :disabled="disabled"
+                            :size="size"
+                            v-bind="selectListBind">
+                            <option
+                                v-for="year in listOfYears"
+                                :key="year"
+                                :value="year">
+                                {{ year }}
+                            </option>
+                        </o-select>
+                    </div>
+                </div>
+            </slot>
+        </header>
+        <slot name="body">
+            <o-datepicker-month
+                v-if="isTypeMonth"
+                v-model="vmodel"
+                v-model:focused-date="focusedDateData"
+                :month-names="computedMonthNames"
+                :picker-props="props"
+                @range-start="(date) => $emit('range-start', date)"
+                @range-end="(date) => $emit('range-end', date)" />
+            <o-datepicker-table
+                v-else
+                v-model="vmodel"
+                v-model:focused-date="focusedDateData"
+                :day-names="computedDayNames"
+                :month-names="computedMonthNames"
+                :picker-props="props"
+                @range-start="(date) => $emit('range-start', date)"
+                @range-end="(date) => $emit('range-end', date)" />
+        </slot>
+        <footer v-if="$slots.footer" :class="footerClasses">
+            <slot name="footer" />
+        </footer>
+    </OPickerWrapper>
 </template>
diff --git a/packages/oruga-next/src/components/datepicker/DatepickerMixin.ts b/packages/oruga-next/src/components/datepicker/DatepickerMixin.ts
deleted file mode 100644
index c2eebad8f..000000000
--- a/packages/oruga-next/src/components/datepicker/DatepickerMixin.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export default {
-    methods: {
-        manageKeydown(event, weekDay) {
-            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
-            const { key } = event;
-            let preventDefault = true;
-            switch (key) {
-                case "Tab": {
-                    preventDefault = false;
-                    break;
-                }
-                case " ":
-                case "Space":
-                case "Spacebar":
-                case "Enter": {
-                    this.emitChosenDate(weekDay);
-                    break;
-                }
-
-                case "ArrowLeft":
-                case "Left": {
-                    this.changeFocus(weekDay, -1);
-                    break;
-                }
-                case "ArrowRight":
-                case "Right": {
-                    this.changeFocus(weekDay, 1);
-                    break;
-                }
-                case "ArrowUp":
-                case "Up": {
-                    this.changeFocus(weekDay, -7);
-                    break;
-                }
-                case "ArrowDown":
-                case "Down": {
-                    this.changeFocus(weekDay, 7);
-                    break;
-                }
-            }
-            if (preventDefault) {
-                event.preventDefault();
-            }
-        },
-    },
-};
diff --git a/packages/oruga-next/src/components/datepicker/DatepickerMonth.vue b/packages/oruga-next/src/components/datepicker/DatepickerMonth.vue
index 297675cdc..8b676e58f 100644
--- a/packages/oruga-next/src/components/datepicker/DatepickerMonth.vue
+++ b/packages/oruga-next/src/components/datepicker/DatepickerMonth.vue
@@ -1,486 +1,480 @@
-<script lang="ts">
-import { isDefined } from "../../utils/helpers";
+<script setup lang="ts">
+import {
+    computed,
+    ref,
+    nextTick,
+    watch,
+    type PropType,
+    type ComponentPublicInstance,
+} from "vue";
+import { useComputedClass } from "@/composables";
+import { isDefined } from "@/utils/helpers";
+import {
+    type DatepickerProps,
+    type DatepickerEvent,
+    type FocusedDate,
+} from "./useDatepickerShare";
+import type { BindProp } from "@/types";
 
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import DatepickerMixin from "./DatepickerMixin";
-
-export default {
+defineOptions({
     name: "ODatepickerMonth",
-    mixins: [BaseComponentMixin, DatepickerMixin],
     configField: "datepicker",
-    emits: ["update:modelValue", "range-start", "range-end", "updated:focused"],
-    props: {
-        modelValue: {
-            type: [Date, Array],
-        },
-        monthNames: Array,
-        events: Array,
-        indicators: String,
-        minDate: Date,
-        maxDate: Date,
-        focused: Object,
-        disabled: Boolean,
-        dateCreator: Function,
-        unselectableDates: [Array, Function],
-        unselectableDaysOfWeek: Array,
-        selectableDates: [Array, Function],
-        range: Boolean,
-        multiple: Boolean,
-        monthClass: [String, Function, Array],
-        monthBodyClass: [String, Function, Array],
-        monthTableClass: [String, Function, Array],
-        monthCellClass: [String, Function, Array],
-        monthCellSelectedClass: [String, Function, Array],
-        monthCellFirstSelectedClass: [String, Function, Array],
-        monthCellWithinSelectedClass: [String, Function, Array],
-        monthCellLastSelectedClass: [String, Function, Array],
-        monthCellWithinHoveredRangeClass: [String, Function, Array],
-        monthCellFirstHoveredClass: [String, Function, Array],
-        monthCellWithinHoveredClass: [String, Function, Array],
-        monthCellLastHoveredClass: [String, Function, Array],
-        monthCellTodayClass: [String, Function, Array],
-        monthCellSelectableClass: [String, Function, Array],
-        monthCellUnselectableClass: [String, Function, Array],
-        monthCellEventsClass: [String, Function, Array],
+    inheritAttrs: false,
+});
+
+const props = defineProps({
+    modelValue: {
+        type: [Date, Array] as PropType<Date | Date[]>,
+        default: undefined,
     },
-    data() {
-        return {
-            selectedBeginDate: undefined,
-            selectedEndDate: undefined,
-            hoveredEndDate: undefined,
-            multipleSelectedDates:
-                this.multiple && this.modelValue ? this.modelValue : [],
-        };
+    monthNames: { type: Array as PropType<string[]>, required: true },
+    focusedDate: { type: Object as PropType<FocusedDate>, required: true },
+    pickerProps: {
+        type: Object as PropType<DatepickerProps>,
+        required: true,
     },
-    computed: {
-        monthClasses() {
-            return [this.computedClass("monthClass", "o-dpck__month")];
-        },
-        monthBodyClasses() {
-            return [
-                this.computedClass("monthBodyClass", "o-dpck__month__body"),
-            ];
-        },
-        monthTableClasses() {
-            return [
-                this.computedClass("monthTableClass", "o-dpck__month__table"),
-            ];
-        },
-        monthCellClasses() {
-            return [
-                this.computedClass("monthCellClass", "o-dpck__month__cell"),
-            ];
-        },
-        hasEvents() {
-            return this.events && this.events.length;
-        },
+});
 
-        /*
-         * Return array of all events in the specified month
-         */
-        eventsInThisYear() {
-            if (!this.events) return [];
-
-            const yearEvents = [];
-
-            for (let i = 0; i < this.events.length; i++) {
-                let event = this.events[i];
-
-                if (!Object.prototype.hasOwnProperty.call(event, "date")) {
-                    event = { date: event };
-                }
-                if (!Object.prototype.hasOwnProperty.call(event, "type")) {
-                    event.type = "is-primary";
-                }
-                if (event.date.getFullYear() === this.focused.year) {
-                    yearEvents.push(event);
-                }
-            }
+const emits = defineEmits<{
+    /** modelValue prop two-way binding */
+    (e: "update:modelValue", value: Date | Date[]): void;
+    /** focusedDate prop two-way binding */
+    (e: "update:focusedDate", value: FocusedDate): void;
+    (e: "range-start", value: Date): void;
+    (e: "range-end", value: Date): void;
+}>();
 
-            return yearEvents;
-        },
-        monthDates() {
-            const year = this.focused.year;
-            const months = [];
-            for (let i = 0; i < 12; i++) {
-                const d = new Date(year, i, 1);
-                d.setHours(0, 0, 0, 0);
-                months.push(d);
-            }
-            return months;
-        },
+const selectedBeginDate = ref<Date>();
+const selectedEndDate = ref<Date>();
+const hoveredEndDate = ref<Date>();
 
-        focusedMonth() {
-            return this.focused.month;
-        },
+const datepicker = computed<DatepickerProps>(() => props.pickerProps);
 
-        hoveredDateRange() {
-            if (!this.range) {
-                return [];
-            }
-            if (!isNaN(this.selectedEndDate)) {
-                return [];
-            }
-            if (this.hoveredEndDate < this.selectedBeginDate) {
-                return [this.hoveredEndDate, this.selectedBeginDate].filter(
-                    isDefined,
-                );
-            }
-            return [this.selectedBeginDate, this.hoveredEndDate].filter(
-                isDefined,
-            );
-        },
-    },
-    watch: {
-        focusedMonth(month) {
-            const refName = `month-${month}`;
-            if (this.$refs[refName] && this.$refs[refName].length > 0) {
-                this.$nextTick(() => {
-                    if (this.$refs[refName][0]) {
-                        this.$refs[refName][0].focus();
-                    }
-                }); // $nextTick needed when year is changed
+const hasEvents = computed(() => !!datepicker.value.events?.length);
+
+const monthRefs = ref(new Map());
+
+function setMonthRef(date: Date, el: Element | ComponentPublicInstance): void {
+    const refKey = `month-${date.getMonth()}`;
+    if (el) monthRefs.value.set(refKey, el);
+}
+
+watch(
+    () => props.focusedDate.month,
+    (month) => {
+        const refKey = `month-${month}`;
+        nextTick(() => {
+            // $nextTick is needed when month is changed
+            const ref = monthRefs.value.get(refKey);
+            if (ref?.length > 0 && ref[0]) {
+                ref[0].focus();
             }
-        },
+        });
     },
-    methods: {
-        selectMultipleDates(date) {
-            const multipleSelect = this.multipleSelectedDates.filter(
-                (selectedDate) =>
-                    selectedDate.getDate() === date.getDate() &&
-                    selectedDate.getFullYear() === date.getFullYear() &&
-                    selectedDate.getMonth() === date.getMonth(),
-            );
-            if (multipleSelect.length) {
-                this.multipleSelectedDates = this.multipleSelectedDates.filter(
-                    (selectedDate) =>
-                        selectedDate.getDate() !== date.getDate() ||
-                        selectedDate.getFullYear() !== date.getFullYear() ||
-                        selectedDate.getMonth() !== date.getMonth(),
-                );
-            } else {
-                this.multipleSelectedDates.push(date);
-            }
-            this.$emit("update:modelValue", this.multipleSelectedDates);
-        },
+);
 
-        selectableDate(day) {
-            const validity = [];
+/** Return array of all events in the specified month */
+const eventsInThisYear = computed(() => {
+    if (!datepicker.value.events) return [];
 
-            if (this.minDate) {
-                validity.push(day >= this.minDate);
-            }
+    return datepicker.value.events
+        .map((event) => {
+            if (!event.date && event instanceof Date) event = { date: event };
+            if (!event.type) event.type = "is-primary";
+            return event;
+        })
+        .filter((event) => event.date.getFullYear() === props.focusedDate.year);
+});
 
-            if (this.maxDate) {
-                validity.push(day <= this.maxDate);
-            }
+const monthDates = computed(() => {
+    const year = props.focusedDate.year;
+    const months = [];
+    for (let i = 0; i < 12; i++) {
+        const d = new Date(year, i, 1);
+        d.setHours(0, 0, 0, 0);
+        months.push(d);
+    }
+    return months;
+});
 
-            validity.push(day.getFullYear() === this.focused.year);
-
-            if (this.selectableDates) {
-                if (typeof this.selectableDates === "function") {
-                    if (this.selectableDates(day)) {
-                        return true;
-                    } else {
-                        validity.push(false);
-                    }
-                } else {
-                    for (let i = 0; i < this.selectableDates.length; i++) {
-                        const enabledDate = this.selectableDates[i];
-                        if (
-                            day.getFullYear() === enabledDate.getFullYear() &&
-                            day.getMonth() === enabledDate.getMonth()
-                        ) {
-                            return true;
-                        } else {
-                            validity.push(false);
-                        }
-                    }
-                }
-            }
+const hoveredDateRange = computed(() => {
+    if (!datepicker.value.range || !selectedEndDate.value) return [];
 
-            if (this.unselectableDates) {
-                if (typeof this.unselectableDates === "function") {
-                    validity.push(!this.unselectableDates(day));
-                } else {
-                    for (let i = 0; i < this.unselectableDates.length; i++) {
-                        const disabledDate = this.unselectableDates[i];
-                        validity.push(
-                            day.getFullYear() !== disabledDate.getFullYear() ||
-                                day.getMonth() !== disabledDate.getMonth(),
-                        );
-                    }
-                }
-            }
+    return (
+        hoveredEndDate.value < selectedBeginDate.value
+            ? [hoveredEndDate.value, selectedBeginDate.value]
+            : [selectedBeginDate.value, hoveredEndDate.value]
+    ).filter(isDefined);
+});
 
-            if (this.unselectableDaysOfWeek) {
-                for (let i = 0; i < this.unselectableDaysOfWeek.length; i++) {
-                    const dayOfWeek = this.unselectableDaysOfWeek[i];
-                    validity.push(day.getDay() !== dayOfWeek);
-                }
-            }
+function eventsDateMatch(day): DatepickerEvent[] {
+    if (!eventsInThisYear.value.length) return [];
+    return eventsInThisYear.value.filter(
+        (event) => event.date.getMonth() === day.getMonth(),
+    );
+}
 
-            return validity.indexOf(false) < 0;
-        },
-        eventsDateMatch(day) {
-            if (!this.eventsInThisYear.length) return false;
+function isDateSelectable(date: Date): boolean {
+    const validity = [];
 
-            const monthEvents = [];
+    if (datepicker.value.minDate)
+        validity.push(date >= datepicker.value.minDate);
+    if (datepicker.value.maxDate)
+        validity.push(date <= datepicker.value.maxDate);
 
-            for (let i = 0; i < this.eventsInThisYear.length; i++) {
-                if (
-                    this.eventsInThisYear[i].date.getMonth() === day.getMonth()
-                ) {
-                    monthEvents.push(this.events[i]);
-                }
-            }
+    validity.push(date.getFullYear() === props.focusedDate.year);
 
-            if (!monthEvents.length) {
-                return false;
+    if (datepicker.value.selectableDates) {
+        if (typeof datepicker.value.selectableDates === "function") {
+            if (datepicker.value.selectableDates(date)) return true;
+            else validity.push(false);
+        } else {
+            for (let i = 0; i < datepicker.value.selectableDates.length; i++) {
+                const enabledDate = datepicker.value.selectableDates[i];
+                if (
+                    date.getFullYear() === enabledDate.getFullYear() &&
+                    date.getMonth() === enabledDate.getMonth()
+                )
+                    return true;
+                else validity.push(false);
             }
+        }
+    }
 
-            return monthEvents;
-        },
-        /*
-         * Build cellClasses for cell using validations
-         */
-        cellClasses(day) {
-            function dateMatch(dateOne, dateTwo, multiple = false) {
-                // if either date is null or undefined, return false
-                if (!dateOne || !dateTwo || multiple) {
-                    return false;
-                }
-                if (Array.isArray(dateTwo)) {
-                    return dateTwo.some(
-                        (date) =>
-                            dateOne.getFullYear() === date.getFullYear() &&
-                            dateOne.getMonth() === date.getMonth(),
-                    );
-                }
-                return (
-                    dateOne.getFullYear() === dateTwo.getFullYear() &&
-                    dateOne.getMonth() === dateTwo.getMonth()
+    if (datepicker.value.unselectableDates) {
+        if (typeof datepicker.value.unselectableDates === "function") {
+            validity.push(!datepicker.value.unselectableDates(date));
+        } else {
+            for (
+                let i = 0;
+                i < datepicker.value.unselectableDates.length;
+                i++
+            ) {
+                const disabledDate = datepicker.value.unselectableDates[i];
+                validity.push(
+                    date.getFullYear() !== disabledDate.getFullYear() ||
+                        date.getMonth() !== disabledDate.getMonth(),
                 );
             }
-            function dateWithin(dateOne, dates, multiple = false) {
-                if (!Array.isArray(dates) || multiple) {
-                    return false;
-                }
+        }
+    }
 
-                return dateOne > dates[0] && dateOne < dates[1];
-            }
-            function dateMultipleSelected(dateOne, dates, multiple = false) {
-                if (!Array.isArray(dates) || !multiple) {
-                    return false;
-                }
-                return dates.some(
-                    (date) =>
-                        dateOne.getDate() === date.getDate() &&
-                        dateOne.getFullYear() === date.getFullYear() &&
-                        dateOne.getMonth() === date.getMonth(),
-                );
-            }
+    if (datepicker.value.unselectableDaysOfWeek) {
+        for (
+            let i = 0;
+            i < datepicker.value.unselectableDaysOfWeek.length;
+            i++
+        ) {
+            const dayOfWeek = datepicker.value.unselectableDaysOfWeek[i];
+            validity.push(date.getDay() !== dayOfWeek);
+        }
+    }
 
-            return [
-                ...this.monthCellClasses,
-                {
-                    [this.computedClass(
-                        "monthCellSelectedClass",
-                        "o-dpck__month__cell--selected",
-                    )]:
-                        dateMatch(day, this.modelValue, this.multiple) ||
-                        dateWithin(day, this.modelValue, this.multiple) ||
-                        dateMultipleSelected(
-                            day,
-                            this.multipleSelectedDates,
-                            this.multiple,
-                        ),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellFirstSelectedClass",
-                        "o-dpck__month__cell--first-selected",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.modelValue) && this.modelValue[0],
-                        this.multiple,
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellWithinSelectedClass",
-                        "o-dpck__month__cell--within-selected",
-                    )]: dateWithin(day, this.modelValue, this.multiple),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellLastSelectedClass",
-                        "o-dpck__month__cell--last-selected",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.modelValue) && this.modelValue[1],
-                        this.multiple,
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellWithinHoveredRangeClass",
-                        "o-dpck__month__cell--within-hovered-range",
-                    )]:
-                        this.hoveredDateRange &&
-                        this.hoveredDateRange.length === 2 &&
-                        (dateMatch(day, this.hoveredDateRange) ||
-                            dateWithin(day, this.hoveredDateRange)),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellFirstHoveredClass",
-                        "o-dpck__month__cell--first-hovered",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.hoveredDateRange) &&
-                            this.hoveredDateRange[0],
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellWithinHoveredClass",
-                        "o-dpck__month__cell--within-hovered",
-                    )]: dateWithin(day, this.hoveredDateRange),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellLastHoveredClass",
-                        "o-dpck__month__cell--last-hovered",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.hoveredDateRange) &&
-                            this.hoveredDateRange[1],
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellTodayClass",
-                        "o-dpck__month__cell--today",
-                    )]: dateMatch(day, this.dateCreator()),
-                },
-                {
-                    [this.computedClass(
-                        "monthCellSelectableclass",
-                        "o-dpck__month__cell--selectable",
-                    )]: this.selectableDate(day) && !this.disabled,
-                },
-                {
-                    [this.computedClass(
-                        "monthCellUnselectableClass",
-                        "o-dpck__month__cell--unselectable",
-                    )]: !this.selectableDate(day) || this.disabled,
-                },
-                {
-                    [this.computedClass(
-                        "monthCellEventsClass",
-                        "o-dpck__month__cell--events",
-                    )]: this.hasEvents,
-                },
-            ];
-        },
+    return validity.indexOf(false) < 0;
+}
 
-        /*
-         * Emit update:modelValue event with selected date as payload for v-model in parent
-         */
-        updateSelectedDate(date) {
-            if (!this.range && !this.multiple) {
-                this.emitChosenDate(date);
-            } else if (this.range) {
-                this.handleSelectRangeDate(date);
-            } else if (this.multiple) {
-                this.selectMultipleDates(date);
-            }
-        },
+// --- Events ---
 
-        /*
-         * Emit select event with chosen date as payload
-         */
-        emitChosenDate(day) {
-            if (this.disabled) return;
-
-            if (!this.multiple) {
-                if (this.selectableDate(day)) {
-                    this.$emit("update:modelValue", day);
-                }
-            } else {
-                this.selectMultipleDates(day);
-            }
-        },
+function onKeydown(event: KeyboardEvent, weekDay: Date): void {
+    let preventDefault = true;
+    switch (event.key) {
+        case "Tab": {
+            preventDefault = false;
+            break;
+        }
+        case " ":
+        case "Space":
+        case "Spacebar":
+        case "Enter": {
+            selectDate(weekDay);
+            break;
+        }
 
-        /*
-         * If both begin and end dates are set, reset the end date and set the begin date.
-         * If only begin date is selected, emit an array of the begin date and the new date.
-         * If not set, only set the begin date.
-         */
-        handleSelectRangeDate(date) {
-            if (this.disabled) return;
-            if (this.selectedBeginDate && this.selectedEndDate) {
-                this.selectedBeginDate = date;
-                this.selectedEndDate = undefined;
-                this.$emit("range-start", date);
-            } else if (this.selectedBeginDate && !this.selectedEndDate) {
-                if (this.selectedBeginDate > date) {
-                    this.selectedEndDate = this.selectedBeginDate;
-                    this.selectedBeginDate = date;
-                } else {
-                    this.selectedEndDate = date;
-                }
-                this.$emit("range-end", date);
-                this.$emit("update:modelValue", [
-                    this.selectedBeginDate,
-                    this.selectedEndDate,
-                ]);
-            } else {
-                this.selectedBeginDate = date;
-                this.$emit("range-start", date);
-            }
-        },
+        case "ArrowLeft":
+        case "Left": {
+            changeFocus(weekDay, -1);
+            break;
+        }
+        case "ArrowRight":
+        case "Right": {
+            changeFocus(weekDay, 1);
+            break;
+        }
+        case "ArrowUp":
+        case "Up": {
+            changeFocus(weekDay, -7);
+            break;
+        }
+        case "ArrowDown":
+        case "Down": {
+            changeFocus(weekDay, 7);
+            break;
+        }
+    }
+    if (preventDefault) event.preventDefault();
+}
 
-        setRangeHoverEndDate(day) {
-            if (this.range) {
-                this.hoveredEndDate = day;
-            }
-        },
+/*
+ * Emit update:modelValue event with selected date as payload for v-model in parent
+ */
+function selectDate(date: Date): void {
+    if (datepicker.value.disabled) return;
+    if (
+        !datepicker.value.range &&
+        !datepicker.value.multiple &&
+        isDateSelectable(date)
+    )
+        emits("update:modelValue", date);
+    else if (datepicker.value.range) handleSelectRangeDate(date);
+    else if (datepicker.value.multiple) handleSelectMultipleDates(date);
+}
+
+/*
+ * If both begin and end dates are set, reset the end date and set the begin date.
+ * If only begin date is selected, emit an array of the begin date and the new date.
+ * If not set, only set the begin date.
+ */
+function handleSelectRangeDate(date: Date): void {
+    if (selectedBeginDate.value && selectedEndDate.value) {
+        selectedBeginDate.value = date;
+        selectedEndDate.value = undefined;
+        emits("range-start", date);
+    } else if (selectedBeginDate.value && !selectedEndDate.value) {
+        if (selectedBeginDate.value > date) {
+            selectedEndDate.value = selectedBeginDate.value;
+            selectedBeginDate.value = date;
+        } else {
+            selectedEndDate.value = date;
+        }
+        emits("range-end", date);
+        emits("update:modelValue", [
+            selectedBeginDate.value,
+            selectedEndDate.value,
+        ]);
+    } else {
+        selectedBeginDate.value = date;
+        emits("range-start", date);
+    }
+}
+
+const multipleSelectedDates = computed(() =>
+    datepicker.value.multiple && props.modelValue ? props.modelValue : [],
+);
+
+function handleSelectMultipleDates(date: Date): void {
+    if (!Array.isArray(props.modelValue)) return;
+    let multipleSelectedDates = props.modelValue;
+
+    const multipleSelect = multipleSelectedDates.filter(
+        (selectedDate) =>
+            selectedDate.getDate() === date.getDate() &&
+            selectedDate.getFullYear() === date.getFullYear() &&
+            selectedDate.getMonth() === date.getMonth(),
+    );
+    if (multipleSelect.length) {
+        multipleSelectedDates = multipleSelectedDates.filter(
+            (selectedDate) =>
+                selectedDate.getDate() !== date.getDate() ||
+                selectedDate.getFullYear() !== date.getFullYear() ||
+                selectedDate.getMonth() !== date.getMonth(),
+        );
+    } else {
+        multipleSelectedDates.push(date);
+    }
+    emits("update:modelValue", multipleSelectedDates);
+}
+
+function changeFocus(month: Date, inc: number): void {
+    month.setMonth(month.getMonth() + inc);
+    const focused = {
+        day: month.getDate(),
+        month: month.getMonth(),
+        year: month.getFullYear(),
+    };
+    emits("update:focusedDate", focused);
+}
+
+function onRangeHoverEndDate(day: Date): void {
+    if (datepicker.value.range) hoveredEndDate.value = day;
+}
+
+// --- Computed Component Classes ---
 
-        changeFocus(month, inc) {
-            const nextMonth = month;
-            nextMonth.setMonth(month.getMonth() + inc);
-            this.$emit("update:focused", nextMonth);
+/**
+ * Build cellClasses for cell using validations
+ */
+function cellClasses(day: Date): BindProp {
+    function dateMatch(dateOne, dateTwo, multiple = false): boolean {
+        // if either date is null or undefined, return false
+        if (!dateOne || !dateTwo || multiple) return false;
+        if (Array.isArray(dateTwo))
+            return dateTwo.some(
+                (date) =>
+                    dateOne.getFullYear() === date.getFullYear() &&
+                    dateOne.getMonth() === date.getMonth(),
+            );
+        return (
+            dateOne.getFullYear() === dateTwo.getFullYear() &&
+            dateOne.getMonth() === dateTwo.getMonth()
+        );
+    }
+    function dateWithin(dateOne, dates, multiple = false): boolean {
+        if (!Array.isArray(dates) || multiple) return false;
+        return dateOne > dates[0] && dateOne < dates[1];
+    }
+    function dateMultipleSelected(dateOne, dates, multiple = false): boolean {
+        if (!Array.isArray(dates) || !multiple) return false;
+        return dates.some(
+            (date) =>
+                dateOne.getDate() === date.getDate() &&
+                dateOne.getFullYear() === date.getFullYear() &&
+                dateOne.getMonth() === date.getMonth(),
+        );
+    }
+
+    return [
+        ...monthCellClasses.value,
+        {
+            [useComputedClass(
+                "monthCellSelectedClass",
+                "o-dpck__month__cell--selected",
+            )]:
+                dateMatch(day, props.modelValue, datepicker.value.multiple) ||
+                dateWithin(day, props.modelValue, datepicker.value.multiple) ||
+                dateMultipleSelected(
+                    day,
+                    multipleSelectedDates.value,
+                    datepicker.value.multiple,
+                ),
         },
-    },
-};
+        {
+            [useComputedClass(
+                "monthCellFirstSelectedClass",
+                "o-dpck__month__cell--first-selected",
+            )]: dateMatch(
+                day,
+                Array.isArray(props.modelValue) && props.modelValue[0],
+                datepicker.value.multiple,
+            ),
+        },
+        {
+            [useComputedClass(
+                "monthCellWithinSelectedClass",
+                "o-dpck__month__cell--within-selected",
+            )]: dateWithin(day, props.modelValue, datepicker.value.multiple),
+        },
+        {
+            [useComputedClass(
+                "monthCellLastSelectedClass",
+                "o-dpck__month__cell--last-selected",
+            )]: dateMatch(
+                day,
+                Array.isArray(props.modelValue) && props.modelValue[1],
+                datepicker.value.multiple,
+            ),
+        },
+        {
+            [useComputedClass(
+                "monthCellWithinHoveredRangeClass",
+                "o-dpck__month__cell--within-hovered-range",
+            )]:
+                hoveredDateRange.value &&
+                hoveredDateRange.value.length === 2 &&
+                (dateMatch(day, hoveredDateRange.value) ||
+                    dateWithin(day, hoveredDateRange.value)),
+        },
+        {
+            [useComputedClass(
+                "monthCellFirstHoveredClass",
+                "o-dpck__month__cell--first-hovered",
+            )]: dateMatch(
+                day,
+                Array.isArray(hoveredDateRange.value) &&
+                    hoveredDateRange.value[0],
+            ),
+        },
+        {
+            [useComputedClass(
+                "monthCellWithinHoveredClass",
+                "o-dpck__month__cell--within-hovered",
+            )]: dateWithin(day, hoveredDateRange.value),
+        },
+        {
+            [useComputedClass(
+                "monthCellLastHoveredClass",
+                "o-dpck__month__cell--last-hovered",
+            )]: dateMatch(
+                day,
+                Array.isArray(hoveredDateRange.value) &&
+                    hoveredDateRange.value[1],
+            ),
+        },
+        {
+            [useComputedClass(
+                "monthCellTodayClass",
+                "o-dpck__month__cell--today",
+            )]: dateMatch(day, datepicker.value.dateCreator()),
+        },
+        {
+            [useComputedClass(
+                "monthCellSelectableclass",
+                "o-dpck__month__cell--selectable",
+            )]: isDateSelectable(day) && !datepicker.value.disabled,
+        },
+        {
+            [useComputedClass(
+                "monthCellUnselectableClass",
+                "o-dpck__month__cell--unselectable",
+            )]: !isDateSelectable(day) || datepicker.value.disabled,
+        },
+        {
+            [useComputedClass(
+                "monthCellEventsClass",
+                "o-dpck__month__cell--events",
+            )]: hasEvents.value,
+        },
+    ];
+}
+
+const monthClasses = computed(() => [
+    useComputedClass("monthClass", "o-dpck__month"),
+]);
+
+const monthBodyClasses = computed(() => [
+    useComputedClass("monthBodyClass", "o-dpck__month__body"),
+]);
+
+const monthTableClasses = computed(() => [
+    useComputedClass("monthTableClass", "o-dpck__month__table"),
+]);
+
+const monthCellClasses = computed(() => [
+    useComputedClass("monthCellClass", "o-dpck__month__cell"),
+]);
 </script>
 
 <template>
     <section :class="monthClasses">
         <div :class="monthBodyClasses">
             <div :class="monthTableClasses">
-                <template v-for="(date, index) in monthDates" :key="index">
+                <template v-for="(date, idx) in monthDates" :key="idx">
                     <a
-                        :ref="`month-${date.getMonth()}`"
-                        v-if="selectableDate(date) && !disabled"
+                        v-if="!datepicker.disabled && isDateSelectable(date)"
+                        :ref="(el) => setMonthRef(date, el)"
                         :class="cellClasses(date)"
                         role="button"
                         href="#"
-                        :disabled="disabled"
-                        @click.prevent="updateSelectedDate(date)"
-                        @mouseenter="setRangeHoverEndDate(date)"
-                        @keydown.prevent="manageKeydown($event, date)"
+                        :disabled="datepicker.disabled"
                         :tabindex="
-                            focused.month === date.getMonth() ? null : -1
-                        ">
+                            focusedDate.month === date.getMonth() ? null : -1
+                        "
+                        @click.prevent="selectDate(date)"
+                        @mouseenter="onRangeHoverEndDate(date)"
+                        @keydown.prevent="onKeydown($event, date)">
                         {{ monthNames[date.getMonth()] }}
-                        <div class="events" v-if="eventsDateMatch(date)">
+                        <div v-if="eventsDateMatch(date).length" class="events">
                             <div
-                                v-for="(event, index) in eventsDateMatch(
-                                    date,
-                                ) as any[]"
+                                v-for="(event, index) in eventsDateMatch(date)"
                                 :key="index"
                                 class="event"
                                 :class="event.type" />
diff --git a/packages/oruga-next/src/components/datepicker/DatepickerTable.vue b/packages/oruga-next/src/components/datepicker/DatepickerTable.vue
index fe87933f0..f21093dc4 100644
--- a/packages/oruga-next/src/components/datepicker/DatepickerTable.vue
+++ b/packages/oruga-next/src/components/datepicker/DatepickerTable.vue
@@ -1,395 +1,257 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import DatepickerTableRow from "./DatepickerTableRow.vue";
-
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-
-export default defineComponent({
+<script setup lang="ts">
+import { computed, ref, type PropType } from "vue";
+import ODatepickerTableRow from "./DatepickerTableRow.vue";
+import { useComputedClass } from "@/composables";
+import {
+    useDatepickerShare,
+    type DatepickerProps,
+    type DatepickerEvent,
+    type FocusedDate,
+} from "./useDatepickerShare";
+import { weekBuilder } from "./datepickerUtils";
+import { isDefined } from "@/utils/helpers";
+
+defineOptions({
     name: "ODatepickerTable",
-    mixins: [BaseComponentMixin],
     configField: "datepicker",
-    components: {
-        [DatepickerTableRow.name]: DatepickerTableRow,
-    },
-    emits: ["update:modelValue", "range-start", "range-end", "update:focused"],
-    props: {
-        modelValue: {
-            type: [Date, Array],
-        },
-        dayNames: Array,
-        monthNames: Array,
-        firstDayOfWeek: Number,
-        events: Array,
-        indicators: String,
-        minDate: Date,
-        maxDate: Date,
-        focused: Object,
-        disabled: Boolean,
-        dateCreator: Function,
-        unselectableDates: Array,
-        unselectableDaysOfWeek: Array,
-        selectableDates: Array,
-        nearbyMonthDays: Boolean,
-        nearbySelectableMonthDays: Boolean,
-        showWeekNumber: Boolean,
-        weekNumberClickable: Boolean,
-        rulesForFirstWeek: Number,
-        range: Boolean,
-        multiple: Boolean,
-        tableClass: [String, Function, Array],
-        tableHeadClass: [String, Function, Array],
-        tableHeadCellClass: [String, Function, Array],
-        tableBodyClass: [String, Function, Array],
-        tableRowClass: [String, Function, Array],
-        tableCellClass: [String, Function, Array],
-        tableCellSelectedClass: [String, Function, Array],
-        tableCellFirstSelectedClass: [String, Function, Array],
-        tableCellInvisibleClass: [String, Function, Array],
-        tableCellWithinSelectedClass: [String, Function, Array],
-        tableCellLastSelectedClass: [String, Function, Array],
-        tableCellFirstHoveredClass: [String, Function, Array],
-        tableCellWithinHoveredClass: [String, Function, Array],
-        tableCellLastHoveredClass: [String, Function, Array],
-        tableCellTodayClass: [String, Function, Array],
-        tableCellSelectableClass: [String, Function, Array],
-        tableCellUnselectableClass: [String, Function, Array],
-        tableCellNearbyClass: [String, Function, Array],
-        tableCellEventsClass: [String, Function, Array],
-        tableEventClass: [String, Function, Array],
-        tableEventIndicatorsClass: [String, Function, Array],
-        tableEventsClass: [String, Function, Array],
-        tableEventVariantClass: [String, Function, Array],
-    },
-    data() {
-        return {
-            selectedBeginDate: undefined,
-            selectedEndDate: undefined,
-            hoveredEndDate: undefined,
-        };
-    },
-    computed: {
-        tableClasses() {
-            return [this.computedClass("tableClass", "o-dpck__table")];
-        },
-        tableHeadClasses() {
-            return [
-                this.computedClass("tableHeadClass", "o-dpck__table__head"),
-            ];
-        },
-        tableHeadCellClasses() {
-            return [
-                this.computedClass(
-                    "tableHeadCellClass",
-                    "o-dpck__table__head-cell",
-                ),
-                ...this.tableCellClasses,
-            ];
-        },
-        tableBodyClasses() {
-            return [
-                this.computedClass("tableBodyClass", "o-dpck__table__body"),
-            ];
-        },
-        tableCellClasses() {
-            return [
-                this.computedClass("tableCellClass", "o-dpck__table__cell"),
-            ];
-        },
-        visibleDayNames() {
-            const visibleDayNames = [];
-            let index = this.firstDayOfWeek;
-            while (visibleDayNames.length < this.dayNames.length) {
-                const currentDayName =
-                    this.dayNames[index % this.dayNames.length];
-                visibleDayNames.push(currentDayName);
-                index++;
-            }
-            if (this.showWeekNumber) visibleDayNames.unshift("");
-            return visibleDayNames;
-        },
-
-        /*
-         * Return array of all events in the specified month
-         */
-        eventsInThisMonth() {
-            if (!this.events) return [];
-
-            const monthEvents = [];
-
-            for (let i = 0; i < this.events.length; i++) {
-                let event = this.events[i];
-
-                if (!Object.prototype.hasOwnProperty.call(event, "date")) {
-                    event = { date: event };
-                }
-                if (
-                    event.date.getMonth() === this.focused.month &&
-                    event.date.getFullYear() === this.focused.year
-                ) {
-                    monthEvents.push(event);
-                }
-            }
-
-            return monthEvents;
-        },
-        /*
-         * Return array of all weeks in the specified month
-         */
-        weeksInThisMonth() {
-            this.validateFocusedDay();
-            const month = this.focused.month;
-            const year = this.focused.year;
-            const weeksInThisMonth = [];
-
-            let startingDay = 1;
-
-            while (weeksInThisMonth.length < 6) {
-                const newWeek = this.weekBuilder(startingDay, month, year);
-                weeksInThisMonth.push(newWeek);
-                startingDay += 7;
-            }
+});
 
-            return weeksInThisMonth;
-        },
-        hoveredDateRange() {
-            if (!this.range) {
-                return [];
-            }
-            if (!isNaN(this.selectedEndDate)) {
-                return [];
-            }
-            if (this.hoveredEndDate < this.selectedBeginDate) {
-                return [this.hoveredEndDate, this.selectedBeginDate].filter(
-                    (d) => d !== undefined,
-                );
-            }
-            return [this.selectedBeginDate, this.hoveredEndDate].filter(
-                (d) => d !== undefined,
-            );
-        },
+const props = defineProps({
+    modelValue: {
+        type: [Date, Array] as PropType<Date | Date[]>,
+        default: undefined,
     },
-    methods: {
-        /*
-         * Emit input event with selected date as payload for v-model in parent
-         */
-        updateSelectedDate(date) {
-            if (!this.range && !this.multiple) {
-                this.$emit("update:modelValue", date);
-            } else if (this.range) {
-                this.handleSelectRangeDate(date);
-            } else if (this.multiple) {
-                this.handleSelectMultipleDates(date);
-            }
-        },
-
-        /*
-         * If both begin and end dates are set, reset the end date and set the begin date.
-         * If only begin date is selected, emit an array of the begin date and the new date.
-         * If not set, only set the begin date.
-         */
-        handleSelectRangeDate(date) {
-            if (this.selectedBeginDate && this.selectedEndDate) {
-                this.selectedBeginDate = date;
-                this.selectedEndDate = undefined;
-                this.$emit("range-start", date);
-            } else if (this.selectedBeginDate && !this.selectedEndDate) {
-                if (this.selectedBeginDate > date) {
-                    this.selectedEndDate = this.selectedBeginDate;
-                    this.selectedBeginDate = date;
-                } else {
-                    this.selectedEndDate = date;
-                }
-                this.$emit("range-end", date);
-                this.$emit("update:modelValue", [
-                    this.selectedBeginDate,
-                    this.selectedEndDate,
-                ]);
-            } else {
-                this.selectedBeginDate = date;
-                this.$emit("range-start", date);
-            }
-        },
-
-        /*
-         * If selected date already exists list of selected dates, remove it from the list
-         * Otherwise, add date to list of selected dates
-         */
-        handleSelectMultipleDates(date) {
-            let multipleSelectedDates = this.modelValue;
-            const multipleSelect = multipleSelectedDates.filter(
-                (selectedDate) =>
-                    selectedDate.getDate() === date.getDate() &&
-                    selectedDate.getFullYear() === date.getFullYear() &&
-                    selectedDate.getMonth() === date.getMonth(),
-            );
-            if (multipleSelect.length) {
-                multipleSelectedDates = multipleSelectedDates.filter(
-                    (selectedDate) =>
-                        selectedDate.getDate() !== date.getDate() ||
-                        selectedDate.getFullYear() !== date.getFullYear() ||
-                        selectedDate.getMonth() !== date.getMonth(),
-                );
-            } else {
-                multipleSelectedDates = [...multipleSelectedDates, date];
-            }
-            this.$emit("update:modelValue", multipleSelectedDates);
-        },
-
-        /*
-         * Return array of all days in the week that the startingDate is within
-         */
-        weekBuilder(startingDate, month, year) {
-            const thisMonth = new Date(year, month);
-
-            const thisWeek = [];
-
-            const dayOfWeek = new Date(year, month, startingDate).getDay();
-
-            const end =
-                dayOfWeek >= this.firstDayOfWeek
-                    ? dayOfWeek - this.firstDayOfWeek
-                    : 7 - this.firstDayOfWeek + dayOfWeek;
-
-            let daysAgo = 1;
-            for (let i = 0; i < end; i++) {
-                thisWeek.unshift(
-                    new Date(
-                        thisMonth.getFullYear(),
-                        thisMonth.getMonth(),
-                        startingDate - daysAgo,
-                    ),
-                );
-                daysAgo++;
-            }
-
-            thisWeek.push(new Date(year, month, startingDate));
-
-            let daysForward = 1;
-            while (thisWeek.length < 7) {
-                thisWeek.push(
-                    new Date(year, month, startingDate + daysForward),
-                );
-                daysForward++;
-            }
-
-            return thisWeek;
-        },
-
-        validateFocusedDay() {
-            const focusedDate = new Date(
-                this.focused.year,
-                this.focused.month,
-                this.focused.day,
-            );
-            if (this.selectableDate(focusedDate)) return;
-
-            let day = 0;
-            // Number of days in the current month
-            const monthDays = new Date(
-                this.focused.year,
-                this.focused.month + 1,
-                0,
-            ).getDate();
-            let firstFocusable = null;
-            while (!firstFocusable && ++day < monthDays) {
-                const date = new Date(
-                    this.focused.year,
-                    this.focused.month,
-                    day,
-                );
-                if (this.selectableDate(date)) {
-                    firstFocusable = focusedDate;
-
-                    const focused = {
-                        day: date.getDate(),
-                        month: date.getMonth(),
-                        year: date.getFullYear(),
-                    };
-                    this.$emit("update:focused", focused);
-                }
-            }
-        },
-
-        /*
-         * Check that selected day is within earliest/latest params and
-         * is within this month
-         */
-        selectableDate(day) {
-            const validity = [];
-
-            if (this.minDate) {
-                validity.push(day >= this.minDate);
-            }
-
-            if (this.maxDate) {
-                validity.push(day <= this.maxDate);
-            }
-
-            if (this.nearbyMonthDays && !this.nearbySelectableMonthDays) {
-                validity.push(day.getMonth() === this.focused.month);
-            }
-
-            if (this.selectableDates) {
-                for (let i = 0; i < this.selectableDates.length; i++) {
-                    const enabledDate = this.selectableDates[i];
-                    if (
-                        day.getDate() === enabledDate.getDate() &&
-                        day.getFullYear() === enabledDate.getFullYear() &&
-                        day.getMonth() === enabledDate.getMonth()
-                    ) {
-                        return true;
-                    } else {
-                        validity.push(false);
-                    }
-                }
-            }
-
-            if (this.unselectableDates) {
-                for (let i = 0; i < this.unselectableDates.length; i++) {
-                    const disabledDate = this.unselectableDates[i];
-                    validity.push(
-                        day.getDate() !== disabledDate.getDate() ||
-                            day.getFullYear() !== disabledDate.getFullYear() ||
-                            day.getMonth() !== disabledDate.getMonth(),
-                    );
-                }
-            }
+    focusedDate: { type: Object as PropType<FocusedDate>, required: true },
+    dayNames: { type: Array as PropType<string[]>, required: true },
+    monthNames: { type: Array as PropType<string[]>, required: true },
+    pickerProps: {
+        type: Object as PropType<DatepickerProps>,
+        required: true,
+    },
+});
 
-            if (this.unselectableDaysOfWeek) {
-                for (let i = 0; i < this.unselectableDaysOfWeek.length; i++) {
-                    const dayOfWeek = this.unselectableDaysOfWeek[i];
-                    validity.push(day.getDay() !== dayOfWeek);
-                }
-            }
+const emits = defineEmits<{
+    /** modelValue prop two-way binding */
+    (e: "update:modelValue", value: Date | Date[]): void;
+    /** focusedDate prop two-way binding */
+    (e: "update:focusedDate", value: FocusedDate): void;
+    (e: "range-start", value: Date): void;
+    (e: "range-end", value: Date): void;
+    (e: "week-number-click", value: number): void;
+}>();
+
+const { isDateSelectable } = useDatepickerShare(props.pickerProps);
+
+const selectedBeginDate = ref<Date>();
+const selectedEndDate = ref<Date>();
+const hoveredEndDate = ref<Date>();
+
+const datepicker = computed<DatepickerProps>(() => props.pickerProps);
+
+const visibleDayNames = computed(() => {
+    const visibleDayNames = [];
+    let index = datepicker.value.firstDayOfWeek;
+    while (visibleDayNames.length < props.dayNames.length) {
+        const currentDayName = props.dayNames[index % props.dayNames.length];
+        visibleDayNames.push(currentDayName);
+        index++;
+    }
+    if (datepicker.value.showWeekNumber) visibleDayNames.unshift("");
+    return visibleDayNames;
+});
 
-            return validity.indexOf(false) < 0;
-        },
+/** Return array of all events in the specified month */
+const eventsInThisMonth = computed(() => {
+    if (!datepicker.value.events) return [];
+    return datepicker.value.events
+        .map((event) =>
+            !event.date && event instanceof Date ? { date: event } : event,
+        )
+        .filter(
+            (event) =>
+                event.date.getMonth() === props.focusedDate.month &&
+                event.date.getFullYear() === props.focusedDate.year,
+        );
+});
 
-        eventsInThisWeek(week) {
-            return this.eventsInThisMonth.filter((event) => {
-                const stripped = new Date(Date.parse(event.date));
-                stripped.setHours(0, 0, 0, 0);
-                const timed = stripped.getTime();
+/** Return array of all weeks in the specified month */
+const weeksInThisMonth = computed(() => {
+    validateFocusedDay();
+    const month = props.focusedDate.month;
+    const year = props.focusedDate.year;
+    const weeksInThisMonth = [];
+
+    let startingDay = 1;
+
+    while (weeksInThisMonth.length < 6) {
+        const newWeek = weekBuilder(
+            startingDay,
+            month,
+            year,
+            datepicker.value.firstDayOfWeek,
+        );
+        weeksInThisMonth.push(newWeek);
+        startingDay += 7;
+    }
+
+    return weeksInThisMonth;
+});
 
-                return week.some((weekDate) => weekDate.getTime() === timed);
-            });
-        },
+function eventsInThisWeek(week: Date[]): DatepickerEvent[] {
+    if (!datepicker.value.events) return [];
+    return eventsInThisMonth.value.filter((event) => {
+        const stripped = new Date(event.date);
+        stripped.setHours(0, 0, 0, 0);
+        const timed = stripped.getTime();
+        return week.some((weekDate) => weekDate.getTime() === timed);
+    });
+}
+
+const hoveredDateRange = computed(() => {
+    if (!datepicker.value.range || selectedEndDate.value) return [];
+    return (
+        hoveredEndDate.value < selectedBeginDate.value
+            ? [hoveredEndDate.value, selectedBeginDate.value]
+            : [selectedBeginDate.value, hoveredEndDate.value]
+    ).filter(isDefined);
+});
 
-        setRangeHoverEndDate(day) {
-            this.hoveredEndDate = day;
-        },
+function validateFocusedDay(): void {
+    const focusedDate = new Date(
+        props.focusedDate.year,
+        props.focusedDate.month,
+        props.focusedDate.day,
+    );
+    if (isDateSelectable(focusedDate, props.focusedDate.month)) return;
+
+    let day = 0;
+    // Number of days in the current month
+    const monthDays = new Date(
+        props.focusedDate.year,
+        props.focusedDate.month + 1,
+        0,
+    ).getDate();
+    let firstFocusable = null;
+    while (!firstFocusable && ++day < monthDays) {
+        const date = new Date(
+            props.focusedDate.year,
+            props.focusedDate.month,
+            day,
+        );
+        if (isDateSelectable(date, props.focusedDate.month)) {
+            firstFocusable = focusedDate;
 
-        changeFocus(day) {
             const focused = {
-                day: day.getDate(),
-                month: day.getMonth(),
-                year: day.getFullYear(),
+                day: date.getDate(),
+                month: date.getMonth(),
+                year: date.getFullYear(),
             };
-            this.$emit("update:focused", focused);
-        },
-    },
-});
+            emits("update:focusedDate", focused);
+        }
+    }
+}
+
+// --- Events ---
+
+/** Emit input event with selected date as payload for v-model in parent */
+function onSelectedDate(date: Date): void {
+    if (datepicker.value.disabled) return;
+    if (!datepicker.value.range && !datepicker.value.multiple)
+        emits("update:modelValue", date);
+    else if (datepicker.value.range) handleSelectRangeDate(date);
+    else if (datepicker.value.multiple) handleSelectMultipleDates(date);
+}
+
+/*
+ * If both begin and end dates are set, reset the end date and set the begin date.
+ * If only begin date is selected, emit an array of the begin date and the new date.
+ * If not set, only set the begin date.
+ */
+function handleSelectRangeDate(date: Date): void {
+    if (selectedBeginDate.value && selectedEndDate.value) {
+        selectedBeginDate.value = date;
+        selectedEndDate.value = undefined;
+        emits("range-start", date);
+    } else if (selectedBeginDate.value && !selectedEndDate.value) {
+        if (selectedBeginDate.value > date) {
+            selectedEndDate.value = selectedBeginDate.value;
+            selectedBeginDate.value = date;
+        } else {
+            selectedEndDate.value = date;
+        }
+        emits("range-end", date);
+        emits("update:modelValue", [
+            selectedBeginDate.value,
+            selectedEndDate.value,
+        ]);
+    } else {
+        selectedBeginDate.value = date;
+        emits("range-start", date);
+    }
+}
+
+/*
+ * If selected date already exists list of selected dates, remove it from the list
+ * Otherwise, add date to list of selected dates
+ */
+function handleSelectMultipleDates(date: Date): void {
+    if (!Array.isArray(props.modelValue)) return;
+
+    let multipleSelectedDates = props.modelValue;
+    const multipleSelect = multipleSelectedDates.filter(
+        (selectedDate) =>
+            selectedDate.getDate() === date.getDate() &&
+            selectedDate.getFullYear() === date.getFullYear() &&
+            selectedDate.getMonth() === date.getMonth(),
+    );
+    if (multipleSelect.length) {
+        multipleSelectedDates = multipleSelectedDates.filter(
+            (selectedDate) =>
+                selectedDate.getDate() !== date.getDate() ||
+                selectedDate.getFullYear() !== date.getFullYear() ||
+                selectedDate.getMonth() !== date.getMonth(),
+        );
+    } else {
+        multipleSelectedDates = [...multipleSelectedDates, date];
+    }
+    emits("update:modelValue", multipleSelectedDates);
+}
+
+function onRangeHoverEndDate(date: Date): void {
+    hoveredEndDate.value = date;
+}
+
+function onChangeFocus(date: Date): void {
+    const focused = {
+        day: date.getDate(),
+        month: date.getMonth(),
+        year: date.getFullYear(),
+    };
+    emits("update:focusedDate", focused);
+}
+
+// --- Computed Component Classes ---
+
+const tableClasses = computed(() => [
+    useComputedClass("tableClass", "o-dpck__table"),
+]);
+
+const tableHeadClasses = computed(() => [
+    useComputedClass("tableHeadClass", "o-dpck__table__head"),
+]);
+
+const tableCellClasses = computed(() => [
+    useComputedClass("tableCellClass", "o-dpck__table__cell"),
+]);
+
+const tableHeadCellClasses = computed(() => [
+    useComputedClass("tableHeadCellClass", "o-dpck__table__head-cell"),
+    ...tableCellClasses.value,
+]);
+
+const tableBodyClasses = computed(() => [
+    useComputedClass("tableBodyClass", "o-dpck__table__body"),
+]);
 </script>
 
 <template>
@@ -407,49 +269,16 @@ export default defineComponent({
                 v-for="(week, index) in weeksInThisMonth"
                 :key="index"
                 :selected-date="modelValue"
-                :day="focused.day"
+                :day="focusedDate.day"
                 :week="week"
-                :month="focused.month"
-                :min-date="minDate"
-                :max-date="maxDate"
-                :disabled="disabled"
-                :unselectable-dates="unselectableDates"
-                :unselectable-days-of-week="unselectableDaysOfWeek"
-                :selectable-dates="selectableDates"
+                :month="focusedDate.month"
                 :events="eventsInThisWeek(week)"
-                :indicators="indicators"
-                :date-creator="dateCreator"
-                :nearby-month-days="nearbyMonthDays"
-                :nearby-selectable-month-days="nearbySelectableMonthDays"
-                :show-week-number="showWeekNumber"
-                :week-number-clickable="weekNumberClickable"
-                :first-day-of-week="firstDayOfWeek"
-                :rules-for-first-week="rulesForFirstWeek"
-                :range="range"
                 :hovered-date-range="hoveredDateRange"
-                :multiple="multiple"
-                :table-row-class="tableRowClass"
-                :table-cell-class="tableCellClass"
-                :table-cell-selected-class="tableCellSelectedClass"
-                :table-cell-first-selected-class="tableCellFirstSelectedClass"
-                :table-cell-invisible-class="tableCellInvisibleClass"
-                :table-cell-within-selected-class="tableCellWithinSelectedClass"
-                :table-cell-last-selected-class="tableCellLastSelectedClass"
-                :table-cell-first-hovered-class="tableCellFirstHoveredClass"
-                :table-cell-within-hovered-class="tableCellWithinHoveredClass"
-                :table-cell-last-hovered-class="tableCellLastHoveredClass"
-                :table-cell-today-class="tableCellTodayClass"
-                :table-cell-selectable-class="tableCellSelectableClass"
-                :table-cell-unselectable-class="tableCellUnselectableClass"
-                :table-cell-nearby-class="tableCellNearbyClass"
-                :table-cell-events-class="tableCellEventsClass"
-                :table-events-class="tableEventsClass"
-                :table-event-variant-class="tableEventVariantClass"
-                :table-event-class="tableEventClass"
-                :table-event-indicators-class="tableEventIndicatorsClass"
-                @select="updateSelectedDate"
-                @rangeHoverEndDate="setRangeHoverEndDate"
-                @change-focus="changeFocus" />
+                :picker-props="props.pickerProps"
+                @select="onSelectedDate"
+                @hover-enddate="onRangeHoverEndDate"
+                @change-focus="onChangeFocus"
+                @week-number-click="$emit('week-number-click', $event)" />
         </div>
     </section>
 </template>
diff --git a/packages/oruga-next/src/components/datepicker/DatepickerTableRow.vue b/packages/oruga-next/src/components/datepicker/DatepickerTableRow.vue
index 7e1277574..5bd82446d 100644
--- a/packages/oruga-next/src/components/datepicker/DatepickerTableRow.vue
+++ b/packages/oruga-next/src/components/datepicker/DatepickerTableRow.vue
@@ -1,511 +1,394 @@
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
+<script setup lang="ts">
+import {
+    computed,
+    watch,
+    nextTick,
+    ref,
+    type PropType,
+    type ComponentPublicInstance,
+} from "vue";
+import { useComputedClass } from "@/composables";
+import {
+    useDatepickerShare,
+    type DatepickerProps,
+    type DatepickerEvent,
+} from "./useDatepickerShare";
+import { weeksInYear, firstWeekOffset } from "./datepickerUtils";
+import type { BindProp } from "@/types";
 
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-
-export default defineComponent({
+defineOptions({
     name: "ODatepickerTableRow",
-    mixins: [BaseComponentMixin],
     configField: "datepicker",
-    inject: {
-        $datepicker: { from: "$datepicker", default: false },
-    },
-    emits: ["select", "rangeHoverEndDate", "change-focus"],
-    props: {
-        selectedDate: {
-            type: [Date, Array],
-        },
-        hoveredDateRange: Array,
-        day: {
-            type: Number,
-        },
-        week: {
-            type: Array as PropType<Array<Date>>,
-            required: true,
-        },
-        month: {
-            type: Number,
-            required: true,
-        },
-        showWeekNumber: Boolean,
-        minDate: Date,
-        maxDate: Date,
-        disabled: Boolean,
-        unselectableDates: Array,
-        unselectableDaysOfWeek: Array,
-        selectableDates: Array,
-        events: Array,
-        indicators: String,
-        dateCreator: Function,
-        nearbyMonthDays: Boolean,
-        nearbySelectableMonthDays: Boolean,
-        weekNumberClickable: Boolean,
-        range: Boolean,
-        multiple: Boolean,
-        rulesForFirstWeek: Number,
-        firstDayOfWeek: Number,
-        tableRowClass: [String, Function, Array],
-        tableCellClass: [String, Function, Array],
-        tableCellSelectedClass: [String, Function, Array],
-        tableCellFirstSelectedClass: [String, Function, Array],
-        tableCellWithinSelectedClass: [String, Function, Array],
-        tableCellLastSelectedClass: [String, Function, Array],
-        tableCellFirstHoveredClass: [String, Function, Array],
-        tableCellInvisibleClass: [String, Function, Array],
-        tableCellWithinHoveredClass: [String, Function, Array],
-        tableCellLastHoveredClass: [String, Function, Array],
-        tableCellTodayClass: [String, Function, Array],
-        tableCellSelectableClass: [String, Function, Array],
-        tableCellUnselectableClass: [String, Function, Array],
-        tableCellNearbyClass: [String, Function, Array],
-        tableCellEventsClass: [String, Function, Array],
-        tableEventClass: [String, Function, Array],
-        tableEventIndicatorsClass: [String, Function, Array],
-        tableEventsClass: [String, Function, Array],
-        tableEventVariantClass: [String, Function, Array],
-    },
-    computed: {
-        tableRowClasses() {
-            return [this.computedClass("tableRowClass", "o-dpck__table__row")];
-        },
-        tableCellClasses() {
-            return [
-                this.computedClass("tableCellClass", "o-dpck__table__cell"),
-            ];
-        },
-        tableEventsClasses() {
-            return [
-                this.computedClass("tableEventsClass", "o-dpck__table__events"),
-            ];
-        },
-        hasEvents() {
-            return this.events && this.events.length;
-        },
+});
+
+const props = defineProps({
+    day: { type: Number, required: true },
+    week: { type: Array as PropType<Date[]>, required: true },
+    month: { type: Number, required: true },
+    selectedDate: {
+        type: [Date, Array] as PropType<Date | Date[]>,
+        default: undefined,
     },
-    watch: {
-        day(day) {
-            const refName = `day-${this.month}-${day}`;
-            this.$nextTick(() => {
-                if (this.$refs[refName] && this.$refs[refName].length > 0) {
-                    if (this.$refs[refName][0]) {
-                        this.$refs[refName][0].focus();
-                    }
-                }
-            }); // $nextTick needed when month is changed
-        },
+    events: { type: Array as PropType<DatepickerEvent[]>, default: undefined },
+    hoveredDateRange: { type: Array as PropType<Date[]>, default: () => [] },
+    pickerProps: {
+        type: Object as PropType<DatepickerProps>,
+        required: true,
     },
-    methods: {
-        firstWeekOffset(year, dow, doy) {
-            // first-week day -- which january is always in the first week (4 for iso, 1 for other)
-            const fwd = 7 + dow - doy;
-            // first-week day local weekday -- which local weekday is fwd
-            const firstJanuary = new Date(year, 0, fwd);
-            const fwdlw = (7 + firstJanuary.getDay() - dow) % 7;
-            return -fwdlw + fwd - 1;
-        },
-        daysInYear(year) {
-            return this.isLeapYear(year) ? 366 : 365;
-        },
-        isLeapYear(year) {
-            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
-        },
-        getSetDayOfYear(input) {
-            return (
-                Math.round(
-                    (input.getTime() -
-                        new Date(input.getFullYear(), 0, 1).getTime()) /
-                        864e5,
-                ) + 1
-            );
-        },
-        weeksInYear(year, dow, doy) {
-            const weekOffset = this.firstWeekOffset(year, dow, doy);
-            const weekOffsetNext = this.firstWeekOffset(year + 1, dow, doy);
-            return (this.daysInYear(year) - weekOffset + weekOffsetNext) / 7;
-        },
-        getWeekNumber(mom) {
-            const dow = this.firstDayOfWeek; // first day of week
-            // Rules for the first week : 1 for the 1st January, 4 for the 4th January
-            const doy = this.rulesForFirstWeek;
-            const weekOffset = this.firstWeekOffset(
-                mom.getFullYear(),
-                dow,
-                doy,
-            );
-            const week =
-                Math.floor((this.getSetDayOfYear(mom) - weekOffset - 1) / 7) +
-                1;
-            let resWeek;
-            let resYear;
-            if (week < 1) {
-                resYear = mom.getFullYear() - 1;
-                resWeek = week + this.weeksInYear(resYear, dow, doy);
-            } else if (week > this.weeksInYear(mom.getFullYear(), dow, doy)) {
-                resWeek = week - this.weeksInYear(mom.getFullYear(), dow, doy);
-                resYear = mom.getFullYear() + 1;
-            } else {
-                resYear = mom.getFullYear();
-                resWeek = week;
-            }
+});
 
-            return resWeek;
-        },
-        clickWeekNumber(week) {
-            if (this.weekNumberClickable) {
-                this.$datepicker.$emit("week-number-click", week);
-            }
-        },
-        /*
-         * Check that selected day is within earliest/latest params and
-         * is within this month
-         */
-        selectableDate(day) {
-            const validity = [];
+const emits = defineEmits<{
+    (e: "select", value: Date): void;
+    (e: "hover-enddate", value: Date): void;
+    (e: "change-focus", value: Date): void;
+    (e: "week-number-click", value: number): void;
+}>();
 
-            if (this.minDate) {
-                validity.push(day >= this.minDate);
-            }
+const { isDateSelectable } = useDatepickerShare(props.pickerProps);
 
-            if (this.maxDate) {
-                validity.push(day <= this.maxDate);
-            }
+const datepicker = computed<DatepickerProps>(() => props.pickerProps);
 
-            if (this.nearbyMonthDays && !this.nearbySelectableMonthDays) {
-                validity.push(day.getMonth() === this.month);
-            }
+const hasEvents = computed(() => !!props.events?.length);
 
-            if (this.selectableDates) {
-                for (let i = 0; i < this.selectableDates.length; i++) {
-                    const enabledDate = this.selectableDates[i];
-                    if (
-                        day.getDate() === enabledDate.getDate() &&
-                        day.getFullYear() === enabledDate.getFullYear() &&
-                        day.getMonth() === enabledDate.getMonth()
-                    ) {
-                        return true;
-                    } else {
-                        validity.push(false);
-                    }
-                }
-            }
+const dayRefs = ref(new Map());
 
-            if (this.unselectableDates) {
-                for (let i = 0; i < this.unselectableDates.length; i++) {
-                    const disabledDate = this.unselectableDates[i];
-                    validity.push(
-                        day.getDate() !== disabledDate.getDate() ||
-                            day.getFullYear() !== disabledDate.getFullYear() ||
-                            day.getMonth() !== disabledDate.getMonth(),
-                    );
-                }
-            }
+function setDayRef(date: Date, el: Element | ComponentPublicInstance): void {
+    const refKey = `day-${date.getMonth()}-${date.getDate()}`;
+    if (el) dayRefs.value.set(refKey, el);
+}
 
-            if (this.unselectableDaysOfWeek) {
-                for (let i = 0; i < this.unselectableDaysOfWeek.length; i++) {
-                    const dayOfWeek = this.unselectableDaysOfWeek[i];
-                    validity.push(day.getDay() !== dayOfWeek);
-                }
+watch(
+    () => props.day,
+    (day) => {
+        const refKey = `day-${props.month}-${day}`;
+        nextTick(() => {
+            // $nextTick is needed when month is changed
+            const ref = dayRefs.value.get(refKey);
+            if (ref?.length > 0 && ref[0]) {
+                ref[0].focus();
             }
+        });
+    },
+);
 
-            return validity.indexOf(false) < 0;
-        },
+function clickWeekNumber(week: number): void {
+    if (datepicker.value.weekNumberClickable) emits("week-number-click", week);
+}
 
-        /*
-         * Emit select event with chosen date as payload
-         */
-        emitChosenDate(day) {
-            if (this.disabled) return;
+function getSetDayOfYear(input): number {
+    return (
+        Math.round(
+            (input.getTime() - new Date(input.getFullYear(), 0, 1).getTime()) /
+                864e5,
+        ) + 1
+    );
+}
 
-            if (this.selectableDate(day)) {
-                this.$emit("select", day);
-            }
-        },
+function getWeekNumber(mom): number {
+    const dow = datepicker.value.firstDayOfWeek; // first day of week
+    // Rules for the first week : 1 for the 1st January, 4 for the 4th January
+    const doy = datepicker.value.rulesForFirstWeek;
+    const weekOffset = firstWeekOffset(mom.getFullYear(), dow, doy);
+    const week = Math.floor((getSetDayOfYear(mom) - weekOffset - 1) / 7) + 1;
+    let resWeek;
+    let resYear;
+    if (week < 1) {
+        resYear = mom.getFullYear() - 1;
+        resWeek = week + weeksInYear(resYear, dow, doy);
+    } else if (week > weeksInYear(mom.getFullYear(), dow, doy)) {
+        resWeek = week - weeksInYear(mom.getFullYear(), dow, doy);
+        resYear = mom.getFullYear() + 1;
+    } else {
+        resYear = mom.getFullYear();
+        resWeek = week;
+    }
+    return resWeek;
+}
 
-        eventsDateMatch(day) {
-            if (!this.events || !this.events.length) return false;
+function eventsDateMatch(day: Date): DatepickerEvent[] {
+    if (!props.events?.length) return [];
+    return props.events.filter((event) => event.date.getDay() === day.getDay());
+}
 
-            const dayEvents = [];
+// --- Events ---
 
-            for (let i = 0; i < this.events.length; i++) {
-                if (this.events[i].date.getDay() === day.getDay()) {
-                    dayEvents.push(this.events[i]);
-                }
-            }
+function onKeydown(event: KeyboardEvent, weekDay: Date): void {
+    let preventDefault = true;
+    switch (event.key) {
+        case "Tab": {
+            preventDefault = false;
+            break;
+        }
+        case " ":
+        case "Space":
+        case "Spacebar":
+        case "Enter": {
+            selectDate(weekDay);
+            break;
+        }
 
-            if (!dayEvents.length) {
-                return false;
-            }
+        case "ArrowLeft":
+        case "Left": {
+            changeFocus(weekDay, -1);
+            break;
+        }
+        case "ArrowRight":
+        case "Right": {
+            changeFocus(weekDay, 1);
+            break;
+        }
+        case "ArrowUp":
+        case "Up": {
+            changeFocus(weekDay, -7);
+            break;
+        }
+        case "ArrowDown":
+        case "Down": {
+            changeFocus(weekDay, 7);
+            break;
+        }
+    }
+    if (preventDefault) event.preventDefault();
+}
 
-            return dayEvents;
-        },
+/** Emit select event with chosen date as payload */
+function selectDate(date: Date): void {
+    if (datepicker.value.disabled) return;
+    if (isDateSelectable(date, props.month)) emits("select", date);
+}
 
-        /*
-         * Build cellClasses for cell using validations
-         */
-        cellClasses(day) {
-            function dateMatch(dateOne, dateTwo, multiple = false) {
-                // if either date is null or undefined, return false
-                // if using multiple flag, return false
-                if (!dateOne || !dateTwo || multiple) {
-                    return false;
-                }
+function changeFocus(day, inc): void {
+    const nextDay = new Date(day.getTime());
+    nextDay.setDate(day.getDate() + inc);
+    while (
+        (!datepicker.value.minDate || nextDay > datepicker.value.minDate) &&
+        (!datepicker.value.maxDate || nextDay < datepicker.value.maxDate) &&
+        !isDateSelectable(nextDay, props.month)
+    ) {
+        nextDay.setDate(day.getDate() + Math.sign(inc));
+    }
+    setRangeHoverEndDate(nextDay);
+    emits("change-focus", nextDay);
+}
 
-                if (Array.isArray(dateTwo)) {
-                    return dateTwo.some(
-                        (date) =>
-                            dateOne.getDate() === date.getDate() &&
-                            dateOne.getFullYear() === date.getFullYear() &&
-                            dateOne.getMonth() === date.getMonth(),
-                    );
-                }
-                return (
-                    dateOne.getDate() === dateTwo.getDate() &&
-                    dateOne.getFullYear() === dateTwo.getFullYear() &&
-                    dateOne.getMonth() === dateTwo.getMonth()
-                );
-            }
+function setRangeHoverEndDate(day): void {
+    if (datepicker.value.range) emits("hover-enddate", day);
+}
 
-            function dateWithin(dateOne, dates, multiple = false) {
-                if (!Array.isArray(dates) || multiple) {
-                    return false;
-                }
+// --- Computed Component Classes ---
 
-                return dateOne > dates[0] && dateOne < dates[1];
-            }
+/** Build cellClasses for cell using validations */
+function cellClasses(day: Date): BindProp {
+    function dateMatch(dateOne, dateTwo, multiple = false): boolean {
+        // if either date is null or undefined, return false
+        // if using multiple flag, return false
+        if (!dateOne || !dateTwo || multiple) return false;
 
-            return [
-                ...this.tableCellClasses,
-                {
-                    [this.computedClass(
-                        "tableCellSelectedClass",
-                        "o-dpck__table__cell--selected",
-                    )]:
-                        dateMatch(day, this.selectedDate) ||
-                        dateWithin(day, this.selectedDate, this.multiple),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellFirstSelectedClass",
-                        "o-dpck__table__cell--first-selected",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.selectedDate) &&
-                            this.selectedDate[0],
-                        this.multiple,
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellWithinSelectedClass",
-                        "o-dpck__table__cell--within-selected",
-                    )]: dateWithin(day, this.selectedDate, this.multiple),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellLastSelectedClass",
-                        "o-dpck__table__cell--last-selected",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.selectedDate) &&
-                            this.selectedDate[1],
-                        this.multiple,
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellFirstHoveredClass",
-                        "o-dpck__table__cell--first-hovered",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.hoveredDateRange) &&
-                            this.hoveredDateRange[0],
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellWithinHoveredClass",
-                        "o-dpck__table__cell--within-hovered",
-                    )]: dateWithin(day, this.hoveredDateRange),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellLastHoveredClass",
-                        "o-dpck__table__cell--last-hovered",
-                    )]: dateMatch(
-                        day,
-                        Array.isArray(this.hoveredDateRange) &&
-                            this.hoveredDateRange[1],
-                    ),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellTodayClass",
-                        "o-dpck__table__cell--today",
-                    )]: dateMatch(day, this.dateCreator()),
-                },
-                {
-                    [this.computedClass(
-                        "tableCellSelectableClass",
-                        "o-dpck__table__cell--selectable",
-                    )]: this.selectableDate(day) && !this.disabled,
-                },
-                {
-                    [this.computedClass(
-                        "tableCellUnselectableClass",
-                        "o-dpck__table__cell--unselectable",
-                    )]: !this.selectableDate(day) || this.disabled,
-                },
-                {
-                    [this.computedClass(
-                        "tableCellInvisibleClass",
-                        "o-dpck__table__cell--invisible",
-                    )]: !this.nearbyMonthDays && day.getMonth() !== this.month,
-                },
-                {
-                    [this.computedClass(
-                        "tableCellNearbyClass",
-                        "o-dpck__table__cell--nearby",
-                    )]:
-                        this.nearbySelectableMonthDays &&
-                        day.getMonth() !== this.month,
-                },
-                {
-                    [this.computedClass(
-                        "tableCellEventsClass",
-                        "o-dpck__table__cell--events",
-                    )]: this.hasEvents,
-                },
-                {
-                    [this.computedClass(
-                        "tableCellTodayClass",
-                        "o-dpck__table__cell--today",
-                    )]: dateMatch(day, this.dateCreator()),
-                },
-            ];
-        },
+        if (Array.isArray(dateTwo)) {
+            return dateTwo.some(
+                (date) =>
+                    dateOne.getDate() === date.getDate() &&
+                    dateOne.getFullYear() === date.getFullYear() &&
+                    dateOne.getMonth() === date.getMonth(),
+            );
+        }
+        return (
+            dateOne.getDate() === dateTwo.getDate() &&
+            dateOne.getFullYear() === dateTwo.getFullYear() &&
+            dateOne.getMonth() === dateTwo.getMonth()
+        );
+    }
+
+    function dateWithin(dateOne, dates, multiple = false): boolean {
+        if (!Array.isArray(dates) || multiple) return false;
+        return dateOne > dates[0] && dateOne < dates[1];
+    }
 
-        eventClasses(event) {
-            return [
-                this.computedClass("tableEventClass", "o-dpck__table__event"),
-                {
-                    [this.computedClass(
-                        "tableEventVariantClass",
-                        "o-dpck__table__event--",
-                        event.type,
-                    )]: event.type,
-                },
-                {
-                    [this.computedClass(
-                        "tableEventIndicatorsClass",
-                        "o-dpck__table__event--",
-                        this.indicators,
-                    )]: this.indicators,
-                },
-            ];
+    return [
+        ...tableCellClasses.value,
+        {
+            [useComputedClass(
+                "tableCellSelectedClass",
+                "o-dpck__table__cell--selected",
+            )]:
+                dateMatch(day, props.selectedDate) ||
+                dateWithin(day, props.selectedDate, datepicker.value.multiple),
+        },
+        {
+            [useComputedClass(
+                "tableCellFirstSelectedClass",
+                "o-dpck__table__cell--first-selected",
+            )]: dateMatch(
+                day,
+                Array.isArray(props.selectedDate) && props.selectedDate[0],
+                datepicker.value.multiple,
+            ),
+        },
+        {
+            [useComputedClass(
+                "tableCellWithinSelectedClass",
+                "o-dpck__table__cell--within-selected",
+            )]: dateWithin(day, props.selectedDate, datepicker.value.multiple),
+        },
+        {
+            [useComputedClass(
+                "tableCellLastSelectedClass",
+                "o-dpck__table__cell--last-selected",
+            )]: dateMatch(
+                day,
+                Array.isArray(props.selectedDate) && props.selectedDate[1],
+                datepicker.value.multiple,
+            ),
+        },
+        {
+            [useComputedClass(
+                "tableCellFirstHoveredClass",
+                "o-dpck__table__cell--first-hovered",
+            )]: dateMatch(
+                day,
+                Array.isArray(props.hoveredDateRange) &&
+                    props.hoveredDateRange[0],
+            ),
+        },
+        {
+            [useComputedClass(
+                "tableCellWithinHoveredClass",
+                "o-dpck__table__cell--within-hovered",
+            )]: dateWithin(day, props.hoveredDateRange),
+        },
+        {
+            [useComputedClass(
+                "tableCellLastHoveredClass",
+                "o-dpck__table__cell--last-hovered",
+            )]: dateMatch(
+                day,
+                Array.isArray(props.hoveredDateRange) &&
+                    props.hoveredDateRange[1],
+            ),
+        },
+        {
+            [useComputedClass(
+                "tableCellTodayClass",
+                "o-dpck__table__cell--today",
+            )]: dateMatch(day, datepicker.value.dateCreator()),
+        },
+        {
+            [useComputedClass(
+                "tableCellSelectableClass",
+                "o-dpck__table__cell--selectable",
+            )]:
+                isDateSelectable(day, props.month) &&
+                !datepicker.value.disabled,
         },
+        {
+            [useComputedClass(
+                "tableCellUnselectableClass",
+                "o-dpck__table__cell--unselectable",
+            )]:
+                !isDateSelectable(day, props.month) ||
+                datepicker.value.disabled,
+        },
+        {
+            [useComputedClass(
+                "tableCellInvisibleClass",
+                "o-dpck__table__cell--invisible",
+            )]:
+                !datepicker.value.nearbyMonthDays &&
+                day.getMonth() !== props.month,
+        },
+        {
+            [useComputedClass(
+                "tableCellNearbyClass",
+                "o-dpck__table__cell--nearby",
+            )]:
+                datepicker.value.nearbySelectableMonthDays &&
+                day.getMonth() !== props.month,
+        },
+        {
+            [useComputedClass(
+                "tableCellEventsClass",
+                "o-dpck__table__cell--events",
+            )]: hasEvents.value,
+        },
+        {
+            [useComputedClass(
+                "tableCellTodayClass",
+                "o-dpck__table__cell--today",
+            )]: dateMatch(day, datepicker.value.dateCreator()),
+        },
+    ];
+}
 
-        setRangeHoverEndDate(day) {
-            if (this.range) {
-                this.$emit("rangeHoverEndDate", day);
-            }
+function eventClasses(event: DatepickerEvent): BindProp {
+    return [
+        useComputedClass("tableEventClass", "o-dpck__table__event"),
+        {
+            [useComputedClass(
+                "tableEventVariantClass",
+                "o-dpck__table__event--",
+                event.type,
+            )]: event.type,
         },
+        {
+            [useComputedClass(
+                "tableEventIndicatorsClass",
+                "o-dpck__table__event--",
+                datepicker.value.indicators,
+            )]: datepicker.value.indicators,
+        },
+    ];
+}
 
-        manageKeydown(event, weekDay) {
-            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
-            const { key } = event;
-            let preventDefault = true;
-            switch (key) {
-                case "Tab": {
-                    preventDefault = false;
-                    break;
-                }
-                case " ":
-                case "Space":
-                case "Spacebar":
-                case "Enter": {
-                    this.emitChosenDate(weekDay);
-                    break;
-                }
+const tableRowClasses = computed(() => [
+    useComputedClass("tableRowClass", "o-dpck__table__row"),
+]);
 
-                case "ArrowLeft":
-                case "Left": {
-                    this.changeFocus(weekDay, -1);
-                    break;
-                }
-                case "ArrowRight":
-                case "Right": {
-                    this.changeFocus(weekDay, 1);
-                    break;
-                }
-                case "ArrowUp":
-                case "Up": {
-                    this.changeFocus(weekDay, -7);
-                    break;
-                }
-                case "ArrowDown":
-                case "Down": {
-                    this.changeFocus(weekDay, 7);
-                    break;
-                }
-            }
-            if (preventDefault) {
-                event.preventDefault();
-            }
-        },
+const tableCellClasses = computed(() => [
+    useComputedClass("tableCellClass", "o-dpck__table__cell"),
+]);
 
-        changeFocus(day, inc) {
-            const nextDay = new Date(day.getTime());
-            nextDay.setDate(day.getDate() + inc);
-            while (
-                (!this.minDate || nextDay > this.minDate) &&
-                (!this.maxDate || nextDay < this.maxDate) &&
-                !this.selectableDate(nextDay)
-            ) {
-                nextDay.setDate(day.getDate() + Math.sign(inc));
-            }
-            this.setRangeHoverEndDate(nextDay);
-            this.$emit("change-focus", nextDay);
-        },
-    },
-});
+const tableEventsClasses = computed(() => [
+    useComputedClass("tableEventsClass", "o-dpck__table__events"),
+]);
 </script>
 
 <template>
     <div :class="tableRowClasses">
         <a
+            v-if="datepicker.showWeekNumber"
             :class="tableCellClasses"
-            :style="{ cursor: weekNumberClickable ? 'pointer' : 'auto' }"
-            v-if="showWeekNumber"
+            :style="{
+                cursor: datepicker.weekNumberClickable ? 'pointer' : 'auto',
+            }"
             @click.prevent="clickWeekNumber(getWeekNumber(week[6]))">
             <span>{{ getWeekNumber(week[6]) }}</span>
         </a>
-        <template v-for="(weekDay, index) in week" :key="index">
+        <template v-for="(weekDay, idx) in week" :key="idx">
             <a
-                :ref="`day-${weekDay.getMonth()}-${weekDay.getDate()}`"
-                v-if="selectableDate(weekDay) && !disabled"
+                v-if="!datepicker.disabled && isDateSelectable(weekDay, month)"
+                :ref="(el) => setDayRef(weekDay, el)"
                 :class="cellClasses(weekDay)"
                 role="button"
                 href="#"
-                :disabled="disabled"
-                @click.prevent="emitChosenDate(weekDay)"
-                @mouseenter="setRangeHoverEndDate(weekDay)"
-                @keydown="manageKeydown($event, weekDay)"
                 :tabindex="
                     day === weekDay.getDate() && month === weekDay.getMonth()
                         ? null
                         : -1
-                ">
+                "
+                @click.prevent="selectDate(weekDay)"
+                @mouseenter="setRangeHoverEndDate(weekDay)"
+                @keydown="onKeydown($event, weekDay)">
                 <span>{{ weekDay.getDate() }}</span>
                 <div
-                    :class="tableEventsClasses"
-                    v-if="eventsDateMatch(weekDay)">
+                    v-if="eventsDateMatch(weekDay).length"
+                    :class="tableEventsClasses">
                     <div
-                        :class="eventClasses(event)"
                         v-for="(event, index) in eventsDateMatch(weekDay)"
-                        :key="index" />
+                        :key="index"
+                        :class="eventClasses(event)" />
                 </div>
             </a>
-            <div v-else :key="index" :class="cellClasses(weekDay)">
+            <div v-else :key="idx" :class="cellClasses(weekDay)">
                 <span>{{ weekDay.getDate() }}</span>
             </div>
         </template>
diff --git a/packages/oruga-next/src/components/datepicker/PickerWrapper.vue b/packages/oruga-next/src/components/datepicker/PickerWrapper.vue
new file mode 100644
index 000000000..2bdc97495
--- /dev/null
+++ b/packages/oruga-next/src/components/datepicker/PickerWrapper.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { computed, useAttrs, type PropType, ref, watch, nextTick } from "vue";
+
+import ODropdown from "../dropdown/Dropdown.vue";
+import ODropdownItem from "../dropdown/DropdownItem.vue";
+import OInput from "../input/Input.vue";
+
+import {
+    useEventListener,
+    useInputHandler,
+    usePropBinding,
+} from "@/composables";
+import { isMobileAgent } from "@/utils/helpers";
+import { isClient } from "@/utils/ssr";
+import type { BindProp } from "@/types";
+
+/**
+ * This is a internal used component.
+ * Used by Datepicker and Timepicker.
+ */
+defineOptions({
+    name: "OPickerWrapper",
+});
+
+const props = defineProps({
+    /** parent picker component props  */
+    pickerProps: { type: Object, required: true },
+    /** The input value */
+    value: { type: [Date, Array], default: undefined },
+    /** The active state of the dropdown */
+    active: { type: Boolean, default: false },
+    formattedValue: { type: String, default: undefined },
+    nativeType: { type: String, required: true },
+    nativeStep: { type: String, default: undefined },
+    nativeValue: { type: [String, Number], default: undefined },
+    nativeMin: { type: [String, Number], default: undefined },
+    nativeMax: { type: [String, Number], default: undefined },
+    stayOpen: { type: Boolean, default: false },
+    dropdownClass: { type: String, required: true },
+    rootClasses: {
+        type: [String, Object] as PropType<BindProp>,
+        required: true,
+    },
+    boxClasses: {
+        type: [String, Object] as PropType<BindProp>,
+        required: true,
+    },
+});
+
+const emits = defineEmits<{
+    /**
+     * active prop two-way binding
+     * @param value {boolean} updated active prop
+     */
+    (e: "update:active", value: boolean): void;
+    /** on value change event */
+    (e: "change", value: string): void;
+    /** on natvie value change event */
+    (e: "native-change", value: string): void;
+    /** on input focus event */
+    (e: "focus", evt: Event): void;
+    /** on input blur event */
+    (e: "blur", evt: Event): void;
+    /** on input invalid event */
+    (e: "invalid", evt: Event): void;
+    /** on icon click event */
+    (e: "icon-click", evt: Event): void;
+    /** on icon right click event */
+    (e: "icon-right-click", evt: Event): void;
+}>();
+
+/** the computed picker contains all chared props from the datepicker and the timepicker  */
+const picker = computed<any>(() => props.pickerProps);
+
+const isMobileNative = computed(
+    () => picker.value.mobileNative && isMobileAgent.any(),
+);
+
+const dropdownRef = ref<InstanceType<typeof ODropdown>>();
+const inputRef = ref<InstanceType<typeof OInput>>();
+const nativeInputRef = ref<InstanceType<typeof OInput>>();
+
+const elementRef = computed(() =>
+    isMobileNative.value ? nativeInputRef.value : inputRef.value,
+);
+
+// use form input functionality for native input
+const { checkHtml5Validity, onBlur, onFocus, onInvalid, isValid, isFocused } =
+    useInputHandler(elementRef, emits, picker.value);
+
+/**
+ * Show input as text for placeholder,
+ * when placeholder and native value is given and input is not focused.
+ */
+const computedNativeType = computed(() =>
+    !picker.value.placeholder || props.nativeValue || isFocused.value
+        ? props.nativeType
+        : "text",
+);
+
+/**
+ * When v-model is changed:
+ *  1. Update internal value.
+ *  2. If it's invalid, validate again.
+ */
+watch(
+    () => props.value,
+    () => {
+        // toggle picker if not stay open
+        if (!props.stayOpen) togglePicker(false);
+        // check validation if native
+        if (isMobileNative.value && !isValid.value) checkHtml5Validity();
+    },
+);
+
+const isActive = usePropBinding<boolean>("active", props, emits, {
+    passive: true,
+});
+
+watch(isActive, onActiveChange);
+
+const ariaRole = computed(() => (!picker.value.inline ? "dialog" : undefined));
+
+const triggers = computed(() => (picker.value.openOnFocus ? ["click"] : []));
+
+if (isClient) useEventListener("keyup", onKeyPress);
+
+/** Keypress event that is bound to the document. */
+function onKeyPress(event: KeyboardEvent): void {
+    if (isActive.value && (event.key === "Escape" || event.key === "Esc"))
+        togglePicker(false);
+}
+
+// --- EVENT HANDLER ---
+
+/** Toggle picker */
+function togglePicker(active: boolean): void {
+    if (isMobileNative.value) {
+        const input = elementRef.value;
+        input.$inputRef.focus();
+        input.$inputRef.click();
+    } else if (dropdownRef.value) {
+        if (active || picker.value.closeOnClick)
+            nextTick(() => (isActive.value = active));
+    }
+}
+
+/** Avoid dropdown toggle when is already visible */
+function onInputClick(event): void {
+    if (isActive.value) event.stopPropagation();
+}
+
+/** Emit 'blur' event on dropdown is not active (closed) */
+function onActiveChange(value: boolean): void {
+    if (value) onFocus();
+    else if (!value) onBlur();
+}
+
+// --- Computed Component Classes ---
+
+const attrs = useAttrs();
+const inputBind = computed(() => ({
+    ...attrs,
+    ...picker.value.inputClasses,
+}));
+
+const dropdownBind = computed(() => ({
+    "root-class": props.dropdownClass,
+    ...picker.value.dropdownClasses,
+}));
+
+// --- Expose Public Functionalities ---
+
+const rootRef = ref();
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => rootRef.value),
+    // expose the input element
+    $inputRef: computed(() => elementRef.value),
+});
+</script>
+
+<template>
+    <div ref="rootRef" :class="rootClasses">
+        <o-dropdown
+            v-if="!isMobileNative || picker.inline"
+            ref="dropdownRef"
+            v-bind="dropdownBind"
+            v-model:active="isActive"
+            :position="picker.position"
+            :disabled="picker.disabled"
+            :inline="picker.inline"
+            :mobile-modal="picker.mobileModal"
+            :trap-focus="picker.trapFocus"
+            :aria-role="ariaRole"
+            :aria-modal="!picker.inline"
+            :trigger-tabindex="-1"
+            :append-to-body="picker.appendToBody"
+            append-to-body-copy-parent
+            :triggers="triggers">
+            <template v-if="!picker.inline" #trigger>
+                <slot name="trigger">
+                    <o-input
+                        ref="inputRef"
+                        v-bind="inputBind"
+                        autocomplete="off"
+                        :model-value="formattedValue"
+                        :placeholder="picker.placeholder"
+                        :size="picker.size"
+                        :icon-pack="picker.iconPack"
+                        :icon="picker.icon"
+                        :icon-right="picker.iconRight"
+                        :icon-right-clickable="picker.iconRightClickable"
+                        :expanded="picker.expanded"
+                        :rounded="picker.rounded"
+                        :disabled="picker.disabled"
+                        :readonly="picker.readonly"
+                        :use-html5-validation="false"
+                        @click="onInputClick"
+                        @keyup.enter="togglePicker(true)"
+                        @change="$emit('change', $event.target.value)"
+                        @focus="onFocus"
+                        @blur="onBlur"
+                        @icon-click="$emit('icon-click', $event)"
+                        @icon-right-click="$emit('icon-right-click', $event)" />
+                </slot>
+            </template>
+            <o-dropdown-item
+                override
+                tag="div"
+                :item-class="boxClasses"
+                :disabled="picker.disabled"
+                :clickable="false">
+                <slot />
+            </o-dropdown-item>
+        </o-dropdown>
+
+        <!-- Native Picker -->
+        <o-input
+            v-else
+            ref="nativeInputRef"
+            v-bind="inputBind"
+            :type="computedNativeType"
+            autocomplete="off"
+            :model-value="nativeValue"
+            :min="nativeMin"
+            :max="nativeMax"
+            :step="nativeStep"
+            :placeholder="picker.placeholder"
+            :size="picker.size"
+            :icon-pack="picker.iconPack"
+            :icon="picker.icon"
+            :icon-right="picker.iconRight"
+            :icon-right-clickable="picker.iconRightClickable"
+            :rounded="picker.rounded"
+            :disabled="picker.disabled"
+            :readonly="false"
+            :use-html5-validation="false"
+            @change="$emit('native-change', $event.target.value)"
+            @focus="onFocus"
+            @blur="onBlur"
+            @invalid="onInvalid"
+            @icon-click="$emit('icon-click', $event)"
+            @icon-right-click="$emit('icon-right-click', $event)" />
+    </div>
+</template>
diff --git a/packages/oruga-next/src/components/datepicker/datepickerUtils.ts b/packages/oruga-next/src/components/datepicker/datepickerUtils.ts
new file mode 100644
index 000000000..ea5ee17c5
--- /dev/null
+++ b/packages/oruga-next/src/components/datepicker/datepickerUtils.ts
@@ -0,0 +1,157 @@
+/**
+ * Return month names according to a specified locale
+ * @param  {String} locale A bcp47 localerouter. undefined will use the user browser locale
+ * @param  {String} format long (ex. March), short (ex. Mar) or narrow (M)
+ * @return {Array<String>} An array of month names
+ */
+type monthType =
+    | "numeric"
+    | "2-digit"
+    | "long"
+    | "short"
+    | "narrow"
+    | undefined;
+
+export function getMonthNames(
+    locale: string = undefined,
+    format: monthType = "long",
+): string[] {
+    const dates = [];
+    for (let i = 0; i < 12; i++) {
+        dates.push(new Date(2000, i, 15));
+    }
+    const dtf = new Intl.DateTimeFormat(locale, {
+        month: format,
+        // timeZone: 'UTC'
+    });
+    return dates.map((d) => dtf.format(d));
+}
+
+/**
+ * Return weekday names according to a specified locale
+ * @param  {String} locale A bcp47 localerouter. undefined will use the user browser locale
+ * @param  {Number} first day of week index
+ * @param  {String} format long (ex. Thursday), short (ex. Thu) or narrow (T)
+ * @return {Array<String>} An array of weekday names
+ */
+
+type weekdayType = "long" | "short" | "narrow" | undefined;
+
+export function getWeekdayNames(
+    locale: string = undefined,
+    firstDayOfWeek: number = 0,
+    format: weekdayType = "narrow",
+): string[] {
+    const dates = [];
+    for (let i = 1, j = 0; j < 7; i++) {
+        const d = new Date(2000, 0, i);
+        const day = d.getDay();
+        if (day === firstDayOfWeek || j > 0) {
+            dates.push(d);
+            j++;
+        }
+    }
+    const dtf = new Intl.DateTimeFormat(locale, {
+        weekday: format,
+        // timeZone: 'UTC'
+    });
+    return dates.map((d) => dtf.format(d));
+}
+
+/**
+ * Accept a regex with group names and return an object
+ * ex. matchWithGroups(/((?!=<year>)\d+)\/((?!=<month>)\d+)\/((?!=<day>)\d+)/, '2000/12/25')
+ * will return { year: 2000, month: 12, day: 25 }
+ * @param  {String} includes injections of (?!={groupname}) for each group
+ * @param  {String} the string to run regex
+ * @return {Object} an object with a property for each group having the group's match as the value
+ */
+export function matchWithGroups(pattern: string, str: string): any {
+    const matches = str.match(pattern);
+    return (
+        pattern
+            // get the pattern as a string
+            .toString()
+            // suss out the groups
+            .match(/<(.+?)>/g)
+            // remove the braces
+            .map((group) => {
+                const groupMatches = group.match(/<(.+)>/);
+                if (!groupMatches || groupMatches.length <= 0) {
+                    return null;
+                }
+                return group.match(/<(.+)>/)[1];
+            })
+            // create an object with a property for each group having the group's match as the value
+            .reduce((acc, curr, index) => {
+                if (matches && matches.length > index) {
+                    acc[curr] = matches[index + 1];
+                } else {
+                    acc[curr] = null;
+                }
+                return acc;
+            }, {})
+    );
+}
+
+/** Return array of all days in the week that the startingDate is within */
+export function weekBuilder(
+    startingDate: number,
+    month: number,
+    year: number,
+    firstDayOfWeek: number,
+): Date[] {
+    const thisMonth = new Date(year, month);
+
+    const thisWeek = [];
+
+    const dayOfWeek = new Date(year, month, startingDate).getDay();
+
+    const end =
+        dayOfWeek >= firstDayOfWeek
+            ? dayOfWeek - firstDayOfWeek
+            : 7 - firstDayOfWeek + dayOfWeek;
+
+    let daysAgo = 1;
+    for (let i = 0; i < end; i++) {
+        thisWeek.unshift(
+            new Date(
+                thisMonth.getFullYear(),
+                thisMonth.getMonth(),
+                startingDate - daysAgo,
+            ),
+        );
+        daysAgo++;
+    }
+
+    thisWeek.push(new Date(year, month, startingDate));
+
+    let daysForward = 1;
+    while (thisWeek.length < 7) {
+        thisWeek.push(new Date(year, month, startingDate + daysForward));
+        daysForward++;
+    }
+
+    return thisWeek;
+}
+
+export function firstWeekOffset(year, dow, doy): number {
+    // first-week day -- which january is always in the first week (4 for iso, 1 for other)
+    const fwd = 7 + dow - doy;
+    // first-week day local weekday -- which local weekday is fwd
+    const firstJanuary = new Date(year, 0, fwd);
+    const fwdlw = (7 + firstJanuary.getDay() - dow) % 7;
+    return -fwdlw + fwd - 1;
+}
+
+/** Return the number of days in a specific year */
+export function daysInYear(year): number {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365;
+}
+
+/** Return the number of weeks in a specific year */
+export function weeksInYear(year, dow, doy): number {
+    const weekOffset = firstWeekOffset(year, dow, doy);
+    const weekOffsetNext = firstWeekOffset(year + 1, dow, doy);
+    return (daysInYear(year) - weekOffset + weekOffsetNext) / 7;
+}
diff --git a/packages/oruga-next/src/components/datepicker/index.ts b/packages/oruga-next/src/components/datepicker/index.ts
index 76225bc21..b0ae3d4b8 100644
--- a/packages/oruga-next/src/components/datepicker/index.ts
+++ b/packages/oruga-next/src/components/datepicker/index.ts
@@ -2,7 +2,9 @@ import type { App, Plugin } from "vue";
 
 import Datepicker from "./Datepicker.vue";
 
-import { registerComponent } from "../../utils/plugins";
+export type { DatepickerEvent, FocusedDate } from "./useDatepickerShare";
+
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/datepicker/useDatepickerShare.ts b/packages/oruga-next/src/components/datepicker/useDatepickerShare.ts
new file mode 100644
index 000000000..7359f162c
--- /dev/null
+++ b/packages/oruga-next/src/components/datepicker/useDatepickerShare.ts
@@ -0,0 +1,182 @@
+import { computed } from "vue";
+import Datepicker from "./Datepicker.vue";
+import { matchWithGroups } from "./datepickerUtils";
+
+export type DatepickerProps = InstanceType<typeof Datepicker>["$props"];
+
+export type DatepickerEvent = {
+    date: Date;
+    type?: string;
+};
+
+export type FocusedDate = {
+    day: number;
+    month: number;
+    year: number;
+};
+
+export function useDatepickerShare(props: DatepickerProps) {
+    /**
+     * Check that selected date is within earliest/latest params and
+     * is within a given month
+     */
+    function isDateSelectable(date: Date, month: number): boolean {
+        const validity = [];
+
+        if (props.minDate) validity.push(date >= props.minDate);
+        if (props.maxDate) validity.push(date <= props.maxDate);
+
+        if (props.nearbyMonthDays && !props.nearbySelectableMonthDays)
+            validity.push(date.getMonth() === month);
+
+        if (props.selectableDates) {
+            if (typeof props.selectableDates === "function") {
+                if (props.selectableDates(date)) return true;
+                else validity.push(false);
+            } else {
+                for (let i = 0; i < props.selectableDates.length; i++) {
+                    const enabledDate = props.selectableDates[i];
+                    if (
+                        date.getDate() === enabledDate.getDate() &&
+                        date.getFullYear() === enabledDate.getFullYear() &&
+                        date.getMonth() === enabledDate.getMonth()
+                    )
+                        return true;
+                    else validity.push(false);
+                }
+            }
+        }
+
+        if (props.unselectableDates) {
+            if (typeof props.unselectableDates === "function") {
+                validity.push(!props.unselectableDates(date));
+            } else {
+                for (let i = 0; i < props.unselectableDates.length; i++) {
+                    const disabledDate = props.unselectableDates[i];
+                    validity.push(
+                        date.getDate() !== disabledDate.getDate() ||
+                            date.getFullYear() !== disabledDate.getFullYear() ||
+                            date.getMonth() !== disabledDate.getMonth(),
+                    );
+                }
+            }
+        }
+
+        if (props.unselectableDaysOfWeek) {
+            for (let i = 0; i < props.unselectableDaysOfWeek.length; i++) {
+                const dayOfWeek = props.unselectableDaysOfWeek[i];
+                validity.push(date.getDay() !== dayOfWeek);
+            }
+        }
+
+        return validity.indexOf(false) < 0;
+    }
+
+    const isTypeMonth = computed(() => props.type === "month");
+
+    const localeOptions = computed(
+        () =>
+            new Intl.DateTimeFormat(props.locale, {
+                year: "numeric",
+                month: "numeric",
+            }).resolvedOptions() as Intl.DateTimeFormatOptions,
+    );
+
+    /** DateTime Format */
+    const dtf = computed(
+        () => new Intl.DateTimeFormat(props.locale /*, { timeZone: 'UTC' }*/),
+    );
+
+    /** DateTime Month Format */
+    const dtfMonth = computed(
+        () =>
+            new Intl.DateTimeFormat(props.locale, {
+                year: localeOptions.value.year || "numeric",
+                month: localeOptions.value.month || "2-digit",
+                // timeZone: 'UTC'
+            }),
+    );
+
+    const sampleTime = computed(() => {
+        const d = props.dateCreator();
+        d.setHours(10);
+        d.setSeconds(0);
+        d.setMinutes(0);
+        d.setMilliseconds(0);
+        return d;
+    });
+
+    /** Format date into string */
+    const defaultDateFormatter = (date: Date | Date[]): string => {
+        if (!date) return "";
+        const targetDates = Array.isArray(date) ? date : [date];
+        const dates = targetDates.map((date) => {
+            const d = new Date(
+                date.getFullYear(),
+                date.getMonth(),
+                date.getDate(),
+                12,
+            );
+            return !isTypeMonth.value
+                ? dtf.value.format(d)
+                : dtfMonth.value.format(d);
+        });
+        return !props.multiple ? dates.join(" - ") : dates.join(", ");
+    };
+
+    /** Parse a string into a date */
+    const defaultDateParser = (date: string): Date => {
+        if (!date) return null;
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const formatRegex = (isTypeMonth.value ? dtfMonth.value : dtf.value)
+                .formatToParts(sampleTime.value)
+                .map((part) => {
+                    if (part.type === "literal") return part.value;
+                    return `((?!=<${part.type}>)\\d+)`;
+                })
+                .join("");
+            const dateGroups = matchWithGroups(formatRegex, date);
+
+            // We do a simple validation for the group.
+            // If it is not valid, it will fallback to Date.parse below
+            if (
+                dateGroups.year &&
+                dateGroups.year.length === 4 &&
+                dateGroups.month &&
+                dateGroups.month <= 12
+            ) {
+                if (isTypeMonth.value)
+                    return new Date(dateGroups.year, dateGroups.month - 1);
+                else if (dateGroups.day && dateGroups.day <= 31) {
+                    return new Date(
+                        dateGroups.year,
+                        dateGroups.month - 1,
+                        dateGroups.day,
+                        12,
+                    );
+                }
+            }
+        }
+        // Fallback if formatToParts is not supported or if we were not able to parse a valid date
+        if (!isTypeMonth.value) return new Date(Date.parse(date));
+        const s = date.split("/");
+        const year = s[0].length === 4 ? s[0] : s[1];
+        const month = s[0].length === 2 ? s[0] : s[1];
+        if (year && month) {
+            return new Date(
+                parseInt(year, 10),
+                parseInt(month, 10) - 1,
+                1,
+                0,
+                0,
+                0,
+                0,
+            );
+        }
+    };
+
+    return { isDateSelectable, defaultDateParser, defaultDateFormatter };
+}
diff --git a/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue b/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue
index 0b54d9edd..ddc612a24 100644
--- a/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue
+++ b/packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue
@@ -1,432 +1,572 @@
-<script lang="ts">
-import FormElementMixin from "../../utils/FormElementMixin";
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import { getValueByPath, isMobile, matchWithGroups } from "../../utils/helpers";
-import { getOptions } from "../../utils/config";
-
-import Datepicker from "../datepicker/Datepicker.vue";
-import Timepicker from "../timepicker/Timepicker.vue";
-import { defineComponent } from "vue";
-
-const AM = "AM";
-const PM = "PM";
+<script setup lang="ts">
+import { computed, ref, watch, type PropType } from "vue";
+import ODatepicker from "../datepicker/Datepicker.vue";
+import OTimepicker from "../timepicker/Timepicker.vue";
+import OInput from "../input/Input.vue";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useInputHandler,
+    usePropBinding,
+} from "@/composables";
+import { isMobileAgent } from "@/utils/helpers";
+import { matchWithGroups } from "../datepicker/datepickerUtils";
+import type { DatepickerProps } from "../datepicker/useDatepickerShare";
+import type { TimepickerProps } from "../timepicker/useTimepickerShare";
 
 /**
  * An input with a simple dropdown/modal for selecting a date and time, uses native datetimepicker for mobile
  * @displayName Datetimepicker
  * @style _datetimepicker.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "ODatetimepicker",
-    components: {
-        [Datepicker.name]: Datepicker,
-        [Timepicker.name]: Timepicker,
-    },
     configField: "datetimepicker",
-    mixins: [FormElementMixin, BaseComponentMixin],
     inheritAttrs: false,
-    props: {
-        modelValue: {
-            type: Date,
-        },
-        editable: {
-            type: Boolean,
-            default: false,
-        },
-        size: String,
-        placeholder: String,
-        disabled: Boolean,
-        iconRight: String,
-        iconRightClickable: Boolean,
-        inline: Boolean,
-        openOnFocus: Boolean,
-        position: String,
-        mobileNative: {
-            type: Boolean,
-            default: true,
-        },
-        minDatetime: Date,
-        maxDatetime: Date,
-        datetimeFormatter: {
-            type: Function,
-        },
-        datetimeParser: {
-            type: Function,
-        },
-        datetimeCreator: {
-            type: Function,
-            default: (date: Date) => {
-                const datetimeCreator = getValueByPath(
-                    getOptions(),
-                    "datetimepicker.datetimeCreator",
-                    undefined,
-                );
-                if (typeof datetimeCreator === "function") {
-                    return datetimeCreator(date);
-                } else {
-                    return date;
-                }
-            },
-        },
-        datepicker: Object,
-        timepicker: Object,
-        locale: {
-            type: [String, Array],
-            default: () => {
-                return getValueByPath(getOptions(), "locale");
-            },
-        },
-        appendToBody: Boolean,
-        datepickerWrapperClass: [String, Function, Array],
-        timepickerWrapperClass: [String, Function, Array],
+});
+
+const AM = "AM";
+const PM = "PM";
+const HOUR_FORMAT_24 = "24";
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: { type: Date, default: undefined },
+    /** The active state of the dropdown */
+    active: { type: Boolean, default: false },
+    /** Define props for the underlying datepicker component */
+    datepicker: {
+        type: Object as PropType<DatepickerProps>,
+        default: undefined,
     },
-    emits: [
-        "update:modelValue",
-        "focus",
-        "blur",
-        "invalid",
-        "change-year",
-        "change-month",
-        "icon-right-click",
-        "active-change",
-    ],
-    data() {
-        return {
-            newValue: this.modelValue,
-        };
+    /** Define props for the underlying timepicker component */
+    timepicker: {
+        type: Object as PropType<TimepickerProps>,
+        default: undefined,
     },
-    computed: {
-        datepickerWrapperClasses() {
-            return [
-                this.computedClass("datepickerWrapperClass", "o-dtpck__date"),
-            ];
-        },
-        timepickerWrapperClasses() {
-            return [
-                this.computedClass("timepickerWrapperClass", "o-dtpck__time"),
-            ];
-        },
-        computedValue: {
-            get() {
-                return this.newValue;
-            },
-            set(value) {
-                if (value) {
-                    let val = new Date(value.getTime());
-                    if (this.newValue) {
-                        // restore time part
-                        if (
-                            (value.getDate() !== this.newValue.getDate() ||
-                                value.getMonth() !== this.newValue.getMonth() ||
-                                value.getFullYear() !==
-                                    this.newValue.getFullYear()) &&
-                            value.getHours() === 0 &&
-                            value.getMinutes() === 0 &&
-                            value.getSeconds() === 0
-                        ) {
-                            val.setHours(
-                                this.newValue.getHours(),
-                                this.newValue.getMinutes(),
-                                this.newValue.getSeconds(),
-                                0,
-                            );
-                        }
-                    } else {
-                        val = this.datetimeCreator(value);
-                    }
-                    // check min and max range
-                    if (this.minDatetime && val < this.minDatetime) {
-                        val = this.minDatetime;
-                    } else if (this.maxDatetime && val > this.maxDatetime) {
-                        val = this.maxDatetime;
-                    }
-                    this.newValue = new Date(val.getTime());
-                } else {
-                    this.newValue = value;
-                }
-                this.$emit("update:modelValue", this.newValue);
-            },
-        },
-        localeOptions() {
-            return new Intl.DateTimeFormat(this.locale, {
-                year: "numeric",
-                month: "numeric",
-                day: "numeric",
-                hour: "numeric",
-                minute: "numeric",
-                second: this.enableSeconds() ? "numeric" : undefined,
-            }).resolvedOptions();
-        },
-        dtf() {
-            return new Intl.DateTimeFormat(this.locale, {
-                year: this.localeOptions.year || "numeric",
-                month: this.localeOptions.month || "numeric",
-                day: this.localeOptions.day || "numeric",
-                hour: this.localeOptions.hour || "numeric",
-                minute: this.localeOptions.minute || "numeric",
-                second: this.enableSeconds()
-                    ? this.localeOptions.second || "numeric"
-                    : undefined,
-                hourCycle: !this.isHourFormat24() ? "h12" : "h23",
-            });
-        },
-        isMobileNative() {
-            return this.mobileNative;
-        },
-        isMobile() {
-            return this.isMobileNative && isMobile.any();
-        },
-        minDate() {
-            if (!this.minDatetime) {
-                return this.datepicker ? this.datepicker.minDate : null;
-            }
-            return new Date(
-                this.minDatetime.getFullYear(),
-                this.minDatetime.getMonth(),
-                this.minDatetime.getDate(),
-                0,
-                0,
-                0,
-                0,
-            );
-        },
-        maxDate() {
-            if (!this.maxDatetime) {
-                return this.datepicker ? this.datepicker.maxDate : null;
-            }
-            return new Date(
-                this.maxDatetime.getFullYear(),
-                this.maxDatetime.getMonth(),
-                this.maxDatetime.getDate(),
-                0,
-                0,
-                0,
-                0,
-            );
-        },
-        // Only enable min/max time if local (not necessarily UTC) date portion matches
-        minTime() {
-            if (
-                !this.minDatetime ||
-                this.newValue === null ||
-                typeof this.newValue === "undefined" ||
-                this.newValue.getFullYear() != this.minDatetime.getFullYear() ||
-                this.newValue.getMonth() != this.minDatetime.getMonth() ||
-                this.newValue.getDate() != this.minDatetime.getDate()
-            ) {
-                return this.timepicker ? this.timepicker.minTime : null;
-            }
-            return this.minDatetime;
-        },
-        maxTime() {
-            if (
-                !this.maxDatetime ||
-                this.newValue === null ||
-                typeof this.newValue === "undefined" ||
-                this.newValue.getFullYear() != this.maxDatetime.getFullYear() ||
-                this.newValue.getMonth() != this.maxDatetime.getMonth() ||
-                this.newValue.getDate() != this.maxDatetime.getDate()
-            ) {
-                return this.timepicker ? this.timepicker.maxTime : null;
-            }
-            return this.maxDatetime;
-        },
-        datepickerSize() {
-            return this.datepicker && this.datepicker.size
-                ? this.datepicker.size
-                : this.size;
-        },
-        timepickerSize() {
-            return this.timepicker && this.timepicker.size
-                ? this.timepicker.size
-                : this.size;
-        },
-        timepickerDisabled() {
-            return this.timepicker && this.timepicker.disabled
-                ? this.timepicker.disabled
-                : this.disabled;
-        },
+    /** Min date to select */
+    minDatetime: { type: Date, default: undefined },
+    /** Max date to select */
+    maxDatetime: { type: Date, default: undefined },
+    /**
+     * Size of the control input, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("datetimepicker.size"),
+    } /** Makes input full width when inside a grouped or addon field */,
+    expanded: { type: Boolean, default: false },
+    /** Makes the input rounded */
+    rounded: { type: Boolean, default: false },
+    /** Input placeholder */
+    placeholder: { type: String, default: undefined },
+    /** Same as native input readonly */
+    readonly: { type: Boolean, default: false },
+    /** Same as native disabled */
+    disabled: { type: Boolean, default: false },
+    /** Display datetimepicker inline */
+    inline: { type: Boolean, default: false },
+    openOnFocus: {
+        type: Boolean,
+        default: () => getOption("datetimepicker.openOnFocus", true),
+    },
+    /** Date format locale */
+    locale: {
+        type: String,
+        default: () => getOption("locale"),
+    },
+    /** Custom function to format a date into a string */
+    datetimeFormatter: {
+        type: Function as PropType<(date: Date) => string>,
+        default: (
+            date: Date | Date[],
+            defaultFunction: (date: Date | Date[]) => string,
+        ) => getOption("datetimepicker.dateFormatter", defaultFunction)(date),
     },
-    watch: {
-        modelValue(value) {
-            this.newValue = value;
-        },
+    /** Custom function to parse a string into a date */
+    datetimeParser: {
+        type: Function as PropType<(date: string) => Date>,
+        default: (date: string, defaultFunction: (date: string) => Date) =>
+            getOption("datetimepicker.dateParser", defaultFunction)(date),
     },
-    mounted() {
-        if (!this.isMobile || this.inline) {
-            // $refs attached, it's time to refresh datepicker (input)
-            if (this.newValue) {
-                this.$refs.datepicker.$forceUpdate();
+    /** Date creator function, default is `new Date()` */
+    datetimeCreator: {
+        type: Function as PropType<(date: Date) => Date>,
+        default: (date: Date) =>
+            getOption(
+                "datetimepicker.datetimeCreator",
+                (d: Date) => new Date(d),
+            )(date),
+    },
+    /** Dropdown position */
+    position: { type: String, default: undefined },
+    /** Enable mobile native input if mobile agent */
+    mobileNative: {
+        type: Boolean,
+        default: () => getOption("datepicker.mobileNative", true),
+    },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("datepicker.iconPack", undefined),
+    },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("datepicker.icon", undefined),
+    },
+    /** Icon name to be added on the right side */
+    iconRight: {
+        type: String,
+        default: () => getOption("datepicker.iconRight", undefined),
+    },
+    /** Make the icon right clickable */
+    iconRightClickable: { type: Boolean, default: false },
+    /** Append autocomplete content to body */
+    appendToBody: {
+        type: Boolean,
+        default: () => getOption("datepicker.appendToBody", false),
+    },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps(["datepickerWrapperClass", "timepickerWrapperClass"]),
+});
+
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {Date | Date[]} updated modelValue prop
+     */
+    (e: "update:modelValue", value: Date | Date[]): void;
+    /**
+     * active prop two-way binding
+     * @param value {boolean} updated active prop
+     */
+    (e: "update:active", value: boolean): void;
+    /**
+     * on range start is selected event
+     * @param value {Date} range start date
+     */
+    (e: "range-start", value: Date): void;
+    /**
+     * on range end is selected event
+     * @param value {Date} range end date
+     */
+    (e: "range-end", value: Date): void;
+    /**
+     * on month change event
+     * @param value {number} month number
+     */
+    (e: "change-month", value: number): void;
+    /**
+     * on year change event
+     * @param value {number} year number
+     */
+    (e: "change-year", value: number): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+}>();
+
+const datepickerRef = ref<InstanceType<typeof ODatepicker>>();
+const timepickerRef = ref<InstanceType<typeof OTimepicker>>();
+const nativeInputRef = ref<InstanceType<typeof OInput>>();
+
+const elementRef = computed(() =>
+    isMobileNative.value ? nativeInputRef.value : datepickerRef.value.$inputRef,
+);
+
+// use form input functionality for native input
+const { onBlur, onFocus, onInvalid } = useInputHandler(
+    elementRef,
+    emits,
+    props,
+);
+
+const isMobileNative = computed(
+    () => props.mobileNative && isMobileAgent.any(),
+);
+
+watch([() => isMobileNative.value, () => props.inline], () => {
+    // $refs attached, it's time to refresh datepicker (input)
+    if (datepickerRef.value) datepickerRef.value.$forceUpdate();
+});
+
+/** Dropdown active state */
+const isActive = usePropBinding<boolean>("active", props, emits);
+
+const vmodel = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        if (!value) {
+            emits("update:modelValue", value);
+            return;
+        }
+        let date = new Date(value.getTime());
+        if (!props.modelValue) {
+            date = props.datetimeCreator(value);
+        } else {
+            // restore time part
+            if (
+                (value.getDate() !== props.modelValue.getDate() ||
+                    value.getMonth() !== props.modelValue.getMonth() ||
+                    value.getFullYear() !== props.modelValue.getFullYear()) &&
+                value.getHours() === 0 &&
+                value.getMinutes() === 0 &&
+                value.getSeconds() === 0
+            ) {
+                date.setHours(
+                    props.modelValue.getHours(),
+                    props.modelValue.getMinutes(),
+                    props.modelValue.getSeconds(),
+                    0,
+                );
             }
         }
+        // check min and max range
+        if (props.minDatetime && date < props.minDatetime) {
+            date = props.minDatetime;
+        } else if (props.maxDatetime && date > props.maxDatetime) {
+            date = props.maxDatetime;
+        }
+        emits("update:modelValue", new Date(date.getTime()));
     },
-    methods: {
-        enableSeconds() {
-            if (this.$refs.timepicker) {
-                return this.$refs.timepicker.enableSeconds;
-            }
-            return false;
-        },
-        isHourFormat24() {
-            if (this.$refs.timepicker) {
-                return this.$refs.timepicker.isHourFormat24;
+});
+
+const minDate = computed(() => {
+    if (!props.minDatetime)
+        return props.datepicker ? props.datepicker.minDate : null;
+
+    return new Date(
+        props.minDatetime.getFullYear(),
+        props.minDatetime.getMonth(),
+        props.minDatetime.getDate(),
+        0,
+        0,
+        0,
+        0,
+    );
+});
+
+const maxDate = computed(() => {
+    if (!props.maxDatetime)
+        return props.datepicker ? props.datepicker.maxDate : null;
+
+    return new Date(
+        props.maxDatetime.getFullYear(),
+        props.maxDatetime.getMonth(),
+        props.maxDatetime.getDate(),
+        0,
+        0,
+        0,
+        0,
+    );
+});
+
+// Only enable min/max time if local (not necessarily UTC) date portion matches
+const minTime = computed(() => {
+    if (
+        !props.minDatetime ||
+        vmodel.value === null ||
+        typeof vmodel.value === "undefined" ||
+        vmodel.value.getFullYear() != props.minDatetime.getFullYear() ||
+        vmodel.value.getMonth() != props.minDatetime.getMonth() ||
+        vmodel.value.getDate() != props.minDatetime.getDate()
+    ) {
+        return props.timepicker ? props.timepicker.minTime : null;
+    }
+    return props.minDatetime;
+});
+
+const maxTime = computed(() => {
+    if (
+        !props.maxDatetime ||
+        vmodel.value === null ||
+        typeof vmodel.value === "undefined" ||
+        vmodel.value.getFullYear() != props.maxDatetime.getFullYear() ||
+        vmodel.value.getMonth() != props.maxDatetime.getMonth() ||
+        vmodel.value.getDate() != props.maxDatetime.getDate()
+    ) {
+        return props.timepicker ? props.timepicker.maxTime : null;
+    }
+    return props.maxDatetime;
+});
+
+const datepickerSize = computed(() =>
+    props.datepicker?.size ? props.datepicker.size : props.size,
+);
+
+const timepickerSize = computed(() =>
+    props.timepicker?.size ? props.timepicker.size : props.size,
+);
+
+const timepickerDisabled = computed(() =>
+    props.timepicker?.disabled ? props.timepicker.disabled : props.disabled,
+);
+
+function formatNative(value: Date): string {
+    const date = new Date(value);
+    if (value && !isNaN(date.getTime())) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const seconds = date.getSeconds();
+        return (
+            year +
+            "-" +
+            ((month < 10 ? "0" : "") + month) +
+            "-" +
+            ((day < 10 ? "0" : "") + day) +
+            "T" +
+            ((hours < 10 ? "0" : "") + hours) +
+            ":" +
+            ((minutes < 10 ? "0" : "") + minutes) +
+            ":" +
+            ((seconds < 10 ? "0" : "") + seconds)
+        );
+    }
+    return "";
+}
+
+// --- Time Format Feature ---
+
+const enableSeconds = computed(() =>
+    timepickerRef.value?.enableSeconds
+        ? timepickerRef.value.enableSeconds
+        : false,
+);
+
+const localeOptions = computed(
+    () =>
+        new Intl.DateTimeFormat(props.locale, {
+            year: "numeric",
+            month: "numeric",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            second: enableSeconds.value ? "numeric" : undefined,
+        }).resolvedOptions() as Intl.DateTimeFormatOptions,
+);
+
+const isHourFormat24 = computed(
+    () =>
+        props.timepicker?.hourFormat === HOUR_FORMAT_24 ||
+        !localeOptions.value.hour12,
+);
+
+const dtf = computed(
+    () =>
+        new Intl.DateTimeFormat(props.locale, {
+            year: localeOptions.value.year || "numeric",
+            month: localeOptions.value.month || "numeric",
+            day: localeOptions.value.day || "numeric",
+            hour: localeOptions.value.hour || "numeric",
+            minute: localeOptions.value.minute || "numeric",
+            second: enableSeconds.value
+                ? localeOptions.value.second || "numeric"
+                : undefined,
+            hourCycle: !isHourFormat24.value ? "h12" : "h23",
+        }),
+);
+
+const amString = computed(() => {
+    if (
+        dtf.value.formatToParts &&
+        typeof dtf.value.formatToParts === "function"
+    ) {
+        const d = props.datetimeCreator(new Date());
+        d.setHours(10);
+        const dayPeriod = dtf.value
+            .formatToParts(d)
+            .find((part) => part.type === "dayPeriod");
+        if (dayPeriod) return dayPeriod.value;
+    }
+    return AM;
+});
+
+const pmString = computed(() => {
+    if (
+        dtf.value.formatToParts &&
+        typeof dtf.value.formatToParts === "function"
+    ) {
+        const d = props.datetimeCreator(new Date());
+        d.setHours(20);
+        const dayPeriod = dtf.value
+            .formatToParts(d)
+            .find((part) => part.type === "dayPeriod");
+        if (dayPeriod) {
+            return dayPeriod.value;
+        }
+    }
+    return PM;
+});
+
+function defaultDatetimeParser(value: string): Date {
+    function defaultParser(date: string): Date {
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const dayPeriods = [AM, PM, AM.toLowerCase(), PM.toLowerCase()];
+            if (timepickerRef.value) {
+                dayPeriods.push(amString.value);
+                dayPeriods.push(pmString.value);
             }
-            return !this.localeOptions.hour12;
-        },
-        defaultDatetimeParser(date) {
-            const datetimeParser = getValueByPath(
-                getOptions(),
-                "datetimepicker.datetimeParser",
-                undefined,
-            );
-            if (typeof this.datetimeParser === "function") {
-                return this.datetimeParser(date);
-            } else if (typeof datetimeParser === "function") {
-                return datetimeParser(date);
-            } else {
-                if (
-                    this.dtf.formatToParts &&
-                    typeof this.dtf.formatToParts === "function"
-                ) {
-                    const dayPeriods = [
-                        AM,
-                        PM,
-                        AM.toLowerCase(),
-                        PM.toLowerCase(),
-                    ];
-                    if (this.$refs.timepicker) {
-                        dayPeriods.push(this.$refs.timepicker.amString);
-                        dayPeriods.push(this.$refs.timepicker.pmString);
-                    }
-                    const parts = this.dtf.formatToParts(new Date());
-                    const formatRegex = parts
-                        .map((part, idx) => {
-                            if (part.type === "literal") {
-                                if (
-                                    idx + 1 < parts.length &&
-                                    parts[idx + 1].type === "hour"
-                                ) {
-                                    return `[^\\d]+`;
-                                }
-                                return part.value.replace(/ /g, "\\s?");
-                            } else if (part.type === "dayPeriod") {
-                                return `((?!=<${part.type}>)(${dayPeriods.join(
-                                    "|",
-                                )})?)`;
-                            }
-                            return `((?!=<${part.type}>)\\d+)`;
-                        })
-                        .join("");
-                    const datetimeGroups = matchWithGroups(formatRegex, date);
-
-                    // We do a simple validation for the group.
-                    // If it is not valid, it will fallback to Date.parse below
-                    if (
-                        datetimeGroups.year &&
-                        datetimeGroups.year.length === 4 &&
-                        datetimeGroups.month &&
-                        datetimeGroups.month <= 12 &&
-                        datetimeGroups.day &&
-                        datetimeGroups.day <= 31 &&
-                        datetimeGroups.hour &&
-                        datetimeGroups.hour >= 0 &&
-                        datetimeGroups.hour < 24 &&
-                        datetimeGroups.minute &&
-                        datetimeGroups.minute >= 0 &&
-                        datetimeGroups.minute <= 59
-                    ) {
-                        const d = new Date(
-                            datetimeGroups.year,
-                            datetimeGroups.month - 1,
-                            datetimeGroups.day,
-                            datetimeGroups.hour,
-                            datetimeGroups.minute,
-                            datetimeGroups.second || 0,
-                        );
-                        return d;
+            const parts = this.dtf.formatToParts(new Date());
+            const formatRegex = parts
+                .map((part, idx) => {
+                    if (part.type === "literal") {
+                        if (
+                            idx + 1 < parts.length &&
+                            parts[idx + 1].type === "hour"
+                        ) {
+                            return `[^\\d]+`;
+                        }
+                        return part.value.replace(/ /g, "\\s?");
+                    } else if (part.type === "dayPeriod") {
+                        return `((?!=<${part.type}>)(${dayPeriods.join(
+                            "|",
+                        )})?)`;
                     }
-                }
+                    return `((?!=<${part.type}>)\\d+)`;
+                })
+                .join("");
+            const datetimeGroups = matchWithGroups(formatRegex, date);
 
-                return new Date(Date.parse(date));
-            }
-        },
-        defaultDatetimeFormatter(date) {
-            const datetimeFormatter = getValueByPath(
-                getOptions(),
-                "datetimepicker.datetimeFormatter",
-                undefined,
-            );
-            if (typeof this.datetimeFormatter === "function") {
-                return this.datetimeFormatter(date);
-            } else if (typeof datetimeFormatter === "function") {
-                return datetimeFormatter(date);
-            } else {
-                return this.dtf.format(date);
-            }
-        },
-        /*
-         * Parse date from string
-         */
-        onChangeNativePicker(event) {
-            const date = event.target.value;
-            const s = date ? date.split(/\D/) : [];
-            if (s.length >= 5) {
-                const year = parseInt(s[0], 10);
-                const month = parseInt(s[1], 10) - 1;
-                const day = parseInt(s[2], 10);
-                const hours = parseInt(s[3], 10);
-                const minutes = parseInt(s[4], 10);
-                // Seconds are omitted intentionally; they are unsupported by input
-                // type=datetime-local and cause the control to fail native validation
-                this.computedValue = new Date(year, month, day, hours, minutes);
-            } else {
-                this.computedValue = null;
-            }
-        },
-        formatNative(value) {
-            const date = new Date(value);
-            if (value && !isNaN(date.getTime())) {
-                const year = date.getFullYear();
-                const month = date.getMonth() + 1;
-                const day = date.getDate();
-                const hours = date.getHours();
-                const minutes = date.getMinutes();
-                const seconds = date.getSeconds();
-                return (
-                    year +
-                    "-" +
-                    ((month < 10 ? "0" : "") + month) +
-                    "-" +
-                    ((day < 10 ? "0" : "") + day) +
-                    "T" +
-                    ((hours < 10 ? "0" : "") + hours) +
-                    ":" +
-                    ((minutes < 10 ? "0" : "") + minutes) +
-                    ":" +
-                    ((seconds < 10 ? "0" : "") + seconds)
+            // We do a simple validation for the group.
+            // If it is not valid, it will fallback to Date.parse below
+            if (
+                datetimeGroups.year &&
+                datetimeGroups.year.length === 4 &&
+                datetimeGroups.month &&
+                datetimeGroups.month <= 12 &&
+                datetimeGroups.day &&
+                datetimeGroups.day <= 31 &&
+                datetimeGroups.hour &&
+                datetimeGroups.hour >= 0 &&
+                datetimeGroups.hour < 24 &&
+                datetimeGroups.minute &&
+                datetimeGroups.minute >= 0 &&
+                datetimeGroups.minute <= 59
+            ) {
+                const d = new Date(
+                    datetimeGroups.year,
+                    datetimeGroups.month - 1,
+                    datetimeGroups.day,
+                    datetimeGroups.hour,
+                    datetimeGroups.minute,
+                    datetimeGroups.second || 0,
                 );
+                return d;
             }
-            return "";
-        },
-        toggle() {
-            this.$refs.datepicker.toggle();
-        },
-    },
+        }
+
+        return new Date(Date.parse(date));
+    }
+    const date = (props.datetimeParser as any)(value, defaultParser);
+    return date;
+}
+
+function defaultDatetimeFormatter(date: Date): string {
+    return (props.datetimeFormatter as any)(date, (date: Date) =>
+        date ? dtf.value.format(date) : "",
+    );
+}
+
+// --- Event Handler ---
+
+/** Parse date from string */
+function onChangeNativePicker(event: Event): void {
+    const date = (event.target as HTMLInputElement).value;
+    const s = date ? date.split(/\D/) : [];
+    if (s.length >= 5) {
+        const year = parseInt(s[0], 10);
+        const month = parseInt(s[1], 10) - 1;
+        const day = parseInt(s[2], 10);
+        const hours = parseInt(s[3], 10);
+        const minutes = parseInt(s[4], 10);
+        // Seconds are omitted intentionally; they are unsupported by input
+        // type=datetime-local and cause the control to fail native validation
+        vmodel.value = new Date(year, month, day, hours, minutes);
+    } else {
+        vmodel.value = null;
+    }
+}
+
+// --- Computed Component Classes ---
+
+const datepickerWrapperClasses = computed(() => [
+    useComputedClass("datepickerWrapperClass", "o-dtpck__date"),
+]);
+
+const timepickerWrapperClasses = computed(() => [
+    useComputedClass("timepickerWrapperClass", "o-dtpck__time"),
+]);
+
+// --- Expose Public Functionalities ---
+
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => datepickerRef.value.$el),
+    // expose the input element
+    $inputRef: computed(() => elementRef.value),
 });
 </script>
 
 <template>
     <o-datepicker
-        v-if="!isMobile || inline"
-        ref="datepicker"
-        v-model="computedValue"
+        v-if="!isMobileNative || inline"
+        ref="datepickerRef"
+        v-model="vmodel"
+        v-model:active="isActive"
         v-bind="datepicker"
         :class="datepickerWrapperClasses"
         :rounded="rounded"
         :open-on-focus="openOnFocus"
         :position="position"
         :inline="inline"
-        :editable="editable"
+        :readonly="readonly"
         :expanded="expanded"
         :close-on-click="false"
         :date-formatter="defaultDatetimeFormatter"
@@ -446,18 +586,18 @@ export default defineComponent({
         :append-to-body="appendToBody"
         @focus="onFocus"
         @blur="onBlur"
-        @active-change="$emit('active-change', $event)"
-        @icon-right-click="$emit('icon-right-click')"
         @change-month="$emit('change-month', $event)"
-        @change-year="$emit('change-year', $event)">
+        @change-year="$emit('change-year', $event)"
+        @icon-click="$emit('icon-click', $event)"
+        @icon-right-click="$emit('icon-right-click', $event)">
         <template #footer>
             <div :class="timepickerWrapperClasses">
                 <o-timepicker
-                    ref="timepicker"
+                    ref="timepickerRef"
                     v-bind="timepicker"
-                    v-model="computedValue"
+                    v-model="vmodel"
                     inline
-                    :editable="editable"
+                    :readonly="readonly"
                     :min-time="minTime"
                     :max-time="maxTime"
                     :size="timepickerSize"
@@ -470,23 +610,25 @@ export default defineComponent({
             </template>
         </template>
     </o-datepicker>
+
+    <!-- Native Picker -->
     <o-input
         v-else
-        ref="input"
+        ref="nativeInputRef"
         type="datetime-local"
         autocomplete="off"
-        :value="formatNative(computedValue)"
+        :value="formatNative(vmodel)"
+        :max="formatNative(maxDate)"
+        :min="formatNative(minDate)"
         :placeholder="placeholder"
         :size="datepickerSize"
-        :icon="icon"
         :icon-pack="iconPack"
+        :icon="icon"
         :rounded="rounded"
-        :max="formatNative(maxDate)"
-        :min="formatNative(minDate)"
         :disabled="disabled"
         :readonly="false"
         v-bind="$attrs"
-        :use-html5-validation="useHtml5Validation"
+        :use-html5-validation="false"
         @change="onChangeNativePicker"
         @focus="onFocus"
         @blur="onBlur"
diff --git a/packages/oruga-next/src/components/datetimepicker/index.ts b/packages/oruga-next/src/components/datetimepicker/index.ts
index c371b6e49..bc92a78b6 100644
--- a/packages/oruga-next/src/components/datetimepicker/index.ts
+++ b/packages/oruga-next/src/components/datetimepicker/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Datetimepicker from "./Datetimepicker.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/dropdown/Dropdown.vue b/packages/oruga-next/src/components/dropdown/Dropdown.vue
index b71954391..cd34cb4d1 100644
--- a/packages/oruga-next/src/components/dropdown/Dropdown.vue
+++ b/packages/oruga-next/src/components/dropdown/Dropdown.vue
@@ -1,18 +1,33 @@
-<script lang="ts">
-import type { Component, PropType } from "vue";
-import { defineComponent } from "vue";
-
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import MatchMediaMixin from "../../utils/MatchMediaMixin";
+<script setup lang="ts">
+import {
+    computed,
+    nextTick,
+    ref,
+    watch,
+    onMounted,
+    onUnmounted,
+    type Component,
+    type PropType,
+    type Ref,
+} from "vue";
 
-import trapFocus from "../../directives/trapFocus";
-import { getOptions } from "../../utils/config";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useMatchMedia,
+    useEventListener,
+} from "@/composables";
+import { vTrapFocus } from "../../directives/trapFocus";
 import {
     removeElement,
     createAbsoluteElement,
     toCssDimension,
-    getValueByPath,
-} from "../../utils/helpers";
+} from "@/utils/helpers";
+import { isClient } from "@/utils/ssr";
+import { provideDropdown } from "./useDropdownShare";
 
 /**
  * Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content
@@ -20,491 +35,450 @@ import {
  * @requires ./DropdownItem.vue
  * @style _dropdown.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "ODropdown",
-    directives: {
-        trapFocus,
-    },
     configField: "dropdown",
-    mixins: [BaseComponentMixin, MatchMediaMixin],
-    provide() {
-        return {
-            $dropdown: this,
-        };
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: {
+        type: [String, Number, Boolean, Object, Array],
+        default: undefined,
     },
-    emits: ["update:modelValue", "active-change", "change"],
-    props: {
-        /** @model */
-        modelValue: {
-            type: [String, Number, Boolean, Object, Array],
-            default: null,
-        },
-        /**
-         * Trigger label, unnecessary when trgger slot is used
-         */
-        label: {
-            type: String,
-            default: undefined,
-        },
-        /**
-         * Dropdown disabled
-         */
-        disabled: Boolean,
-        /**
-         * Dropdown content (items) are shown inline, trigger is removed
-         */
-        inline: Boolean,
-        /**
-         * Dropdown content will be scrollable
-         */
-        scrollable: Boolean,
-        /**
-         * Max height of dropdown content
-         */
-        maxHeight: {
-            type: [String, Number],
-            default: () => {
-                return getValueByPath(getOptions(), "dropdown.maxHeight", 200);
-            },
-        },
-        /**
-         * Optional, position of the dropdown relative to the trigger
-         * @values top-right, top-left, bottom-left
-         */
-        position: {
-            type: String,
-            validator: (value: string) => {
-                return (
-                    [
-                        "top-right",
-                        "top-left",
-                        "bottom-left",
-                        "bottom-right",
-                    ].indexOf(value) > -1
-                );
-            },
-        },
-        /**
-         * Dropdown content (items) are shown into a modal on mobile
-         */
-        mobileModal: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "dropdown.mobileModal",
-                    true,
-                );
-            },
-        },
-        /**
-         * Role attribute to be passed to list container for better accessibility. Use menu only in situations where your dropdown is related to navigation menus
-         * @values list, menu, dialog
-         */
-        ariaRole: {
-            type: String,
-            validator: (value: string) => {
-                return ["menu", "list", "dialog"].indexOf(value) > -1;
-            },
-            default: null,
-        },
-        /**
-         * Custom animation (transition name)
-         */
-        animation: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "dropdown.animation",
-                    "fade",
-                );
-            },
-        },
-        /**
-         * Allows multiple selections
-         */
-        multiple: Boolean,
-        /**
-         * Trap focus inside the dropdown.
-         */
-        trapFocus: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(getOptions(), "dropdown.trapFocus", true);
-            },
-        },
-        /**
-         * Close dropdown when content is clicked
-         */
-        closeOnClick: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Can close dropdown by pressing escape or by clicking outside
-         * @values escape, outside
-         */
-        canClose: {
-            type: [Array, Boolean],
-            default: true,
-        },
-        /**
-         * Dropdown will be expanded (full-width)
-         */
-        expanded: Boolean,
-        /**
-         * Dropdown will be triggered by any events
-         * @values click, hover, contextmenu, focus
-         */
-        triggers: {
-            type: Array,
-            default: () => ["click"],
-        },
-        /**
-         * Dropdown menu tag name
-         */
-        menuTag: {
-            type: [String, Object, Function] as PropType<string | Component>,
-            default: () => {
-                return getValueByPath(getOptions(), "dropdown.menuTag", "div");
-            },
-        },
-        /**
-         * Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key)
-         */
-        triggerTabindex: {
-            type: Number,
-            default: 0,
-        },
-        /**
-         * Append dropdown content to body
-         */
-        appendToBody: Boolean,
-        /**
-         * @ignore
-         */
-        appendToBodyCopyParent: Boolean,
-        rootClass: [String, Function, Array],
-        triggerClass: [String, Function, Array],
-        inlineClass: [String, Function, Array],
-        menuMobileOverlayClass: [String, Function, Array],
-        menuClass: [String, Function, Array],
-        menuPositionClass: [String, Function, Array],
-        menuActiveClass: [String, Function, Array],
-        mobileClass: [String, Function, Array],
-        disabledClass: [String, Function, Array],
-        expandedClass: [String, Function, Array],
+    /** The active state of the dropdown */
+    active: { type: Boolean, default: false },
+    /** Trigger label, unnecessary when trgger slot is used */
+    label: { type: String, default: undefined },
+    /** Dropdown is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Dropdown content (items) are shown inline, trigger is removed */
+    inline: { type: Boolean, default: false },
+    /** Dropdown content will be scrollable */
+    scrollable: { type: Boolean, default: false },
+    /** Max height of dropdown content */
+    maxHeight: {
+        type: Number,
+        default: () => getOption("dropdown.maxHeight", 200),
     },
-    data() {
-        return {
-            selected: this.modelValue,
-            isActive: false,
-            isHoverable: false,
-            bodyEl: undefined, // Used to append to body
-        };
+    /**
+     * Optional, position of the dropdown relative to the trigger
+     * @values top-right, top-left, bottom-left, bottom-right
+     */
+    position: {
+        type: String,
+        validator: (value: string) =>
+            ["top-right", "top-left", "bottom-left", "bottom-right"].indexOf(
+                value,
+            ) > -1,
+        default: undefined,
     },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-drop"),
-                {
-                    [this.computedClass("disabledClass", "o-drop--disabled")]:
-                        this.disabled,
-                },
-                {
-                    [this.computedClass("expandedClass", "o-drop--expanded")]:
-                        this.expanded,
-                },
-                {
-                    [this.computedClass("inlineClass", "o-drop--inline")]:
-                        this.inline,
-                },
-                {
-                    [this.computedClass("mobileClass", "o-drop--mobile")]:
-                        this.isMobileModal &&
-                        this.isMatchMedia &&
-                        !this.hoverable,
-                },
-            ];
-        },
-        triggerClasses() {
-            return [this.computedClass("triggerClass", "o-drop__trigger")];
-        },
-        menuMobileOverlayClasses() {
-            return [
-                this.computedClass("menuMobileOverlayClass", "o-drop__overlay"),
-            ];
-        },
-        menuClasses() {
-            return [
-                this.computedClass("menuClass", "o-drop__menu"),
-                {
-                    [this.computedClass(
-                        "menuPositionClass",
-                        "o-drop__menu--",
-                        this.position,
-                    )]: this.position,
-                },
-                {
-                    [this.computedClass(
-                        "menuActiveClass",
-                        "o-drop__menu--active",
-                    )]: this.isActive || this.inline,
-                },
-            ];
-        },
-        isMobileModal() {
-            return this.mobileModal && !this.inline;
-        },
-        cancelOptions() {
-            return typeof this.canClose === "boolean"
-                ? this.canClose
-                    ? ["escape", "outside"]
-                    : []
-                : this.canClose;
-        },
-        menuStyle() {
-            return {
-                maxHeight: this.scrollable
-                    ? toCssDimension(this.maxHeight)
-                    : null,
-                overflow: this.scrollable ? "auto" : null,
-            };
-        },
-        hoverable() {
-            return this.triggers.indexOf("hover") >= 0;
-        },
+    /** Dropdown content (items) are shown into a modal on mobile */
+    mobileModal: {
+        type: Boolean,
+        default: () => getOption("dropdown.mobileModal", true),
     },
-    watch: {
-        /**
-         * When v-model is changed set the new selected item.
-         */
-        modelValue(value) {
-            this.selected = value;
-        },
-        /**
-         * Emit event when isActive value is changed.
-         */
-        isActive(value) {
-            this.$emit("active-change", value);
-            if (this.appendToBody) {
-                this.$nextTick(() => {
-                    this.updateAppendToBody();
-                });
-            }
-        },
+    /** Custom animation (transition name) */
+    animation: {
+        type: String,
+        default: () => getOption("dropdown.animation", "fade"),
     },
-    methods: {
-        /**
-         * Click listener from DropdownItem.
-         *   1. Set new selected item.
-         *   2. Emit input event to update the user v-model.
-         *   3. Close the dropdown.
-         */
-        selectItem(value) {
-            if (this.multiple) {
-                if (this.selected) {
-                    if (this.selected.indexOf(value) === -1) {
-                        // Add value
-                        this.selected = [...this.selected, value];
-                    } else {
-                        // Remove value
-                        this.selected = this.selected.filter(
-                            (val) => val !== value,
-                        );
-                    }
-                } else {
-                    this.selected = [value];
-                }
-                this.$emit("change", this.selected);
-            } else {
-                if (this.selected !== value) {
-                    this.selected = value;
-                    this.$emit("change", this.selected);
-                }
-            }
-            this.$emit("update:modelValue", this.selected);
-            if (!this.multiple) {
-                this.isActive = !this.closeOnClick;
-                if (this.hoverable && this.closeOnClick) {
-                    this.isHoverable = false;
-                }
-            }
-        },
-
-        /**
-         * White-listed items to not close when clicked.
-         */
-        isInWhiteList(el) {
-            if (el === this.$refs.dropdownMenu) return true;
-            if (el === this.$refs.trigger) return true;
-            // All chidren from dropdown
-            if (this.$refs.dropdownMenu !== undefined) {
-                const children = this.$refs.dropdownMenu.querySelectorAll("*");
-                for (const child of children) {
-                    if (el === child) {
-                        return true;
-                    }
-                }
-            }
-            // All children from trigger
-            if (this.$refs.trigger !== undefined) {
-                const children = this.$refs.trigger.querySelectorAll("*");
-                for (const child of children) {
-                    if (el === child) {
-                        return true;
-                    }
-                }
-            }
-            return false;
-        },
-
-        /**
-         * Close dropdown if clicked outside.
-         */
-        clickedOutside(event) {
-            if (this.cancelOptions.indexOf("outside") < 0) return;
-            if (this.inline) return;
-
-            if (!this.isInWhiteList(event.target)) this.isActive = false;
-        },
-
-        /**
-         * Keypress event that is bound to the document
-         */
-        keyPress({ key }) {
-            if (this.isActive && (key === "Escape" || key === "Esc")) {
-                if (this.cancelOptions.indexOf("escape") < 0) return;
-                this.isActive = false;
-            }
-        },
-
-        onClick() {
-            if (this.triggers.indexOf("click") < 0) return;
-            this.toggle();
-        },
-        onContextMenu() {
-            if (this.triggers.indexOf("contextmenu") < 0) return;
-            this.toggle();
-        },
-        onHover() {
-            if (this.triggers.indexOf("hover") < 0) return;
-            this.isHoverable = true;
-        },
-        onFocus() {
-            if (this.triggers.indexOf("focus") < 0) return;
-            this.toggle();
-        },
-
-        /**
-         * Toggle dropdown if it's not disabled.
-         */
-        toggle() {
-            if (this.disabled) return;
-
-            if (!this.isActive) {
-                // if not active, toggle after clickOutside event
-                // this fixes toggling programmatic
-                this.$nextTick(() => {
-                    const value = !this.isActive;
-                    this.isActive = value;
-                    // Vue 2.6.x ???
-                    setTimeout(() => (this.isActive = value));
-                });
-            } else {
-                this.isActive = !this.isActive;
+    /** Allows multiple selections */
+    multiple: { type: Boolean, default: false },
+    /** Trap focus inside the dropdown. */
+    trapFocus: {
+        type: Boolean,
+        default: () => getOption("dropdown.trapFocus", true),
+    },
+    /**  Close dropdown when content is clicked */
+    closeOnClick: { type: Boolean, default: true },
+    /**
+     * Can close dropdown by pressing escape or by clicking outside
+     * @values escape, outside
+     */
+    canClose: { type: [Array, Boolean], default: true },
+    /** Dropdown will be expanded (full-width) */
+    expanded: { type: Boolean, default: false },
+    /** Dropdown menu tag name */
+    menuTag: {
+        type: [String, Object, Function] as PropType<string | Component>,
+        default: () => getOption("dropdown.menuTag", "div"),
+    },
+    /** Dropdown trigger tag name */
+    triggerTag: {
+        type: [String, Object, Function] as PropType<string | Component>,
+        default: () => getOption("dropdown.triggerTag", "div"),
+    },
+    /**
+     * Dropdown will be triggered by any events
+     * @values click, hover, contextmenu, focus
+     */
+    triggers: {
+        type: Array as PropType<string[]>,
+        validator: (values: string[]) =>
+            values.filter(
+                (value) =>
+                    ["click", "hover", "contextmenu", "focus"].indexOf(value) >
+                    -1,
+            ).length === values.length,
+        default: () => ["click"],
+    },
+    /** Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) */
+    tabindex: { type: Number, default: 0 },
+    /**
+     * Role attribute to be passed to the list container for better accessibility.
+     * Use menu only in situations where your dropdown is related to a navigation menu.
+     * @values list, menu, dialog
+     */
+    ariaRole: {
+        type: String,
+        validator: (value: string) =>
+            ["menu", "list", "dialog"].indexOf(value) > -1,
+        default: "list",
+    },
+    /** Append dropdown content to body */
+    appendToBody: {
+        type: Boolean,
+        default: () => getOption("autocomplete.appendToBody", false),
+    },
+    /** @ignore */
+    appendToBodyCopyParent: Boolean,
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "triggerClass",
+        "inlineClass",
+        "menuMobileOverlayClass",
+        "menuClass",
+        "menuPositionClass",
+        "menuActiveClass",
+        "mobileClass",
+        "disabledClass",
+        "expandedClass",
+    ]),
+});
+
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {[String, Number, Boolean, Object, Array]} updated modelValue prop
+     */
+    (
+        e: "update:modelValue",
+        value: [string, number, boolean, object, Array<any>],
+    ): void;
+    /**
+     * active prop two-way binding
+     * @param value {boolean} updated active prop
+     */
+    (e: "update:active", value: boolean): void;
+    /**
+     * change event
+     * @param value {any} selected value
+     */
+    (e: "change", value: any): void;
+}>();
+
+const rootRef = ref();
+const menuRef = ref();
+const triggerRef = ref();
+
+const vmodel = useVModelBinding<[string, number, boolean, object, Array<any>]>(
+    props,
+    emits,
+    { passive: true },
+) as Ref<any>;
+const isActive = ref(props.active);
+
+/** toggle isActive value when prop is changed */
+watch(
+    () => props.active,
+    (value) => {
+        if (!value) isActive.value = value;
+        // if not active, toggle after clickOutside event
+        // this fixes toggling programmatic
+        else setTimeout(() => (isActive.value = value));
+    },
+);
+
+/** emit event when isActive value is changed */
+watch(isActive, (value) => {
+    emits("update:active", value);
+    if (props.appendToBody) nextTick(() => updateAppendToBody());
+});
+
+const isHovered = ref(false);
+
+const { isMobile } = useMatchMedia();
+
+if (isClient) {
+    useEventListener("click", clickedOutside);
+    useEventListener("keyup", keyPress);
+}
+
+const bodyEl = ref(undefined); // Used to append to body
+onMounted(() => {
+    if (props.appendToBody) {
+        bodyEl.value = createAbsoluteElement(menuRef.value);
+        updateAppendToBody();
+    }
+});
+
+onUnmounted(() => {
+    if (props.appendToBody) {
+        removeElement(bodyEl.value);
+    }
+});
+
+const isMobileModal = computed(() => props.mobileModal && !props.inline);
+
+const cancelOptions = computed(() =>
+    typeof props.canClose === "boolean"
+        ? props.canClose
+            ? ["escape", "outside"]
+            : []
+        : props.canClose,
+);
+
+const menuStyle = computed(() => ({
+    maxHeight: props.scrollable ? toCssDimension(props.maxHeight) : null,
+    overflow: props.scrollable ? "auto" : null,
+}));
+
+const hoverable = computed(() => props.triggers.indexOf("hover") >= 0);
+
+/** White-listed items to not close when clicked. */
+function isInWhiteList(el): boolean {
+    if (el === menuRef.value) return true;
+    if (el === triggerRef.value) return true;
+    // All chidren from dropdown
+    if (menuRef.value !== undefined) {
+        const children = menuRef.value.querySelectorAll("*");
+        for (const child of children) {
+            if (el === child) {
+                return true;
             }
-        },
-
-        updateAppendToBody() {
-            const dropdownMenu = this.$refs.dropdownMenu;
-            const trigger = this.$refs.trigger;
-            if (dropdownMenu && trigger) {
-                // update wrapper dropdown
-                const dropdown = this.$data.bodyEl.children[0];
-                dropdown.classList.forEach((item) =>
-                    dropdown.classList.remove(...item.split(" ")),
-                );
-                this.rootClasses.forEach((item) => {
-                    if (item) {
-                        if (typeof item === "object") {
-                            Object.keys(item)
-                                .filter((key) => key && item[key])
-                                .forEach((key) => dropdown.classList.add(key));
-                        } else {
-                            dropdown.classList.add(...item.split(" "));
-                        }
-                    }
-                });
-                if (this.appendToBodyCopyParent) {
-                    const parentNode = this.$refs.dropdown.parentNode;
-                    const parent = this.$data.bodyEl;
-                    parent.classList.forEach((item) =>
-                        parent.classList.remove(...item.split(" ")),
-                    );
-                    parentNode.classList.forEach((item) =>
-                        parent.classList.add(...item.split(" ")),
-                    );
-                }
-                const rect = trigger.getBoundingClientRect();
-                let top = rect.top + window.scrollY;
-                let left = rect.left + window.scrollX;
-                if (!this.position || this.position.indexOf("bottom") >= 0) {
-                    top += trigger.clientHeight;
+        }
+    }
+    // All children from trigger
+    if (triggerRef.value !== undefined) {
+        const children = triggerRef.value.querySelectorAll("*");
+        for (const child of children) {
+            if (el === child) return true;
+        }
+    }
+    return false;
+}
+
+function updateAppendToBody(): void {
+    const dropdownMenu = menuRef.value;
+    const trigger = triggerRef.value;
+    if (dropdownMenu && trigger) {
+        // update wrapper dropdown
+        const dropdown = bodyEl.value.children[0];
+        dropdown.classList.forEach((item) =>
+            dropdown.classList.remove(...item.split(" ")),
+        );
+        rootClasses.value.forEach((item) => {
+            if (item) {
+                if (typeof item === "object") {
+                    Object.keys(item)
+                        .filter((key) => key && item[key])
+                        .forEach((key) => dropdown.classList.add(key));
                 } else {
-                    top -= dropdownMenu.clientHeight;
+                    dropdown.classList.add(...item.split(" "));
                 }
-                if (this.position && this.position.indexOf("left") >= 0) {
-                    left -= dropdownMenu.clientWidth - trigger.clientWidth;
-                }
-                dropdownMenu.style.position = "absolute";
-                dropdownMenu.style.top = `${top}px`;
-                dropdownMenu.style.left = `${left}px`;
-                dropdownMenu.style.zIndex = "9999";
             }
-        },
-    },
-    mounted() {
-        if (this.appendToBody) {
-            this.$data.bodyEl = createAbsoluteElement(this.$refs.dropdownMenu);
-            this.updateAppendToBody();
+        });
+        if (props.appendToBodyCopyParent) {
+            const parentNode = rootRef.value.parentNode;
+            const parent = bodyEl.value;
+            parent.classList.forEach((item) =>
+                parent.classList.remove(...item.split(" ")),
+            );
+            parentNode.classList.forEach((item) =>
+                parent.classList.add(...item.split(" ")),
+            );
         }
-    },
-    created() {
-        if (typeof window !== "undefined") {
-            document.addEventListener("click", this.clickedOutside);
-            document.addEventListener("keyup", this.keyPress);
+        const rect = trigger.getBoundingClientRect();
+        let top = rect.top + window.scrollY;
+        let left = rect.left + window.scrollX;
+        if (!props.position || props.position.indexOf("bottom") >= 0) {
+            top += trigger.clientHeight;
+        } else {
+            top -= dropdownMenu.clientHeight;
         }
-    },
-    beforeUnmount() {
-        if (typeof window !== "undefined") {
-            document.removeEventListener("click", this.clickedOutside);
-            document.removeEventListener("keyup", this.keyPress);
+        if (props.position && props.position.indexOf("left") >= 0) {
+            left -= dropdownMenu.clientWidth - trigger.clientWidth;
         }
-        if (this.appendToBody) {
-            removeElement(this.$data.bodyEl);
+        dropdownMenu.style.position = "absolute";
+        dropdownMenu.style.top = `${top}px`;
+        dropdownMenu.style.left = `${left}px`;
+        dropdownMenu.style.zIndex = "9999";
+    }
+}
+
+// --- Event Handler ---
+
+/** Close dropdown if clicked outside. */
+function clickedOutside(event): void {
+    if (props.inline) return;
+    if (cancelOptions.value.indexOf("outside") < 0) return;
+    if (!isInWhiteList(event.target)) isActive.value = false;
+}
+
+/** Keypress event that is bound to the document */
+function keyPress(event: KeyboardEvent): void {
+    if (isActive.value && (event.key === "Escape" || event.key === "Esc")) {
+        if (cancelOptions.value.indexOf("escape") < 0) return;
+        isActive.value = false;
+    }
+}
+
+function onClick(): void {
+    if (props.triggers.indexOf("click") >= 0) toggle();
+}
+function onContextMenu(event: MouseEvent): void {
+    if (props.triggers.indexOf("contextmenu") >= 0) {
+        event.preventDefault();
+        toggle();
+    }
+}
+function onHover(): void {
+    if (props.triggers.indexOf("hover") >= 0) {
+        isHovered.value = true;
+        toggle();
+    }
+}
+function onHoverLeave(): void {
+    if (isHovered.value) {
+        toggle();
+        isHovered.value = false;
+    }
+}
+function onFocus(): void {
+    if (props.triggers.indexOf("focus") >= 0) toggle();
+}
+
+/** Toggle dropdown if it's not disabled. */
+function toggle(): void {
+    if (props.disabled) return;
+    if (isActive.value) isActive.value = !isActive.value;
+    // if not active, toggle after clickOutside event
+    // this fixes toggling programmatic
+    else nextTick(() => (isActive.value = !isActive.value));
+}
+
+// --- Field Dependency Injection Feature ---
+
+/**
+ * Click listener from DropdownItem.
+ *   1. Set new selected item.
+ *   2. Emit input event to update the user v-model.
+ *   3. Close the dropdown.
+ */
+function selectItem(value: any): void {
+    if (props.multiple) {
+        if (vmodel.value && Array.isArray(vmodel.value)) {
+            if (vmodel.value.indexOf(value) === -1) {
+                // Add value
+                vmodel.value = [...vmodel.value, value];
+            } else {
+                // Remove value
+                vmodel.value = vmodel.value.filter((val) => val !== value);
+            }
+        } else {
+            // Init value array
+            vmodel.value = [value];
         }
+        emits("change", vmodel.value);
+    } else {
+        if (vmodel.value !== value) {
+            // Upodate value
+            vmodel.value = value;
+            emits("change", vmodel.value);
+        }
+    }
+    if (!props.multiple) {
+        isActive.value = !props.closeOnClick;
+        if (hoverable.value && props.closeOnClick) isHovered.value = false;
+    }
+}
+
+// Provided data is a computed ref to enjure reactivity.
+const provideData = computed(() => ({
+    $el: rootRef.value,
+    props,
+    selected: vmodel.value,
+    selectItem,
+}));
+
+// Provide field component data via dependency injection.
+provideDropdown(provideData);
+
+// --- Computed Component Classes ---
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-drop"),
+    {
+        [useComputedClass("disabledClass", "o-drop--disabled")]: props.disabled,
     },
-});
+    {
+        [useComputedClass("expandedClass", "o-drop--expanded")]: props.expanded,
+    },
+    {
+        [useComputedClass("inlineClass", "o-drop--inline")]: props.inline,
+    },
+    {
+        [useComputedClass("mobileClass", "o-drop--mobile")]:
+            isMobileModal.value && isMobile.value && !hoverable.value,
+    },
+]);
+
+const triggerClasses = computed(() => [
+    useComputedClass("triggerClass", "o-drop__trigger"),
+]);
+
+const menuMobileOverlayClasses = computed(() => [
+    useComputedClass("menuMobileOverlayClass", "o-drop__overlay"),
+]);
+
+const menuClasses = computed(() => [
+    useComputedClass("menuClass", "o-drop__menu"),
+    {
+        [useComputedClass(
+            "menuPositionClass",
+            "o-drop__menu--",
+            props.position,
+        )]: props.position,
+    },
+    {
+        [useComputedClass("menuActiveClass", "o-drop__menu--active")]:
+            isActive.value || props.inline,
+    },
+]);
 </script>
 
 <template>
-    <div ref="dropdown" :class="rootClasses" @mouseleave="isHoverable = false">
-        <div
+    <div ref="rootRef" :class="rootClasses" @mouseleave="onHoverLeave">
+        <component
+            :is="triggerTag"
             v-if="!inline"
-            :tabindex="disabled ? null : triggerTabindex"
-            ref="trigger"
+            ref="triggerRef"
+            :tabindex="disabled ? null : tabindex"
             :class="triggerClasses"
+            aria-haspopup="true"
             @click="onClick"
-            @contextmenu.prevent="onContextMenu"
+            @contextmenu="onContextMenu"
             @mouseenter="onHover"
-            @focus.capture="onFocus"
-            aria-haspopup="true">
+            @focus.capture="onFocus">
             <slot name="trigger" :active="isActive">
                 {{ label }}
             </slot>
-        </div>
+        </component>
 
         <transition :name="animation">
             <div
@@ -515,15 +489,15 @@ export default defineComponent({
         </transition>
         <transition :name="animation">
             <component
-                v-show="(!disabled && (isActive || isHoverable)) || inline"
-                ref="dropdownMenu"
                 :is="menuTag"
+                v-show="(!disabled && (isActive || isHovered)) || inline"
+                ref="menuRef"
+                v-trap-focus="trapFocus"
                 :class="menuClasses"
                 :aria-hidden="!isActive"
                 :role="ariaRole"
                 :aria-modal="!inline"
-                :style="menuStyle"
-                v-trap-focus="trapFocus">
+                :style="menuStyle">
                 <slot />
             </component>
         </transition>
diff --git a/packages/oruga-next/src/components/dropdown/DropdownItem.vue b/packages/oruga-next/src/components/dropdown/DropdownItem.vue
index feba401f9..f42da5244 100644
--- a/packages/oruga-next/src/components/dropdown/DropdownItem.vue
+++ b/packages/oruga-next/src/components/dropdown/DropdownItem.vue
@@ -1,129 +1,109 @@
-<script lang="ts">
-import type { Component, PropType } from "vue";
-import { defineComponent } from "vue";
-
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-
-import { getOptions } from "../../utils/config";
-import { getValueByPath } from "../../utils/helpers";
+<script setup lang="ts" generic="T">
+import { computed, onMounted, type Component, type PropType } from "vue";
+import { useComputedClass, useClassProps } from "@/composables";
+import { getOption } from "@/utils/config";
+import { injectDropdown } from "./useDropdownShare";
+import { uuid } from "@/utils/helpers";
 
 /**
  * @displayName Dropdown Item
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "ODropdownItem",
-    mixins: [BaseComponentMixin],
     configField: "dropdown",
-    inject: ["$dropdown"],
-    emits: ["click"],
-    props: {
-        /**
-         * The value that will be returned on events and v-model
-         */
-        value: {
-            type: [String, Number, Boolean, Object, Array],
-        },
-        /**
-         * Item label, unnecessary when default slot is used
-         */
-        label: {
-            type: String,
-            default: undefined,
-        },
-        /**
-         * Item is disabled
-         */
-        disabled: Boolean,
-        /**
-         * Item is clickable and emit an event
-         */
-        clickable: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Dropdown item tag name
-         */
-        tag: {
-            type: [String, Object, Function] as PropType<string | Component>,
-            default: () => {
-                return getValueByPath(getOptions(), "dropdown.itemTag", "div");
-            },
-        },
-        tabindex: {
-            type: [Number, String],
-            default: 0,
-        },
-        ariaRole: {
-            type: String,
-            default: "",
-        },
-        itemClass: [String, Function, Array],
-        itemActiveClass: [String, Function, Array],
-        itemDisabledClass: [String, Function, Array],
+    inheritAttrs: false,
+});
+
+const props = defineProps({
+    /** The value that will be returned on events and v-model */
+    value: {
+        type: [String, Number, Boolean, Object, Array] as PropType<T>,
+        default: () => uuid(),
     },
-    computed: {
-        parent() {
-            return this.$dropdown;
-        },
-        rootClasses() {
-            return [
-                this.computedClass("itemClass", "o-drop__item"),
-                {
-                    [this.computedClass(
-                        "itemDisabledClass",
-                        "o-drop__item--disabled",
-                    )]: this.parent.disabled || this.disabled,
-                },
-                {
-                    [this.computedClass(
-                        "itemActiveClass",
-                        "o-drop__item--active",
-                    )]: this.isActive,
-                },
-            ];
-        },
-        ariaRoleItem() {
-            return this.ariaRole === "menuitem" || this.ariaRole === "listitem"
-                ? this.ariaRole
-                : null;
-        },
-        isClickable() {
-            return !this.parent.disabled && !this.disabled && this.clickable;
-        },
-        isActive() {
-            if (this.parent.selected === null) return false;
-            if (this.parent.multiple)
-                return this.parent.selected.indexOf(this.value) >= 0;
-            return this.value === this.parent.selected;
-        },
+    /** Item label, unnecessary when default slot is used */
+    label: { type: String, default: undefined },
+    /** Item is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Item is clickable and emit an event */
+    clickable: { type: Boolean, default: true },
+    /** Dropdown item tag name */
+    tag: {
+        type: [String, Object, Function] as PropType<string | Component>,
+        default: () => getOption("dropdown.itemTag", "div"),
     },
-    methods: {
-        /**
-         * Click listener, select the item.
-         */
-        selectItem() {
-            if (!this.isClickable) return;
+    /** Set the tabindex attribute on the dropdown item div (-1 to prevent selection via tab key) */
+    tabindex: { type: [Number, String], default: 0 },
+    /**
+     * Role attribute to be passed to the item container for better accessibility.
+     * Use menuitem only in situations where your dropdown is related to a navigation menu.
+     * @values listitem, menuitem
+     */
+    ariaRole: { type: String, default: "listitem" },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps(["itemClass", "itemActiveClass", "itemDisabledClass"]),
+});
+
+const emits = defineEmits<{
+    /**
+     * onclick event
+     * @param value {[String, Number, Boolean, Object, Array]} value prop data
+     * @param event {event} Native Event
+     */
+    (e: "click", value: T, event: Event): void;
+}>();
 
-            this.parent.selectItem(this.value);
-            this.$emit("click");
-        },
+// inject parent dropdown component if used inside one
+const { parentDropdown } = injectDropdown<T>();
+
+onMounted(() => {
+    if (!parentDropdown.value)
+        throw new Error("You should wrap oDropdownItem on a oDropdown");
+});
+
+const isClickable = computed(
+    () =>
+        !parentDropdown.value.props.disabled &&
+        !props.disabled &&
+        props.clickable,
+);
+
+const isActive = computed(() => {
+    if (parentDropdown.value.selected === null) return false;
+    if (parentDropdown.value.props.multiple)
+        return parentDropdown.value.selected.indexOf(props.value as T) >= 0;
+    return props.value === parentDropdown.value.selected;
+});
+
+/** Click listener, select the item. */
+function selectItem(event: Event): void {
+    if (!isClickable.value) return;
+    parentDropdown.value.selectItem(props.value as T);
+    emits("click", props.value as T, event);
+}
+
+// --- Computed Component Classes ---
+
+const rootClasses = computed(() => [
+    useComputedClass("itemClass", "o-drop__item"),
+    {
+        [useComputedClass("itemDisabledClass", "o-drop__item--disabled")]:
+            parentDropdown.value.props.disabled || props.disabled,
     },
-    created() {
-        if (!this.parent) {
-            throw new Error("You should wrap oDropdownItem on a oDropdown");
-        }
+    {
+        [useComputedClass("itemActiveClass", "o-drop__item--active")]:
+            isActive.value,
     },
-});
+]);
 </script>
 
 <template>
     <component
         :is="tag"
         :class="rootClasses"
-        @click="selectItem"
-        :role="ariaRoleItem"
-        :tabindex="tabindex">
+        :role="ariaRole"
+        :tabindex="tabindex"
+        @click="selectItem">
         <slot>{{ label }}</slot>
     </component>
 </template>
diff --git a/packages/oruga-next/src/components/dropdown/index.ts b/packages/oruga-next/src/components/dropdown/index.ts
index db60ab07f..e6c3a9fc1 100644
--- a/packages/oruga-next/src/components/dropdown/index.ts
+++ b/packages/oruga-next/src/components/dropdown/index.ts
@@ -3,7 +3,7 @@ import type { App, Plugin } from "vue";
 import Dropdown from "./Dropdown.vue";
 import DropdownItem from "./DropdownItem.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/dropdown/useDropdownShare.ts b/packages/oruga-next/src/components/dropdown/useDropdownShare.ts
new file mode 100644
index 000000000..d0d7ced81
--- /dev/null
+++ b/packages/oruga-next/src/components/dropdown/useDropdownShare.ts
@@ -0,0 +1,31 @@
+import { inject, provide, type ComputedRef } from "vue";
+import Dropdown from "./Dropdown.vue";
+
+export type DropdownProps = InstanceType<typeof Dropdown>["$props"];
+
+type DropdownData<T> = {
+    $el: Element;
+    props: DropdownProps;
+    selected: T[];
+    selectItem: (value: T) => void;
+};
+
+/** provide/inject key */
+const $dropdown = Symbol();
+
+/** provide/inject type */
+type ProvidedDropdown<T> = ComputedRef<DropdownData<T>>;
+
+/**
+ * Provide field component data via dependency injection.
+ * Provided data is a computed ref to enjure reactivity.
+ */
+export function provideDropdown<T>(data: ProvidedDropdown<T>): void {
+    provide<ProvidedDropdown<T>>($dropdown, data);
+}
+
+/** Inject parent field component if used inside one. **/
+export function injectDropdown<T>() {
+    const parentDropdown = inject<ProvidedDropdown<T>>($dropdown, undefined);
+    return { parentDropdown };
+}
diff --git a/packages/oruga-next/src/components/field/Field.vue b/packages/oruga-next/src/components/field/Field.vue
index 465661a8f..5891d9adb 100644
--- a/packages/oruga-next/src/components/field/Field.vue
+++ b/packages/oruga-next/src/components/field/Field.vue
@@ -1,291 +1,291 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from "vue";
 
-import FieldBody from "./FieldBody.vue";
+import OFieldBody from "./FieldBody.vue";
 
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import MatchMediaMixin from "../../utils/MatchMediaMixin";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import { useComputedClass, useClassProps, useMatchMedia } from "@/composables";
+
+import { injectField, provideField } from "../field/useFieldShare";
 
 /**
  * Fields are used to add functionality to controls and to attach/group components and elements together
  * @displayName Field
  * @style _field.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OField",
-    components: {
-        [FieldBody.name]: FieldBody,
-    },
     configField: "field",
-    mixins: [BaseComponentMixin, MatchMediaMixin],
-    provide() {
-        return {
-            $field: this,
-        };
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** Mobile breakpoint as max-width value */
+    mobileBreakpoint: {
+        type: String,
+        default: () => getOption("field.mobileBreakpoint"),
     },
-    inject: {
-        $field: { from: "$field", default: false },
+    /**
+     * Color of the field and help message, also adds a matching icon, optional.
+     * Used by Input, Select and Autocomplete.
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant: { type: String, default: undefined },
+    /** Field label */
+    label: { type: String, default: undefined },
+    /**
+     * Vertical size of input, optional
+     * @values small, medium, large
+     */
+    labelSize: {
+        type: String,
+        default: () => getOption("field.labelsize"),
     },
-    props: {
-        /**
-         * 	Color of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocomplete
-         *  @values primary, info, success, warning, danger, and any other custom color
-         */
-        variant: String,
-        /**
-         * Field label
-         */
-        label: String,
-        /**
-         * Same as native for set on the label
-         */
-        labelFor: String,
-        /**
-         * Help message text
-         */
-        message: String,
-        /**
-         * Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page)
-         */
-        grouped: Boolean,
-        /**
-         * Allow controls to fill up multiple lines, making it responsive
-         */
-        groupMultiline: Boolean,
-        /**
-         * Group label and control on the same line for horizontal forms
-         */
-        horizontal: Boolean,
-        /**
-         * Field automatically attach controls together
-         */
-        addons: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Vertical size of input, optional
-         * @values small, medium, large
-         */
-        labelSize: String,
-        rootClass: [String, Function, Array],
-        horizontalClass: [String, Function, Array],
-        groupedClass: [String, Function, Array],
-        groupMultilineClass: [String, Function, Array],
-        labelClass: [String, Function, Array],
-        labelSizeClass: [String, Function, Array],
-        labelHorizontalClass: [String, Function, Array],
-        bodyClass: [String, Function, Array],
-        bodyHorizontalClass: [String, Function, Array],
-        addonsClass: [String, Function, Array],
-        messageClass: [String, Function, Array],
-        variantMessageClass: [String, Function, Array],
-        variantLabelClass: [String, Function, Array],
-        mobileClass: [String, Function, Array],
-        focusedClass: [String, Function, Array],
-        filledClass: [String, Function, Array],
+    /** Same as native for set on the label */
+    labelFor: { type: String, default: undefined },
+    /** Help message text */
+    message: { type: String, default: undefined },
+    /**
+     * Direct child components/elements of Field will be grouped horizontally
+     * (see which ones at the top of the page).
+     */
+    grouped: { type: Boolean, default: false },
+    /** Allow controls to fill up multiple lines, making it responsive */
+    groupMultiline: { type: Boolean, default: false },
+    /** Group label and control on the same line for horizontal forms */
+    horizontal: { type: Boolean, default: false },
+    /** Field automatically attach controls together */
+    addons: { type: Boolean, default: true },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "horizontalClass",
+        "groupedClass",
+        "groupMultilineClass",
+        "labelClass",
+        "labelSizeClass",
+        "labelHorizontalClass",
+        "bodyClass",
+        "bodyHorizontalClass",
+        "addonsClass",
+        "messageClass",
+        "variantMessageClass",
+        "variantLabelClass",
+        "mobileClass",
+        "focusedClass",
+        "filledClass",
+    ]),
+});
+
+const { isMobile } = useMatchMedia();
+
+/** Set internal variant when prop change. */
+const fieldVariant = ref(props.variant);
+watch(
+    () => props.variant,
+    (v) => (fieldVariant.value = v),
+);
+
+/** Set internal message when prop change. */
+const fieldMessage = ref(props.message);
+watch(
+    () => props.message,
+    (v) => (fieldMessage.value = v),
+);
+
+/** this can be set from outside to update the focus state. */
+const isFocused = ref(false);
+/** this can be set from outside to update the filled state. */
+const isFilled = ref(false);
+
+// inject parent field component if used inside one
+const { parentField } = injectField();
+
+/** Set parent message if we use Field in Field. */
+watch(
+    () => fieldMessage.value,
+    (value) => {
+        if (parentField?.value?.hasInnerField) {
+            if (!parentField.value.fieldVariant)
+                parentField.value.setVariant(fieldVariant.value);
+            if (!parentField.value.fieldMessage)
+                parentField.value.setMessage(value);
+        }
     },
-    data() {
-        return {
-            newVariant: this.variant,
-            newMessage: this.message,
-            isFocused: false,
-            isFilled: false,
-        };
+);
+
+const slots = useSlots();
+
+const hasLabel = computed(() => props.label || !!slots.label);
+
+const hasMessage = computed(
+    () =>
+        !!(!parentField?.value?.hasInnerField && fieldMessage.value) ||
+        !!slots.message,
+);
+
+const hasInnerField = computed(
+    () => props.grouped || props.groupMultiline || hasAddons(),
+);
+
+function hasAddons(): boolean {
+    if (!props.addons || props.horizontal) return false;
+
+    let renderedNode = 0;
+    // [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.
+    const slot = slots.default();
+    if (slot) {
+        const children =
+            slot.length === 1 && Array.isArray(slot[0].children)
+                ? slot[0].children
+                : slot;
+        renderedNode = children.filter((n) => !!n).length;
+    }
+    return renderedNode > 1 && props.addons && !props.horizontal;
+}
+
+// --- Field Dependency Injection Feature ---
+
+const rootRef = ref();
+
+function setFocus(value: boolean): void {
+    isFocused.value = value;
+}
+function setFilled(value: boolean): void {
+    isFilled.value = value;
+}
+function setVariant(value: string): void {
+    fieldVariant.value = value;
+}
+function setMessage(value: string): void {
+    fieldMessage.value = value;
+}
+
+// Provided data is a computed ref to enjure reactivity.
+const provideData = computed(() => ({
+    $el: rootRef.value,
+    props,
+    hasInnerField: hasInnerField.value,
+    hasMessage: hasMessage.value,
+    fieldVariant: fieldVariant.value,
+    fieldMessage: fieldMessage.value,
+    setFocus,
+    setFilled,
+    setVariant,
+    setMessage,
+}));
+
+// Provide field component data via dependency injection.
+provideField(provideData);
+
+// --- Computed Component Classes ---
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-field"),
+    {
+        [useComputedClass("horizontalClass", "o-field--horizontal")]:
+            props.horizontal,
     },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-field"),
-                {
-                    [this.computedClass(
-                        "horizontalClass",
-                        "o-field--horizontal",
-                    )]: this.horizontal,
-                },
-                {
-                    [this.computedClass("mobileClass", "o-field--mobile")]:
-                        this.isMatchMedia,
-                },
-                {
-                    [this.computedClass("focusedClass", "o-field--focused")]:
-                        this.isFocused,
-                },
-                {
-                    [this.computedClass("filledClass", "o-field--filled")]:
-                        this.isFilled,
-                },
-            ];
-        },
-        messageClasses() {
-            return [
-                this.computedClass("messageClass", "o-field__message"),
-                {
-                    [this.computedClass(
-                        "variantMessageClass",
-                        "o-field__message-",
-                        this.newVariant,
-                    )]: this.newVariant,
-                },
-            ];
-        },
-        labelClasses() {
-            return [
-                this.computedClass("labelClass", "o-field__label"),
-                {
-                    [this.computedClass(
-                        "labelSizeClass",
-                        "o-field__label-",
-                        this.labelSize,
-                    )]: this.labelSize,
-                },
-                {
-                    [this.computedClass(
-                        "variantLabelClass",
-                        "o-field__label-",
-                        this.newVariant,
-                    )]: this.newVariant,
-                },
-            ];
-        },
-        labelHorizontalClasses() {
-            return [
-                this.computedClass(
-                    "labelHorizontalClass",
-                    "o-field__horizontal-label",
-                ),
-            ];
-        },
-        bodyClasses() {
-            return [this.computedClass("bodyClass", "o-field__body")];
-        },
-        bodyHorizontalClasses() {
-            return [
-                this.computedClass(
-                    "bodyHorizontalClass",
-                    "o-field__horizontal-body",
-                ),
-            ];
-        },
-        innerFieldClasses() {
-            return [
-                this.computedClass("rootClass", "o-field"),
-                {
-                    [this.computedClass(
-                        "groupMultilineClass",
-                        "o-field--grouped-multiline",
-                    )]: this.groupMultiline,
-                },
-                {
-                    [this.computedClass("groupedClass", "o-field--grouped")]:
-                        this.grouped,
-                },
-                {
-                    [this.computedClass("addonsClass", "o-field--addons")]:
-                        !this.grouped && this.hasAddons(),
-                },
-            ];
-        },
-        parent() {
-            return this.$field;
-        },
-        hasLabelSlot() {
-            return this.$slots.label;
-        },
-        hasMessageSlot() {
-            return this.$slots.message;
-        },
-        hasLabel() {
-            return this.label || this.hasLabelSlot;
-        },
-        hasMessage() {
-            return (
-                ((!this.parent || !this.parent.hasInnerField) &&
-                    this.newMessage) ||
-                this.hasMessageSlot
-            );
-        },
-        hasInnerField() {
-            return this.grouped || this.groupMultiline || this.hasAddons();
-        },
+    {
+        [useComputedClass("mobileClass", "o-field--mobile")]: isMobile.value,
     },
-    watch: {
-        /**
-         * Set internal variant when prop change.
-         */
-        variant(value) {
-            this.newVariant = value;
-        },
-
-        /**
-         * Set internal message when prop change.
-         */
-        message(value) {
-            this.newMessage = value;
-        },
-
-        /**
-         * Set parent message if we use Field in Field.
-         */
-        newMessage(value) {
-            if (this.parent && this.parent.hasInnerField) {
-                if (!this.parent.variant) {
-                    this.parent.newVariant = this.newVariant;
-                }
-                if (!this.parent.message) {
-                    this.parent.newMessage = value;
-                }
-            }
-        },
+    {
+        [useComputedClass("focusedClass", "o-field--focused")]: isFocused.value,
     },
-    methods: {
-        hasAddons() {
-            let renderedNode = 0;
-            const slot = this.$slots.default();
-            if (slot) {
-                const children =
-                    slot.length === 1 && Array.isArray(slot[0].children)
-                        ? slot[0].children
-                        : slot;
-                renderedNode = children.reduce(
-                    (i, node) => (node ? i + 1 : i),
-                    0,
-                );
-            }
-            return renderedNode > 1 && this.addons && !this.horizontal;
-        },
+    {
+        [useComputedClass("filledClass", "o-field--filled")]: isFilled.value,
     },
-});
+]);
+
+const messageClasses = computed(() => [
+    useComputedClass("messageClass", "o-field__message"),
+    {
+        [useComputedClass(
+            "variantMessageClass",
+            "o-field__message-",
+            fieldVariant.value,
+        )]: fieldVariant.value,
+    },
+]);
+
+const labelClasses = computed(() => [
+    useComputedClass("labelClass", "o-field__label"),
+    {
+        [useComputedClass(
+            "labelSizeClass",
+            "o-field__label-",
+            props.labelSize,
+        )]: props.labelSize,
+    },
+    {
+        [useComputedClass(
+            "variantLabelClass",
+            "o-field__label-",
+            fieldVariant.value,
+        )]: fieldVariant.value,
+    },
+]);
+
+const labelHorizontalClasses = computed(() => [
+    useComputedClass("labelHorizontalClass", "o-field__horizontal-label"),
+]);
+
+const bodyClasses = computed(() => [
+    useComputedClass("bodyClass", "o-field__body"),
+]);
+
+const bodyHorizontalClasses = computed(() => [
+    useComputedClass("bodyHorizontalClass", "o-field__horizontal-body"),
+]);
+
+const innerFieldClasses = computed(() => [
+    useComputedClass("rootClass", "o-field"),
+    {
+        [useComputedClass("groupMultilineClass", "o-field--grouped-multiline")]:
+            props.groupMultiline,
+    },
+    {
+        [useComputedClass("groupedClass", "o-field--grouped")]: props.grouped,
+    },
+    {
+        [useComputedClass("addonsClass", "o-field--addons")]:
+            !props.grouped && hasAddons(),
+    },
+]);
 </script>
 
 <template>
-    <div :class="rootClasses">
+    <div ref="rootRef" :class="rootClasses">
         <div v-if="horizontal" :class="labelHorizontalClasses">
             <label v-if="hasLabel" :for="labelFor" :class="labelClasses">
-                <slot v-if="hasLabelSlot" name="label" />
-                <template v-else>{{ label }}</template>
+                <slot name="label">{{ label }}</slot>
             </label>
         </div>
         <template v-else>
             <label v-if="hasLabel" :for="labelFor" :class="labelClasses">
-                <slot v-if="hasLabelSlot" name="label" />
-                <template v-else>{{ label }}</template>
+                <slot name="label">{{ label }}</slot>
             </label>
         </template>
-        <o-field-body v-if="horizontal">
+
+        <o-field-body v-if="horizontal" :classes="bodyHorizontalClasses">
             <slot />
         </o-field-body>
+
         <div v-else-if="hasInnerField" :class="bodyClasses">
             <div :class="innerFieldClasses">
                 <slot />
             </div>
         </div>
+
         <template v-else>
             <slot />
         </template>
+
         <p v-if="hasMessage && !horizontal" :class="messageClasses">
-            <slot v-if="hasMessageSlot" name="message" />
-            <template v-else>{{ newMessage }}</template>
+            <slot name="message"> {{ fieldMessage }} </slot>
         </p>
     </div>
 </template>
diff --git a/packages/oruga-next/src/components/field/FieldBody.vue b/packages/oruga-next/src/components/field/FieldBody.vue
index 02e344209..cb64c23a3 100644
--- a/packages/oruga-next/src/components/field/FieldBody.vue
+++ b/packages/oruga-next/src/components/field/FieldBody.vue
@@ -1,41 +1,61 @@
 <script lang="ts">
-import { defineComponent, h, resolveComponent, Comment, Text } from "vue";
+import {
+    defineComponent,
+    h,
+    resolveComponent,
+    Comment,
+    Text,
+    useSlots,
+    type PropType,
+} from "vue";
+
+import { injectField } from "./useFieldShare";
 
 export default defineComponent({
     name: "OFieldBody",
-    inject: ["$field"],
     configField: "field",
-    computed: {
-        parent() {
-            return this.$field;
+    props: {
+        classes: {
+            type: Array as PropType<string[]>,
+            default: undefined,
         },
     },
-    render() {
-        let first = true;
-        const slot = this.$slots.default();
-        const children =
-            slot.length === 1 && Array.isArray(slot[0].children)
-                ? slot[0].children
-                : slot;
-        return h(
-            "div",
-            { class: this.parent.bodyHorizontalClasses },
-            children.map((element) => {
-                let message;
-                if (element.type === Comment || element.type === Text) {
-                    return element;
-                }
-                if (first) {
-                    message = this.parent.newMessage;
-                    first = false;
-                }
-                return h(
-                    resolveComponent("OField"),
-                    { variant: this.parent.newVariant, message },
-                    () => [element],
-                );
-            }),
-        );
+    setup(props) {
+        // inject parent field component if used inside one
+        const { parentField } = injectField();
+
+        const slots = useSlots();
+
+        return () => {
+            let first = true;
+            const slot = slots.default();
+            const children =
+                slot.length === 1 && Array.isArray(slot[0].children)
+                    ? slot[0].children
+                    : slot;
+            return h(
+                "div",
+                { class: props.classes },
+                children.map((element: any) => {
+                    let message;
+                    if (element.type === Comment || element.type === Text) {
+                        return element;
+                    }
+                    if (first) {
+                        message = parentField.value.fieldMessage;
+                        first = false;
+                    }
+                    return h(
+                        resolveComponent("OField"),
+                        {
+                            variant: parentField.value.fieldVariant,
+                            message,
+                        },
+                        () => [element],
+                    );
+                }),
+            );
+        };
     },
 });
 </script>
diff --git a/packages/oruga-next/src/components/field/index.ts b/packages/oruga-next/src/components/field/index.ts
index 6b8b925d7..9501847b3 100644
--- a/packages/oruga-next/src/components/field/index.ts
+++ b/packages/oruga-next/src/components/field/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Field from "./Field.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/field/useFieldShare.ts b/packages/oruga-next/src/components/field/useFieldShare.ts
new file mode 100644
index 000000000..df70d3b6a
--- /dev/null
+++ b/packages/oruga-next/src/components/field/useFieldShare.ts
@@ -0,0 +1,87 @@
+import { computed, inject, provide, type ComputedRef } from "vue";
+
+import Field from "./Field.vue";
+import { getOption } from "@/utils/config";
+
+export type FieldProps = InstanceType<typeof Field>["$props"];
+
+type FieldData = {
+    $el: Element;
+    props: FieldProps;
+    hasInnerField: boolean;
+    hasMessage: boolean;
+    fieldVariant: string;
+    fieldMessage: string;
+    setFocus: (value: boolean) => void;
+    setFilled: (value: boolean) => void;
+    setVariant: (value: string) => void;
+    setMessage: (value: string) => void;
+};
+
+/** provide/inject key */
+const $field = Symbol();
+
+/** provide/inject type */
+type ProvidedField = ComputedRef<FieldData>;
+
+/**
+ * Provide field component data via dependency injection.
+ * Provided data is a computed ref to enjure reactivity.
+ */
+export function provideField(data: ProvidedField): void {
+    provide<ProvidedField>($field, data);
+}
+
+/** Inject parent field component if used inside one. **/
+export function injectField() {
+    const parentField = inject<ProvidedField>($field, undefined);
+
+    /**
+     * Get the type prop from parent if it's a Field.
+     */
+    const statusVariant = computed(() => {
+        if (!parentField?.value) return undefined;
+        else if (!parentField.value.fieldVariant) return undefined;
+        else {
+            if (typeof parentField.value.fieldVariant === "string") {
+                return parentField.value.fieldVariant;
+            } else if (Array.isArray(parentField.value.fieldVariant)) {
+                for (const key in parentField.value.fieldVariant as any) {
+                    if (parentField.value.fieldVariant[key]) {
+                        return key;
+                    }
+                }
+            }
+        }
+        return undefined;
+    });
+
+    /**
+     * Get the message prop from parent if it's a Field.
+     */
+    const statusMessage = computed(() =>
+        !parentField.value
+            ? parentField.value.fieldMessage || parentField.value.hasMessage
+            : "",
+    );
+
+    /**
+     * Icon name based on the variant.
+     */
+    const statusVariantIcon = computed(() => {
+        const statusVariantIcon = getOption("statusVariantIcon", {
+            success: "check",
+            danger: "alert-circle",
+            info: "information",
+            warning: "alert",
+        });
+        return statusVariantIcon[statusVariant.value] || "";
+    });
+
+    return {
+        parentField,
+        statusVariant,
+        statusVariantIcon,
+        statusMessage,
+    };
+}
diff --git a/packages/oruga-next/src/components/index.ts b/packages/oruga-next/src/components/index.ts
index 9ed9828b2..8dbccd2fd 100644
--- a/packages/oruga-next/src/components/index.ts
+++ b/packages/oruga-next/src/components/index.ts
@@ -9,7 +9,6 @@ export * from "./dropdown";
 export * from "./field";
 export * from "./icon";
 export * from "./input";
-export * from "./inputitems";
 export * from "./loading";
 export * from "./menu";
 export * from "./modal";
@@ -24,6 +23,7 @@ export * from "./steps";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./inputitems";
 export * from "./timepicker";
 export * from "./tooltip";
 export * from "./upload";
diff --git a/packages/oruga-next/src/components/input/Input.vue b/packages/oruga-next/src/components/input/Input.vue
index 65ab16920..fc6a12ac5 100644
--- a/packages/oruga-next/src/components/input/Input.vue
+++ b/packages/oruga-next/src/components/input/Input.vue
@@ -1,344 +1,407 @@
-<script lang="ts">
-import { defineComponent, type StyleValue } from "vue";
+<script setup lang="ts">
+import {
+    ref,
+    computed,
+    nextTick,
+    watch,
+    onMounted,
+    type StyleValue,
+} from "vue";
 
-import Icon from "../icon/Icon.vue";
+import OIcon from "../icon/Icon.vue";
 
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import FormElementMixin from "../../utils/FormElementMixin";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useInputHandler,
+} from "@/composables";
 
-import { getOptions } from "../../utils/config";
-import { getValueByPath } from "../../utils/helpers";
+import { injectField } from "../field/useFieldShare";
 
 /**
  * Get user Input. Use with Field to access all functionalities
  * @displayName Input
  * @style _input.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OInput",
-    components: {
-        [Icon.name]: Icon,
-    },
-    mixins: [BaseComponentMixin, FormElementMixin],
     configField: "input",
     inheritAttrs: false,
-    emits: [
-        "update:modelValue",
-        "input",
-        "focus",
-        "blur",
-        "invalid",
-        "icon-click",
-        "icon-right-click",
-    ],
-    props: {
-        /** @model */
-        modelValue: [Number, String],
-        /** Native options to use in HTML5 validation */
-        autocomplete: String,
-        /**
-         * Input type, like native
-         * @values Any native input type, and textarea
-         */
-        type: {
-            type: String,
-            default: "text",
-        },
-        /**
-         * Vertical size of input, optional
-         * @values small, medium, large
-         */
-        size: String,
-        /**
-         * Color of the control, optional
-         * @values primary, info, success, warning, danger, and any other custom color
-         */
-        variant: String,
-        /**
-         * 	Adds the reveal password functionality
-         */
-        passwordReveal: Boolean,
-        /**
-         * Makes the icon clickable
-         */
-        iconClickable: Boolean,
-        /**
-         * Show character counter when maxlength prop is passed
-         */
-        hasCounter: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(getOptions(), "input.counter", false);
-            },
-        },
-        /**
-         * Automatically adjust height in textarea
-         */
-        autosize: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * 	Icon name to be added on the right side
-         */
-        iconRight: String,
-        /**
-         * Make the icon right clickable
-         */
-        iconRightClickable: Boolean,
-        /** Variant of right icon */
-        iconRightVariant: String,
-        /** Add a button/icon to clear the inputed text */
-        clearable: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(getOptions(), "input.clearable", false);
-            },
-        },
-        /**
-         * Icon name to be added on the clear button
-         */
-        clearIcon: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "input.clearIcon",
-                    "close-circle",
-                );
-            },
-        },
-        rootClass: [String, Function, Array],
-        expandedClass: [String, Function, Array],
-        iconLeftSpaceClass: [String, Function, Array],
-        iconRightSpaceClass: [String, Function, Array],
-        inputClass: [String, Function, Array],
-        roundedClass: [String, Function, Array],
-        iconLeftClass: [String, Function, Array],
-        iconRightClass: [String, Function, Array],
-        counterClass: [String, Function, Array],
-        sizeClass: [String, Function, Array],
-        variantClass: [String, Function, Array],
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: { type: [String, Number], default: "" },
+    /**
+     * Input type, like native
+     * @values Any native input type, and textarea
+     */
+    type: { type: String, default: "text" },
+    /**
+     * Size of the control, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("input.size"),
     },
-    data() {
-        return {
-            newValue: this.modelValue,
-            newType: this.type,
-            // from mixin (ts workaround)
-            newAutocomplete:
-                this.autocomplete ||
-                getValueByPath(getOptions(), "input.autocompletete", "off"),
-            isPasswordVisible: false,
-            height: "auto",
-        };
+    /**
+     * Color of the control, optional
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant: {
+        type: String,
+        default: () => getOption("input.variant"),
     },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-ctrl-input"),
-                {
-                    [this.computedClass(
-                        "expandedClass",
-                        "o-ctrl-input--expanded",
-                    )]: this.expanded,
-                },
-            ];
-        },
-        inputClasses() {
-            return [
-                this.computedClass("inputClass", "o-input"),
-                {
-                    [this.computedClass("roundedClass", "o-input--rounded")]:
-                        this.rounded,
-                },
-                {
-                    [this.computedClass("sizeClass", "o-input--", this.size)]:
-                        this.size,
-                },
-                {
-                    [this.computedClass(
-                        "variantClass",
-                        "o-input--",
-                        this.statusVariant || this.variant,
-                    )]: this.statusVariant || this.variant,
-                },
-                {
-                    [this.computedClass("textareaClass", "o-input__textarea")]:
-                        this.type === "textarea",
-                },
-                {
-                    [this.computedClass(
-                        "iconLeftSpaceClass",
-                        "o-input-iconspace-left",
-                    )]: this.icon,
-                },
-                {
-                    [this.computedClass(
-                        "iconRightSpaceClass",
-                        "o-input-iconspace-right",
-                    )]: this.hasIconRight,
-                },
-            ];
-        },
-        iconLeftClasses() {
-            return [this.computedClass("iconLeftClass", "o-input__icon-left")];
-        },
-        iconRightClasses() {
-            return [
-                this.computedClass("iconRightClass", "o-input__icon-right"),
-            ];
-        },
-        counterClasses() {
-            return [this.computedClass("counterClass", "o-input__counter")];
-        },
-        computedValue: {
-            get() {
-                return this.newValue;
-            },
-            set(value) {
-                this.newValue = value;
-                this.$emit("update:modelValue", this.newValue);
-                this.syncFilled(this.newValue);
-                !this.isValid && this.checkHtml5Validity();
-            },
-        },
-        hasIconRight() {
-            return (
-                this.passwordReveal ||
-                (this.statusIcon && this.statusVariantIcon) ||
-                (this.clearable && this.newValue && this.clearIcon) ||
-                this.iconRight
-            );
-        },
-        rightIcon() {
-            if (this.passwordReveal) {
-                return this.passwordVisibleIcon;
-            } else if (this.clearable && this.newValue && this.clearIcon) {
-                return this.clearIcon;
-            } else if (this.iconRight) {
-                return this.iconRight;
-            }
-            return this.statusVariantIcon;
-        },
-        rightIconVariant() {
-            if (this.passwordReveal || this.iconRight) {
-                return this.iconRightVariant || this.variant || null;
-            }
-            return this.statusVariant;
-        },
+    /** Input placeholder */
+    placeholder: { type: String, default: undefined },
+    /** Makes input full width when inside a grouped or addon field */
+    expanded: { type: Boolean, default: false },
+    /** Makes the element rounded */
+    rounded: { type: Boolean, default: false },
+    /** Same as native disabled */
+    disabled: { type: Boolean, default: false },
+    /** Adds the reveal password functionality */
+    passwordReveal: { type: Boolean, default: false },
+    /** Same as native maxlength, plus character counter */
+    maxlength: { type: Number, default: undefined },
+    /** Show character counter when maxlength prop is passed */
+    hasCounter: {
+        type: Boolean,
+        default: () => getOption("input.counter", false),
+    },
+    /** Automatically adjust height in textarea */
+    autosize: { type: Boolean, default: false },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("input.iconPack", undefined),
+    },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("input.icon", undefined),
+    },
+    /** Makes the icon clickable */
+    iconClickable: { type: Boolean, default: false },
+    /** Icon name to be added on the right side */
+    iconRight: {
+        type: String,
+        default: () => getOption("input.iconRight", undefined),
+    },
+    /** Make the icon right clickable */
+    iconRightClickable: { type: Boolean, default: false },
+    /** Variant of right icon */
+    iconRightVariant: { type: String, default: undefined },
+    /** Add a button/icon to clear the inputed text */
+    clearable: {
+        type: Boolean,
+        default: () => getOption("input.clearable", false),
+    },
+    /** Icon name to be added on the clear button */
+    clearIcon: {
+        type: String,
+        default: () => getOption("input.clearIcon", "close-circle"),
+    },
+    /** Show status icon using field and variant prop */
+    statusIcon: {
+        type: Boolean,
+        default: () => getOption("statusIcon", true),
+    },
+    /** Native options to use in HTML5 validation */
+    autocomplete: {
+        type: String,
+        default: () => getOption("input.autocomplete", "off"),
+    },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "expandedClass",
+        "iconLeftSpaceClass",
+        "iconRightSpaceClass",
+        "inputClass",
+        "roundedClass",
+        "iconLeftClass",
+        "iconRightClass",
+        "counterClass",
+        "sizeClass",
+        "variantClass",
+    ]),
+});
 
-        /**
-         * Check if have any message prop from parent if it's a Field.
-         */
-        hasMessage() {
-            return !!this.statusMessage;
-        },
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {string | number} updated modelValue prop
+     */
+    (e: "update:modelValue", value: string | number): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+}>();
 
-        /**
-         * Current password-reveal icon name.
-         */
-        passwordVisibleIcon() {
-            return !this.isPasswordVisible ? "eye" : "eye-off";
-        },
-        /**
-         * Get value length
-         */
-        valueLength() {
-            if (typeof this.computedValue === "string") {
-                return this.computedValue.length;
-            } else if (typeof this.computedValue === "number") {
-                return this.computedValue.toString().length;
-            }
-            return 0;
-        },
-        /**
-         * Computed inline styles for autoresize
-         */
-        computedStyles(): StyleValue {
-            if (!this.autosize) return {};
-            return {
-                resize: "none",
-                height: this.height,
-                overflow: "hidden",
-            };
-        },
+// --- Validation Feature ---
+
+const inputRef = ref<HTMLInputElement>();
+const textareaRef = ref<HTMLInputElement>();
+
+const elementRef = computed<HTMLInputElement>(() =>
+    props.type === "textarea" ? textareaRef.value : inputRef.value,
+);
+
+// use form input functionalities
+const {
+    checkHtml5Validity,
+    onBlur,
+    onFocus,
+    onInvalid,
+    setFocus,
+    isValid,
+    isFocused,
+} = useInputHandler(elementRef, emits, props);
+
+// inject parent field component if used inside one
+const { parentField, statusVariant, statusVariantIcon } = injectField();
 
-        $elementRef() {
-            return this.type === "textarea" ? "textarea" : "input";
+const vmodel = useVModelBinding<string | number>(props, emits);
+
+/** Get value length */
+const valueLength = computed(() =>
+    typeof vmodel.value === "string"
+        ? vmodel.value.length
+        : typeof vmodel.value === "number"
+        ? vmodel.value.toString().length
+        : 0,
+);
+
+onMounted(() => {
+    /**
+     * When v-model is changed:
+     *  1. Set parent field filled state.
+     *  2. Resize textarea input
+     *  3. Check html5 valdiation
+     */
+    watch(
+        () => vmodel.value,
+        (value) => {
+            if (parentField?.value) parentField.value.setFilled(!!value);
+            if (props.autosize) resize();
+            if (!isValid.value) nextTick(() => checkHtml5Validity());
         },
+        { immediate: true },
+    );
+});
+
+const height = ref("auto");
+
+function resize(): void {
+    height.value = "auto";
+    nextTick(() => {
+        if (textareaRef.value) {
+            const scrollHeight = textareaRef.value.scrollHeight;
+            height.value = scrollHeight + "px";
+        }
+    });
+}
+
+/** Computed inline styles for autoresize */
+const computedStyles = computed(
+    (): StyleValue =>
+        props.autosize
+            ? {
+                  resize: "none",
+                  height: height.value,
+                  overflow: "hidden",
+              }
+            : {},
+);
+
+// --- Icon Feature ---
+
+const hasIconRight = computed(
+    () =>
+        props.passwordReveal ||
+        (props.statusIcon && statusVariantIcon.value) ||
+        (props.clearable && vmodel.value && props.clearIcon) ||
+        props.iconRight,
+);
+
+const computedIconRight = computed(() => {
+    if (props.passwordReveal) {
+        return passwordVisibleIcon.value;
+    } else if (props.clearable && vmodel.value && props.clearIcon) {
+        return props.clearIcon;
+    } else if (props.iconRight) {
+        return props.iconRight;
+    }
+    return statusVariantIcon.value;
+});
+
+const computedIconRightVariant = computed(() =>
+    props.passwordReveal || props.iconRight
+        ? props.iconRightVariant || props.variant || null
+        : statusVariant.value,
+);
+
+function iconClick(emit, event): void {
+    emits(emit, event);
+    nextTick(() => setFocus());
+}
+
+function rightIconClick(event: Event): void {
+    if (props.passwordReveal) togglePasswordVisibility();
+    else if (props.clearable) vmodel.value = "";
+    if (props.iconRightClickable) iconClick("icon-right-click", event);
+}
+
+// --- Password Visability Feature ---
+
+const isPasswordVisible = ref(false);
+const inputType = ref(props.type);
+
+// update inputType on type prop change
+watch(
+    () => props.type,
+    (type) => (inputType.value = type),
+);
+
+/** Current password-reveal icon name. */
+const passwordVisibleIcon = computed(() =>
+    !isPasswordVisible.value ? "eye" : "eye-off",
+);
+
+/**
+ * Toggle the visibility of a password-reveal input
+ * by changing the type and focus the input right away.
+ */
+function togglePasswordVisibility(): void {
+    isPasswordVisible.value = !isPasswordVisible.value;
+    inputType.value = isPasswordVisible.value ? "text" : "password";
+    nextTick(() => setFocus());
+}
+
+// --- Computed Component Classes ---
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-ctrl-input"),
+    {
+        [useComputedClass("expandedClass", "o-ctrl-input--expanded")]:
+            props.expanded,
     },
-    watch: {
-        /**
-         * When v-model is changed:
-         *   1. Set internal value.
-         */
-        modelValue: {
-            immediate: true,
-            handler(value) {
-                this.newValue = value;
-                this.syncFilled(this.newValue);
-                if (this.autosize) {
-                    this.resize();
-                }
-            },
-        },
-        type(type) {
-            this.newType = type;
-        },
+]);
+
+const inputClasses = computed(() => [
+    useComputedClass("inputClass", "o-input"),
+    {
+        [useComputedClass("roundedClass", "o-input--rounded")]: props.rounded,
     },
-    methods: {
-        /**
-         * Toggle the visibility of a password-reveal input
-         * by changing the type and focus the input right away.
-         */
-        togglePasswordVisibility() {
-            this.isPasswordVisible = !this.isPasswordVisible;
-            this.newType = this.isPasswordVisible ? "text" : "password";
-
-            this.$nextTick(() => {
-                this.focus();
-            });
-        },
+    {
+        [useComputedClass("sizeClass", "o-input--", props.size)]: props.size,
+    },
+    {
+        [useComputedClass(
+            "variantClass",
+            "o-input--",
+            statusVariant.value || props.variant,
+        )]: statusVariant.value || props.variant,
+    },
+    {
+        [useComputedClass("textareaClass", "o-input__textarea")]:
+            props.type === "textarea",
+    },
+    {
+        [useComputedClass("iconLeftSpaceClass", "o-input-iconspace-left")]:
+            props.icon,
+    },
+    {
+        [useComputedClass("iconRightSpaceClass", "o-input-iconspace-right")]:
+            hasIconRight.value,
+    },
+]);
 
-        iconClick(emit, event) {
-            this.$emit(emit, event);
-            this.$nextTick(() => {
-                this.focus();
-            });
-        },
+const iconLeftClasses = computed(() => [
+    useComputedClass("iconLeftClass", "o-input__icon-left"),
+]);
 
-        rightIconClick(event) {
-            if (this.passwordReveal) {
-                this.togglePasswordVisibility();
-            } else if (this.clearable) {
-                this.computedValue = "";
-            } else if (this.iconRightClickable) {
-                this.iconClick("icon-right-click", event);
-            }
-        },
+const iconRightClasses = computed(() => [
+    useComputedClass("iconRightClass", "o-input__icon-right"),
+]);
 
-        resize() {
-            this.height = "auto";
-            this.$nextTick(() => {
-                const scrollHeight = this.$refs.textarea.scrollHeight;
-                this.height = scrollHeight + "px";
-            });
-        },
-    },
+const counterClasses = computed(() => [
+    useComputedClass("counterClass", "o-input__counter"),
+]);
+
+// --- Expose Public Functionalities ---
+
+const rootRef = ref();
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => rootRef.value),
+    // expose the input element
+    $inputRef: computed(() => elementRef.value),
 });
 </script>
 
 <template>
-    <div :class="rootClasses">
+    <div ref="rootRef" :class="rootClasses">
+        <o-icon
+            v-if="icon"
+            :class="iconLeftClasses"
+            :clickable="iconClickable"
+            :icon="icon"
+            :pack="iconPack"
+            :size="size"
+            @click="iconClick('icon-click', $event)" />
+
         <input
             v-if="type !== 'textarea'"
             v-bind="$attrs"
-            ref="input"
+            ref="inputRef"
+            v-model="vmodel"
+            :type="inputType"
             :class="inputClasses"
-            :type="newType"
-            :autocomplete="newAutocomplete"
             :maxlength="maxlength"
-            v-model="computedValue"
+            :autocomplete="autocomplete"
+            :placeholder="placeholder"
+            :disabled="disabled"
             @blur="onBlur"
             @focus="onFocus"
             @invalid="onInvalid" />
@@ -346,32 +409,25 @@ export default defineComponent({
         <textarea
             v-else
             v-bind="$attrs"
-            ref="textarea"
+            ref="textareaRef"
+            v-model="vmodel"
             :class="inputClasses"
             :maxlength="maxlength"
-            v-model="computedValue"
+            :style="computedStyles"
+            :placeholder="placeholder"
+            :disabled="disabled"
             @blur="onBlur"
             @focus="onFocus"
-            @invalid="onInvalid"
-            :style="computedStyles" />
-
-        <o-icon
-            v-if="icon"
-            :class="iconLeftClasses"
-            :clickable="iconClickable"
-            :icon="icon"
-            :pack="iconPack"
-            :size="size"
-            @click="iconClick('icon-click', $event)" />
+            @invalid="onInvalid" />
 
         <o-icon
             v-if="hasIconRight"
             :class="iconRightClasses"
             :clickable="passwordReveal || clearable || iconRightClickable"
-            :icon="rightIcon"
+            :icon="computedIconRight"
             :pack="iconPack"
             :size="size"
-            :variant="rightIconVariant"
+            :variant="computedIconRightVariant"
             both
             @click="rightIconClick" />
 
diff --git a/packages/oruga-next/src/components/input/index.ts b/packages/oruga-next/src/components/input/index.ts
index a0e17b3f0..ea509af81 100644
--- a/packages/oruga-next/src/components/input/index.ts
+++ b/packages/oruga-next/src/components/input/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Input from "./Input.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/inputitems/Inputitems.vue b/packages/oruga-next/src/components/inputitems/Inputitems.vue
index 5aa4c4866..9acb47b3d 100644
--- a/packages/oruga-next/src/components/inputitems/Inputitems.vue
+++ b/packages/oruga-next/src/components/inputitems/Inputitems.vue
@@ -1,438 +1,433 @@
-<script lang="ts">
-import Autocomplete from "../autocomplete/Autocomplete.vue";
-import Icon from "../icon/Icon.vue";
-
-import FormElementMixin from "../../utils/FormElementMixin";
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-
+<script setup lang="ts">
+import { computed, nextTick, ref, useAttrs, watch, type PropType } from "vue";
+
+import OIcon from "../icon/Icon.vue";
+import OAutocomplete from "../autocomplete/Autocomplete.vue";
+
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useInputHandler,
+} from "@/composables";
 import { getValueByPath } from "../../utils/helpers";
-import { getOptions } from "../../utils/config";
-import { defineComponent } from "vue";
 
 /**
- * A simple item input field that can have autocomplete functionality
+ * A simple tag input field that can have autocomplete functionality
  * @displayName Inputitems
  * @style _inputitems.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OInputitems",
-    components: {
-        [Autocomplete.name]: Autocomplete,
-        [Icon.name]: Icon,
-    },
-    mixins: [FormElementMixin, BaseComponentMixin],
-    inheritAttrs: false,
     configField: "inputitems",
-    props: {
-        /** @model */
-        modelValue: {
-            type: Array,
-            default: () => [],
-        },
-        /**
-         * Vertical size of input, optional
-         * @values small, medium, large
-         */
-        size: String,
-        /** Items data */
-        data: {
-            type: Array,
-            default: () => [],
-        },
-        /**
-         * Color of the each items, optional
-         * @values primary, info, success, warning, danger, and any other custom color
-         */
-        variant: String,
-        /** Limits the number of items, plus item counter */
-        maxitems: {
-            type: [Number, String],
-            required: false,
-        },
-        /** Show counter when maxlength or maxtags props are passed */
-        hasCounter: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "inputitems.hasCounter",
-                    true,
-                );
-            },
-        },
-        /** Property of the object (if data is array of objects) to use as display text */
-        field: {
-            type: String,
-            default: "value",
-        },
-        /** Add autocomplete feature (if true, any Autocomplete props may be used too) */
-        allowAutocomplete: Boolean,
-        /**  Property of the object (if data is array of objects) to use as display text of group */
-        groupField: String,
-        /**  Property of the object (if data is array of objects) to use as key to get items array of each group, optional */
-        groupOptions: String,
-        /**  Opens a dropdown with choices when the input field is focused */
-        openOnFocus: Boolean,
-        /** Input will be disabled */
-        disabled: Boolean,
-        /** Add close/delete button to the item */
-        closable: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "inputitems.closable",
-                    true,
-                );
-            },
-        },
-        /**
-         * Array of keys
-         * (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
-         * which will add a item when typing (default comma, tab and enter)
-         */
-        confirmKeys: {
-            type: Array,
-            default: () => {
-                return getValueByPath(getOptions(), "inputitems.confirmKeys", [
-                    ",",
-                    "Tab",
-                    "Enter",
-                ]);
-            },
-        },
-        /** Allow removing last item when pressing given keys, if input is empty */
-        removeOnKeys: {
-            type: Array,
-            default: () => {
-                return getValueByPath(getOptions(), "inputitems.removeOnKeys", [
-                    "Backspace",
-                ]);
-            },
-        },
-        /** When autocomplete, it allow to add new items */
-        allowNew: Boolean,
-        /** Array of chars used to split when pasting a new string */
-        onPasteSeparators: {
-            type: Array,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "inputitems.onPasteSeparators",
-                    [","],
-                );
-            },
-        },
-        /** Function to validate the value of the item before adding */
-        beforeAdding: {
-            type: Function,
-            default: () => true,
-        },
-        /** Allows adding the same item multiple time */
-        allowDuplicates: {
-            type: Boolean,
-            default: false,
-        },
-        /** Makes the autocomplete component check if list reached scroll end and emit infinite-scroll event */
-        checkInfiniteScroll: {
-            type: Boolean,
-            default: false,
-        },
-        /** Function to create a new item to push into v-model (items) */
-        createItem: {
-            type: Function,
-            default: (item: any) => item,
-        },
-        /** Icon name of close icon on selected item */
-        closeIcon: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "inputitems.closeIcon",
-                    "close",
-                );
-            },
-        },
-        /** The first option will always be pre-selected (easier to just hit enter or tab) */
-        keepFirst: Boolean,
-        /** Accessibility label for the close button */
-        ariaCloseLabel: String,
-        /** Append autocomplete content to body */
-        appendToBody: Boolean,
-        rootClass: [String, Array, Function],
-        expandedClass: [String, Array, Function],
-        variantClass: [String, Array, Function],
-        closeClass: [String, Array, Function],
-        itemClass: [String, Array, Function],
-        counterClass: [String, Array, Function],
-        autocompleteClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "inputitems.autocompleteClasses",
-                    {},
-                );
-            },
-        },
+    inheritAttrs: false,
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: { type: Array, default: () => [] },
+    /** Items data */
+    data: { type: Array, default: () => [] },
+    /** Property of the object (if data is array of objects) to use as display text */
+    field: { type: String, default: "value" },
+    /** Property of the object (if `data` is array of objects) to use as display text of group */
+    groupField: { type: String, default: undefined },
+    /** Property of the object (if `data` is array of objects) to use as key to get items array of each group, optional */
+    groupOptions: { type: String, default: undefined },
+    /**
+     * Vertical size of the input control, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("inputitems.size"),
     },
-    emits: [
-        "update:modelValue",
-        "focus",
-        "blur",
-        "invalid",
-        "add",
-        "remove",
-        "typing",
-        "infinite-scroll",
-        "icon-right-click",
-    ],
-    data() {
-        return {
-            items: Array.isArray(this.modelValue)
-                ? this.modelValue.slice(0)
-                : this.modelValue || [],
-            newItem: "",
-            isComposing: false,
-        };
+    /**
+     * Color of the each items, optional
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant: {
+        type: String,
+        default: () => getOption("inputitems.variant"),
     },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-inputit"),
-                {
-                    [this.computedClass(
-                        "expandedClass",
-                        "o-inputit--expanded",
-                    )]: this.expanded,
-                },
-            ];
-        },
-
-        containerClasses() {
-            return [
-                this.computedClass("containerClass", "o-inputit__container"),
-                {
-                    [this.computedClass(
-                        "sizeClass",
-                        "o-inputit__container--",
-                        this.size,
-                    )]: this.size,
-                },
-            ];
-        },
-
-        itemClasses() {
-            return [
-                this.computedClass("itemClass", "o-inputit__item"),
-                {
-                    [this.computedClass(
-                        "variantClass",
-                        "o-inputit__item--",
-                        this.variant,
-                    )]: this.variant,
-                },
-            ];
-        },
-
-        closeClasses() {
-            return [this.computedClass("closeClass", "o-inputit__item__close")];
-        },
-
-        counterClasses() {
-            return [this.computedClass("counterClass", "o-inputit__counter")];
-        },
-
-        autocompleteBind() {
-            return {
-                ...this.$attrs,
-                "root-class": this.computedClass(
-                    "autocompleteClasses.rootClass",
-                    "o-inputit__autocomplete",
-                ),
-                "input-classes": {
-                    "input-class": this.computedClass(
-                        "autocompleteClasses.inputClasses.inputClass",
-                        "o-inputit__input",
-                    ),
-                },
-                ...this.autocompleteClasses,
-            };
-        },
-
-        valueLength() {
-            return this.newItem.trim().length;
-        },
-
-        hasDefaultSlot() {
-            return !!this.$slots.default;
-        },
-
-        hasEmptySlot() {
-            return !!this.$slots.empty;
-        },
-
-        hasHeaderSlot() {
-            return !!this.$slots.header;
-        },
-
-        hasFooterSlot() {
-            return !!this.$slots.footer;
-        },
-
-        /**
-         * Show the input field if a maxitems hasn't been set or reached.
-         */
-        hasInput() {
-            return this.maxitems == null || this.itemsLength < this.maxitems;
-        },
-
-        itemsLength() {
-            return this.items.length;
-        },
-
-        /**
-         * If input has onPasteSeparators prop,
-         * returning new RegExp used to split pasted string.
-         */
-        separatorsAsRegExp() {
-            const sep = this.onPasteSeparators;
-
-            return sep.length
-                ? new RegExp(
-                      sep
-                          .map((s) => {
-                              return s
-                                  ? s.replace(
-                                        /[-[\]{}()*+?.,\\^$|#\s]/g,
-                                        "\\$&",
-                                    )
-                                  : null;
-                          })
-                          .join("|"),
-                      "g",
-                  )
-                : null;
-        },
-
-        $elementRef() {
-            return "autocomplete";
-        },
+    /** Limits the number of items, plus item counter */
+    maxitems: { type: Number, default: undefined },
+    /** Same as native maxlength, plus character counter */
+    maxlength: { type: Number, default: undefined },
+    /** Show counter when maxlength or maxtags props are passed */
+    hasCounter: {
+        type: Boolean,
+        default: () => getOption("inputitems.hasCounter", true),
     },
-    watch: {
-        /**
-         * When modelValue is changed set internal value.
-         */
-        modelValue(value) {
-            this.items = Array.isArray(value) ? value.slice(0) : value || [];
-        },
-
-        hasInput() {
-            if (!this.hasInput) this.onBlur();
-        },
+    /** Opens a dropdown with choices when the input field is focused */
+    openOnFocus: { type: Boolean, default: false },
+    /** Input placeholder */
+    placeholder: { type: String, default: undefined },
+    /** Makes input full width when inside a grouped or addon field */
+    expanded: { type: Boolean, default: false },
+    /** Same as native input disabled */
+    disabled: { type: Boolean, default: false },
+    /**
+     * Array of keys
+     * (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
+     * which will add a item when typing (default comma, tab and enter)
+     */
+    confirmKeys: {
+        type: Array,
+        default: () =>
+            getOption("inputitems.confirmKeys", [",", "Tab", "Enter"]),
     },
-    methods: {
-        addItem(item) {
-            const itemToAdd = item || this.newItem.trim();
-
-            if (itemToAdd) {
-                if (!this.allowAutocomplete) {
-                    const reg = this.separatorsAsRegExp;
-                    if (reg && itemToAdd.match(reg)) {
-                        itemToAdd
-                            .split(reg)
-                            .map((t) => t.trim())
-                            .filter((t) => t.length !== 0)
-                            .map(this.addItem);
-                        return;
-                    }
-                }
-                // Add the item input if it is not blank
-                // or previously added (if not allowDuplicates).
-                const add = !this.allowDuplicates
-                    ? this.items.indexOf(this.createItem(itemToAdd)) === -1
-                    : true;
-                if (add && this.beforeAdding(itemToAdd)) {
-                    this.items.push(this.createItem(itemToAdd));
-                    this.$emit("update:modelValue", this.items);
-                    this.$emit("add", itemToAdd);
-                }
-            }
-            // after autocomplete events
-            requestAnimationFrame(() => {
-                this.newItem = "";
-                this.$emit("typing", "");
-            });
-        },
-
-        getNormalizedItemText(item) {
-            if (typeof item === "object") {
-                item = getValueByPath(item, this.field);
-            }
-
-            return `${item}`;
-        },
+    /** Array of chars used to split when pasting a new string */
+    pasteSeparators: {
+        type: Array as PropType<string[]>,
+        default: () => getOption("inputitems.pasteSeparators", [","]),
+    },
+    /** The first option will always be pre-selected (easier to just hit enter or tab) */
+    keepFirst: { type: Boolean, default: false },
+    /** When autocomplete, it allow to add new items */
+    allowNew: { type: Boolean, default: false },
+    /** Allows adding the same item multiple time */
+    allowDuplicates: { type: Boolean, default: false },
+    /** Add autocomplete feature (if true, any Autocomplete props may be used too) */
+    allowAutocomplete: { type: Boolean, default: false },
+    /** Allow removing last item when pressing given keys, if input is empty */
+    removeOnKeys: {
+        type: Array,
+        default: () => getOption("inputitems.removeOnKeys", ["Backspace"]),
+    },
+    /** Function to validate the value of the item before adding */
+    beforeAdding: {
+        type: Function as PropType<(value: string) => boolean>,
+        default: () => true,
+    },
+    /** Function to create a new item to push into v-model (items) */
+    createItem: {
+        type: Function as PropType<(value: any) => any>,
+        default: (item: any) => item,
+    },
+    /** Makes the component check if list reached scroll start or end and emit scroll events. */
+    checkScroll: {
+        type: Boolean,
+        default: () => getOption("inputitems.checkScroll", false),
+    },
+    /** Add close/delete button to the item */
+    closable: {
+        type: Boolean,
+        default: () => getOption("inputitems.closable", true),
+    },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("inputitems.iconPack", undefined),
+    },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("inputitems.icon", undefined),
+    },
+    /** Icon name of close icon on selected item */
+    closeIcon: {
+        type: String,
+        default: () => getOption("inputitems.closeIcon", "close"),
+    },
+    /** Accessibility label for the close button */
+    ariaCloseLabel: {
+        type: String,
+        default: () => getOption("inputitems.ariaCloseLabel"),
+    },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** Native options to use in HTML5 validation */
+    autocomplete: {
+        type: String,
+        default: () => getOption("inputitems.autocomplete", "off"),
+    },
+    /** Append autocomplete content to body */
+    appendToBody: {
+        type: Boolean,
+        default: () => getOption("inputitems.appendToBody", false),
+    },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "expandedClass",
+        "variantClass",
+        "closeClass",
+        "itemClass",
+        "counterClass",
+    ]),
+    autocompleteClasses: {
+        type: Object,
+        default: () => getOption("inputitems.autocompleteClasses", {}),
+    },
+});
 
-        customOnBlur(event) {
-            // Add item on-blur if not select only
-            if (!this.allowAutocomplete) this.addItem();
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {any[]} updated modelValue prop
+     */
+    (e: "update:modelValue", value: any[]): void;
+    /**
+     * on input change event
+     * @param value {any} input value
+     */
+    (e: "input", value: any): void;
+    /**
+     * new item got added
+     * @param value {any} added item
+     */
+    (e: "add", value: any): void;
+    /**
+     * item got removed
+     * @param value {any} removed item
+     */
+    (e: "remove", value: any): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+    /** the scroll list inside the dropdown reached the start */
+    (e: "scroll-start"): void;
+    /** the scroll list inside the dropdown reached it's end */
+    (e: "scroll-end"): void;
+}>();
+
+const autocompleteRef = ref<InstanceType<typeof OAutocomplete>>();
+
+const items = useVModelBinding<any[]>(props, emits, { passive: true });
+
+// use form input functionalities
+const { onFocus, onBlur, onInvalid } = useInputHandler(
+    autocompleteRef,
+    emits,
+    props,
+);
+
+const newItem = ref("");
+const isComposing = ref(false);
+
+const valueLength = computed(() => newItem.value.trim().length);
+const itemsLength = computed(() => items.value.length);
+
+/** When modelValue is changed set internal value. */
+watch(
+    () => props.modelValue,
+    (value) => {
+        items.value = Array.isArray(value) ? value.slice(0) : value || [];
+    },
+);
+
+/** Show the input field if a maxitems hasn't been set or reached. */
+const hasInput = computed(
+    () => props.maxitems == null || itemsLength.value < props.maxitems,
+);
+
+watch(
+    () => hasInput.value,
+    () => {
+        // blur if input is empty
+        if (!hasInput.value) onBlur();
+    },
+);
 
-            this.onBlur(event);
-        },
+/**
+ * If input has pasteSeparators prop,
+ * returning new RegExp used to split pasted string.
+ */
+const separatorsAsRegExp = computed(() =>
+    props.pasteSeparators.length
+        ? new RegExp(
+              props.pasteSeparators
+                  .map((s) =>
+                      s ? s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") : null,
+                  )
+                  .join("|"),
+              "g",
+          )
+        : null,
+);
+
+function getNormalizedItemText(item: any): string {
+    if (typeof item === "object") item = getValueByPath(item, props.field);
+    return `${item}`;
+}
+
+function addItem(item?: string): void {
+    item = item || newItem.value.trim();
+
+    if (item) {
+        if (!props.allowAutocomplete) {
+            const reg = separatorsAsRegExp.value;
+            if (reg && item.match(reg)) {
+                item.split(reg)
+                    .map((t) => t.trim())
+                    .filter((t) => t.length !== 0)
+                    .map(addItem);
+                return;
+            }
+        }
+        // Add the item input if it is not blank
+        // or previously added (if not allowDuplicates).
+        const itemToAdd = props.createItem(item);
+        const add = !props.allowDuplicates
+            ? items.value.indexOf(itemToAdd) === -1
+            : true;
+        if (add && props.beforeAdding(item)) {
+            items.value.push(itemToAdd);
+            emits("add", itemToAdd);
+        }
+    }
+
+    // after autocomplete events
+    requestAnimationFrame(() => {
+        newItem.value = "";
+        emits("input", newItem.value);
+    });
+}
+
+function removeItem(index: number, event?: Event): void {
+    const item = items.value.splice(index, 1)[0];
+    emits("remove", item);
+    if (event) event.stopPropagation();
+    if (props.openOnFocus && autocompleteRef.value) {
+        autocompleteRef.value.$inputRef.focus();
+    }
+}
+
+// --- Event Handler ---
+
+function onSelect(option?: string): void {
+    if (!option) return;
+    addItem(option);
+    nextTick(() => (newItem.value = ""));
+}
+
+function onKeydown(event: KeyboardEvent): void {
+    if (
+        props.removeOnKeys.indexOf(event.key) !== -1 &&
+        !newItem.value?.length
+    ) {
+        // remove last item
+        if (itemsLength.value > 0) removeItem(itemsLength.value - 1);
+    }
+    // Stop if is to accept select only
+    if (props.allowAutocomplete && !props.allowNew) return;
+
+    if (props.confirmKeys.indexOf(event.key) >= 0) {
+        // Allow Tab to advance to next field regardless
+        if (event.key !== "Tab") event.preventDefault();
+        if (event.key === "Enter" && isComposing.value) return;
+        addItem();
+    }
+}
+
+function onInput(value: string): void {
+    emits("input", value.trim());
+}
+
+function handleOnBlur(event: Event): void {
+    // Add item on-blur if not select only
+    if (!props.allowAutocomplete) addItem();
+    onBlur(event);
+}
+
+// --- Computed Component Classes ---
+
+const attrs = useAttrs();
+const autocompleteBind = computed(() => ({
+    ...attrs,
+    "root-class": useComputedClass(
+        "autocompleteClasses.rootClass",
+        "o-inputit__autocomplete",
+    ),
+    "input-classes": {
+        "input-class": useComputedClass(
+            "autocompleteClasses.inputClasses.inputClass",
+            "o-inputit__input",
+        ),
+    },
+    ...props.autocompleteClasses,
+}));
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-inputit"),
+    {
+        [useComputedClass("expandedClass", "o-inputit--expanded")]:
+            props.expanded,
+    },
+]);
 
-        onSelect(option) {
-            if (!option) return;
+const containerClasses = computed(() => [
+    useComputedClass("containerClass", "o-inputit__container"),
+    {
+        [useComputedClass("sizeClass", "o-inputit__container--", props.size)]:
+            props.size,
+    },
+]);
 
-            this.addItem(option);
-            this.$nextTick(() => {
-                this.newItem = "";
-            });
-        },
+const itemClasses = computed(() => [
+    useComputedClass("itemClass", "o-inputit__item"),
+    {
+        [useComputedClass("variantClass", "o-inputit__item--", props.variant)]:
+            props.variant,
+    },
+]);
 
-        removeItem(index, event) {
-            const item = this.items.splice(index, 1)[0];
-            this.$emit("update:modelValue", this.items);
-            this.$emit("remove", item);
-            if (event) event.stopPropagation();
-            if (this.openOnFocus && this.$refs.autocomplete) {
-                this.$refs.autocomplete.focus();
-            }
-            return item;
-        },
+const closeClasses = computed(() => [
+    useComputedClass("closeClass", "o-inputit__item__close"),
+]);
 
-        removeLastItem() {
-            if (this.itemsLength > 0) {
-                this.removeItem(this.itemsLength - 1);
-            }
-        },
+const counterClasses = computed(() => [
+    useComputedClass("counterClass", "o-inputit__counter"),
+]);
 
-        keydown(event) {
-            const { key } = event; // cannot destructure preventDefault (https://stackoverflow.com/a/49616808/2774496)
-            if (this.removeOnKeys.indexOf(key) !== -1 && !this.newItem.length) {
-                this.removeLastItem();
-            }
-            // Stop if is to accept select only
-            if (this.allowAutocomplete && !this.allowNew) return;
-
-            if (this.confirmKeys.indexOf(key) >= 0) {
-                // Allow Tab to advance to next field regardless
-                if (key !== "Tab") event.preventDefault();
-                if (key === "Enter" && this.isComposing) return;
-                this.addItem();
-            }
-        },
+// --- Expose Public Functionalities ---
 
-        onTyping(event) {
-            this.$emit("typing", event.trim());
-        },
-    },
+const rootRef = ref();
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => rootRef.value),
+    // expose the input element
+    $inputRef: computed(() => autocompleteRef.value.$inputRef),
 });
 </script>
 
 <template>
-    <div :class="rootClasses">
-        <div :class="containerClasses" @click="hasInput && focus()">
+    <div ref="rootRef" :class="rootClasses">
+        <div :class="containerClasses" @click="hasInput && onFocus()">
             <slot name="selected" :items="items">
                 <span
                     v-for="(item, index) in items"
@@ -443,17 +438,17 @@ export default defineComponent({
                         v-if="closable"
                         :class="closeClasses"
                         clickable
-                        both
                         :pack="iconPack"
                         :icon="closeIcon"
                         :aria-label="ariaCloseLabel"
+                        both
                         @click="removeItem(index, $event)" />
                 </span>
             </slot>
 
             <o-autocomplete
                 v-if="hasInput"
-                ref="autocomplete"
+                ref="autocompleteRef"
                 v-model="newItem"
                 v-bind="autocompleteBind"
                 :data="data"
@@ -461,7 +456,6 @@ export default defineComponent({
                 :icon="icon"
                 :icon-pack="iconPack"
                 :maxlength="maxlength"
-                :has-counter="false"
                 :size="size"
                 :disabled="disabled"
                 :autocomplete="autocomplete"
@@ -470,30 +464,36 @@ export default defineComponent({
                 :keep-open="openOnFocus"
                 :group-field="groupField"
                 :group-options="groupOptions"
+                :has-counter="false"
                 :use-html5-validation="useHtml5Validation"
-                :check-infinite-scroll="checkInfiniteScroll"
+                :check-scroll="checkScroll"
                 :append-to-body="appendToBody"
                 :confirm-keys="confirmKeys"
-                @typing="onTyping"
+                @input="onInput"
                 @focus="onFocus"
-                @blur="customOnBlur"
+                @blur="handleOnBlur"
                 @invalid="onInvalid"
-                @keydown="keydown"
+                @keydown="onKeydown"
                 @compositionstart="isComposing = true"
                 @compositionend="isComposing = false"
-                @select="onSelect"
-                @infinite-scroll="$emit('infinite-scroll', $event)"
+                @select="onSelect($event as string)"
+                @scroll-start="$emit('scroll-start')"
+                @scroll-end="$emit('scroll-end')"
+                @icon-click="$emit('icon-click', $event)"
                 @icon-right-click="$emit('icon-right-click', $event)">
-                <template v-if="hasHeaderSlot" #header>
+                <template v-if="$slots.header" #header>
                     <slot name="header" />
                 </template>
-                <template v-if="hasDefaultSlot" #default="props">
-                    <slot :option="props.option" :index="props.index" />
+                <template v-if="$slots.default" #default="props">
+                    <slot
+                        :option="props.option"
+                        :index="props.index"
+                        :value="props.value" />
                 </template>
-                <template v-if="hasEmptySlot" #empty>
+                <template v-if="$slots.empty" #empty>
                     <slot name="empty" />
                 </template>
-                <template v-if="hasFooterSlot" #footer>
+                <template v-if="$slots.footer" #footer>
                     <slot name="footer" />
                 </template>
             </o-autocomplete>
diff --git a/packages/oruga-next/src/components/plugins.ts b/packages/oruga-next/src/components/plugins.ts
index 09ad20661..0bafe5e23 100644
--- a/packages/oruga-next/src/components/plugins.ts
+++ b/packages/oruga-next/src/components/plugins.ts
@@ -40,7 +40,6 @@ export {
     Field,
     Icon,
     Input,
-    Inputitems,
     Loading,
     Menu,
     Modal,
@@ -55,6 +54,7 @@ export {
     Switch,
     Table,
     Tabs,
+    Inputitems,
     Timepicker,
     Tooltip,
     Upload,
diff --git a/packages/oruga-next/src/components/select/Select.vue b/packages/oruga-next/src/components/select/Select.vue
index 6303d8b63..8e445e186 100644
--- a/packages/oruga-next/src/components/select/Select.vue
+++ b/packages/oruga-next/src/components/select/Select.vue
@@ -1,199 +1,294 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, watch, onMounted, ref, nextTick } from "vue";
 
-import Icon from "../icon/Icon.vue";
+import OIcon from "../icon/Icon.vue";
 
-import FormElementMixin from "../../utils/FormElementMixin";
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import { getOptions } from "../../utils/config";
-import { getValueByPath } from "../../utils/helpers";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useInputHandler,
+} from "@/composables";
+
+import { injectField } from "../field/useFieldShare";
 
 /**
  * Select an item in a dropdown list. Use with Field to access all functionalities
  * @displayName Select
  * @style _select.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OSelect",
-    components: {
-        [Icon.name]: Icon,
-    },
-    mixins: [BaseComponentMixin, FormElementMixin],
     configField: "select",
     inheritAttrs: false,
-    emits: ["update:modelValue", "focus", "blur", "invalid"],
-    props: {
-        /** @model */
-        modelValue: {
-            type: [String, Number, Boolean, Object, Array],
-            default: null,
-        },
-        /**
-         * Vertical size of input, optional
-         * @values small, medium, large
-         */
-        size: String,
-        /**
-         * Color of the control, optional
-         * @values primary, info, success, warning, danger, and any other custom color
-         */
-        variant: String,
-        /**
-         * Icon pack to use
-         * @values mdi, fa, fas and any other custom icon pack
-         */
-        iconPack: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "select.iconPack",
-                    undefined,
-                );
-            },
-        },
-        /**
-         * 	Icon name to be added on the right side
-         */
-        iconRight: {
-            type: String,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "select.iconRight",
-                    undefined,
-                );
-            },
-        },
-        /** Text when nothing is selected */
-        placeholder: String,
-        multiple: Boolean,
-        /** Same as native size */
-        nativeSize: [String, Number],
-        rootClass: [String, Function, Array],
-        selectClass: [String, Function, Array],
-        iconLeftSpaceClass: [String, Function, Array],
-        iconRightSpaceClass: [String, Function, Array],
-        roundedClass: [String, Function, Array],
-        multipleClass: [String, Function, Array],
-        expandedClass: [String, Function, Array],
-        iconLeftClass: [String, Function, Array],
-        iconRightClass: [String, Function, Array],
-        sizeClass: [String, Function, Array],
-        variantClass: [String, Function, Array],
-        placeholderClass: [String, Function, Array],
-        arrowClass: [String, Function, Array],
-    },
-    data() {
-        return {
-            selected: this.modelValue,
-        };
-    },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-ctrl-sel"),
-                {
-                    [this.computedClass(
-                        "expandedClass",
-                        "o-ctrl-sel--expanded",
-                    )]: this.expanded,
-                },
-            ];
-        },
-        selectClasses() {
-            return [
-                this.computedClass("selectClass", "o-sel"),
-                {
-                    [this.computedClass("roundedClass", "o-sel--rounded")]:
-                        this.rounded,
-                },
-                {
-                    [this.computedClass("multipleClass", "o-sel--multiple")]:
-                        this.multiple,
-                },
-                {
-                    [this.computedClass("sizeClass", "o-sel--", this.size)]:
-                        this.size,
-                },
-                {
-                    [this.computedClass(
-                        "variantClass",
-                        "o-sel--",
-                        this.statusVariant || this.variant,
-                    )]: this.statusVariant || this.variant,
-                },
-                {
-                    [this.computedClass(
-                        "iconLeftSpaceClass",
-                        "o-sel-iconspace-left",
-                    )]: this.icon,
-                },
-                {
-                    [this.computedClass(
-                        "iconRightSpaceClass",
-                        "o-sel-iconspace-right",
-                    )]: this.iconRight,
-                },
-                {
-                    [this.computedClass(
-                        "placeholderClass",
-                        "o-sel--placeholder",
-                    )]: this.placeholderVisible,
-                },
-                {
-                    [this.computedClass("arrowClass", "o-sel-arrow")]:
-                        !this.iconRight && !this.multiple,
-                },
-            ];
-        },
-        iconLeftClasses() {
-            return [this.computedClass("iconLeftClass", "o-sel__icon-left")];
-        },
-        iconRightClasses() {
-            return [this.computedClass("iconRightClass", "o-sel__icon-right")];
-        },
-        placeholderVisible() {
-            return this.computedValue === null;
-        },
-        computedValue: {
-            get() {
-                return this.selected;
-            },
-            set(value) {
-                this.selected = value;
-                this.$emit("update:modelValue", value);
-                this.syncFilled(this.selected);
-                !this.isValid && this.checkHtml5Validity();
-            },
-        },
+});
 
-        $elementRef() {
-            return "select";
-        },
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: {
+        type: [String, Number, Boolean, Object, Array],
+        default: null,
     },
-    watch: {
-        /**
-         * When v-model is changed:
-         *   1. Set the selected option.
-         *   2. If it's invalid, validate again.
-         */
-        modelValue(value) {
-            this.selected = value;
-            this.syncFilled(this.selected);
-            !this.isValid && this.checkHtml5Validity();
-        },
+    /**
+     * Vertical size of input, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("select.size"),
+    },
+    /**
+     * Color of the control, optional
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant: {
+        type: String,
+        default: () => getOption("select.variant"),
+    },
+    /** Text when nothing is selected */
+    placeholder: { type: String, default: undefined },
+    /** Allow multiple selection */
+    multiple: { type: Boolean, default: false },
+    /** Makes input full width when inside a grouped or addon field */
+    expanded: { type: Boolean, default: false },
+    /** Makes the element rounded */
+    rounded: { type: Boolean, default: false },
+    /** Same as native size */
+    nativeSize: { type: [String, Number], default: undefined },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("select.iconPack", undefined),
     },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("select.icon", undefined),
+    },
+    /** Makes the icon clickable */
+    iconClickable: { type: Boolean, default: false },
+    /**
+     * 	Icon name to be added on the right side
+     */
+    iconRight: {
+        type: String,
+        default: () => getOption("select.iconRight", undefined),
+    },
+    /** Make the icon right clickable */
+    iconRightClickable: { type: Boolean, default: false },
+    /** Variant of right icon */
+    iconRightVariant: { type: String, default: undefined },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    /** Native options to use in HTML5 validation */
+    autocomplete: {
+        type: String,
+        default: () => getOption("select.autocomplete", "off"),
+    },
+    /** Show status icon using field and variant prop */
+    statusIcon: {
+        type: Boolean,
+        default: () => getOption("statusIcon", true),
+    },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "selectClass",
+        "iconLeftSpaceClass",
+        "iconRightSpaceClass",
+        "roundedClass",
+        "multipleClass",
+        "expandedClass",
+        "iconLeftClass",
+        "iconRightClass",
+        "sizeClass",
+        "variantClass",
+        "placeholderClass",
+        "arrowClass",
+    ]),
 });
+
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value { [String, Number, Boolean, Object, Array]} updated modelValue prop
+     */
+    (
+        e: "update:modelValue",
+        value: [string, number, boolean, object, Array<any>],
+    ): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+}>();
+
+const selectRef = ref<HTMLInputElement>();
+
+// use form input functionality
+const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } =
+    useInputHandler(selectRef, emits, props);
+
+// inject parent field component if used inside one
+const { parentField, statusVariant, statusVariantIcon } = injectField();
+
+const vmodel = useVModelBinding<[string, number, boolean, object, Array<any>]>(
+    props,
+    emits,
+    { passive: true },
+);
+
+const placeholderVisible = computed(() => vmodel.value === null);
+
+onMounted(() => {
+    /**
+     * When v-model is changed:
+     *  1. Set parent field filled state.
+     *  2. Resize textarea input
+     *  3. Check html5 valdiation
+     */
+    watch(
+        () => vmodel.value,
+        (value) => {
+            if (parentField?.value) parentField.value.setFilled(!!value);
+            checkHtml5Validity();
+        },
+        { immediate: true },
+    );
+});
+
+// --- Icon Feature ---
+
+const hasIconRight = computed(
+    () =>
+        (props.iconRight && !props.multiple) ||
+        (props.statusIcon && statusVariantIcon.value),
+);
+
+const rightIcon = computed(() =>
+    props.iconRight ? props.iconRight : statusVariantIcon.value,
+);
+
+const rightIconVariant = computed(() =>
+    props.iconRight
+        ? props.iconRightVariant || props.variant || null
+        : statusVariant.value,
+);
+
+function iconClick(emit, event): void {
+    emits(emit, event);
+    nextTick(() => setFocus());
+}
+
+function rightIconClick(event): void {
+    if (props.iconRightClickable) iconClick("icon-right-click", event);
+}
+
+// --- Computed Component Classes ---
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-ctrl-sel"),
+    {
+        [useComputedClass("expandedClass", "o-ctrl-sel--expanded")]:
+            props.expanded,
+    },
+]);
+
+const selectClasses = computed(() => [
+    useComputedClass("selectClass", "o-sel"),
+    {
+        [useComputedClass("roundedClass", "o-sel--rounded")]: props.rounded,
+    },
+    {
+        [useComputedClass("multipleClass", "o-sel--multiple")]: props.multiple,
+    },
+    {
+        [useComputedClass("sizeClass", "o-sel--", props.size)]: props.size,
+    },
+    {
+        [useComputedClass(
+            "variantClass",
+            "o-sel--",
+            statusVariant.value || props.variant,
+        )]: statusVariant.value || props.variant,
+    },
+    {
+        [useComputedClass("iconLeftSpaceClass", "o-sel-iconspace-left")]:
+            props.icon,
+    },
+    {
+        [useComputedClass("iconRightSpaceClass", "o-sel-iconspace-right")]:
+            props.iconRight,
+    },
+    {
+        [useComputedClass("placeholderClass", "o-sel--placeholder")]:
+            placeholderVisible.value,
+    },
+    {
+        [useComputedClass("arrowClass", "o-sel-arrow")]:
+            !props.iconRight && !props.multiple,
+    },
+]);
+
+const iconLeftClasses = computed(() => [
+    useComputedClass("iconLeftClass", "o-sel__icon-left"),
+]);
+
+const iconRightClasses = computed(() => [
+    useComputedClass("iconRightClass", "o-sel__icon-right"),
+]);
 </script>
 
 <template>
     <div :class="rootClasses">
+        <o-icon
+            v-if="icon"
+            :class="iconLeftClasses"
+            :clickable="iconClickable"
+            :icon="icon"
+            :pack="iconPack"
+            :size="size"
+            @click="iconClick('icon-click', $event)" />
+
         <select
             v-bind="$attrs"
-            v-model="computedValue"
+            ref="selectRef"
+            v-model="vmodel"
             :class="selectClasses"
-            ref="select"
             :autocomplete="autocomplete"
             :multiple="multiple"
             :size="nativeSize"
@@ -210,17 +305,14 @@ export default defineComponent({
         </select>
 
         <o-icon
-            v-if="icon"
-            :class="iconLeftClasses"
-            :icon="icon"
-            :pack="iconPack"
-            :size="size" />
-
-        <o-icon
-            v-if="iconRight && !multiple"
+            v-if="hasIconRight"
             :class="iconRightClasses"
-            :icon="iconRight"
+            :clickable="iconRightClickable"
+            :icon="rightIcon"
             :pack="iconPack"
-            :size="size" />
+            :size="size"
+            :variant="rightIconVariant"
+            both
+            @click="rightIconClick" />
     </div>
 </template>
diff --git a/packages/oruga-next/src/components/select/index.ts b/packages/oruga-next/src/components/select/index.ts
index cec0c81e9..ab34517f6 100644
--- a/packages/oruga-next/src/components/select/index.ts
+++ b/packages/oruga-next/src/components/select/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Select from "./Select.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/timepicker/Timepicker.vue b/packages/oruga-next/src/components/timepicker/Timepicker.vue
index 4156994f0..67b5f1a7c 100644
--- a/packages/oruga-next/src/components/timepicker/Timepicker.vue
+++ b/packages/oruga-next/src/components/timepicker/Timepicker.vue
@@ -1,267 +1,802 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, ref, watch, type PropType } from "vue";
 
-import Dropdown from "../dropdown/Dropdown.vue";
-import DropdownItem from "../dropdown/DropdownItem.vue";
-import Input from "../input/Input.vue";
-import Select from "../select/Select.vue";
-import Icon from "../icon/Icon.vue";
+import OSelect from "../select/Select.vue";
+import OPickerWrapper from "../datepicker/PickerWrapper.vue";
 
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import TimepickerMixin from "../../utils/TimepickerMixin";
-import MatchMediaMixin from "../../utils/MatchMediaMixin";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useMatchMedia,
+    usePropBinding,
+} from "@/composables";
 
-import { getValueByPath } from "../../utils/helpers";
-import { getOptions } from "../../utils/config";
+import { useTimepickerMixins } from "./useTimepickerShare";
 
 /**
  * An input with a simple dropdown/modal for selecting a time, uses native timepicker for mobile
  * @displayName Timepicker
  * @style _timepicker.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OTimepicker",
-    components: {
-        [Input.name]: Input,
-        [Select.name]: Select,
-        [Icon.name]: Icon,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem,
-    },
     configField: "timepicker",
-    mixins: [BaseComponentMixin, TimepickerMixin, MatchMediaMixin],
     inheritAttrs: false,
-    props: {
-        rootClass: [String, Function, Array],
-        sizeClass: [String, Function, Array],
-        boxClass: [String, Function, Array],
-        separatorClass: [String, Function, Array],
-        footerClass: [String, Function, Array],
-        inputClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "timepicker.inputClasses",
-                    {},
-                );
-            },
-        },
-        dropdownClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "timepicker.dropdownClasses",
-                    {},
-                );
-            },
-        },
-        selectClasses: {
-            type: Object,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "timepicker.selectClasses",
-                    {},
-                );
-            },
-        },
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: { type: Date as PropType<Date>, default: undefined },
+    /** The active state of the dropdown */
+    active: { type: Boolean, default: false },
+    /** Min time to select */
+    minTime: { type: Date as PropType<Date>, default: undefined },
+    /** Max time to select */
+    maxTime: { type: Date as PropType<Date>, default: undefined },
+    /** Display datepicker inline */
+    inline: { type: Boolean, default: false },
+    /** Input placeholder */
+    placeholder: { type: String, default: undefined },
+    /** Makes input full width when inside a grouped or addon field */
+    expanded: { type: Boolean, default: false },
+    /** Makes the input rounded */
+    rounded: { type: Boolean, default: false },
+    /** Same as native input readonly */
+    readonly: { type: Boolean, default: false },
+    /** Same as native disabled */
+    disabled: { type: Boolean, default: false },
+    /**
+     * Size of the button, optional
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("timepicker.size"),
+    },
+    hourFormat: { type: String, default: undefined },
+    incrementHours: { type: Number, default: 1 },
+    incrementMinutes: { type: Number, default: 1 },
+    incrementSeconds: { type: Number, default: 1 },
+    openOnFocus: {
+        type: Boolean,
+        default: () => getOption("timepicker.openOnFocus", true),
+    },
+    closeOnClick: {
+        type: Boolean,
+        default: () => getOption("timepicker.closeOnClick", true),
+    },
+    enableSeconds: { type: Boolean, default: false },
+    defaultMinutes: { type: Number, default: undefined },
+    defaultSeconds: { type: Number, default: undefined },
+    /** Date format locale */
+    locale: {
+        type: String,
+        default: () => getOption("locale"),
+    },
+    /** Custom function to format a date into a string */
+    timeFormatter: {
+        type: Function as PropType<(date: Date) => string>,
+        default: (
+            date: Date | Date[],
+            defaultFunction: (date: Date | Date[]) => string,
+        ) => getOption("timepicker.timeFormatter", defaultFunction)(date),
+    },
+    /** Custom function to parse a string into a date */
+    timeParser: {
+        type: Function as PropType<(date: string) => Date>,
+        default: (date: string, defaultFunction: (date: string) => Date) =>
+            getOption("timepicker.timeParser", defaultFunction)(date),
+    },
+    /** time creator function, default is `new Date()` */
+    timeCreator: {
+        type: Function as PropType<() => Date>,
+        default: () => getOption("timepicker.timeCreator", () => new Date())(),
+    },
+    /** Define a list of times which can not be selected */
+    unselectableTimes: {
+        type: [Array, Function] as PropType<Date[] | ((date: Date) => boolean)>,
+        default: () => [],
+    },
+    resetOnMeridianChange: {
+        type: Boolean,
+        default: false,
+    },
+    /** Dropdown trapFocus */
+    trapFocus: {
+        type: Boolean,
+        default: () => getOption("datepicker.trapFocus", true),
+    },
+    /** Dropdown position */
+    position: { type: String, default: undefined },
+    /** Enable dropdown mobile modal */
+    mobileModal: {
+        type: Boolean,
+        default: () => getOption("datepicker.mobileModal", true),
+    },
+    /** Enable mobile native input if mobile agent */
+    mobileNative: {
+        type: Boolean,
+        default: () => getOption("timepicker.mobileNative", true),
+    },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("timepicker.iconPack", undefined),
+    },
+    /** Icon name to be shown */
+    icon: {
+        type: String,
+        default: () => getOption("timepicker.icon", undefined),
+    },
+    /** Icon name to be added on the right side */
+    iconRight: {
+        type: String,
+        default: () => getOption("datepicker.iconRight", undefined),
+    },
+    /** Make the icon right clickable */
+    iconRightClickable: { type: Boolean, default: false },
+    /** Append autocomplete content to body */
+    appendToBody: {
+        type: Boolean,
+        default: () => getOption("datepicker.appendToBody", false),
+    },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
+    },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "sizeClass",
+        "boxClass",
+        "separatorClass",
+        "footerClass",
+    ]),
+    inputClasses: {
+        type: Object,
+        default: () => getOption("timepicker.inputClasses", {}),
     },
-    emits: ["focus", "blur", "invalid"],
-    computed: {
-        inputBind() {
-            return {
-                ...this.$attrs,
-                ...this.inputClasses,
-            };
-        },
-        dropdownBind() {
-            return {
-                "root-class": this.computedClass(
-                    "dropdownClasses.rootClass",
-                    "o-tpck__dropdown",
-                ),
-                ...this.dropdownClasses,
-            };
-        },
-        selectBind() {
-            return {
-                "select-class": this.computedClass(
-                    "selectClasses.selectClass",
-                    "o-tpck__select",
-                ),
-                "placeholder-class": this.computedClass(
-                    "selectClasses.placeholderClass",
-                    "o-tpck__select-placeholder",
-                ),
-                ...this.selectClasses,
-            };
-        },
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-tpck"),
-                {
-                    [this.computedClass("sizeClass", "o-tpck--", this.size)]:
-                        this.size,
-                },
-                {
-                    [this.computedClass("mobileClass", "o-tpck--mobile")]:
-                        this.isMatchMedia,
-                },
-            ];
-        },
-        boxClasses() {
-            return [this.computedClass("boxClass", "o-tpck__box")];
-        },
-        separatorClasses() {
-            return [this.computedClass("separatorClass", "o-tpck__separator")];
-        },
-        footerClasses() {
-            return [this.computedClass("footerClass", "o-tpck__footer")];
-        },
-        nativeStep() {
-            if (this.enableSeconds) return "1";
-            return null;
-        },
+    dropdownClasses: {
+        type: Object,
+        default: () => getOption("timepicker.dropdownClasses", {}),
+    },
+    selectClasses: {
+        type: Object,
+        default: () => getOption("timepicker.selectClasses", {}),
     },
 });
+
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {Date} updated modelValue prop
+     */
+    (e: "update:modelValue", value: Date): void;
+    /**
+     * active prop two-way binding
+     * @param value {boolean} updated active prop
+     */
+    (e: "update:active", value: boolean): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+    /**
+     * on icon click event
+     * @param event {Event} native event
+     */
+    (e: "icon-click", event: Event): void;
+    /**
+     * on icon right click event
+     * @param event {Event} native event
+     */
+    (e: "icon-right-click", event: Event): void;
+}>();
+
+const { isMobile } = useMatchMedia();
+
+const {
+    defaultTimeFormatter,
+    defaultTimeParser,
+    pmString,
+    amString,
+    meridiens,
+    isHourFormat24,
+    hourLiteral,
+    minuteLiteral,
+    secondLiteral,
+} = useTimepickerMixins(props);
+
+const vmodel = useVModelBinding<Date>(props, emits);
+
+/** Dropdown active state */
+const isActive = usePropBinding<boolean>("active", props, emits);
+
+const hoursSelected = ref();
+const minutesSelected = ref();
+const secondsSelected = ref();
+const meridienSelected = ref();
+
+/**
+ * When v-model is changed:
+ *   1. Update internal value.
+ *   2. If it's invalid, validate again.
+ */
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value) {
+            hoursSelected.value = value.getHours();
+            minutesSelected.value = value.getMinutes();
+            secondsSelected.value = value.getSeconds();
+            meridienSelected.value =
+                value.getHours() >= 12 ? pmString : amString;
+        } else {
+            hoursSelected.value = null;
+            minutesSelected.value = null;
+            secondsSelected.value = null;
+            meridienSelected.value = amString;
+        }
+    },
+    { immediate: true },
+);
+
+/** Format date into string */
+const formattedValue = computed(() =>
+    (props.timeFormatter as any)(props.modelValue, defaultTimeFormatter),
+);
+
+const nativeStep = computed(() => (props.enableSeconds ? "1" : null));
+
+watch(
+    () => props.hourFormat,
+    () => {
+        if (hoursSelected.value !== null) {
+            meridienSelected.value =
+                hoursSelected.value >= 12 ? pmString.value : amString.value;
+        }
+    },
+);
+
+watch(
+    () => props.locale,
+    (value) => {
+        // see updateInternalState default
+        if (!value) meridienSelected.value = amString.value;
+    },
+);
+
+function formatNumber(value: number, prependZero: boolean): string {
+    return isHourFormat24.value || prependZero ? pad(value) : String(value);
+}
+
+function pad(value: number): string {
+    return (value < 10 ? "0" : "") + value;
+}
+
+const hours = computed(() => {
+    if (!props.incrementHours || props.incrementHours < 1)
+        throw new Error("Hour increment cannot be null or less than 1.");
+    const hours = [];
+    const numberOfHours = isHourFormat24.value ? 24 : 12;
+    for (let i = 0; i < numberOfHours; i += props.incrementHours) {
+        let value = i;
+        let label = value;
+        if (!isHourFormat24.value) {
+            value = i + 1;
+            label = value;
+            if (meridienSelected.value === amString.value) {
+                if (value === 12) {
+                    value = 0;
+                }
+            } else if (meridienSelected.value === pmString.value) {
+                if (value !== 12) {
+                    value += 12;
+                }
+            }
+        }
+        hours.push({
+            label: formatNumber(label, false),
+            value: value,
+        });
+    }
+    return hours;
+});
+
+const minutes = computed(() => {
+    if (!props.incrementMinutes || props.incrementMinutes < 1)
+        throw new Error("Minute increment cannot be null or less than 1.");
+    const minutes = [];
+    for (let i = 0; i < 60; i += props.incrementMinutes) {
+        minutes.push({
+            label: formatNumber(i, true),
+            value: i,
+        });
+    }
+    return minutes;
+});
+
+const seconds = computed(() => {
+    if (!props.incrementSeconds || props.incrementSeconds < 1)
+        throw new Error("Second increment cannot be null or less than 1.");
+    const seconds = [];
+    for (let i = 0; i < 60; i += props.incrementSeconds) {
+        seconds.push({
+            label: formatNumber(i, true),
+            value: i,
+        });
+    }
+    return seconds;
+});
+
+function isHourDisabled(hour: number): boolean {
+    let disabled = false;
+    if (props.minTime) {
+        const minHours = props.minTime.getHours();
+        const noMinutesAvailable = minutes.value.every((minute) => {
+            return isMinuteDisabledForHour(hour, minute.value);
+        });
+        disabled = hour < minHours || noMinutesAvailable;
+    }
+    if (props.maxTime) {
+        if (!disabled) {
+            const maxHours = props.maxTime.getHours();
+            disabled = hour > maxHours;
+        }
+    }
+    if (props.unselectableTimes) {
+        if (!disabled) {
+            if (typeof props.unselectableTimes === "function") {
+                const date = new Date();
+                date.setHours(hour);
+                date.setMinutes(minutesSelected.value);
+                date.setSeconds(secondsSelected.value);
+                return props.unselectableTimes(date);
+            } else {
+                const unselectable = props.unselectableTimes.filter((time) => {
+                    if (props.enableSeconds && secondsSelected.value !== null) {
+                        return (
+                            time.getHours() === hour &&
+                            time.getMinutes() === minutesSelected.value &&
+                            time.getSeconds() === secondsSelected.value
+                        );
+                    } else if (minutesSelected.value !== null) {
+                        return (
+                            time.getHours() === hour &&
+                            time.getMinutes() === minutesSelected.value
+                        );
+                    }
+                    return false;
+                });
+                if (unselectable.length > 0) {
+                    disabled = true;
+                } else {
+                    disabled = minutes.value.every((minute) => {
+                        return (
+                            (props.unselectableTimes as Date[]).filter(
+                                (time) => {
+                                    return (
+                                        time.getHours() === hour &&
+                                        time.getMinutes() === minute.value
+                                    );
+                                },
+                            ).length > 0
+                        );
+                    });
+                }
+            }
+        }
+    }
+    return disabled;
+}
+
+function isMinuteDisabledForHour(hour: number, minute: number): boolean {
+    let disabled = false;
+    if (props.minTime) {
+        const minHours = props.minTime.getHours();
+        const minMinutes = props.minTime.getMinutes();
+        disabled = hour === minHours && minute < minMinutes;
+    }
+    if (props.maxTime) {
+        if (!disabled) {
+            const maxHours = props.maxTime.getHours();
+            const maxMinutes = props.maxTime.getMinutes();
+            disabled = hour === maxHours && minute > maxMinutes;
+        }
+    }
+    return disabled;
+}
+
+function isMinuteDisabled(minute: number): boolean {
+    if (hoursSelected.value === null) return false;
+
+    let disabled = false;
+    if (isHourDisabled(hoursSelected.value)) {
+        disabled = true;
+    } else {
+        disabled = isMinuteDisabledForHour(hoursSelected.value, minute);
+    }
+    if (props.unselectableTimes) {
+        if (!disabled) {
+            if (typeof props.unselectableTimes === "function") {
+                const date = new Date();
+                date.setHours(hoursSelected.value);
+                date.setMinutes(minute);
+                date.setSeconds(secondsSelected.value);
+                return props.unselectableTimes(date);
+            } else {
+                const unselectable = props.unselectableTimes.filter((time) => {
+                    if (props.enableSeconds && secondsSelected.value !== null) {
+                        return (
+                            time.getHours() === hoursSelected.value &&
+                            time.getMinutes() === minute &&
+                            time.getSeconds() === secondsSelected.value
+                        );
+                    } else {
+                        return (
+                            time.getHours() === hoursSelected.value &&
+                            time.getMinutes() === minute
+                        );
+                    }
+                });
+                disabled = unselectable.length > 0;
+            }
+        }
+    }
+}
+
+function isSecondDisabled(second: number): boolean {
+    if (minutesSelected.value == null) return false;
+    let disabled = false;
+
+    if (isMinuteDisabled(minutesSelected.value)) {
+        disabled = true;
+    } else {
+        if (props.minTime) {
+            const minHours = props.minTime.getHours();
+            const minMinutes = props.minTime.getMinutes();
+            const minSeconds = props.minTime.getSeconds();
+            disabled =
+                hoursSelected.value === minHours &&
+                minutesSelected.value === minMinutes &&
+                second < minSeconds;
+        }
+        if (props.maxTime) {
+            if (!disabled) {
+                const maxHours = props.maxTime.getHours();
+                const maxMinutes = props.maxTime.getMinutes();
+                const maxSeconds = props.maxTime.getSeconds();
+                disabled =
+                    hoursSelected.value === maxHours &&
+                    minutesSelected.value === maxMinutes &&
+                    second > maxSeconds;
+            }
+        }
+    }
+    if (props.unselectableTimes) {
+        if (!disabled) {
+            if (typeof props.unselectableTimes === "function") {
+                const date = new Date();
+                date.setHours(hoursSelected.value);
+                date.setMinutes(minutesSelected.value);
+                date.setSeconds(second);
+                return props.unselectableTimes(date);
+            } else {
+                const unselectable = props.unselectableTimes.filter((time) => {
+                    return (
+                        time.getHours() === hoursSelected.value &&
+                        time.getMinutes() === minutesSelected.value &&
+                        time.getSeconds() === second
+                    );
+                });
+                disabled = unselectable.length > 0;
+            }
+        }
+    }
+}
+
+function isMeridienDisabled(meridienString: string): boolean {
+    const offset = meridienString == "AM" ? 0 : 12;
+    for (let i = 0; i < 12; i++) {
+        if (!isHourDisabled(i + offset)) return false;
+    }
+    return true;
+}
+
+function updateDateSelected(
+    hours: number,
+    minutes: number,
+    seconds: number,
+    meridiens,
+): void {
+    if (
+        hours != null &&
+        minutes != null &&
+        ((!isHourFormat24.value && meridiens !== null) || isHourFormat24.value)
+    ) {
+        let time = null;
+        if (vmodel.value) {
+            time = new Date(vmodel.value);
+        } else {
+            time = props.timeCreator();
+            time.setMilliseconds(0);
+        }
+        time.setHours(hours);
+        time.setMinutes(minutes);
+        time.setSeconds(seconds);
+        if (!isNaN(time.getTime())) {
+            vmodel.value = new Date(time.getTime());
+        }
+    }
+}
+
+/** Format date into string 'HH-MM-SS'*/
+function formatNative(value: Date): string {
+    const date = new Date(value);
+    if (value && !isNaN(date.getTime())) {
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const seconds = date.getSeconds();
+        return (
+            formatNumber(hours, true) +
+            ":" +
+            formatNumber(minutes, true) +
+            ":" +
+            formatNumber(seconds, true)
+        );
+    }
+    return "";
+}
+
+// --- Event Handler ---
+
+function onMeridienChange(value: string): void {
+    if (hoursSelected.value !== null && props.resetOnMeridianChange) {
+        hoursSelected.value = null;
+        minutesSelected.value = null;
+        secondsSelected.value = null;
+        vmodel.value = null;
+    } else if (hoursSelected.value !== null) {
+        if (value === pmString.value) hoursSelected.value += 12;
+        else if (value === amString.value) hoursSelected.value -= 12;
+    }
+    updateDateSelected(
+        hoursSelected.value,
+        minutesSelected.value,
+        props.enableSeconds ? secondsSelected.value : 0,
+        value,
+    );
+}
+
+function onHoursChange(value: string): void {
+    if (!minutesSelected.value && typeof props.defaultMinutes !== "undefined")
+        minutesSelected.value = props.defaultMinutes;
+    if (!secondsSelected.value && typeof props.defaultSeconds !== "undefined")
+        secondsSelected.value = props.defaultSeconds;
+
+    updateDateSelected(
+        parseInt(value, 10),
+        minutesSelected.value,
+        props.enableSeconds ? secondsSelected.value : 0,
+        meridienSelected.value,
+    );
+}
+
+function onMinutesChange(value: string): void {
+    if (!secondsSelected.value && props.defaultSeconds)
+        secondsSelected.value = props.defaultSeconds;
+
+    updateDateSelected(
+        hoursSelected.value,
+        parseInt(value, 10),
+        props.enableSeconds ? secondsSelected.value : 0,
+        meridienSelected.value,
+    );
+}
+
+function onSecondsChange(value: string): void {
+    updateDateSelected(
+        hoursSelected.value,
+        minutesSelected.value,
+        parseInt(value, 10),
+        meridienSelected.value,
+    );
+}
+
+/** Parse string into date */
+function onChange(value: string): void {
+    const date = (props.timeParser as any)(value, defaultTimeParser);
+    vmodel.value = date ? date : null;
+}
+
+/** Parse time from string */
+function onChangeNativePicker(date: string): void {
+    if (date) {
+        let time = null;
+        if (vmodel.value) {
+            time = new Date(vmodel.value);
+        } else {
+            time = props.timeCreator();
+            time.setMilliseconds(0);
+        }
+        const t = date.split(":");
+        time.setHours(parseInt(t[0], 10));
+        time.setMinutes(parseInt(t[1], 10));
+        time.setSeconds(t[2] ? parseInt(t[2], 10) : 0);
+        vmodel.value = new Date(time.getTime());
+    } else {
+        vmodel.value = null;
+    }
+}
+
+// --- Computed Component Classes ---
+
+const dropdownClass = computed(() =>
+    useComputedClass("dropdownClasses.rootClass", "o-tpck__dropdown"),
+);
+
+const selectBind = computed(() => ({
+    "select-class": useComputedClass(
+        "selectClasses.selectClass",
+        "o-tpck__select",
+    ),
+    "placeholder-class": useComputedClass(
+        "selectClasses.placeholderClass",
+        "o-tpck__select-placeholder",
+    ),
+    ...props.selectClasses,
+}));
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-tpck"),
+    {
+        [useComputedClass("sizeClass", "o-tpck--", props.size)]: props.size,
+    },
+    {
+        [useComputedClass("mobileClass", "o-tpck--mobile")]: isMobile.value,
+    },
+]);
+
+const boxClasses = computed(() => [
+    useComputedClass("boxClass", "o-tpck__box"),
+]);
+
+const separatorClasses = computed(() => [
+    useComputedClass("separatorClass", "o-tpck__separtor"),
+]);
+
+const footerClasses = computed(() => [
+    useComputedClass("footerClass", "o-tpck__footer"),
+]);
+
+// --- Expose Public Functionalities ---
+
+const wrapperRef = ref<typeof OPickerWrapper>();
+defineExpose({
+    // expose the html root element of this component
+    $el: computed(() => wrapperRef.value.$el),
+    // expose the input element
+    $inputRef: computed(() => wrapperRef.value.$inputRef),
+});
 </script>
 
 <template>
-    <div :class="rootClasses">
-        <o-dropdown
-            v-if="!isMobile || inline"
-            ref="dropdown"
-            v-bind="dropdownBind"
-            :position="position"
+    <OPickerWrapper
+        ref="wrapperRef"
+        v-model:active="isActive"
+        v-bind="$attrs"
+        :value="vmodel"
+        :picker-props="props"
+        :formatted-value="formattedValue"
+        native-type="time"
+        :native-value="formatNative(vmodel)"
+        :native-max="formatNative(maxTime)"
+        :native-min="formatNative(minTime)"
+        :native-step="nativeStep"
+        :dropdown-class="dropdownClass"
+        :root-classes="rootClasses"
+        :box-classes="boxClasses"
+        @change="onChange"
+        @native-change="onChangeNativePicker"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        @invalid="$emit('invalid', $event)"
+        @icon-click="$emit('icon-click', $event)"
+        @icon-right-click="$emit('icon-right-click', $event)">
+        <template v-if="$slots.trigger" #trigger>
+            <slot name="trigger" />
+        </template>
+        <o-select
+            v-bind="selectBind"
+            v-model="hoursSelected"
+            override
             :disabled="disabled"
-            :inline="inline"
-            :append-to-body="appendToBody"
-            append-to-body-copy-parent
-            @active-change="onActiveChange">
-            <template #trigger v-if="!inline">
-                <slot name="trigger">
-                    <o-input
-                        ref="input"
-                        :model-value="formatValue(computedValue)"
-                        autocomplete="off"
-                        :placeholder="placeholder"
-                        :size="size"
-                        :icon="icon"
-                        :icon-pack="iconPack"
-                        :disabled="disabled"
-                        :readonly="!editable"
-                        :rounded="rounded"
-                        v-bind="inputBind"
-                        :use-html5-validation="useHtml5Validation"
-                        @keyup.enter="toggle(true)"
-                        @change="onChange($event.target.value)"
-                        @focus="handleOnFocus" />
-                </slot>
-            </template>
-
-            <o-dropdown-item
+            placeholder="00"
+            @change="onHoursChange($event.target.value)">
+            <option
+                v-for="hour in hours"
+                :key="hour.value"
+                :value="hour.value"
+                :disabled="isHourDisabled(hour.value)">
+                {{ hour.label }}
+            </option>
+        </o-select>
+        <span :class="separatorClasses">{{ hourLiteral }}</span>
+        <o-select
+            v-bind="selectBind"
+            v-model="minutesSelected"
+            override
+            :disabled="disabled"
+            placeholder="00"
+            @change="onMinutesChange($event.target.value)">
+            <option
+                v-for="minute in minutes"
+                :key="minute.value"
+                :value="minute.value"
+                :disabled="isMinuteDisabled(minute.value)">
+                {{ minute.label }}
+            </option>
+        </o-select>
+        <template v-if="enableSeconds">
+            <span :class="separatorClasses">{{ minuteLiteral }}</span>
+            <o-select
+                v-bind="selectBind"
+                v-model="secondsSelected"
                 override
-                tag="div"
-                :item-class="boxClasses"
                 :disabled="disabled"
-                :clickable="false">
-                <o-select
-                    override
-                    v-bind="selectBind"
-                    v-model="hoursSelected"
-                    @change="onHoursChange($event.target.value)"
-                    :disabled="disabled"
-                    placeholder="00">
-                    <option
-                        v-for="hour in hours"
-                        :value="hour.value"
-                        :key="hour.value"
-                        :disabled="isHourDisabled(hour.value)">
-                        {{ hour.label }}
-                    </option>
-                </o-select>
-                <span :class="separatorClasses">{{ hourLiteral }}</span>
-                <o-select
-                    override
-                    v-bind="selectBind"
-                    v-model="minutesSelected"
-                    @change="onMinutesChange($event.target.value)"
-                    :disabled="disabled"
-                    placeholder="00">
-                    <option
-                        v-for="minute in minutes"
-                        :value="minute.value"
-                        :key="minute.value"
-                        :disabled="isMinuteDisabled(minute.value)">
-                        {{ minute.label }}
-                    </option>
-                </o-select>
-                <template v-if="enableSeconds">
-                    <span :class="separatorClasses">{{ minuteLiteral }}</span>
-                    <o-select
-                        override
-                        v-bind="selectBind"
-                        v-model="secondsSelected"
-                        @change="onSecondsChange($event.target.value)"
-                        :disabled="disabled"
-                        placeholder="00">
-                        <option
-                            v-for="second in seconds"
-                            :value="second.value"
-                            :key="second.value"
-                            :disabled="isSecondDisabled(second.value)">
-                            {{ second.label }}
-                        </option>
-                    </o-select>
-                    <span :class="separatorClasses">{{ secondLiteral }}</span>
-                </template>
-                <o-select
-                    override
-                    v-bind="selectBind"
-                    v-model="meridienSelected"
-                    @change="onMeridienChange($event.target.value)"
-                    v-if="!isHourFormat24"
-                    :disabled="disabled">
-                    <option
-                        v-for="meridien in meridiens"
-                        :value="meridien"
-                        :key="meridien"
-                        :disabled="isMeridienDisabled(meridien)">
-                        {{ meridien }}
-                    </option>
-                </o-select>
-
-                <footer
-                    v-if="$slots.default !== undefined"
-                    :class="footerClasses">
-                    <slot />
-                </footer>
-            </o-dropdown-item>
-        </o-dropdown>
-
-        <o-input
-            v-else
-            ref="input"
-            v-bind="inputBind"
-            type="time"
-            :step="nativeStep"
-            autocomplete="off"
-            :value="formatHHMMSS(computedValue)"
-            :placeholder="placeholder"
-            :size="size"
-            :icon="icon"
-            :icon-pack="iconPack"
-            :rounded="rounded"
-            :max="formatHHMMSS(maxTime)"
-            :min="formatHHMMSS(minTime)"
+                placeholder="00"
+                @change="onSecondsChange($event.target.value)">
+                <option
+                    v-for="second in seconds"
+                    :key="second.value"
+                    :value="second.value"
+                    :disabled="isSecondDisabled(second.value)">
+                    {{ second.label }}
+                </option>
+            </o-select>
+            <span :class="separatorClasses">{{ secondLiteral }}</span>
+        </template>
+        <o-select
+            v-if="!isHourFormat24"
+            v-bind="selectBind"
+            v-model="meridienSelected"
+            override
             :disabled="disabled"
-            :readonly="false"
-            :use-html5-validation="useHtml5Validation"
-            @change="onChange($event.target.value)"
-            @focus="handleOnFocus"
-            @blur="onBlur"
-            @invalid="onInvalid" />
-    </div>
+            @change="onMeridienChange($event.target.value)">
+            <option
+                v-for="meridien in meridiens"
+                :key="meridien"
+                :value="meridien"
+                :disabled="isMeridienDisabled(meridien)">
+                {{ meridien }}
+            </option>
+        </o-select>
+
+        <footer v-if="$slots.default" :class="footerClasses">
+            <slot />
+        </footer>
+    </OPickerWrapper>
 </template>
diff --git a/packages/oruga-next/src/components/timepicker/index.ts b/packages/oruga-next/src/components/timepicker/index.ts
index 49dfe1b4b..2e462ceba 100644
--- a/packages/oruga-next/src/components/timepicker/index.ts
+++ b/packages/oruga-next/src/components/timepicker/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Timepicker from "./Timepicker.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/components/timepicker/useTimepickerShare.ts b/packages/oruga-next/src/components/timepicker/useTimepickerShare.ts
new file mode 100644
index 000000000..97a84186d
--- /dev/null
+++ b/packages/oruga-next/src/components/timepicker/useTimepickerShare.ts
@@ -0,0 +1,243 @@
+import { computed } from "vue";
+import Timepicker from "./Timepicker.vue";
+import { matchWithGroups } from "../datepicker/datepickerUtils";
+
+export type TimepickerProps = InstanceType<typeof Timepicker>["$props"];
+
+const AM = "AM";
+const PM = "PM";
+const HOUR_FORMAT_24 = "24";
+const HOUR_FORMAT_12 = "12";
+
+export function useTimepickerMixins(props: TimepickerProps) {
+    const localeOptions = computed(
+        () =>
+            new Intl.DateTimeFormat(props.locale, {
+                hour: "numeric",
+                minute: "numeric",
+                second: props.enableSeconds ? "numeric" : undefined,
+            }).resolvedOptions() as Intl.DateTimeFormatOptions,
+    );
+
+    const dtf = computed(
+        () =>
+            new Intl.DateTimeFormat(props.locale, {
+                hour: localeOptions.value.hour || "numeric",
+                minute: localeOptions.value.minute || "numeric",
+                second: props.enableSeconds
+                    ? localeOptions.value.second || "numeric"
+                    : undefined,
+                hourCycle: !isHourFormat24.value ? "h12" : "h23",
+            }),
+    );
+
+    const computedHourFormat = computed(
+        () =>
+            props.hourFormat ||
+            (localeOptions.value.hour12 ? HOUR_FORMAT_12 : HOUR_FORMAT_24),
+    );
+
+    const isHourFormat24 = computed(
+        () => computedHourFormat.value === HOUR_FORMAT_24,
+    );
+
+    const sampleTime = computed(() => {
+        const d = props.timeCreator();
+        d.setHours(10);
+        d.setSeconds(0);
+        d.setMinutes(0);
+        d.setMilliseconds(0);
+        return d;
+    });
+
+    const amString = computed(() => {
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const d = sampleTime.value;
+            d.setHours(10);
+            const dayPeriod = dtf.value
+                .formatToParts(d)
+                .find((part) => part.type === "dayPeriod");
+            if (dayPeriod) return dayPeriod.value;
+        }
+        return AM;
+    });
+
+    const pmString = computed(() => {
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const d = sampleTime.value;
+            d.setHours(20);
+            const dayPeriod = dtf.value
+                .formatToParts(d)
+                .find((part) => part.type === "dayPeriod");
+            if (dayPeriod) {
+                return dayPeriod.value;
+            }
+        }
+        return PM;
+    });
+
+    const meridiens = computed(() => [amString.value, pmString.value]);
+
+    const hourLiteral = computed(() => {
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const d = sampleTime.value;
+            const parts = dtf.value.formatToParts(d);
+            const literal = parts.find(
+                (part, idx) => idx > 0 && parts[idx - 1].type === "hour",
+            );
+            if (literal) return literal.value;
+        }
+        return ":";
+    });
+
+    const minuteLiteral = computed(() => {
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const d = sampleTime.value;
+            const parts = dtf.value.formatToParts(d);
+            const literal = parts.find(
+                (part, idx) => idx > 0 && parts[idx - 1].type === "minute",
+            );
+            if (literal) return literal.value;
+        }
+        return ":";
+    });
+
+    const secondLiteral = computed(() => {
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const d = sampleTime.value;
+            const parts = dtf.value.formatToParts(d);
+            const literal = parts.find(
+                (part, idx) => idx > 0 && parts[idx - 1].type === "second",
+            );
+            if (literal) return literal.value;
+        }
+        return undefined;
+    });
+
+    function defaultTimeFormatter(time: Date): string {
+        return dtf.value.format(time);
+    }
+
+    function defaultTimeParser(time: string): Date {
+        if (!time) return null;
+
+        if (
+            dtf.value.formatToParts &&
+            typeof dtf.value.formatToParts === "function"
+        ) {
+            const formatRegex = dtf.value
+                .formatToParts(sampleTime.value)
+                .map((part) => {
+                    if (part.type === "literal") {
+                        return part.value.replace(/ /g, "\\s?");
+                    } else if (part.type === "dayPeriod") {
+                        return `((?!=<${part.type}>)(${amString.value}|${
+                            pmString.value
+                        }|${AM}|${PM}|${AM.toLowerCase()}|${PM.toLowerCase()})?)`;
+                    }
+                    return `((?!=<${part.type}>)\\d+)`;
+                })
+                .join("");
+            const timeGroups = matchWithGroups(formatRegex, time);
+
+            // We do a simple validation for the group.
+            // If it is not valid, it will fallback to Date.parse below
+            timeGroups.hour = timeGroups.hour
+                ? parseInt(timeGroups.hour, 10)
+                : null;
+            timeGroups.minute = timeGroups.minute
+                ? parseInt(timeGroups.minute, 10)
+                : null;
+            timeGroups.second = timeGroups.second
+                ? parseInt(timeGroups.second, 10)
+                : null;
+            if (
+                timeGroups.hour &&
+                timeGroups.hour >= 0 &&
+                timeGroups.hour < 24 &&
+                timeGroups.minute &&
+                timeGroups.minute >= 0 &&
+                timeGroups.minute < 59
+            ) {
+                if (
+                    timeGroups.dayPeriod &&
+                    (timeGroups.dayPeriod.toLowerCase() ===
+                        pmString.value.toLowerCase() ||
+                        timeGroups.dayPeriod.toLowerCase() ===
+                            PM.toLowerCase()) &&
+                    timeGroups.hour < 12
+                ) {
+                    timeGroups.hour += 12;
+                }
+                const date = sampleTime.value;
+                date.setHours(timeGroups.hour);
+                date.setMinutes(timeGroups.minute);
+                date.setSeconds(timeGroups.second || 0);
+                return date;
+            }
+        }
+
+        // Fallback if formatToParts is not supported or if we were not able to parse a valid date
+        let am = false;
+        if (props.hourFormat === HOUR_FORMAT_12) {
+            const dateString12 = time.split(" ");
+            time = dateString12[0];
+            am = dateString12[1] === amString.value || dateString12[1] === AM;
+        }
+        const timeSplit = time.split(":");
+        let hours = parseInt(timeSplit[0], 10);
+        const minutes = parseInt(timeSplit[1], 10);
+        const seconds = props.enableSeconds ? parseInt(timeSplit[2], 10) : 0;
+        if (
+            isNaN(hours) ||
+            hours < 0 ||
+            hours > 23 ||
+            (props.hourFormat === HOUR_FORMAT_12 &&
+                (hours < 1 || hours > 12)) ||
+            isNaN(minutes) ||
+            minutes < 0 ||
+            minutes > 59
+        ) {
+            return null;
+        }
+        const date = sampleTime.value;
+        date.setSeconds(seconds);
+        date.setMinutes(minutes);
+        if (props.hourFormat === HOUR_FORMAT_12) {
+            if (am && hours === 12) {
+                hours = 0;
+            } else if (!am && hours !== 12) {
+                hours += 12;
+            }
+        }
+        date.setHours(hours);
+        return new Date(date.getTime());
+    }
+
+    return {
+        defaultTimeFormatter,
+        defaultTimeParser,
+        pmString,
+        amString,
+        meridiens,
+        isHourFormat24,
+        hourLiteral,
+        minuteLiteral,
+        secondLiteral,
+    };
+}
diff --git a/packages/oruga-next/src/components/tooltip/Tooltip.vue b/packages/oruga-next/src/components/tooltip/Tooltip.vue
index 69364d76a..e502fc679 100644
--- a/packages/oruga-next/src/components/tooltip/Tooltip.vue
+++ b/packages/oruga-next/src/components/tooltip/Tooltip.vue
@@ -5,7 +5,7 @@ import {
     createAbsoluteElement,
     removeElement,
     getValueByPath,
-    isWebKit,
+    isWebKitAgent,
 } from "../../utils/helpers";
 import type { PropType } from "vue";
 import { defineComponent } from "vue";
@@ -219,7 +219,7 @@ export default defineComponent({
                 let viewRect: DOMRect;
                 const viewport = (window as any).visualViewport; // Not available with our current types package
                 if (viewport != undefined) {
-                    if (isWebKit()) {
+                    if (isWebKitAgent()) {
                         // On WebKit, getBoundingClientRect offsets relative to the the visual viewport's origin, not the layout viewport's.
                         // See https://bugs.webkit.org/show_bug.cgi?id=170981
                         viewRect = new DOMRect(
diff --git a/packages/oruga-next/src/components/upload/Upload.vue b/packages/oruga-next/src/components/upload/Upload.vue
index d79fc9ad8..7ae82fe1b 100644
--- a/packages/oruga-next/src/components/upload/Upload.vue
+++ b/packages/oruga-next/src/components/upload/Upload.vue
@@ -1,8 +1,13 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import BaseComponentMixin from "../../utils/BaseComponentMixin";
-import FormElementMixin from "../../utils/FormElementMixin";
+<script setup lang="ts">
+import { computed, ref, watch, type PropType } from "vue";
+import { baseComponentProps } from "@/utils/SharedProps";
+import { getOption } from "@/utils/config";
+import {
+    useComputedClass,
+    useClassProps,
+    useVModelBinding,
+    useInputHandler,
+} from "@/composables";
 import { File } from "../../utils/ssr";
 
 /**
@@ -10,199 +15,242 @@ import { File } from "../../utils/ssr";
  * @displayName Upload
  * @style _upload.scss
  */
-export default defineComponent({
+defineOptions({
+    isOruga: true,
     name: "OUpload",
-    mixins: [BaseComponentMixin, FormElementMixin],
     configField: "upload",
     inheritAttrs: false,
-    emits: ["update:modelValue"],
-    props: {
-        /** @model */
-        modelValue: [Object, File, Array],
-        /** Same as native, also push new item to v-model instead of replacing */
-        multiple: Boolean,
-        /** Same as native disabled */
-        disabled: Boolean,
-        /** Same as native accept */
-        accept: String,
-        /** Accepts drag & drop and change its style */
-        dragDrop: Boolean,
-        /**
-         * Color of the control, optional
-         * @values primary, info, success, warning, danger, and any other custom color
-         */
-        variant: {
-            type: String,
-        },
-        /** Replace last chosen files every time (like native file input element) */
-        native: {
-            type: Boolean,
-            default: false,
-        },
-        /** Upload will be expanded (full-width) */
-        expanded: {
-            type: Boolean,
-            default: false,
-        },
-        rootClass: [String, Function, Array],
-        draggableClass: [String, Function, Array],
-        variantClass: [String, Function, Array],
-        expandedClass: [String, Function, Array],
-        disabledClass: [String, Function, Array],
-        hoveredClass: [String, Function, Array],
+});
+
+const props = defineProps({
+    // add global shared props (will not be displayed in the docs)
+    ...baseComponentProps,
+    /** @model */
+    modelValue: {
+        type: [Object, Array] as PropType<
+            object | typeof File | object[] | (typeof File)[]
+        >,
+        default: undefined,
     },
-    data() {
-        return {
-            newValue: this.modelValue,
-            dragDropFocus: false,
-        };
+    /**
+     * Color of the control, optional
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant: {
+        type: String,
+        default: () => getOption("upload.variant"),
     },
-    computed: {
-        rootClasses() {
-            return [
-                this.computedClass("rootClass", "o-upl"),
-                {
-                    [this.computedClass("expandedClass", "o-upl--expanded")]:
-                        this.expanded,
-                },
-                {
-                    [this.computedClass("disabledClass", "o-upl--disabled")]:
-                        this.disabled,
-                },
-            ];
-        },
-        draggableClasses() {
-            return [
-                this.computedClass("draggableClass", "o-upl__draggable"),
-                {
-                    [this.computedClass(
-                        "hoveredClass",
-                        "o-upl__draggable--hovered",
-                    )]: !this.variant && this.dragDropFocus,
-                },
-                {
-                    [this.computedClass(
-                        "variantClass",
-                        "o-upl__draggable--hovered-",
-                        this.variant,
-                    )]: this.variant && this.dragDropFocus,
-                },
-            ];
-        },
-        $elementRef() {
-            return "input";
-        },
+    /** Same as native, also push new item to v-model instead of replacing */
+    multiple: { type: Boolean, default: false },
+    /** Same as native disabled */
+    disabled: { type: Boolean, default: false },
+    /** Same as native accept */
+    accept: { type: String, default: undefined },
+    /** Accepts drag & drop and change its style */
+    dragDrop: { type: Boolean, default: false },
+    /** Upload will be expanded (full-width) */
+    expanded: { type: Boolean, default: false },
+    /** Replace last chosen files every time (like native file input element) */
+    native: { type: Boolean, default: true },
+    /** Enable html 5 native validation */
+    useHtml5Validation: {
+        type: Boolean,
+        default: () => getOption("useHtml5Validation", true),
     },
-    watch: {
-        /**
-         *   When v-model is changed:
-         *   1. Set internal value.
-         *   2. Reset interna input file value
-         *   3. If it's invalid, validate again.
-         */
-        modelValue(value) {
-            this.newValue = value;
-            if (!value || (Array.isArray(value) && value.length === 0)) {
-                this.$refs.input.value = null;
-            }
-            !this.isValid && !this.dragDrop && this.checkHtml5Validity();
-        },
+    /** The message which is shown when a validation error occurs */
+    validationMessage: { type: String, default: undefined },
+    // add class props (will not be displayed in the docs)
+    ...useClassProps([
+        "rootClass",
+        "draggableClass",
+        "variantClass",
+        "expandedClass",
+        "disabledClass",
+        "hoveredClass",
+    ]),
+});
+
+const emits = defineEmits<{
+    /**
+     * modelValue prop two-way binding
+     * @param value {Object | Object[] | File | File[]} updated modelValue prop
+     */
+    (e: "update:modelValue", value: Object | Object[] | File | File[]): void;
+    /**
+     * on input focus event
+     * @param event {Event} native event
+     */
+    (e: "focus", event: Event): void;
+    /**
+     * on input blur event
+     * @param event {Event} native event
+     */
+    (e: "blur", event: Event): void;
+    /**
+     * on input invalid event
+     * @param event {Event} native event
+     */
+    (e: "invalid", event: Event): void;
+}>();
+
+const inputRef = ref();
+
+const vmodel = useVModelBinding<Object | Object[] | File | File[]>(
+    props,
+    emits,
+);
+
+// use form input functionality
+const { checkHtml5Validity, onFocus, onBlur, isValid } = useInputHandler(
+    inputRef,
+    emits,
+    props,
+);
+
+const dragDropFocus = ref(false);
+
+/**
+ * When v-model is changed:
+ * 1. Reset interna input file value
+ * 2. If it's invalid, validate again.
+ */
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (!value || (Array.isArray(value) && value.length === 0))
+            inputRef.value.value = null;
+        if (!isValid.value && !props.dragDrop) checkHtml5Validity();
     },
-    methods: {
-        /**
-         * Listen change event on input type 'file',
-         * emit 'input' event and validate
-         */
-        onFileChange(event) {
-            if (this.disabled) return;
-            if (this.dragDrop) this.updateDragDropFocus(false);
-            const value = event.target.files || event.dataTransfer.files;
-            if (value.length === 0) {
-                if (!this.newValue) return;
-                if (this.native) this.newValue = null;
-            } else if (!this.multiple) {
-                // only one element in case drag drop mode and isn't multiple
-                if (this.dragDrop && value.length !== 1) return;
-                else {
-                    const file = value[0];
-                    if (this.checkType(file)) this.newValue = file;
-                    else if (this.newValue) {
-                        this.newValue = null;
-                        this.clearInput();
-                    } else {
-                        // Force input back to empty state and recheck validity
-                        this.clearInput();
-                        this.checkHtml5Validity();
-                        return;
-                    }
-                }
+);
+
+/**
+ * Listen change event on input type 'file',
+ * emit 'input' event and validate
+ */
+function onFileChange(event: Event | DragEvent): void {
+    if (props.disabled) return;
+    if (props.dragDrop) updateDragDropFocus(false);
+    const value =
+        (event.target as HTMLInputElement).files ||
+        (event as DragEvent).dataTransfer.files;
+    // no file selected
+    if (value.length === 0) {
+        if (!vmodel.value) return;
+        if (props.native) vmodel.value = null;
+    }
+    // single uplaod
+    else if (!props.multiple) {
+        // only one element in case drag drop mode and isn't multiple
+        if (props.dragDrop && value.length !== 1) return;
+        else {
+            const file = value[0];
+            if (checkType(file)) vmodel.value = file;
+            else if (vmodel.value) {
+                vmodel.value = null;
+                clearInput();
             } else {
-                // always new values if native or undefined local
-                let newValues = false;
-                if (this.native || !this.newValue) {
-                    this.newValue = [];
-                    newValues = true;
-                }
-                for (let i = 0; i < value.length; i++) {
-                    const file = value[i];
-                    if (this.checkType(file)) {
-                        this.newValue.push(file);
-                        newValues = true;
-                    }
-                }
-                if (!newValues) return;
+                // Force input back to empty state and recheck validity
+                clearInput();
+                checkHtml5Validity();
+                return;
             }
-            this.$emit("update:modelValue", this.newValue);
-            !this.dragDrop && this.checkHtml5Validity();
-        },
-
-        /*
-         * Reset file input value
-         */
-        clearInput() {
-            this.$refs.input.value = null;
-        },
-
-        /**
-         * Listen drag-drop to update internal variable
-         */
-        updateDragDropFocus(focus) {
-            if (!this.disabled) {
-                this.dragDropFocus = focus;
+        }
+    }
+    // multiple upload
+    else {
+        // always new values if native or undefined local
+        let newValues = false;
+        if (props.native || !vmodel.value || !Array.isArray(vmodel.value)) {
+            vmodel.value = [] as any;
+            newValues = true;
+        }
+        for (let i = 0; i < value.length; i++) {
+            const file = value[i];
+            if (checkType(file) && Array.isArray(vmodel.value)) {
+                vmodel.value.push(file);
+                newValues = true;
             }
-        },
-
-        /**
-         * Check mime type of file
-         */
-        checkType(file) {
-            if (!this.accept) return true;
-            const types = this.accept.split(",");
-            if (types.length === 0) return true;
-            for (let i = 0; i < types.length; i++) {
-                const type = types[i].trim();
-                if (type) {
-                    if (type.substring(0, 1) === ".") {
-                        const extension = file.name
-                            .toLowerCase()
-                            .slice(-type.length);
-                        if (extension === type.toLowerCase()) {
-                            return true;
-                        }
-                    } else {
-                        // check mime type
-                        if (file.type.match(type)) return true;
-                    }
-                }
+        }
+        if (!newValues) return;
+    }
+
+    if (!props.dragDrop) checkHtml5Validity();
+}
+
+/** Reset file input value */
+function clearInput(): void {
+    inputRef.value.value = null;
+}
+
+/** Listen drag-drop to update internal variable */
+function updateDragDropFocus(focus: boolean): void {
+    if (!props.disabled) dragDropFocus.value = focus;
+}
+
+/** Check mime type of file s*/
+function checkType(file: File): boolean {
+    if (!props.accept) return true;
+    const types = props.accept.split(",");
+    if (types.length === 0) return true;
+    for (let i = 0; i < types.length; i++) {
+        const type = types[i].trim();
+        if (type) {
+            if (type.substring(0, 1) === ".") {
+                const extension = file.name.toLowerCase().slice(-type.length);
+                if (extension === type.toLowerCase()) return true;
+            } else {
+                // check mime type
+                if (file.type.match(type)) return true;
             }
-            return false;
-        },
+        }
+    }
+    return false;
+}
+
+function onClick(event: Event): void {
+    if (props.disabled) return;
+    if (!props.dragDrop) {
+        event.preventDefault();
+        // click input if not drag and drop is used
+        const clickEvent = new MouseEvent("click", {
+            view: window,
+            bubbles: true,
+            cancelable: false,
+        });
+        inputRef.value.dispatchEvent(clickEvent);
+    }
+}
+
+// --- Computed Component Classes ---
+
+const rootClasses = computed(() => [
+    useComputedClass("rootClass", "o-upl"),
+    {
+        [useComputedClass("expandedClass", "o-upl--expanded")]: props.expanded,
     },
-});
+    {
+        [useComputedClass("disabledClass", "o-upl--disabled")]: props.disabled,
+    },
+]);
+
+const draggableClasses = computed(() => [
+    useComputedClass("draggableClass", "o-upl__draggable"),
+    {
+        [useComputedClass("hoveredClass", "o-upl__draggable--hovered")]:
+            !props.variant && dragDropFocus.value,
+    },
+    {
+        [useComputedClass(
+            "variantClass",
+            "o-upl__draggable--hovered-",
+            props.variant,
+        )]: props.variant && dragDropFocus.value,
+    },
+]);
 </script>
 
 <template>
-    <label :class="rootClasses">
+    <label :class="rootClasses" @click="onClick">
         <template v-if="!dragDrop">
             <slot />
         </template>
@@ -220,12 +268,14 @@ export default defineComponent({
         </div>
 
         <input
-            ref="input"
+            ref="inputRef"
             type="file"
             v-bind="$attrs"
             :multiple="multiple"
             :accept="accept"
             :disabled="disabled"
-            @change="onFileChange" />
+            @change="onFileChange"
+            @focus="onFocus"
+            @blur="onBlur" />
     </label>
 </template>
diff --git a/packages/oruga-next/src/components/upload/index.ts b/packages/oruga-next/src/components/upload/index.ts
index f34e84362..1cd51c60a 100644
--- a/packages/oruga-next/src/components/upload/index.ts
+++ b/packages/oruga-next/src/components/upload/index.ts
@@ -2,7 +2,7 @@ import type { App, Plugin } from "vue";
 
 import Upload from "./Upload.vue";
 
-import { registerComponent } from "../../utils/plugins";
+import { registerComponent } from "@/utils/plugins";
 
 export default {
     install(app: App) {
diff --git a/packages/oruga-next/src/composables/index.ts b/packages/oruga-next/src/composables/index.ts
new file mode 100644
index 000000000..69f9d542f
--- /dev/null
+++ b/packages/oruga-next/src/composables/index.ts
@@ -0,0 +1,7 @@
+export * from "./useComputedClass";
+export * from "./usePropValue";
+export * from "./useClassProps";
+export * from "./useEventListener";
+export * from "./useMatchMedia";
+export * from "./useInputHandler";
+export * from "./useDebounce";
diff --git a/packages/oruga-next/src/composables/useClassProps.ts b/packages/oruga-next/src/composables/useClassProps.ts
new file mode 100644
index 000000000..b0e293361
--- /dev/null
+++ b/packages/oruga-next/src/composables/useClassProps.ts
@@ -0,0 +1,12 @@
+import type { ComponentObjectPropsOptions } from "vue";
+
+/**
+ * Define a list of classes as probs to a component
+ */
+export function useClassProps(classes: string[]): ComponentObjectPropsOptions {
+    return classes
+        .map((c) => ({
+            [c]: { type: [String, Function, Array], default: undefined },
+        }))
+        .reduce((a, b) => Object.assign(a, b), {});
+}
diff --git a/packages/oruga-next/src/composables/useComputedClass.ts b/packages/oruga-next/src/composables/useComputedClass.ts
new file mode 100644
index 000000000..629c55144
--- /dev/null
+++ b/packages/oruga-next/src/composables/useComputedClass.ts
@@ -0,0 +1,139 @@
+import { getCurrentInstance, type ComponentInternalInstance } from "vue";
+import { getOptions } from "@/utils/config";
+import { blankIfUndefined, endsWith, getValueByPath } from "@/utils/helpers";
+
+import type {
+    FieldDefinition,
+    ComponentContext,
+    TransformFunction,
+} from "@/types";
+
+const defaultSuffixProcessor = (input: string, suffix: string): string => {
+    return blankIfUndefined(input)
+        .split(" ")
+        .filter((cls) => cls.length > 0)
+        .map((cls) => cls + suffix)
+        .join(" ");
+};
+
+const getContext = (vm: ComponentInternalInstance): ComponentContext => {
+    const computedNames = vm.proxy?.$options.computed
+        ? Object.keys(vm.proxy.$options.computed)
+        : [];
+
+    let props = vm.proxy.$props;
+
+    // get all props which ends with "Props", these are compressed parent props
+    // append these parent props as root level prop
+    Object.keys(props)
+        .filter((key) => key.endsWith("Props"))
+        .forEach((key) => (props = { ...props, ...props[key] }));
+
+    const computedProps = computedNames
+        .filter((e) => !endsWith(e, "Classes"))
+        .reduce((o, key) => {
+            o[key] = vm.proxy[key];
+            return o;
+        }, {});
+
+    return {
+        props: props,
+        data: vm.proxy.$data,
+        computed: computedProps,
+    };
+};
+
+/**
+ * Compute a class by field name
+ */
+export function useComputedClass(
+    field: string,
+    defaultValue?: string,
+    suffix = "",
+): string {
+    // getting a hold of the internal instance in setup()
+    const vm = getCurrentInstance();
+    if (!vm)
+        throw new Error(
+            "useComputedClass must be called within a component setup function.",
+        );
+    // get component props
+    const props = vm.props;
+
+    const configField = vm.proxy?.$options.configField;
+    if (!configField)
+        throw new Error("component must define the 'configField' option.");
+
+    const config = props.override === true ? {} : getOptions();
+
+    const override =
+        props.override ||
+        getValueByPath(config, `${configField}.override`, false);
+    const overrideClass = getValueByPath(
+        config,
+        `${configField}.${field}.override`,
+        override,
+    );
+
+    const globalTransformClasses = getValueByPath<
+        TransformFunction | undefined
+    >(config, "transformClasses");
+    const localTransformClasses = getValueByPath<TransformFunction | undefined>(
+        config,
+        `${configField}.transformClasses`,
+    );
+
+    let globalClass =
+        getValueByPath<FieldDefinition>(
+            config,
+            `${configField}.${field}.class`,
+            "",
+        ) ||
+        getValueByPath<FieldDefinition>(config, `${configField}.${field}`, "");
+    let currentClass = getValueByPath<FieldDefinition>(props, field, "");
+
+    if (Array.isArray(currentClass)) {
+        currentClass = currentClass.join(" ");
+    }
+    if (typeof currentClass === "function") {
+        const context = getContext(vm);
+        currentClass = currentClass(suffix, context);
+    } else {
+        currentClass = defaultSuffixProcessor(currentClass as string, suffix);
+    }
+
+    if (typeof globalClass === "function") {
+        const context = getContext(vm);
+        globalClass = globalClass(suffix, context);
+    } else {
+        globalClass = defaultSuffixProcessor(globalClass as string, suffix);
+    }
+
+    if (defaultValue.includes("{*}")) {
+        defaultValue = defaultValue.replace(/\{\*\}/g, suffix);
+    } else {
+        defaultValue = defaultValue + suffix;
+    }
+
+    let appliedClasses = (
+        `${
+            (override && !overrideClass) || (!override && !overrideClass)
+                ? defaultValue
+                : ""
+        } ` +
+        `${blankIfUndefined(globalClass)} ` +
+        `${blankIfUndefined(currentClass)}`
+    )
+        .trim()
+        .replace(/\s\s+/g, " ");
+
+    if (localTransformClasses) {
+        appliedClasses = localTransformClasses(appliedClasses);
+    }
+
+    if (globalTransformClasses) {
+        appliedClasses = globalTransformClasses(appliedClasses);
+    }
+
+    return appliedClasses;
+}
diff --git a/packages/oruga-next/src/composables/useDebounce.ts b/packages/oruga-next/src/composables/useDebounce.ts
new file mode 100644
index 000000000..f91b192aa
--- /dev/null
+++ b/packages/oruga-next/src/composables/useDebounce.ts
@@ -0,0 +1,24 @@
+/**
+ * Debounce a function
+ * @param func function to debounce
+ * @param wait debounce time to wait
+ * @param immediate call immediate
+ * @returns function to call
+ */
+export function useDebounce<A extends Array<unknown>>(
+    func: (...args: A) => void,
+    wait: number,
+    immediate?: boolean,
+): (...args: A) => void {
+    let timeout: NodeJS.Timeout;
+    return (...args: A) => {
+        const later = () => {
+            timeout = null;
+            if (!immediate) func.apply(this, args);
+        };
+        const callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(this, args);
+    };
+}
diff --git a/packages/oruga-next/src/composables/useEventListener.ts b/packages/oruga-next/src/composables/useEventListener.ts
new file mode 100644
index 000000000..e88798ae6
--- /dev/null
+++ b/packages/oruga-next/src/composables/useEventListener.ts
@@ -0,0 +1,25 @@
+import { onBeforeUnmount, onMounted } from "vue";
+
+/**
+ * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.
+ *
+ * @param event event name
+ * @param listener event listener function
+ * @param el = docuemnt
+ */
+export function useEventListener(
+    event: string,
+    listener: (evt?: any) => any,
+    el: Element | Document | Window = document,
+): void {
+    onMounted(() => {
+        if (typeof window !== "undefined") {
+            el.addEventListener(event, listener);
+        }
+    });
+    onBeforeUnmount(() => {
+        if (typeof window !== "undefined") {
+            el.removeEventListener(event, listener);
+        }
+    });
+}
diff --git a/packages/oruga-next/src/composables/useInputHandler.ts b/packages/oruga-next/src/composables/useInputHandler.ts
new file mode 100644
index 000000000..f2fd3c1d6
--- /dev/null
+++ b/packages/oruga-next/src/composables/useInputHandler.ts
@@ -0,0 +1,206 @@
+import { injectField } from "@/components/field/useFieldShare";
+import { getOption } from "@/utils/config";
+import {
+    // getCurrentInstance,
+    nextTick,
+    ref,
+    computed,
+    type ComputedRef,
+    type Ref,
+    type ExtractPropTypes,
+    type ComponentPublicInstance,
+} from "vue";
+
+// This should cover all types of HTML elements that have properties related to
+// HTML constraint validation, e.g. .form and .validity.
+const validatableFormElementTypes =
+    typeof window === "undefined"
+        ? []
+        : [
+              HTMLButtonElement,
+              HTMLFieldSetElement,
+              HTMLInputElement,
+              HTMLObjectElement,
+              HTMLOutputElement,
+              HTMLSelectElement,
+              HTMLTextAreaElement,
+          ];
+
+export type ValidatableFormElement = InstanceType<
+    (typeof validatableFormElementTypes)[number]
+>;
+
+function asValidatableFormElement(el: unknown): ValidatableFormElement | null {
+    return validatableFormElementTypes.some((t) => el instanceof t)
+        ? (el as ValidatableFormElement)
+        : null;
+}
+
+/**
+ * Form input handler functionalities
+ */
+export function useInputHandler(
+    /** input ref element - can be a html element or a vue component*/
+    inputRef:
+        | Ref<ValidatableFormElement>
+        | ComputedRef<ValidatableFormElement>
+        | Ref<ComponentPublicInstance>
+        | Ref<InstanceType<any>>,
+    /** emitted input events */
+    emits: {
+        /** on input focus event */
+        (e: "focus", value: Event): void;
+        /** on input blur event */
+        (e: "blur", value: Event): void;
+        /** on input invalid event */
+        (e: "invalid", value: Event): void;
+    },
+    /** validation configuration props */
+    props: Readonly<
+        ExtractPropTypes<{
+            useHtml5Validation?: boolean;
+            validationMessage?: string;
+        }>
+    >,
+) {
+    // inject parent field component if used inside one
+    const { parentField } = injectField();
+
+    const element = computed<ValidatableFormElement>(() => {
+        let el = inputRef.value;
+        // if element does not have any refs return element
+        if (el && !el["$inputRef"]) return el as ValidatableFormElement;
+
+        // go deep to get the internal input element defined by $elementRef
+        while (el && el["$inputRef"]) {
+            el = el["$inputRef"];
+        }
+
+        return el as ValidatableFormElement;
+    });
+
+    // --- Input Focus Feature ---
+
+    const isFocused = ref(false);
+
+    /**
+     * Focus method that work dynamically depending on the component.
+     */
+    function setFocus(): void {
+        nextTick(() => {
+            if (element.value) element.value.focus();
+        });
+    }
+
+    function onBlur(event?: Event): void {
+        isFocused.value = false;
+        if (parentField?.value) parentField.value.setFocus(false);
+        emits("blur", event);
+        checkHtml5Validity();
+    }
+
+    function onFocus(event?: Event): void {
+        isFocused.value = true;
+        if (parentField?.value) parentField.value.setFocus(true);
+        emits("focus", event);
+    }
+
+    // --- Validation Feature ---
+
+    const isValid = ref(true);
+
+    function setFieldValidity(variant, message): void {
+        nextTick(() => {
+            if (parentField?.value) {
+                // Set type only if not defined
+                if (!parentField.value.props.variant) {
+                    parentField.value.setVariant(variant);
+                }
+                // Set message only if not defined
+                if (!parentField.value.props.message) {
+                    parentField.value.setMessage(message);
+                }
+            }
+        });
+    }
+
+    /**
+     * Check HTML5 validation, set isValid property.
+     * If validation fail, send 'danger' type,
+     * and error message to parent if it's a Field.
+     */
+    function checkHtml5Validity(): boolean {
+        if (!props.useHtml5Validation) return;
+
+        if (!element.value) return;
+        if (element.value.validity.valid) {
+            setFieldValidity(null, null);
+            isValid.value = true;
+        } else {
+            setInvalid();
+            isValid.value = false;
+        }
+
+        return isValid.value;
+    }
+
+    function setInvalid(): void {
+        const variant = "danger";
+        const message =
+            props.validationMessage || element.value.validationMessage;
+        setFieldValidity(variant, message);
+    }
+
+    function onInvalid(event: Event): void {
+        checkHtml5Validity();
+        const validatable = asValidatableFormElement(event.target);
+        if (validatable && parentField?.value && props.useHtml5Validation) {
+            // We provide our own error message on the field, so we should suppress the browser's default tooltip.
+            // We still want to focus the form's first invalid input, though.
+            event.preventDefault();
+            let isFirstInvalid = false;
+            if (validatable.form != null) {
+                const formElements = validatable.form.elements;
+                for (let i = 0; i < formElements.length; ++i) {
+                    const element = asValidatableFormElement(
+                        formElements.item(i),
+                    );
+                    if (element?.willValidate && !element.validity.valid) {
+                        isFirstInvalid = validatable === element;
+                        break;
+                    }
+                }
+            }
+            if (isFirstInvalid) {
+                const fieldElement = parentField.value.$el;
+                const invalidHandler = getOption("invalidHandler");
+                if (invalidHandler instanceof Function) {
+                    invalidHandler(validatable, fieldElement);
+                } else {
+                    // We'll scroll to put the whole field in view, not just the element that triggered the event,
+                    // which should mean that the message will be visible onscreen.
+                    // scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
+                    // If we can't use it, we'll just fall back to focusing the field.
+                    const canScrollToField = fieldElement
+                        ? fieldElement.scrollIntoView != undefined
+                        : false;
+                    validatable.focus({ preventScroll: canScrollToField });
+                    if (canScrollToField) {
+                        fieldElement.scrollIntoView({ block: "nearest" });
+                    }
+                }
+            }
+        }
+        emits("invalid", event);
+    }
+
+    return {
+        isFocused,
+        isValid,
+        setFocus,
+        onFocus,
+        onBlur,
+        checkHtml5Validity,
+        onInvalid,
+    };
+}
diff --git a/packages/oruga-next/src/composables/useMatchMedia.ts b/packages/oruga-next/src/composables/useMatchMedia.ts
new file mode 100644
index 000000000..93de68232
--- /dev/null
+++ b/packages/oruga-next/src/composables/useMatchMedia.ts
@@ -0,0 +1,28 @@
+import { onMounted, ref } from "vue";
+import { getOption } from "@/utils/config";
+import { useEventListener } from "./useEventListener";
+
+/**
+ * Checks if the match media is mobile.
+ * @param mobileBreakpoint px breakpoint
+ */
+export function useMatchMedia(mobileBreakpoint?: string) {
+    const isMobile = ref(false);
+
+    onMounted(() => {
+        const width = getOption(
+            `mobileBreakpoint`,
+            mobileBreakpoint || "1023px",
+        );
+        const mediaQuery = window.matchMedia(`(max-width: ${width})`);
+        isMobile.value = mediaQuery ? mediaQuery.matches : false;
+    });
+
+    useEventListener("change", onMatchMedia);
+
+    function onMatchMedia(event: any): void {
+        isMobile.value = event.matches;
+    }
+
+    return { isMobile };
+}
diff --git a/packages/oruga-next/src/composables/usePropValue.ts b/packages/oruga-next/src/composables/usePropValue.ts
new file mode 100644
index 000000000..5ce002a48
--- /dev/null
+++ b/packages/oruga-next/src/composables/usePropValue.ts
@@ -0,0 +1,109 @@
+import {
+    computed,
+    ref,
+    watch,
+    nextTick,
+    type ExtractPropTypes,
+    type WritableComputedRef,
+    type Ref,
+    type UnwrapRef,
+    type ComponentObjectPropsOptions,
+} from "vue";
+
+/**
+ * Adaption of {@link https://vueuse.org/core/useVModel/} options.
+ */
+export interface PropBindingOptions {
+    /**
+     * When passive is set to `true`, it will use `watch` to sync with props and ref.
+     * Instead of relying on the `v-model` or `.sync` to work.
+     *
+     * @default false
+     */
+    passive?: boolean;
+    /**
+     * When eventName is set, it's value will be used to overwrite the emit event name.
+     *
+     * @default undefined
+     */
+    eventName?: string;
+    /**
+     * Attempting to check for changes of properties in a deeply nested object or array.
+     * Apply only when `passive` option is set to `true`
+     *
+     * @default false
+     */
+    deep?: boolean;
+}
+
+/**
+ * Use two-way binded modelValue property in script setup syntax.
+ * Adaption of {@link https://vueuse.org/core/useVModel/}.
+ * @param props Readonly<ExtractPropTypes<ComponentObjectPropsOptions>>
+ * @param emit EmitFn
+ * @param options Extened usage options
+ * @returns Ref<T>
+ */
+export const useVModelBinding = <T>(
+    props: Readonly<ExtractPropTypes<ComponentObjectPropsOptions>>,
+    emit: {
+        /** on input focus event */
+        (e: "update:modelValue", value: T): void;
+    },
+    options?: PropBindingOptions,
+): WritableComputedRef<T> | Ref<UnwrapRef<T>> =>
+    usePropBinding("modelValue", props, emit, options);
+
+/**
+ * Use two-way model binding in script setup syntax.
+ * Adaption of {@link https://vueuse.org/core/useVModel/}.
+ * @param name Property name
+ * @param props Readonly<ExtractPropTypes<ComponentObjectPropsOptions>>
+ * @param emit EmitFn
+ * @param options Extened usage options
+ * @returns Ref<T>
+ */
+export const usePropBinding = <T>(
+    name: string,
+    props: Readonly<ExtractPropTypes<ComponentObjectPropsOptions<any>>>,
+    emit: (event: any, value: T) => void,
+    options?: PropBindingOptions,
+): WritableComputedRef<T> | Ref<UnwrapRef<T>> => {
+    const event = options?.eventName || `update:${name!.toString()}`;
+
+    if (options?.passive) {
+        const proxy = ref<T>(props[name!]);
+        let isUpdating = false;
+
+        watch(
+            () => props[name!],
+            (value) => {
+                if (!isUpdating) {
+                    isUpdating = true;
+                    proxy.value = value;
+                    nextTick(() => (isUpdating = false));
+                }
+            },
+        );
+
+        watch(
+            proxy,
+            (value) => {
+                if ((!isUpdating && value !== props[name!]) || options.deep)
+                    emit(event, value as T);
+            },
+            { deep: options.deep },
+        );
+
+        return proxy;
+    } else {
+        return computed<T>({
+            get() {
+                return props[name!] as T;
+            },
+            set(value) {
+                emit(event, value);
+            },
+        });
+    }
+};
diff --git a/packages/oruga-next/src/directives/trapFocus.ts b/packages/oruga-next/src/directives/trapFocus.ts
index 85ea53bb7..67fb0cc0a 100644
--- a/packages/oruga-next/src/directives/trapFocus.ts
+++ b/packages/oruga-next/src/directives/trapFocus.ts
@@ -66,3 +66,5 @@ const directive = {
 };
 
 export default directive;
+
+export const vTrapFocus = directive; // export composition api directive
diff --git a/packages/oruga-next/src/types/config.ts b/packages/oruga-next/src/types/config.ts
index 516716bb4..a280793bc 100644
--- a/packages/oruga-next/src/types/config.ts
+++ b/packages/oruga-next/src/types/config.ts
@@ -1,3 +1,5 @@
+import type { ValidatableFormElement } from "@/composables";
+
 export type ComponentContext = {
     props: Record<string, any>;
     data: Record<string, any>;
@@ -20,13 +22,20 @@ export type TransformFunction = (classes: string) => string;
 export type FieldDefinition = undefined | string | FieldFunction | FieldObject;
 
 export type OrugaOptions = {
-    iconPack: string;
-    useHtml5Validation: boolean;
-    statusIcon: boolean;
+    /** Define the icon pack be used */
+    iconPack?: string;
+    /** Enable HTML5 validation */
+    useHtml5Validation?: boolean;
+    /** Custom HTML5 validation invalid handler */
+    invalidHandler?: (
+        validatable: ValidatableFormElement,
+        fieldElement: Element,
+    ) => void;
     /** You can use transformClasses globally if you need to transform classes for any component. */
     transformClasses?: TransformFunction;
     [key: string]:
         | boolean
+        | Function
         | FieldDefinition
         | {
               /**
@@ -39,3 +48,14 @@ export type OrugaOptions = {
               [key: string]: FieldDefinition | boolean;
           };
 };
+
+/** Vue native type which a v-bind prop must have */
+export type BindProp = (
+    | string
+    | {
+          [x: string]: string;
+      }
+    | {
+          [x: string]: boolean;
+      }
+)[];
diff --git a/packages/oruga-next/src/utils/FormElementMixin.ts b/packages/oruga-next/src/utils/FormElementMixin.ts
deleted file mode 100644
index 6a44a22b2..000000000
--- a/packages/oruga-next/src/utils/FormElementMixin.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import { defineComponent } from "vue";
-import { getOptions } from "./config";
-import { getValueByPath } from "./helpers";
-
-// This should cover all types of HTML elements that have properties related to
-// HTML constraint validation, e.g. .form and .validity.
-const validatableFormElementTypes =
-    typeof window === "undefined"
-        ? []
-        : [
-              HTMLButtonElement,
-              HTMLFieldSetElement,
-              HTMLInputElement,
-              HTMLObjectElement,
-              HTMLOutputElement,
-              HTMLSelectElement,
-              HTMLTextAreaElement,
-          ];
-
-type ValidatableFormElement = InstanceType<
-    (typeof validatableFormElementTypes)[number]
->;
-
-function asValidatableFormElement(el: unknown): ValidatableFormElement | null {
-    if (validatableFormElementTypes.some((t) => el instanceof t)) {
-        return el as ValidatableFormElement;
-    } else {
-        return null;
-    }
-}
-
-export default defineComponent({
-    inject: {
-        $field: { from: "$field", default: false },
-    },
-    props: {
-        /**
-         * Makes input full width when inside a grouped or addon field
-         */
-        expanded: Boolean,
-        /**
-         * Makes the element rounded
-         */
-        rounded: Boolean,
-        /**
-         * Icon name to be added
-         */
-        icon: String,
-        /**
-         * Icon pack to use
-         * @values mdi, fa, fas and any other custom icon pack
-         */
-        iconPack: String,
-        /** Native options to use in HTML5 validation */
-        autocomplete: String,
-        /** Same as native maxlength, plus character counter */
-        maxlength: [Number, String],
-        /** Enable html 5 native validation */
-        useHtml5Validation: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(getOptions(), "useHtml5Validation", true);
-            },
-        },
-        /** Show status icon using field and variant prop */
-        statusIcon: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(getOptions(), "statusIcon", true);
-            },
-        },
-        /**
-         * The message which is shown when a validation error occurs
-         */
-        validationMessage: String,
-    },
-    emits: ["blur", "focus"],
-    data() {
-        return {
-            isValid: true,
-            isFocused: false,
-            newIconPack: this.iconPack,
-        };
-    },
-    computed: {
-        parentField() {
-            return this.$field;
-        },
-
-        /**
-         * Get the type prop from parent if it's a Field.
-         */
-        statusVariant() {
-            if (!this.parentField) return;
-            if (!this.parentField.newVariant) return;
-            if (typeof this.parentField.newVariant === "string") {
-                return this.parentField.newVariant;
-            } else {
-                for (const key in this.parentField.newVariant) {
-                    if (this.parentField.newVariant[key]) {
-                        return key;
-                    }
-                }
-            }
-            return "";
-        },
-
-        /**
-         * Get the message prop from parent if it's a Field.
-         */
-        statusMessage() {
-            if (!this.parentField) return;
-
-            return (
-                this.parentField.newMessage || this.parentField.hasMessageSlot
-            );
-        },
-
-        /**
-         * Icon name based on the variant.
-         */
-        statusVariantIcon() {
-            const statusVariantIcon = getValueByPath(
-                getOptions(),
-                "statusVariantIcon",
-                {
-                    success: "check",
-                    danger: "alert-circle",
-                    info: "information",
-                    warning: "alert",
-                },
-            );
-            return statusVariantIcon[this.statusVariant] || "";
-        },
-    },
-    methods: {
-        /**
-         * Focus method that work dynamically depending on the component.
-         */
-        focus() {
-            const el = this.getElement();
-            if (!el) return;
-
-            this.$nextTick(() => {
-                if (el) el.focus();
-            });
-        },
-
-        onBlur(event: Event) {
-            this.isFocused = false;
-            if (this.parentField) {
-                this.parentField.isFocused = false;
-            }
-            this.$emit("blur", event);
-            this.checkHtml5Validity();
-        },
-
-        onFocus(event: Event) {
-            this.isFocused = true;
-            if (this.parentField) {
-                this.parentField.isFocused = true;
-            }
-            this.$emit("focus", event);
-        },
-
-        onInvalid(event: Event) {
-            this.checkHtml5Validity();
-            const validatable = asValidatableFormElement(event.target);
-            if (validatable && this.parentField && this.useHtml5Validation) {
-                // We provide our own error message on the field, so we should suppress the browser's default tooltip.
-                // We still want to focus the form's first invalid input, though.
-                event.preventDefault();
-                let isFirstInvalid = false;
-                if (validatable.form != null) {
-                    const formElements = validatable.form.elements;
-                    for (let i = 0; i < formElements.length; ++i) {
-                        const element = asValidatableFormElement(
-                            formElements.item(i),
-                        );
-                        if (
-                            element &&
-                            element.willValidate &&
-                            !element.validity.valid
-                        ) {
-                            isFirstInvalid = validatable === element;
-                            break;
-                        }
-                    }
-                }
-                if (isFirstInvalid) {
-                    const fieldElement = this.parentField.$el;
-                    const invalidHandler = getValueByPath(
-                        getOptions(),
-                        "reportInvalidInput",
-                    );
-                    if (invalidHandler instanceof Function) {
-                        invalidHandler(validatable, fieldElement);
-                    } else {
-                        // We'll scroll to put the whole field in view, not just the element that triggered the event,
-                        // which should mean that the message will be visible onscreen.
-                        // scrollIntoViewIfNeeded() is a non-standard method (but a very common extension).
-                        // If we can't use it, we'll just fall back to focusing the field.
-                        const canScrollToField = fieldElement
-                            ? fieldElement.scrollIntoViewIfNeeded != undefined
-                            : false;
-                        validatable.focus({ preventScroll: canScrollToField });
-                        if (canScrollToField) {
-                            fieldElement.scrollIntoViewIfNeeded();
-                        }
-                    }
-                }
-            }
-            this.$emit("invalid", event);
-        },
-
-        getElement() {
-            let el = this.$refs[this.$elementRef];
-            while (el && el.$elementRef) {
-                el = el.$refs[el.$elementRef];
-            }
-            return el;
-        },
-
-        setInvalid() {
-            const variant = "danger";
-            const message =
-                this.validationMessage || this.getElement().validationMessage;
-            this.setValidity(variant, message);
-        },
-
-        setValidity(variant, message) {
-            this.$nextTick(() => {
-                if (this.parentField) {
-                    // Set type only if not defined
-                    if (!this.parentField.variant) {
-                        this.parentField.newVariant = variant;
-                    }
-                    // Set message only if not defined
-                    if (!this.parentField.message) {
-                        this.parentField.newMessage = message;
-                    }
-                }
-            });
-        },
-
-        /**
-         * Check HTML5 validation, set isValid property.
-         * If validation fail, send 'danger' type,
-         * and error message to parent if it's a Field.
-         */
-        checkHtml5Validity() {
-            if (!this.useHtml5Validation) return;
-
-            const el = this.getElement();
-            if (!el) return;
-
-            if (!el.validity.valid) {
-                this.setInvalid();
-                this.isValid = false;
-            } else {
-                this.setValidity(null, null);
-                this.isValid = true;
-            }
-
-            return this.isValid;
-        },
-
-        syncFilled(value) {
-            if (this.parentField) {
-                this.parentField.isFilled = !!value;
-            }
-        },
-    },
-});
diff --git a/packages/oruga-next/src/utils/SharedProps.ts b/packages/oruga-next/src/utils/SharedProps.ts
new file mode 100644
index 000000000..a2a3daad9
--- /dev/null
+++ b/packages/oruga-next/src/utils/SharedProps.ts
@@ -0,0 +1,10 @@
+// There is some weird bug while defining the return value {@link ComponentObjectPropsOptions}.
+// The type check is not working anymore with a return type definition for props.
+
+/** base component props for every oruga main component */
+export const baseComponentProps = {
+    override: {
+        type: Boolean,
+        default: undefined,
+    },
+};
diff --git a/packages/oruga-next/src/utils/TimepickerMixin.ts b/packages/oruga-next/src/utils/TimepickerMixin.ts
deleted file mode 100644
index d91d80941..000000000
--- a/packages/oruga-next/src/utils/TimepickerMixin.ts
+++ /dev/null
@@ -1,861 +0,0 @@
-import type { App } from "vue";
-import { defineComponent } from "vue";
-
-import { getOptions } from "./config";
-import FormElementMixin from "./FormElementMixin";
-import { getValueByPath, isMobile, matchWithGroups } from "./helpers";
-
-const AM = "AM";
-const PM = "PM";
-const HOUR_FORMAT_24 = "24";
-const HOUR_FORMAT_12 = "12";
-
-const defaultTimeFormatter = (date, vm) => {
-    return vm.dtf.format(date);
-};
-
-const defaultTimeParser = (timeString, vm) => {
-    if (timeString) {
-        let d = null;
-        if (vm.computedValue && !isNaN(vm.computedValue)) {
-            d = new Date(vm.computedValue);
-        } else {
-            d = vm.timeCreator();
-            d.setMilliseconds(0);
-        }
-
-        if (
-            vm.dtf.formatToParts &&
-            typeof vm.dtf.formatToParts === "function"
-        ) {
-            const formatRegex = vm.dtf
-                .formatToParts(d)
-                .map((part) => {
-                    if (part.type === "literal") {
-                        return part.value.replace(/ /g, "\\s?");
-                    } else if (part.type === "dayPeriod") {
-                        return `((?!=<${part.type}>)(${vm.amString}|${
-                            vm.pmString
-                        }|${AM}|${PM}|${AM.toLowerCase()}|${PM.toLowerCase()})?)`;
-                    }
-                    return `((?!=<${part.type}>)\\d+)`;
-                })
-                .join("");
-            const timeGroups = matchWithGroups(formatRegex, timeString);
-
-            // We do a simple validation for the group.
-            // If it is not valid, it will fallback to Date.parse below
-            timeGroups.hour = timeGroups.hour
-                ? parseInt(timeGroups.hour, 10)
-                : null;
-            timeGroups.minute = timeGroups.minute
-                ? parseInt(timeGroups.minute, 10)
-                : null;
-            timeGroups.second = timeGroups.second
-                ? parseInt(timeGroups.second, 10)
-                : null;
-            if (
-                timeGroups.hour &&
-                timeGroups.hour >= 0 &&
-                timeGroups.hour < 24 &&
-                timeGroups.minute &&
-                timeGroups.minute >= 0 &&
-                timeGroups.minute < 59
-            ) {
-                if (
-                    timeGroups.dayPeriod &&
-                    (timeGroups.dayPeriod.toLowerCase() ===
-                        vm.pmString.toLowerCase() ||
-                        timeGroups.dayPeriod.toLowerCase() ===
-                            PM.toLowerCase()) &&
-                    timeGroups.hour < 12
-                ) {
-                    timeGroups.hour += 12;
-                }
-                d.setHours(timeGroups.hour);
-                d.setMinutes(timeGroups.minute);
-                d.setSeconds(timeGroups.second || 0);
-                return d;
-            }
-        }
-
-        // Fallback if formatToParts is not supported or if we were not able to parse a valid date
-        let am = false;
-        if (vm.hourFormat === HOUR_FORMAT_12) {
-            const dateString12 = timeString.split(" ");
-            timeString = dateString12[0];
-            am = dateString12[1] === vm.amString || dateString12[1] === AM;
-        }
-        const time = timeString.split(":");
-        let hours = parseInt(time[0], 10);
-        const minutes = parseInt(time[1], 10);
-        const seconds = vm.enableSeconds ? parseInt(time[2], 10) : 0;
-        if (
-            isNaN(hours) ||
-            hours < 0 ||
-            hours > 23 ||
-            (vm.hourFormat === HOUR_FORMAT_12 && (hours < 1 || hours > 12)) ||
-            isNaN(minutes) ||
-            minutes < 0 ||
-            minutes > 59
-        ) {
-            return null;
-        }
-        d.setSeconds(seconds);
-        d.setMinutes(minutes);
-        if (vm.hourFormat === HOUR_FORMAT_12) {
-            if (am && hours === 12) {
-                hours = 0;
-            } else if (!am && hours !== 12) {
-                hours += 12;
-            }
-        }
-        d.setHours(hours);
-        return new Date(d.getTime());
-    }
-    return null;
-};
-
-export default defineComponent({
-    mixins: [FormElementMixin],
-    inheritAttrs: false,
-    props: {
-        /** @model */
-        modelValue: Date,
-        inline: Boolean,
-        minTime: Date,
-        maxTime: Date,
-        placeholder: String,
-        editable: Boolean,
-        disabled: Boolean,
-        /**
-         * Size of button, optional
-         * @values small, medium, large
-         */
-        size: String,
-        hourFormat: {
-            type: String,
-        },
-        incrementHours: {
-            type: Number,
-            default: 1,
-        },
-        incrementMinutes: {
-            type: Number,
-            default: 1,
-        },
-        incrementSeconds: {
-            type: Number,
-            default: 1,
-        },
-        timeFormatter: {
-            type: Function,
-            default: (date: Date, vm: App) => {
-                const timeFormatter = getValueByPath(
-                    getOptions(),
-                    "timepicker.timeFormatter",
-                    undefined,
-                );
-                if (typeof timeFormatter === "function") {
-                    return timeFormatter(date);
-                } else {
-                    return defaultTimeFormatter(date, vm);
-                }
-            },
-        },
-        timeParser: {
-            type: Function,
-            default: (date: Date, vm: App) => {
-                const timeParser = getValueByPath(
-                    getOptions(),
-                    "timepicker.timeParser",
-                    undefined,
-                );
-                if (typeof timeParser === "function") {
-                    return timeParser(date);
-                } else {
-                    return defaultTimeParser(date, vm);
-                }
-            },
-        },
-        mobileNative: {
-            type: Boolean,
-            default: () => {
-                return getValueByPath(
-                    getOptions(),
-                    "timepicker.mobileNative",
-                    true,
-                );
-            },
-        },
-        timeCreator: {
-            type: Function,
-            default: () => {
-                const timeCreator = getValueByPath(
-                    getOptions(),
-                    "timepicker.timeCreator",
-                    undefined,
-                );
-                if (typeof timeCreator === "function") {
-                    return timeCreator();
-                } else {
-                    return new Date();
-                }
-            },
-        },
-        position: String,
-        unselectableTimes: Array,
-        openOnFocus: Boolean,
-        enableSeconds: Boolean,
-        defaultMinutes: Number,
-        defaultSeconds: Number,
-        appendToBody: Boolean,
-        resetOnMeridianChange: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    emits: ["update:modelValue"],
-    data() {
-        return {
-            dateSelected: this.modelValue,
-            hoursSelected: null,
-            minutesSelected: null,
-            secondsSelected: null,
-            meridienSelected: null,
-            $elementRef: "input",
-        };
-    },
-    computed: {
-        computedValue: {
-            get() {
-                return this.dateSelected;
-            },
-            set(value) {
-                this.dateSelected = value;
-                this.$emit("update:modelValue", this.dateSelected);
-            },
-        },
-        localeOptions() {
-            return new Intl.DateTimeFormat(this.locale, {
-                hour: "numeric",
-                minute: "numeric",
-                second: this.enableSeconds ? "numeric" : undefined,
-            }).resolvedOptions();
-        },
-        dtf() {
-            return new Intl.DateTimeFormat(this.locale, {
-                hour: this.localeOptions.hour || "numeric",
-                minute: this.localeOptions.minute || "numeric",
-                second: this.enableSeconds
-                    ? this.localeOptions.second || "numeric"
-                    : undefined,
-                hourCycle: !this.isHourFormat24 ? "h12" : "h23",
-            });
-        },
-        newHourFormat() {
-            return (
-                this.hourFormat ||
-                (this.localeOptions.hour12 ? HOUR_FORMAT_12 : HOUR_FORMAT_24)
-            );
-        },
-        sampleTime() {
-            const d = this.timeCreator();
-            d.setHours(10);
-            d.setSeconds(0);
-            d.setMinutes(0);
-            d.setMilliseconds(0);
-            return d;
-        },
-        hourLiteral() {
-            if (
-                this.dtf.formatToParts &&
-                typeof this.dtf.formatToParts === "function"
-            ) {
-                const d = this.sampleTime;
-                const parts = this.dtf.formatToParts(d);
-                const literal = parts.find(
-                    (part, idx) => idx > 0 && parts[idx - 1].type === "hour",
-                );
-                if (literal) {
-                    return literal.value;
-                }
-            }
-            return ":";
-        },
-        minuteLiteral() {
-            if (
-                this.dtf.formatToParts &&
-                typeof this.dtf.formatToParts === "function"
-            ) {
-                const d = this.sampleTime;
-                const parts = this.dtf.formatToParts(d);
-                const literal = parts.find(
-                    (part, idx) => idx > 0 && parts[idx - 1].type === "minute",
-                );
-                if (literal) {
-                    return literal.value;
-                }
-            }
-            return ":";
-        },
-        secondLiteral() {
-            if (
-                this.dtf.formatToParts &&
-                typeof this.dtf.formatToParts === "function"
-            ) {
-                const d = this.sampleTime;
-                const parts = this.dtf.formatToParts(d);
-                const literal = parts.find(
-                    (part, idx) => idx > 0 && parts[idx - 1].type === "second",
-                );
-                if (literal) {
-                    return literal.value;
-                }
-            }
-            return "";
-        },
-        amString() {
-            if (
-                this.dtf.formatToParts &&
-                typeof this.dtf.formatToParts === "function"
-            ) {
-                const d = this.sampleTime;
-                d.setHours(10);
-                const dayPeriod = this.dtf
-                    .formatToParts(d)
-                    .find((part) => part.type === "dayPeriod");
-                if (dayPeriod) {
-                    return dayPeriod.value;
-                }
-            }
-            return AM;
-        },
-        pmString() {
-            if (
-                this.dtf.formatToParts &&
-                typeof this.dtf.formatToParts === "function"
-            ) {
-                const d = this.sampleTime;
-                d.setHours(20);
-                const dayPeriod = this.dtf
-                    .formatToParts(d)
-                    .find((part) => part.type === "dayPeriod");
-                if (dayPeriod) {
-                    return dayPeriod.value;
-                }
-            }
-            return PM;
-        },
-        hours() {
-            if (!this.incrementHours || this.incrementHours < 1)
-                throw new Error(
-                    "Hour increment cannot be null or less than 1.",
-                );
-            const hours = [];
-            const numberOfHours = this.isHourFormat24 ? 24 : 12;
-            for (let i = 0; i < numberOfHours; i += this.incrementHours) {
-                let value = i;
-                let label = value;
-                if (!this.isHourFormat24) {
-                    value = i + 1;
-                    label = value;
-                    if (this.meridienSelected === this.amString) {
-                        if (value === 12) {
-                            value = 0;
-                        }
-                    } else if (this.meridienSelected === this.pmString) {
-                        if (value !== 12) {
-                            value += 12;
-                        }
-                    }
-                }
-                hours.push({
-                    label: this.formatNumber(label),
-                    value: value,
-                });
-            }
-            return hours;
-        },
-
-        minutes() {
-            if (!this.incrementMinutes || this.incrementMinutes < 1)
-                throw new Error(
-                    "Minute increment cannot be null or less than 1.",
-                );
-            const minutes = [];
-            for (let i = 0; i < 60; i += this.incrementMinutes) {
-                minutes.push({
-                    label: this.formatNumber(i, true),
-                    value: i,
-                });
-            }
-            return minutes;
-        },
-
-        seconds() {
-            if (!this.incrementSeconds || this.incrementSeconds < 1)
-                throw new Error(
-                    "Second increment cannot be null or less than 1.",
-                );
-            const seconds = [];
-            for (let i = 0; i < 60; i += this.incrementSeconds) {
-                seconds.push({
-                    label: this.formatNumber(i, true),
-                    value: i,
-                });
-            }
-            return seconds;
-        },
-
-        meridiens() {
-            return [this.amString, this.pmString];
-        },
-
-        isMobile() {
-            return this.mobileNative && isMobile.any();
-        },
-
-        isHourFormat24() {
-            return this.newHourFormat === HOUR_FORMAT_24;
-        },
-    },
-    watch: {
-        hourFormat() {
-            if (this.hoursSelected !== null) {
-                this.meridienSelected =
-                    this.hoursSelected >= 12 ? this.pmString : this.amString;
-            }
-        },
-        locale() {
-            // see updateInternalState default
-            if (!this.value) {
-                this.meridienSelected = this.amString;
-            }
-        },
-        /**
-         * When v-model is changed:
-         *   1. Update internal value.
-         *   2. If it's invalid, validate again.
-         */
-        modelValue: {
-            handler(value) {
-                this.updateInternalState(value);
-                !this.isValid && this.$refs.input.checkHtml5Validity();
-            },
-            immediate: true,
-        },
-    },
-    created() {
-        if (typeof window !== "undefined") {
-            document.addEventListener("keyup", this.keyPress);
-        }
-    },
-    beforeUnmount() {
-        if (typeof window !== "undefined") {
-            document.removeEventListener("keyup", this.keyPress);
-        }
-    },
-    methods: {
-        onMeridienChange(value) {
-            if (this.hoursSelected !== null && this.resetOnMeridianChange) {
-                this.hoursSelected = null;
-                this.minutesSelected = null;
-                this.secondsSelected = null;
-                this.computedValue = null;
-            } else if (this.hoursSelected !== null) {
-                if (value === this.pmString) {
-                    this.hoursSelected += 12;
-                } else if (value === this.amString) {
-                    this.hoursSelected -= 12;
-                }
-            }
-            this.updateDateSelected(
-                this.hoursSelected,
-                this.minutesSelected,
-                this.enableSeconds ? this.secondsSelected : 0,
-                value,
-            );
-        },
-
-        onHoursChange(value) {
-            if (
-                !this.minutesSelected &&
-                typeof this.defaultMinutes !== "undefined"
-            ) {
-                this.minutesSelected = this.defaultMinutes;
-            }
-            if (
-                !this.secondsSelected &&
-                typeof this.defaultSeconds !== "undefined"
-            ) {
-                this.secondsSelected = this.defaultSeconds;
-            }
-            this.updateDateSelected(
-                parseInt(value, 10),
-                this.minutesSelected,
-                this.enableSeconds ? this.secondsSelected : 0,
-                this.meridienSelected,
-            );
-        },
-
-        onMinutesChange(value) {
-            if (!this.secondsSelected && this.defaultSeconds) {
-                this.secondsSelected = this.defaultSeconds;
-            }
-            this.updateDateSelected(
-                this.hoursSelected,
-                parseInt(value, 10),
-                this.enableSeconds ? this.secondsSelected : 0,
-                this.meridienSelected,
-            );
-        },
-
-        onSecondsChange(value) {
-            this.updateDateSelected(
-                this.hoursSelected,
-                this.minutesSelected,
-                parseInt(value, 10),
-                this.meridienSelected,
-            );
-        },
-
-        updateDateSelected(hours, minutes, seconds, meridiens) {
-            if (
-                hours != null &&
-                minutes != null &&
-                ((!this.isHourFormat24 && meridiens !== null) ||
-                    this.isHourFormat24)
-            ) {
-                let time = null;
-                if (this.computedValue && !isNaN(this.computedValue)) {
-                    time = new Date(this.computedValue);
-                } else {
-                    time = this.timeCreator();
-                    time.setMilliseconds(0);
-                }
-                time.setHours(hours);
-                time.setMinutes(minutes);
-                time.setSeconds(seconds);
-                if (!isNaN(time.getTime())) {
-                    this.computedValue = new Date(time.getTime());
-                }
-            }
-        },
-
-        updateInternalState(value) {
-            if (value) {
-                this.hoursSelected = value.getHours();
-                this.minutesSelected = value.getMinutes();
-                this.secondsSelected = value.getSeconds();
-                this.meridienSelected =
-                    value.getHours() >= 12 ? this.pmString : this.amString;
-            } else {
-                this.hoursSelected = null;
-                this.minutesSelected = null;
-                this.secondsSelected = null;
-                this.meridienSelected = this.amString;
-            }
-            this.dateSelected = value;
-        },
-
-        isHourDisabled(hour) {
-            let disabled = false;
-            if (this.minTime) {
-                const minHours = this.minTime.getHours();
-                const noMinutesAvailable = this.minutes.every((minute) => {
-                    return this.isMinuteDisabledForHour(hour, minute.value);
-                });
-                disabled = hour < minHours || noMinutesAvailable;
-            }
-            if (this.maxTime) {
-                if (!disabled) {
-                    const maxHours = this.maxTime.getHours();
-                    disabled = hour > maxHours;
-                }
-            }
-            if (this.unselectableTimes) {
-                if (!disabled) {
-                    const unselectable = this.unselectableTimes.filter(
-                        (time) => {
-                            if (
-                                this.enableSeconds &&
-                                this.secondsSelected !== null
-                            ) {
-                                return (
-                                    time.getHours() === hour &&
-                                    time.getMinutes() ===
-                                        this.minutesSelected &&
-                                    time.getSeconds() === this.secondsSelected
-                                );
-                            } else if (this.minutesSelected !== null) {
-                                return (
-                                    time.getHours() === hour &&
-                                    time.getMinutes() === this.minutesSelected
-                                );
-                            }
-                            return false;
-                        },
-                    );
-                    if (unselectable.length > 0) {
-                        disabled = true;
-                    } else {
-                        disabled = this.minutes.every((minute) => {
-                            return (
-                                this.unselectableTimes.filter((time) => {
-                                    return (
-                                        time.getHours() === hour &&
-                                        time.getMinutes() === minute.value
-                                    );
-                                }).length > 0
-                            );
-                        });
-                    }
-                }
-            }
-            return disabled;
-        },
-
-        isMinuteDisabledForHour(hour, minute) {
-            let disabled = false;
-            if (this.minTime) {
-                const minHours = this.minTime.getHours();
-                const minMinutes = this.minTime.getMinutes();
-                disabled = hour === minHours && minute < minMinutes;
-            }
-            if (this.maxTime) {
-                if (!disabled) {
-                    const maxHours = this.maxTime.getHours();
-                    const maxMinutes = this.maxTime.getMinutes();
-                    disabled = hour === maxHours && minute > maxMinutes;
-                }
-            }
-
-            return disabled;
-        },
-
-        isMinuteDisabled(minute) {
-            let disabled = false;
-            if (this.hoursSelected !== null) {
-                if (this.isHourDisabled(this.hoursSelected)) {
-                    disabled = true;
-                } else {
-                    disabled = this.isMinuteDisabledForHour(
-                        this.hoursSelected,
-                        minute,
-                    );
-                }
-                if (this.unselectableTimes) {
-                    if (!disabled) {
-                        const unselectable = this.unselectableTimes.filter(
-                            (time) => {
-                                if (
-                                    this.enableSeconds &&
-                                    this.secondsSelected !== null
-                                ) {
-                                    return (
-                                        time.getHours() ===
-                                            this.hoursSelected &&
-                                        time.getMinutes() === minute &&
-                                        time.getSeconds() ===
-                                            this.secondsSelected
-                                    );
-                                } else {
-                                    return (
-                                        time.getHours() ===
-                                            this.hoursSelected &&
-                                        time.getMinutes() === minute
-                                    );
-                                }
-                            },
-                        );
-                        disabled = unselectable.length > 0;
-                    }
-                }
-            }
-            return disabled;
-        },
-
-        isSecondDisabled(second) {
-            let disabled = false;
-            if (this.minutesSelected !== null) {
-                if (this.isMinuteDisabled(this.minutesSelected)) {
-                    disabled = true;
-                } else {
-                    if (this.minTime) {
-                        const minHours = this.minTime.getHours();
-                        const minMinutes = this.minTime.getMinutes();
-                        const minSeconds = this.minTime.getSeconds();
-                        disabled =
-                            this.hoursSelected === minHours &&
-                            this.minutesSelected === minMinutes &&
-                            second < minSeconds;
-                    }
-                    if (this.maxTime) {
-                        if (!disabled) {
-                            const maxHours = this.maxTime.getHours();
-                            const maxMinutes = this.maxTime.getMinutes();
-                            const maxSeconds = this.maxTime.getSeconds();
-                            disabled =
-                                this.hoursSelected === maxHours &&
-                                this.minutesSelected === maxMinutes &&
-                                second > maxSeconds;
-                        }
-                    }
-                }
-                if (this.unselectableTimes) {
-                    if (!disabled) {
-                        const unselectable = this.unselectableTimes.filter(
-                            (time) => {
-                                return (
-                                    time.getHours() === this.hoursSelected &&
-                                    time.getMinutes() ===
-                                        this.minutesSelected &&
-                                    time.getSeconds() === second
-                                );
-                            },
-                        );
-                        disabled = unselectable.length > 0;
-                    }
-                }
-            }
-            return disabled;
-        },
-
-        isMeridienDisabled(meridienString) {
-            const offset = meridienString == "AM" ? 0 : 12;
-            for (let i = 0; i < 12; i++) {
-                if (!this.isHourDisabled(i + offset)) {
-                    return false;
-                }
-            }
-            return true;
-        },
-
-        /*
-         * Parse string into date
-         */
-        onChange(value) {
-            const date = this.timeParser(value, this);
-            this.updateInternalState(date);
-            if (date && !isNaN(date)) {
-                this.computedValue = date;
-            } else {
-                // Force refresh input value when not valid date
-                this.computedValue = null;
-                this.$refs.input.newValue = this.computedValue;
-            }
-        },
-
-        /*
-         * Toggle timepicker
-         */
-        toggle(active) {
-            if (this.$refs.dropdown) {
-                this.$refs.dropdown.isActive =
-                    typeof active === "boolean"
-                        ? active
-                        : !this.$refs.dropdown.isActive;
-            }
-        },
-
-        /*
-         * Close timepicker
-         */
-        close() {
-            this.toggle(false);
-        },
-
-        /*
-         * Call default onFocus method and show timepicker
-         */
-        handleOnFocus() {
-            this.onFocus();
-            if (this.openOnFocus) {
-                this.toggle(true);
-            }
-        },
-
-        /*
-         * Format date into string 'HH-MM-SS'
-         */
-        formatHHMMSS(value) {
-            const date = new Date(value);
-            if (value && !isNaN(date.getTime())) {
-                const hours = date.getHours();
-                const minutes = date.getMinutes();
-                const seconds = date.getSeconds();
-                return (
-                    this.formatNumber(hours, true) +
-                    ":" +
-                    this.formatNumber(minutes, true) +
-                    ":" +
-                    this.formatNumber(seconds, true)
-                );
-            }
-            return "";
-        },
-
-        /*
-         * Parse time from string
-         */
-        onChangeNativePicker(event) {
-            const date = event.target.value;
-            if (date) {
-                let time = null;
-                if (this.computedValue && !isNaN(this.computedValue)) {
-                    time = new Date(this.computedValue);
-                } else {
-                    time = new Date();
-                    time.setMilliseconds(0);
-                }
-                const t = date.split(":");
-                time.setHours(parseInt(t[0], 10));
-                time.setMinutes(parseInt(t[1], 10));
-                time.setSeconds(t[2] ? parseInt(t[2], 10) : 0);
-                this.computedValue = new Date(time.getTime());
-            } else {
-                this.computedValue = null;
-            }
-        },
-
-        formatNumber(value, prependZero) {
-            return this.isHourFormat24 || prependZero ? this.pad(value) : value;
-        },
-
-        pad(value) {
-            return (value < 10 ? "0" : "") + value;
-        },
-
-        /*
-         * Format date into string
-         */
-        formatValue(date) {
-            if (date && !isNaN(date)) {
-                return this.timeFormatter(date, this);
-            } else {
-                return null;
-            }
-        },
-        /**
-         * Keypress event that is bound to the document.
-         */
-        keyPress({ key }) {
-            if (
-                this.$refs.dropdown &&
-                this.$refs.dropdown.isActive &&
-                (key === "Escape" || key === "Esc")
-            ) {
-                this.toggle(false);
-            }
-        },
-        /**
-         * Emit 'blur' event on dropdown is not active (closed)
-         */
-        onActiveChange(value) {
-            if (!value) {
-                this.onBlur();
-            }
-        },
-    },
-});
diff --git a/packages/oruga-next/src/utils/helpers.ts b/packages/oruga-next/src/utils/helpers.ts
index cf813982b..7ceee8715 100644
--- a/packages/oruga-next/src/utils/helpers.ts
+++ b/packages/oruga-next/src/utils/helpers.ts
@@ -1,3 +1,5 @@
+import { unref } from "vue";
+
 /**
  * Generates a random string
  */
@@ -106,7 +108,8 @@ export function indexOf<T>(
 export const isObject = <T>(obj: T): boolean =>
     obj && typeof obj === "object" && !Array.isArray(obj);
 
-export const isDefined = <T>(d: T): boolean => d !== undefined;
+export const isDefined = <T>(d: T): boolean =>
+    unref(d) !== null && unref(d) !== undefined;
 
 export function blankIfUndefined(value: string): string {
     return typeof value !== "undefined" && value !== null ? value : "";
@@ -218,6 +221,9 @@ export function toCssDimension(width: string | number): string | number {
         : width + "px";
 }
 
+/**
+ * @deprecated use useDebounce composable instead
+ */
 export function debounce<A extends Array<unknown>>(
     func: (...args: A[]) => void,
     wait: number,
@@ -246,102 +252,8 @@ export function removeDiacriticsFromString(value: string): string {
 }
 
 /**
- * Return month names according to a specified locale
- * @param  {String} locale A bcp47 localerouter. undefined will use the user browser locale
- * @param  {String} format long (ex. March), short (ex. Mar) or narrow (M)
- * @return {Array<String>} An array of month names
+ * @deprecated use ssr helper instead
  */
-
-type monthType =
-    | "numeric"
-    | "2-digit"
-    | "long"
-    | "short"
-    | "narrow"
-    | undefined;
-
-export function getMonthNames(
-    locale: string = undefined,
-    format: monthType = "long",
-): string[] {
-    const dates = [];
-    for (let i = 0; i < 12; i++) {
-        dates.push(new Date(2000, i, 15));
-    }
-    const dtf = new Intl.DateTimeFormat(locale, {
-        month: format,
-        // timeZone: 'UTC'
-    });
-    return dates.map((d) => dtf.format(d));
-}
-
-/**
- * Return weekday names according to a specified locale
- * @param  {String} locale A bcp47 localerouter. undefined will use the user browser locale
- * @param  {Number} first day of week index
- * @param  {String} format long (ex. Thursday), short (ex. Thu) or narrow (T)
- * @return {Array<String>} An array of weekday names
- */
-
-type weekdayType = "long" | "short" | "narrow" | undefined;
-
-export function getWeekdayNames(
-    locale: string = undefined,
-    firstDayOfWeek: number = 0,
-    format: weekdayType = "narrow",
-): string[] {
-    const dates = [];
-    for (let i = 1, j = 0; j < 7; i++) {
-        const d = new Date(2000, 0, i);
-        const day = d.getDay();
-        if (day === firstDayOfWeek || j > 0) {
-            dates.push(d);
-            j++;
-        }
-    }
-    const dtf = new Intl.DateTimeFormat(locale, {
-        weekday: format,
-        // timeZone: 'UTC'
-    });
-    return dates.map((d) => dtf.format(d));
-}
-
-/**
- * Accept a regex with group names and return an object
- * ex. matchWithGroups(/((?!=<year>)\d+)\/((?!=<month>)\d+)\/((?!=<day>)\d+)/, '2000/12/25')
- * will return { year: 2000, month: 12, day: 25 }
- * @param  {String} includes injections of (?!={groupname}) for each group
- * @param  {String} the string to run regex
- * @return {Object} an object with a property for each group having the group's match as the value
- */
-export function matchWithGroups(pattern: string, str: string): any {
-    const matches = str.match(pattern);
-    return (
-        pattern
-            // get the pattern as a string
-            .toString()
-            // suss out the groups
-            .match(/<(.+?)>/g)
-            // remove the braces
-            .map((group) => {
-                const groupMatches = group.match(/<(.+)>/);
-                if (!groupMatches || groupMatches.length <= 0) {
-                    return null;
-                }
-                return group.match(/<(.+)>/)[1];
-            })
-            // create an object with a property for each group having the group's match as the value
-            .reduce((acc, curr, index) => {
-                if (matches && matches.length > index) {
-                    acc[curr] = matches[index + 1];
-                } else {
-                    acc[curr] = null;
-                }
-                return acc;
-            }, {})
-    );
-}
-
 export function isClient(): boolean {
     return typeof window !== "undefined";
 }
@@ -350,53 +262,35 @@ export function isClient(): boolean {
  * Mobile detection
  * https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript
  */
-export const isMobile = {
-    Android: function () {
-        return (
-            typeof window !== "undefined" &&
-            window.navigator.userAgent.match(/Android/i)
-        );
-    },
-    BlackBerry: function () {
-        return (
-            typeof window !== "undefined" &&
-            window.navigator.userAgent.match(/BlackBerry/i)
-        );
-    },
-    iOS: function () {
-        return (
-            typeof window !== "undefined" &&
-            window.navigator.userAgent.match(/iPhone|iPad|iPod/i)
-        );
-    },
-    Opera: function () {
-        return (
-            typeof window !== "undefined" &&
-            window.navigator.userAgent.match(/Opera Mini/i)
-        );
-    },
-    Windows: function () {
-        return (
-            typeof window !== "undefined" &&
-            window.navigator.userAgent.match(/IEMobile/i)
-        );
-    },
-    any: function () {
-        return (
-            isMobile.Android() ||
-            isMobile.BlackBerry() ||
-            isMobile.iOS() ||
-            isMobile.Opera() ||
-            isMobile.Windows()
-        );
-    },
+export const isMobileAgent = {
+    Android: (): boolean =>
+        typeof window !== "undefined" &&
+        !!window.navigator.userAgent.match(/Android/i),
+    BlackBerry: (): boolean =>
+        typeof window !== "undefined" &&
+        !!window.navigator.userAgent.match(/BlackBerry/i),
+    iOS: (): boolean =>
+        typeof window !== "undefined" &&
+        !!window.navigator.userAgent.match(/iPhone|iPad|iPod/i),
+    Opera: (): boolean =>
+        typeof window !== "undefined" &&
+        !!window.navigator.userAgent.match(/Opera Mini/i),
+    Windows: (): boolean =>
+        typeof window !== "undefined" &&
+        !!window.navigator.userAgent.match(/IEMobile/i),
+    any: (): boolean =>
+        isMobileAgent.Android() ||
+        isMobileAgent.BlackBerry() ||
+        isMobileAgent.iOS() ||
+        isMobileAgent.Opera() ||
+        isMobileAgent.Windows(),
 };
 
 // Microsoft Edge "pretends" to be all other major browsers, so we need to filter it out.
 // It doesn't use a very consistent string to represent its own name ("Edge", "Edg", "EdgA", etc.),
 // but it looks like WebKit never pretends to be Chrome, Edge does, and Chrome doesn't have the bug
 // that this flag is used to work around.
-export function isWebKit(): boolean {
+export function isWebKitAgent(): boolean {
     return (
         typeof window !== "undefined" &&
         window.navigator.userAgent.indexOf("AppleWebKit/") !== -1 &&
diff --git a/packages/oruga-next/src/utils/ssr.ts b/packages/oruga-next/src/utils/ssr.ts
index 05128e154..df1557e07 100644
--- a/packages/oruga-next/src/utils/ssr.ts
+++ b/packages/oruga-next/src/utils/ssr.ts
@@ -1,5 +1,6 @@
 // Polyfills for SSR
 
+export const isClient = typeof window !== "undefined";
 export const isSSR = typeof window === "undefined";
 
 export const HTMLElement = isSSR ? Object : window.HTMLElement;