More work on #6651

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="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <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: '',
+            value1: null,
-            value2: '',
+            value2: null,
-            value3: '',
+            value3: null,
-            items1: [],
+            items: [],
-            items2: [],
-            items3: [],
             code: {
                 basic: `
-<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+<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="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <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: '',
+            value1: null,
-            value2: '',
+            value2: null,
-            value3: '',
+            value3: null,
-            items1: [],
+            items: [],
-            items2: [],
-            items3: [],
         };
     },
     methods: {
-        search(event) {
+        search() {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+            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="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <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 value1 = ref(null);
-const value2 = ref("");
+const value2 = ref(null);
-const value3 = ref("");
+const value3 = ref(null);
-const items1 = ref([]);
+const items = ref([]);
-const items2 = ref([]);
-const items3 = ref([]);
 
-const search = (event) => {
+const search = () => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+    items.value = [];
 }
 <\/script>
 `
@@ -83,8 +77,8 @@ const search = (event) => {
         };
     },
     methods: {
-        search(event) {
+        search() {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+            this.items = [];
         }
     }
 };

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="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-        <DatePicker v-model="value2" placeholder="Normal" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <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="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-<DatePicker v-model="value2" placeholder="Normal" />
+<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-<DatePicker v-model="value3" size="large" placeholder="Large" />
+<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="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-        <DatePicker v-model="value2" placeholder="Normal" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <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="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
-        <DatePicker v-model="value2" placeholder="Normal" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
 </template>
 

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>
 

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>

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>

apps/showcase/pages/datepicker/index.vue

@@ -129,7 +129,7 @@ export default {
                     component: IftaLabelDoc
                 },
                 {
-                    id: 'sizez',
+                    id: 'sizes',
                     label: 'Sizes',
                     component: SizesDoc
                 },

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',

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',

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 = {

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 = {

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 = {

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')};
 }
 `;
 

packages/primevue/src/selectbutton/BaseSelectButton.vue

@@ -19,6 +19,10 @@ export default {
         ariaLabelledby: {
             type: String,
             default: null
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     style: SelectButtonStyle,

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.
      */

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')"
             >

packages/primevue/src/togglebutton/BaseToggleButton.vue

@@ -35,6 +35,10 @@ export default {
         ariaLabel: {
             type: String,
             default: null
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     style: ToggleButtonStyle,

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.
      */

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',

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}',

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}',

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,

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'
+        }
+    }
+};

packages/themes/src/presets/aura/inputotp/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}

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}'

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}',

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}',

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,

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'
+        }
+    }
+};

packages/themes/src/presets/lara/inputotp/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}

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}',

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}',

packages/themes/src/presets/material/base/index.js

@@ -65,8 +65,8 @@ export default {
             },
             lg: {
                 fontSize: '1.125rem',
-                paddingX: '1rem',
+                paddingX: '0.825rem',
-                paddingY: '1rem'
+                paddingY: '0.825rem'
             },
             borderRadius: '{border.radius.sm}',
             focusRing: {

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}',

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,

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'
+        }
+    }
+};

packages/themes/src/presets/material/inputotp/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}

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}',

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}',

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}',

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,

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'
+        }
+    }
+};

packages/themes/src/presets/nora/inputotp/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./index.js",
+    "module": "./index.js",
+    "types": "../types/knob/index.d.ts"
+}

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}',