From b34c4eca27b76cdbfaca6daec0af3e0bd3cb9916 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 26 Oct 2024 13:41:04 +0300
Subject: [PATCH] More work on #6651

---
 apps/showcase/doc/autocomplete/SizesDoc.vue   | 66 ++++++++---------
 apps/showcase/doc/datepicker/SizesDoc.vue     | 24 +++----
 apps/showcase/doc/selectbutton/BasicDoc.vue   |  8 +--
 apps/showcase/doc/selectbutton/SizesDoc.vue   | 71 +++++++++++++++++++
 apps/showcase/doc/togglebutton/SizesDoc.vue   | 68 ++++++++++++++++++
 apps/showcase/pages/datepicker/index.vue      |  2 +-
 apps/showcase/pages/selectbutton/index.vue    |  6 ++
 apps/showcase/pages/togglebutton/index.vue    |  6 ++
 .../autocomplete/style/AutoCompleteStyle.js   | 20 ++++++
 .../src/datepicker/style/DatePickerStyle.js   | 22 ++++++
 .../src/inputnumber/style/InputNumberStyle.js | 12 ++++
 .../src/inputotp/style/InputOtpStyle.js       |  8 +--
 .../src/selectbutton/BaseSelectButton.vue     |  4 ++
 .../src/selectbutton/SelectButton.d.ts        |  4 ++
 .../src/selectbutton/SelectButton.vue         |  1 +
 .../src/togglebutton/BaseToggleButton.vue     |  4 ++
 .../src/togglebutton/ToggleButton.d.ts        |  4 ++
 .../togglebutton/style/ToggleButtonStyle.js   | 14 +++-
 .../src/presets/aura/autocomplete/index.js    |  6 ++
 .../src/presets/aura/datepicker/index.js      |  6 ++
 packages/themes/src/presets/aura/index.js     |  2 +
 .../themes/src/presets/aura/inputotp/index.js | 14 ++++
 .../src/presets/aura/inputotp/package.json    |  5 ++
 .../src/presets/aura/togglebutton/index.js    | 10 ++-
 .../src/presets/lara/autocomplete/index.js    |  6 ++
 .../src/presets/lara/datepicker/index.js      |  6 ++
 packages/themes/src/presets/lara/index.js     |  2 +
 .../themes/src/presets/lara/inputotp/index.js | 14 ++++
 .../src/presets/lara/inputotp/package.json    |  5 ++
 .../src/presets/lara/togglebutton/index.js    | 10 ++-
 .../presets/material/autocomplete/index.js    |  6 ++
 .../themes/src/presets/material/base/index.js |  4 +-
 .../src/presets/material/datepicker/index.js  |  6 ++
 packages/themes/src/presets/material/index.js |  2 +
 .../src/presets/material/inputotp/index.js    | 14 ++++
 .../presets/material/inputotp/package.json    |  5 ++
 .../presets/material/togglebutton/index.js    | 10 ++-
 .../src/presets/nora/autocomplete/index.js    |  6 ++
 .../src/presets/nora/datepicker/index.js      |  6 ++
 packages/themes/src/presets/nora/index.js     |  2 +
 .../themes/src/presets/nora/inputotp/index.js | 14 ++++
 .../src/presets/nora/inputotp/package.json    |  5 ++
 .../src/presets/nora/togglebutton/index.js    | 10 ++-
 43 files changed, 456 insertions(+), 64 deletions(-)
 create mode 100644 apps/showcase/doc/selectbutton/SizesDoc.vue
 create mode 100644 apps/showcase/doc/togglebutton/SizesDoc.vue
 create mode 100644 packages/themes/src/presets/aura/inputotp/index.js
 create mode 100644 packages/themes/src/presets/aura/inputotp/package.json
 create mode 100644 packages/themes/src/presets/lara/inputotp/index.js
 create mode 100644 packages/themes/src/presets/lara/inputotp/package.json
 create mode 100644 packages/themes/src/presets/material/inputotp/index.js
 create mode 100644 packages/themes/src/presets/material/inputotp/package.json
 create mode 100644 packages/themes/src/presets/nora/inputotp/index.js
 create mode 100644 packages/themes/src/presets/nora/inputotp/package.json

diff --git a/apps/showcase/doc/autocomplete/SizesDoc.vue b/apps/showcase/doc/autocomplete/SizesDoc.vue
index 725c74bda..52f6cdcc8 100644
--- a/apps/showcase/doc/autocomplete/SizesDoc.vue
+++ b/apps/showcase/doc/autocomplete/SizesDoc.vue
@@ -3,9 +3,9 @@
         <p>AutoComplete provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,24 +14,22 @@
 export default {
     data() {
         return {
-            value1: '',
-            value2: '',
-            value3: '',
-            items1: [],
-            items2: [],
-            items3: [],
+            value1: null,
+            value2: null,
+            value3: null,
+            items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
 `,
                 options: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
     </div>
 </template>
 
@@ -39,17 +37,15 @@ export default {
 export default {
     data() {
         return {
-            value1: '',
-            value2: '',
-            value3: '',
-            items1: [],
-            items2: [],
-            items3: [],
+            value1: null,
+            value2: null,
+            value3: null,
+            items: [],
         };
     },
     methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        search() {
+            this.items = [];
         }
     }
 };
@@ -58,24 +54,22 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value1 = ref("");
-const value2 = ref("");
-const value3 = ref("");
-const items1 = ref([]);
-const items2 = ref([]);
-const items3 = ref([]);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const items = ref([]);
 
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+const search = () => {
+    items.value = [];
 }
 <\/script>
 `
@@ -83,8 +77,8 @@ const search = (event) => {
         };
     },
     methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        search() {
+            this.items = [];
         }
     }
 };
diff --git a/apps/showcase/doc/datepicker/SizesDoc.vue b/apps/showcase/doc/datepicker/SizesDoc.vue
index 19fddd313..4dc26716c 100644
--- a/apps/showcase/doc/datepicker/SizesDoc.vue
+++ b/apps/showcase/doc/datepicker/SizesDoc.vue
@@ -3,9 +3,9 @@
         <p>DatePicker provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" />
-        <DatePicker v-model="value2" placeholder="Normal" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,16 +19,16 @@ export default {
             value3: null,
             code: {
                 basic: `
-<DatePicker v-model="value1" size="small" placeholder="Small" />
-<DatePicker v-model="value2" placeholder="Normal" />
-<DatePicker v-model="value3" size="large" placeholder="Large" />
+<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
 `,
                 options: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" />
-        <DatePicker v-model="value2" placeholder="Normal" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
 </template>
 
@@ -47,9 +47,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" />
-        <DatePicker v-model="value2" placeholder="Normal" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/selectbutton/BasicDoc.vue b/apps/showcase/doc/selectbutton/BasicDoc.vue
index 506b091bb..c2b7e2b4f 100644
--- a/apps/showcase/doc/selectbutton/BasicDoc.vue
+++ b/apps/showcase/doc/selectbutton/BasicDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton v-model="value" :options="options" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,12 +19,12 @@ export default {
             options: ['One-Way', 'Return'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+<SelectButton v-model="value" :options="options" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton v-model="value" :options="options" />
     </div>
 </template>
 
@@ -42,7 +42,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton v-model="value" :options="options" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/selectbutton/SizesDoc.vue b/apps/showcase/doc/selectbutton/SizesDoc.vue
new file mode 100644
index 000000000..9bb30e3f3
--- /dev/null
+++ b/apps/showcase/doc/selectbutton/SizesDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 'Beginner',
+            value3: 'Expert',
+            options: ['Beginner', 'Expert'],
+            code: {
+                basic: `
+<SelectButton v-model="value1" :options="options" size="small" />
+<SelectButton v-model="value2" :options="options" />
+<SelectButton v-model="value3" :options="options" size="large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 'Beginner',
+            value3: 'Expert',
+            options: ['Beginner', 'Expert'],
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/togglebutton/SizesDoc.vue b/apps/showcase/doc/togglebutton/SizesDoc.vue
new file mode 100644
index 000000000..7544fc7f4
--- /dev/null
+++ b/apps/showcase/doc/togglebutton/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: false,
+            value2: false,
+            value3: false,
+            code: {
+                basic: `
+<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: false,
+            value2: false,
+            value3: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(false);
+const value2 = ref(false);
+const value3 = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/datepicker/index.vue b/apps/showcase/pages/datepicker/index.vue
index e131f3d53..beb862aa5 100755
--- a/apps/showcase/pages/datepicker/index.vue
+++ b/apps/showcase/pages/datepicker/index.vue
@@ -129,7 +129,7 @@ export default {
                     component: IftaLabelDoc
                 },
                 {
-                    id: 'sizez',
+                    id: 'sizes',
                     label: 'Sizes',
                     component: SizesDoc
                 },
diff --git a/apps/showcase/pages/selectbutton/index.vue b/apps/showcase/pages/selectbutton/index.vue
index 60767c266..fe226e627 100755
--- a/apps/showcase/pages/selectbutton/index.vue
+++ b/apps/showcase/pages/selectbutton/index.vue
@@ -16,6 +16,7 @@ import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
 import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
 import FormsDoc from '@/doc/selectbutton/FormsDoc.vue';
 import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
+import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
 import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
@@ -51,6 +52,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/togglebutton/index.vue b/apps/showcase/pages/togglebutton/index.vue
index 30d510633..0cef8f1c7 100755
--- a/apps/showcase/pages/togglebutton/index.vue
+++ b/apps/showcase/pages/togglebutton/index.vue
@@ -17,6 +17,7 @@ import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
 import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
 import FormsDoc from '@/doc/togglebutton/FormsDoc.vue';
 import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
+import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
 import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
 import PTComponent from '@/doc/togglebutton/pt/index.vue';
 import ThemingDoc from '@/doc/togglebutton/theming/index.vue';
@@ -45,6 +46,11 @@ export default {
                     label: 'Customized',
                     component: CustomizedDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index c00cca073..6c30973d2 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -241,6 +241,26 @@ const theme = ({ dt }) => `
 .p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
     width: 1%;
 }
+
+.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown {
+    width: ${dt('autocomplete.dropdown.sm.width')};
+}
+
+.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown .p-icon {
+    font-size: ${dt('form.field.sm.font.size')};
+    width: ${dt('form.field.sm.font.size')};
+    height: ${dt('form.field.sm.font.size')};
+}
+
+.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown {
+    width: ${dt('autocomplete.dropdown.lg.width')};
+}
+
+.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown .p-icon {
+    font-size: ${dt('form.field.lg.font.size')};
+    width: ${dt('form.field.lg.font.size')};
+    height: ${dt('form.field.lg.font.size')};
+}
 `;
 
 const inlineStyles = {
diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index a3d765d1e..3a40d9cad 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -378,6 +378,28 @@ const theme = ({ dt }) => `
 .p-datepicker-timeonly .p-datepicker-time-picker {
     border-block-start: 0 none;
 }
+
+.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {
+    width: ${dt('datepicker.dropdown.sm.width')};
+}
+
+.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,
+.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {
+    font-size: ${dt('form.field.sm.font.size')};
+    width: ${dt('form.field.sm.font.size')};
+    height: ${dt('form.field.sm.font.size')};
+}
+
+.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {
+    width: ${dt('datepicker.dropdown.lg.width')};
+}
+
+.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,
+.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {
+    font-size: ${dt('form.field.lg.font.size')};
+    width: ${dt('form.field.lg.font.size')};
+    height: ${dt('form.field.lg.font.size')};
+}
 `;
 
 const inlineStyles = {
diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
index 1506f48ba..1a4a9fe07 100644
--- a/packages/primevue/src/inputnumber/style/InputNumberStyle.js
+++ b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
@@ -147,6 +147,18 @@ const theme = ({ dt }) => `
 .p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
     width: 100%;
 }
+
+.p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon {
+    font-size: ${dt('form.field.sm.font.size')};
+    width: ${dt('form.field.sm.font.size')};
+    height: ${dt('form.field.sm.font.size')};
+}
+
+.p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon {
+    font-size: ${dt('form.field.lg.font.size')};
+    width: ${dt('form.field.lg.font.size')};
+    height: ${dt('form.field.lg.font.size')};
+}
 `;
 
 const classes = {
diff --git a/packages/primevue/src/inputotp/style/InputOtpStyle.js b/packages/primevue/src/inputotp/style/InputOtpStyle.js
index 120cf11bc..dc7292657 100644
--- a/packages/primevue/src/inputotp/style/InputOtpStyle.js
+++ b/packages/primevue/src/inputotp/style/InputOtpStyle.js
@@ -4,22 +4,22 @@ const theme = ({ dt }) => `
 .p-inputotp {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: ${dt('inputotp.gap')};
 }
 
 .p-inputotp-input {
     text-align: center;
-    width: 2.5rem;
+    width: ${dt('inputotp.input.width')};
 }
 
 .p-inputotp-input.p-inputtext-sm {
     text-align: center;
-    width: 2rem;
+    width: ${dt('inputotp.input.sm.width')};
 }
 
 .p-inputotp-input.p-inputtext-lg {
     text-align: center;
-    width: 3rem;
+    width: ${dt('inputotp.input.lg.width')};
 }
 `;
 
diff --git a/packages/primevue/src/selectbutton/BaseSelectButton.vue b/packages/primevue/src/selectbutton/BaseSelectButton.vue
index 21cb4d672..774f1b2bb 100644
--- a/packages/primevue/src/selectbutton/BaseSelectButton.vue
+++ b/packages/primevue/src/selectbutton/BaseSelectButton.vue
@@ -19,6 +19,10 @@ export default {
         ariaLabelledby: {
             type: String,
             default: null
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     style: SelectButtonStyle,
diff --git a/packages/primevue/src/selectbutton/SelectButton.d.ts b/packages/primevue/src/selectbutton/SelectButton.d.ts
index 9772c39de..97454494e 100755
--- a/packages/primevue/src/selectbutton/SelectButton.d.ts
+++ b/packages/primevue/src/selectbutton/SelectButton.d.ts
@@ -181,6 +181,10 @@ export interface SelectButtonProps {
      * Identifier of the underlying element.
      */
     ariaLabelledby?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * Form control object, typically used for handling validation and form state.
      */
diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue
index 9a18db690..4f9b9ad55 100755
--- a/packages/primevue/src/selectbutton/SelectButton.vue
+++ b/packages/primevue/src/selectbutton/SelectButton.vue
@@ -7,6 +7,7 @@
                 :offLabel="getOptionLabel(option)"
                 :disabled="disabled || isOptionDisabled(option)"
                 :unstyled="unstyled"
+                :size="size"
                 @change="onOptionSelect($event, option, index)"
                 :pt="ptm('pcToggleButton')"
             >
diff --git a/packages/primevue/src/togglebutton/BaseToggleButton.vue b/packages/primevue/src/togglebutton/BaseToggleButton.vue
index 96fc60097..f54d87c35 100644
--- a/packages/primevue/src/togglebutton/BaseToggleButton.vue
+++ b/packages/primevue/src/togglebutton/BaseToggleButton.vue
@@ -35,6 +35,10 @@ export default {
         ariaLabel: {
             type: String,
             default: null
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     style: ToggleButtonStyle,
diff --git a/packages/primevue/src/togglebutton/ToggleButton.d.ts b/packages/primevue/src/togglebutton/ToggleButton.d.ts
index 66a594ad3..85be45a6d 100755
--- a/packages/primevue/src/togglebutton/ToggleButton.d.ts
+++ b/packages/primevue/src/togglebutton/ToggleButton.d.ts
@@ -158,6 +158,10 @@ export interface ToggleButtonProps {
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     ariaLabelledby?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * Form control object, typically used for handling validation and form state.
      */
diff --git a/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js b/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js
index 0521fa7e1..f7d08c33c 100644
--- a/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js
+++ b/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js
@@ -99,6 +99,16 @@ const theme = ({ dt }) => `
 .p-togglebutton:disabled .p-togglebutton-icon {
     color: ${dt('togglebutton.icon.disabled.color')};
 }
+
+.p-togglebutton-sm {
+    padding: ${dt('togglebutton.sm.padding')};
+    font-size: ${dt('togglebutton.sm.font.size')};
+}
+
+.p-togglebutton-lg {
+    padding: ${dt('togglebutton.lg.padding')};
+    font-size: ${dt('togglebutton.lg.font.size')};
+}
 `;
 
 const classes = {
@@ -106,7 +116,9 @@ const classes = {
         'p-togglebutton p-component',
         {
             'p-togglebutton-checked': instance.active,
-            'p-invalid': instance.$invalid
+            'p-invalid': instance.$invalid,
+            'p-togglebutton-sm p-inputfield-sm': props.size === 'small',
+            'p-togglebutton-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     content: 'p-togglebutton-content',
diff --git a/packages/themes/src/presets/aura/autocomplete/index.js b/packages/themes/src/presets/aura/autocomplete/index.js
index b043f13e8..0ace3451b 100644
--- a/packages/themes/src/presets/aura/autocomplete/index.js
+++ b/packages/themes/src/presets/aura/autocomplete/index.js
@@ -55,6 +55,12 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        },
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
diff --git a/packages/themes/src/presets/aura/datepicker/index.js b/packages/themes/src/presets/aura/datepicker/index.js
index 271950945..282d25d68 100644
--- a/packages/themes/src/presets/aura/datepicker/index.js
+++ b/packages/themes/src/presets/aura/datepicker/index.js
@@ -24,6 +24,12 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        },
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
diff --git a/packages/themes/src/presets/aura/index.js b/packages/themes/src/presets/aura/index.js
index 53d6b1c87..fae06f078 100644
--- a/packages/themes/src/presets/aura/index.js
+++ b/packages/themes/src/presets/aura/index.js
@@ -36,6 +36,7 @@ import inplace from '@primevue/themes/aura/inplace';
 import inputchips from '@primevue/themes/aura/inputchips';
 import inputgroup from '@primevue/themes/aura/inputgroup';
 import inputnumber from '@primevue/themes/aura/inputnumber';
+import inputotp from '@primevue/themes/aura/inputotp';
 import inputtext from '@primevue/themes/aura/inputtext';
 import knob from '@primevue/themes/aura/knob';
 import listbox from '@primevue/themes/aura/listbox';
@@ -127,6 +128,7 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
+        inputotp,
         inputtext,
         knob,
         listbox,
diff --git a/packages/themes/src/presets/aura/inputotp/index.js b/packages/themes/src/presets/aura/inputotp/index.js
new file mode 100644
index 000000000..5409b4fd3
--- /dev/null
+++ b/packages/themes/src/presets/aura/inputotp/index.js
@@ -0,0 +1,14 @@
+export default {
+    root: {
+        gap: '0.5rem'
+    },
+    input: {
+        width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/aura/inputotp/package.json b/packages/themes/src/presets/aura/inputotp/package.json
new file mode 100644
index 000000000..74024ab67
--- /dev/null
+++ b/packages/themes/src/presets/aura/inputotp/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}
diff --git a/packages/themes/src/presets/aura/togglebutton/index.js b/packages/themes/src/presets/aura/togglebutton/index.js
index 984d10250..608d29106 100644
--- a/packages/themes/src/presets/aura/togglebutton/index.js
+++ b/packages/themes/src/presets/aura/togglebutton/index.js
@@ -15,7 +15,15 @@ export default {
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            padding: '0.375rem 0.75rem'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            padding: '0.625rem 1.25rem'
+        }
     },
     icon: {
         disabledColor: '{form.field.disabled.color}'
diff --git a/packages/themes/src/presets/lara/autocomplete/index.js b/packages/themes/src/presets/lara/autocomplete/index.js
index ae73de9b2..9a077c000 100644
--- a/packages/themes/src/presets/lara/autocomplete/index.js
+++ b/packages/themes/src/presets/lara/autocomplete/index.js
@@ -55,6 +55,12 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        },
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
diff --git a/packages/themes/src/presets/lara/datepicker/index.js b/packages/themes/src/presets/lara/datepicker/index.js
index 1a7eb42d0..5d365ce8f 100644
--- a/packages/themes/src/presets/lara/datepicker/index.js
+++ b/packages/themes/src/presets/lara/datepicker/index.js
@@ -22,6 +22,12 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        },
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
diff --git a/packages/themes/src/presets/lara/index.js b/packages/themes/src/presets/lara/index.js
index 6095cd58b..d47c88511 100644
--- a/packages/themes/src/presets/lara/index.js
+++ b/packages/themes/src/presets/lara/index.js
@@ -36,6 +36,7 @@ import inplace from '@primevue/themes/lara/inplace';
 import inputchips from '@primevue/themes/lara/inputchips';
 import inputgroup from '@primevue/themes/lara/inputgroup';
 import inputnumber from '@primevue/themes/lara/inputnumber';
+import inputotp from '@primevue/themes/lara/inputotp';
 import inputtext from '@primevue/themes/lara/inputtext';
 import knob from '@primevue/themes/lara/knob';
 import listbox from '@primevue/themes/lara/listbox';
@@ -127,6 +128,7 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
+        inputotp,
         inputtext,
         knob,
         listbox,
diff --git a/packages/themes/src/presets/lara/inputotp/index.js b/packages/themes/src/presets/lara/inputotp/index.js
new file mode 100644
index 000000000..5409b4fd3
--- /dev/null
+++ b/packages/themes/src/presets/lara/inputotp/index.js
@@ -0,0 +1,14 @@
+export default {
+    root: {
+        gap: '0.5rem'
+    },
+    input: {
+        width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/lara/inputotp/package.json b/packages/themes/src/presets/lara/inputotp/package.json
new file mode 100644
index 000000000..74024ab67
--- /dev/null
+++ b/packages/themes/src/presets/lara/inputotp/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}
diff --git a/packages/themes/src/presets/lara/togglebutton/index.js b/packages/themes/src/presets/lara/togglebutton/index.js
index 5193f5b7f..554bd8464 100644
--- a/packages/themes/src/presets/lara/togglebutton/index.js
+++ b/packages/themes/src/presets/lara/togglebutton/index.js
@@ -22,7 +22,15 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            padding: '0.5rem 0.75rem'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            padding: '0.75rem 1.25rem'
+        }
     },
     icon: {
         color: '{text.muted.color}',
diff --git a/packages/themes/src/presets/material/autocomplete/index.js b/packages/themes/src/presets/material/autocomplete/index.js
index ec7dd4932..546366cad 100644
--- a/packages/themes/src/presets/material/autocomplete/index.js
+++ b/packages/themes/src/presets/material/autocomplete/index.js
@@ -55,6 +55,12 @@ export default {
     },
     dropdown: {
         width: '3rem',
+        sm: {
+            width: '2.5rem'
+        },
+        lg: {
+            width: '3.5rem'
+        },
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index 4c0566e84..882042879 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -65,8 +65,8 @@ export default {
             },
             lg: {
                 fontSize: '1.125rem',
-                paddingX: '1rem',
-                paddingY: '1rem'
+                paddingX: '0.825rem',
+                paddingY: '0.825rem'
             },
             borderRadius: '{border.radius.sm}',
             focusRing: {
diff --git a/packages/themes/src/presets/material/datepicker/index.js b/packages/themes/src/presets/material/datepicker/index.js
index 4e4e566b1..e2d14e70e 100644
--- a/packages/themes/src/presets/material/datepicker/index.js
+++ b/packages/themes/src/presets/material/datepicker/index.js
@@ -24,6 +24,12 @@ export default {
     },
     dropdown: {
         width: '3rem',
+        sm: {
+            width: '2.5rem'
+        },
+        lg: {
+            width: '3.5rem'
+        },
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
diff --git a/packages/themes/src/presets/material/index.js b/packages/themes/src/presets/material/index.js
index 7c662d374..a3f86d4ed 100644
--- a/packages/themes/src/presets/material/index.js
+++ b/packages/themes/src/presets/material/index.js
@@ -36,6 +36,7 @@ import inplace from '@primevue/themes/material/inplace';
 import inputchips from '@primevue/themes/material/inputchips';
 import inputgroup from '@primevue/themes/material/inputgroup';
 import inputnumber from '@primevue/themes/material/inputnumber';
+import inputotp from '@primevue/themes/material/inputotp';
 import inputtext from '@primevue/themes/material/inputtext';
 import knob from '@primevue/themes/material/knob';
 import listbox from '@primevue/themes/material/listbox';
@@ -127,6 +128,7 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
+        inputotp,
         inputtext,
         knob,
         listbox,
diff --git a/packages/themes/src/presets/material/inputotp/index.js b/packages/themes/src/presets/material/inputotp/index.js
new file mode 100644
index 000000000..b9ee953de
--- /dev/null
+++ b/packages/themes/src/presets/material/inputotp/index.js
@@ -0,0 +1,14 @@
+export default {
+    root: {
+        gap: '0.5rem'
+    },
+    input: {
+        width: '3rem',
+        sm: {
+            width: '2.5rem'
+        },
+        lg: {
+            width: '3.5rem'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/material/inputotp/package.json b/packages/themes/src/presets/material/inputotp/package.json
new file mode 100644
index 000000000..74024ab67
--- /dev/null
+++ b/packages/themes/src/presets/material/inputotp/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}
diff --git a/packages/themes/src/presets/material/togglebutton/index.js b/packages/themes/src/presets/material/togglebutton/index.js
index 49754066f..817b094c3 100644
--- a/packages/themes/src/presets/material/togglebutton/index.js
+++ b/packages/themes/src/presets/material/togglebutton/index.js
@@ -21,7 +21,15 @@ export default {
             color: 'unset',
             shadow: 'none'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            padding: '0.625rem 0.75rem'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            padding: '0.875rem 1.25rem'
+        }
     },
     icon: {
         color: '{text.muted.color}',
diff --git a/packages/themes/src/presets/nora/autocomplete/index.js b/packages/themes/src/presets/nora/autocomplete/index.js
index d716741e0..0abeb97f1 100644
--- a/packages/themes/src/presets/nora/autocomplete/index.js
+++ b/packages/themes/src/presets/nora/autocomplete/index.js
@@ -55,6 +55,12 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        },
         background: '{form.field.background}',
         color: '{form.field.icon.color}',
         hoverColor: '{form.field.icon.color}',
diff --git a/packages/themes/src/presets/nora/datepicker/index.js b/packages/themes/src/presets/nora/datepicker/index.js
index 9e1bc2acb..dd647b14e 100644
--- a/packages/themes/src/presets/nora/datepicker/index.js
+++ b/packages/themes/src/presets/nora/datepicker/index.js
@@ -24,6 +24,12 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        },
         background: '{form.field.background}',
         color: '{form.field.icon.color}',
         hoverColor: '{form.field.icon.color}',
diff --git a/packages/themes/src/presets/nora/index.js b/packages/themes/src/presets/nora/index.js
index 0b57b7b5a..02cecde7f 100644
--- a/packages/themes/src/presets/nora/index.js
+++ b/packages/themes/src/presets/nora/index.js
@@ -36,6 +36,7 @@ import inplace from '@primevue/themes/nora/inplace';
 import inputchips from '@primevue/themes/nora/inputchips';
 import inputgroup from '@primevue/themes/nora/inputgroup';
 import inputnumber from '@primevue/themes/nora/inputnumber';
+import inputotp from '@primevue/themes/nora/inputotp';
 import inputtext from '@primevue/themes/nora/inputtext';
 import knob from '@primevue/themes/nora/knob';
 import listbox from '@primevue/themes/nora/listbox';
@@ -127,6 +128,7 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
+        inputotp,
         inputtext,
         knob,
         listbox,
diff --git a/packages/themes/src/presets/nora/inputotp/index.js b/packages/themes/src/presets/nora/inputotp/index.js
new file mode 100644
index 000000000..5409b4fd3
--- /dev/null
+++ b/packages/themes/src/presets/nora/inputotp/index.js
@@ -0,0 +1,14 @@
+export default {
+    root: {
+        gap: '0.5rem'
+    },
+    input: {
+        width: '2.5rem',
+        sm: {
+            width: '2rem'
+        },
+        lg: {
+            width: '3rem'
+        }
+    }
+};
diff --git a/packages/themes/src/presets/nora/inputotp/package.json b/packages/themes/src/presets/nora/inputotp/package.json
new file mode 100644
index 000000000..74024ab67
--- /dev/null
+++ b/packages/themes/src/presets/nora/inputotp/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}
diff --git a/packages/themes/src/presets/nora/togglebutton/index.js b/packages/themes/src/presets/nora/togglebutton/index.js
index 172a4b1f1..03606ddf9 100644
--- a/packages/themes/src/presets/nora/togglebutton/index.js
+++ b/packages/themes/src/presets/nora/togglebutton/index.js
@@ -22,7 +22,15 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            padding: '0.375rem 0.625rem'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            padding: '0.625rem 0.875rem'
+        }
     },
     icon: {
         color: '{text.muted.color}',