vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VTextarea/VTextarea.sass

@@ -4,50 +4,51 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-textarea
-  .v-field
-    --v-textarea-control-height: var(--v-input-control-height)
-
-  .v-field__field
-    --v-input-control-height: var(--v-textarea-control-height)
-
-  .v-field__input
-    $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px)
-    $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px)
-
-    flex: 1 1 auto
-    outline: none
-    -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b)
-    mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b)
-
-    &.v-textarea__sizer
-      visibility: hidden
-      position: absolute
-      top: 0
-      left: 0
-      height: 0 !important
-      min-height: 0 !important
-      pointer-events: none
-
-  &--no-resize
-    .v-field__input
-      resize: none
+@include tools.layer('components')
+  .v-textarea
+    .v-field
+      --v-textarea-control-height: var(--v-input-control-height)
 
-  .v-field--no-label,
-  .v-field--active
-    textarea
-      opacity: 1
+    .v-field__field
+      --v-input-control-height: var(--v-textarea-control-height)
 
-  textarea
-    opacity: 0
-    flex: 1
-    min-width: 0
-    transition: .15s opacity settings.$standard-easing
+    .v-field__input
+      $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px)
+      $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px)
 
-    &:focus,
-    &:active
+      flex: 1 1 auto
       outline: none
+      -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b)
+      mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b)
+
+      &.v-textarea__sizer
+        visibility: hidden
+        position: absolute
+        top: 0
+        left: 0
+        height: 0 !important
+        min-height: 0 !important
+        pointer-events: none
+
+    &--no-resize
+      .v-field__input
+        resize: none
+
+    .v-field--no-label,
+    .v-field--active
+      textarea
+        opacity: 1
 
-    // Remove Firefox red outline
-    &:invalid
-      box-shadow: none
+    textarea
+      opacity: 0
+      flex: 1
+      min-width: 0
+      transition: .15s opacity settings.$standard-easing
+
+      &:focus,
+      &:active
+        outline: none
+
+      // Remove Firefox red outline
+      &:invalid
+        box-shadow: none

package/lib/components/VTextarea/index.d.mts

@@ -243,6 +243,7 @@ declare const VTextarea: {
             id?: string | undefined;
             label?: string | undefined;
             width?: string | number | undefined;
+            theme?: string | undefined;
             name?: string | undefined;
             'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
             validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -275,6 +276,7 @@ declare const VTextarea: {
             id?: string | undefined;
             label?: string | undefined;
             width?: string | number | undefined;
+            theme?: string | undefined;
             name?: string | undefined;
             'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
             validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -335,6 +337,7 @@ declare const VTextarea: {
             id?: string | undefined;
             label?: string | undefined;
             width?: string | number | undefined;
+            theme?: string | undefined;
             name?: string | undefined;
             'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
             validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -426,6 +429,7 @@ declare const VTextarea: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -447,7 +451,7 @@ declare const VTextarea: {
     }> & {} & vue.ComponentCustomProperties & {} & GenericProps<{
         modelValue?: unknown;
         'onUpdate:modelValue'?: ((value: unknown) => void) | undefined;
-    }, VInputSlots>, "class" | "id" | "label" | "width" | "key" | "name" | "v-slot:default" | "$children" | "v-slots" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:focused" | "modelValue" | "validateOn" | "validationValue" | "onUpdate:modelValue" | "maxWidth" | "minWidth" | "v-slot:prepend" | "v-slot:append" | "prependIcon" | "appendIcon" | "onClick:prepend" | "onClick:append" | "v-slot:message" | "hint" | "hideDetails" | "v-slot:details" | ("style" | "error" | "disabled" | "messages" | "focused" | "errorMessages" | "maxErrors" | "readonly" | "rules" | "density" | "direction" | "centerAffix" | "hideSpinButtons" | "persistentHint")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    }, VInputSlots>, "class" | "id" | "label" | "width" | "theme" | "key" | "name" | "v-slot:default" | "$children" | "v-slots" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:focused" | "modelValue" | "validateOn" | "validationValue" | "onUpdate:modelValue" | "maxWidth" | "minWidth" | "v-slot:prepend" | "v-slot:append" | "prependIcon" | "appendIcon" | "onClick:prepend" | "onClick:append" | "v-slot:message" | "hint" | "hideDetails" | "v-slot:details" | ("style" | "error" | "disabled" | "messages" | "focused" | "errorMessages" | "maxErrors" | "readonly" | "rules" | "density" | "direction" | "centerAffix" | "hideSpinButtons" | "persistentHint")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         'click:control': (e: MouseEvent) => true;
         'mousedown:control': (e: MouseEvent) => true;
         'update:focused': (focused: boolean) => true;
@@ -810,6 +814,7 @@ declare const VTextarea: {
             id?: string | undefined;
             label?: string | undefined;
             width?: string | number | undefined;
+            theme?: string | undefined;
             name?: string | undefined;
             'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
             validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -842,6 +847,7 @@ declare const VTextarea: {
             id?: string | undefined;
             label?: string | undefined;
             width?: string | number | undefined;
+            theme?: string | undefined;
             name?: string | undefined;
             'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
             validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -902,6 +908,7 @@ declare const VTextarea: {
             id?: string | undefined;
             label?: string | undefined;
             width?: string | number | undefined;
+            theme?: string | undefined;
             name?: string | undefined;
             'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
             validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -993,6 +1000,7 @@ declare const VTextarea: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -1014,7 +1022,7 @@ declare const VTextarea: {
     }> & {} & vue.ComponentCustomProperties & {} & GenericProps<{
         modelValue?: unknown;
         'onUpdate:modelValue'?: ((value: unknown) => void) | undefined;
-    }, VInputSlots>, "class" | "id" | "label" | "width" | "key" | "name" | "v-slot:default" | "$children" | "v-slots" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:focused" | "modelValue" | "validateOn" | "validationValue" | "onUpdate:modelValue" | "maxWidth" | "minWidth" | "v-slot:prepend" | "v-slot:append" | "prependIcon" | "appendIcon" | "onClick:prepend" | "onClick:append" | "v-slot:message" | "hint" | "hideDetails" | "v-slot:details" | ("style" | "error" | "disabled" | "messages" | "focused" | "errorMessages" | "maxErrors" | "readonly" | "rules" | "density" | "direction" | "centerAffix" | "hideSpinButtons" | "persistentHint")>, `$${any}`>, {}, {}, {}, {
+    }, VInputSlots>, "class" | "id" | "label" | "width" | "theme" | "key" | "name" | "v-slot:default" | "$children" | "v-slots" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:focused" | "modelValue" | "validateOn" | "validationValue" | "onUpdate:modelValue" | "maxWidth" | "minWidth" | "v-slot:prepend" | "v-slot:append" | "prependIcon" | "appendIcon" | "onClick:prepend" | "onClick:append" | "v-slot:message" | "hint" | "hideDetails" | "v-slot:details" | ("style" | "error" | "disabled" | "messages" | "focused" | "errorMessages" | "maxErrors" | "readonly" | "rules" | "density" | "direction" | "centerAffix" | "hideSpinButtons" | "persistentHint")>, `$${any}`>, {}, {}, {}, {
         reverse: boolean;
         flat: boolean;
         style: vue.StyleValue;
@@ -1210,6 +1218,7 @@ declare const VTextarea: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -1242,6 +1251,7 @@ declare const VTextarea: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -1302,6 +1312,7 @@ declare const VTextarea: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -1393,6 +1404,7 @@ declare const VTextarea: {
     id?: string | undefined;
     label?: string | undefined;
     width?: string | number | undefined;
+    theme?: string | undefined;
     name?: string | undefined;
     'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -1414,7 +1426,7 @@ declare const VTextarea: {
 }> & {} & vue.ComponentCustomProperties & {} & GenericProps<{
     modelValue?: unknown;
     'onUpdate:modelValue'?: ((value: unknown) => void) | undefined;
-}, VInputSlots>, "class" | "id" | "label" | "width" | "key" | "name" | "v-slot:default" | "$children" | "v-slots" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:focused" | "modelValue" | "validateOn" | "validationValue" | "onUpdate:modelValue" | "maxWidth" | "minWidth" | "v-slot:prepend" | "v-slot:append" | "prependIcon" | "appendIcon" | "onClick:prepend" | "onClick:append" | "v-slot:message" | "hint" | "hideDetails" | "v-slot:details" | ("style" | "error" | "disabled" | "messages" | "focused" | "errorMessages" | "maxErrors" | "readonly" | "rules" | "density" | "direction" | "centerAffix" | "hideSpinButtons" | "persistentHint")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}, VInputSlots>, "class" | "id" | "label" | "width" | "theme" | "key" | "name" | "v-slot:default" | "$children" | "v-slots" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:focused" | "modelValue" | "validateOn" | "validationValue" | "onUpdate:modelValue" | "maxWidth" | "minWidth" | "v-slot:prepend" | "v-slot:append" | "prependIcon" | "appendIcon" | "onClick:prepend" | "onClick:append" | "v-slot:message" | "hint" | "hideDetails" | "v-slot:details" | ("style" | "error" | "disabled" | "messages" | "focused" | "errorMessages" | "maxErrors" | "readonly" | "rules" | "density" | "direction" | "centerAffix" | "hideSpinButtons" | "persistentHint")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'click:control': (e: MouseEvent) => true;
     'mousedown:control': (e: MouseEvent) => true;
     'update:focused': (focused: boolean) => true;

package/lib/components/VThemeProvider/VThemeProvider.sass

@@ -1,3 +1,6 @@
-.v-theme-provider
-  background: rgb(var(--v-theme-background))
-  color: rgb(var(--v-theme-on-background))
+@use '../../styles/tools'
+
+@include tools.layer('components')
+  .v-theme-provider
+    background: rgb(var(--v-theme-background))
+    color: rgb(var(--v-theme-on-background))