feat(VOtpInput): add density prop (#22401)

Author: J-Sek

packages/docs/src/data/new-in.json

@@ -239,6 +239,11 @@
       "autocomplete": "3.10.0"
     }
   },
+  "VOtpInput": {
+    "props": {
+      "density": "3.12.0"
+    }
+  },
   "VOverlay": {
     "props": {
       "captureFocus": "3.11.0",

packages/vuetify/src/components/VOtpInput/VOtpInput.sass

@@ -1,4 +1,4 @@
-// Imports
+@use 'sass:math';
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
@@ -27,7 +27,6 @@
     align-items: center
     display: flex
     gap: $otp-input-content-gap
-    height: $otp-input-content-height
     padding: $otp-input-content-padding
     justify-content: center
     max-width: $otp-input-content-max-width
@@ -37,6 +36,11 @@
     .v-otp-input--divided &
       max-width: $otp-input-divided-content-max-width
 
+  @at-root
+    @include tools.density('v-otp-input', $input-density) using ($modifier)
+      .v-otp-input__content
+        height: #{$otp-input-content-height + math.div($modifier, 2)}
+
   .v-otp-input__field
     color: inherit
     font-size: $otp-input-field-font-size

packages/vuetify/src/components/VOtpInput/VOtpInput.tsx

@@ -8,6 +8,7 @@ import { VProgressCircular } from '@/components/VProgressCircular/VProgressCircu
 
 // Composables
 import { provideDefaults } from '@/composables/defaults'
+import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeFocusProps, useFocus } from '@/composables/focus'
 import { useIntersectionObserver } from '@/composables/intersectionObserver'
@@ -50,6 +51,7 @@ export const makeVOtpInputProps = propsFactory({
     default: 'number',
   },
 
+  ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeFocusProps(),
   ...pick(makeVFieldProps({
@@ -81,6 +83,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
   },
 
   setup (props, { attrs, emit, slots }) {
+    const { densityClasses } = useDensity(props)
     const { dimensionStyles } = useDimension(props)
     const { isFocused, focus, blur } = useFocus(props)
     const model = useProxiedModel(
@@ -257,6 +260,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
             {
               'v-otp-input--divided': !!props.divider,
             },
+            densityClasses.value,
             props.class,
           ]}
           style={[

packages/vuetify/src/components/VOtpInput/_variables.scss

@@ -1,3 +1,4 @@
+@forward '../VInput/variables';
 @use '../../styles/settings';
 @use '../../styles/tools';