@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VTextField/index.d.ts

@@ -0,0 +1,582 @@
+import * as vue from 'vue';
+import { VNodeChild, PropType, JSXComponent, ComputedRef, Ref, nextTick } from 'vue';
+
+declare type SlotsToProps<T extends Record<string, Slot>> = {
+    $children: () => (T['default'] | VNodeChild | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots': new () => {
+        [K in keyof T]?: T[K] | false;
+    };
+};
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+declare type EventProp<T = (...args: any[]) => any> = T | T[];
+declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
+
+interface LoaderSlotProps {
+    color: string | undefined;
+    isActive: boolean;
+}
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare type ValidationResult = string | boolean;
+declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
+interface VInputSlot {
+    id: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
+declare type VInputSlots = MakeSlots<{
+    default: [VInputSlot];
+    prepend: [VInputSlot];
+    append: [VInputSlot];
+    details: [VInputSlot];
+}>;
+
+interface DefaultInputSlot {
+    isActive: Ref<boolean>;
+    isFocused: Ref<boolean>;
+    controlRef: Ref<HTMLElement | undefined>;
+    focus: () => void;
+    blur: () => void;
+}
+interface VFieldSlot extends DefaultInputSlot {
+    props: Record<string, unknown>;
+}
+declare type VFieldSlots = MakeSlots<{
+    clear: [];
+    'prepend-inner': [DefaultInputSlot & VInputSlot];
+    'append-inner': [DefaultInputSlot & VInputSlot];
+    label: [DefaultInputSlot & VInputSlot];
+    loader: [LoaderSlotProps];
+    default: [VFieldSlot];
+}>;
+
+declare const VTextField: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            reverse: boolean;
+            type: string;
+            error: boolean;
+            active: boolean;
+            direction: "horizontal" | "vertical";
+            loading: boolean;
+            autofocus: boolean;
+            disabled: boolean;
+            readonly: boolean;
+            messages: string | string[];
+            density: "default" | "compact" | "comfortable" | null;
+            variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+            errorMessages: string | string[];
+            maxErrors: string | number;
+            rules: ValidationRule[];
+            clearIcon: IconValue;
+            clearable: boolean;
+            dirty: boolean;
+            persistentClear: boolean;
+            singleLine: boolean;
+            persistentHint: boolean;
+            persistentPlaceholder: boolean;
+            persistentCounter: boolean;
+        }> & Omit<Readonly<vue.ExtractPropTypes<{
+            loading: BooleanConstructor;
+            theme: StringConstructor;
+            appendInnerIcon: PropType<IconValue>;
+            bgColor: StringConstructor;
+            clearable: BooleanConstructor;
+            clearIcon: {
+                type: PropType<IconValue>;
+                default: string;
+            };
+            active: BooleanConstructor;
+            color: StringConstructor;
+            dirty: BooleanConstructor;
+            disabled: BooleanConstructor;
+            error: BooleanConstructor;
+            label: StringConstructor;
+            persistentClear: BooleanConstructor;
+            prependInnerIcon: PropType<IconValue>;
+            reverse: BooleanConstructor;
+            singleLine: BooleanConstructor;
+            variant: {
+                type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+            errorMessages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            maxErrors: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            name: StringConstructor;
+            readonly: BooleanConstructor;
+            rules: {
+                type: PropType<ValidationRule[]>;
+                default: () => never[];
+            };
+            modelValue: null;
+            validationValue: null;
+            density: {
+                type: PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            id: StringConstructor;
+            appendIcon: PropType<IconValue>;
+            prependIcon: PropType<IconValue>;
+            hideDetails: PropType<boolean | "auto">;
+            messages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            direction: {
+                type: PropType<"horizontal" | "vertical">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+            autofocus: BooleanConstructor;
+            counter: PropType<string | number | true>;
+            counterValue: PropType<(value: any) => number>;
+            hint: StringConstructor;
+            persistentHint: BooleanConstructor;
+            prefix: StringConstructor;
+            placeholder: StringConstructor;
+            persistentPlaceholder: BooleanConstructor;
+            persistentCounter: BooleanConstructor;
+            suffix: StringConstructor;
+            type: {
+                type: StringConstructor;
+                default: string;
+            };
+        } & SlotsToProps<Omit<MakeSlots<{
+            default: [VInputSlot];
+            prepend: [VInputSlot];
+            append: [VInputSlot];
+            details: [VInputSlot];
+        }> & MakeSlots<{
+            clear: [];
+            'prepend-inner': [DefaultInputSlot & VInputSlot];
+            'append-inner': [DefaultInputSlot & VInputSlot];
+            label: [DefaultInputSlot & VInputSlot];
+            loader: [LoaderSlotProps];
+            default: [VFieldSlot];
+        }>, "default"> & MakeSlots<{
+            default: [];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+            "onClick:control"?: ((e: MouseEvent) => any) | undefined;
+            "onClick:input"?: ((e: MouseEvent) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "reverse" | "type" | "error" | "active" | "direction" | "loading" | "autofocus" | "disabled" | "readonly" | "messages" | "density" | "variant" | "errorMessages" | "maxErrors" | "rules" | "clearIcon" | "clearable" | "dirty" | "persistentClear" | "singleLine" | "persistentHint" | "persistentPlaceholder" | "persistentCounter">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: ((event: "update:modelValue", val: string) => void) & ((event: "click:control", e: MouseEvent) => void) & ((event: "click:input", e: MouseEvent) => void);
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+            loading: BooleanConstructor;
+            theme: StringConstructor;
+            appendInnerIcon: PropType<IconValue>;
+            bgColor: StringConstructor;
+            clearable: BooleanConstructor;
+            clearIcon: {
+                type: PropType<IconValue>;
+                default: string;
+            };
+            active: BooleanConstructor;
+            color: StringConstructor;
+            dirty: BooleanConstructor;
+            disabled: BooleanConstructor;
+            error: BooleanConstructor;
+            label: StringConstructor;
+            persistentClear: BooleanConstructor;
+            prependInnerIcon: PropType<IconValue>;
+            reverse: BooleanConstructor;
+            singleLine: BooleanConstructor;
+            variant: {
+                type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+            errorMessages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            maxErrors: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            name: StringConstructor;
+            readonly: BooleanConstructor;
+            rules: {
+                type: PropType<ValidationRule[]>;
+                default: () => never[];
+            };
+            modelValue: null;
+            validationValue: null;
+            density: {
+                type: PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            id: StringConstructor;
+            appendIcon: PropType<IconValue>;
+            prependIcon: PropType<IconValue>;
+            hideDetails: PropType<boolean | "auto">;
+            messages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            direction: {
+                type: PropType<"horizontal" | "vertical">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+            autofocus: BooleanConstructor;
+            counter: PropType<string | number | true>;
+            counterValue: PropType<(value: any) => number>;
+            hint: StringConstructor;
+            persistentHint: BooleanConstructor;
+            prefix: StringConstructor;
+            placeholder: StringConstructor;
+            persistentPlaceholder: BooleanConstructor;
+            persistentCounter: BooleanConstructor;
+            suffix: StringConstructor;
+            type: {
+                type: StringConstructor;
+                default: string;
+            };
+        } & SlotsToProps<Omit<MakeSlots<{
+            default: [VInputSlot];
+            prepend: [VInputSlot];
+            append: [VInputSlot];
+            details: [VInputSlot];
+        }> & MakeSlots<{
+            clear: [];
+            'prepend-inner': [DefaultInputSlot & VInputSlot];
+            'append-inner': [DefaultInputSlot & VInputSlot];
+            label: [DefaultInputSlot & VInputSlot];
+            loader: [LoaderSlotProps];
+            default: [VFieldSlot];
+        }>, "default"> & MakeSlots<{
+            default: [];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+            "onClick:control"?: ((e: MouseEvent) => any) | undefined;
+            "onClick:input"?: ((e: MouseEvent) => any) | undefined;
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            'click:control': (e: MouseEvent) => boolean;
+            'click:input': (e: MouseEvent) => boolean;
+            'update:modelValue': (val: string) => boolean;
+        }, string, {
+            reverse: boolean;
+            type: string;
+            error: boolean;
+            active: boolean;
+            direction: "horizontal" | "vertical";
+            loading: boolean;
+            autofocus: boolean;
+            disabled: boolean;
+            readonly: boolean;
+            messages: string | string[];
+            density: "default" | "compact" | "comfortable" | null;
+            variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+            errorMessages: string | string[];
+            maxErrors: string | number;
+            rules: ValidationRule[];
+            clearIcon: IconValue;
+            clearable: boolean;
+            dirty: boolean;
+            persistentClear: boolean;
+            singleLine: boolean;
+            persistentHint: boolean;
+            persistentPlaceholder: boolean;
+            persistentCounter: boolean;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<{
+        loading: BooleanConstructor;
+        theme: StringConstructor;
+        appendInnerIcon: PropType<IconValue>;
+        bgColor: StringConstructor;
+        clearable: BooleanConstructor;
+        clearIcon: {
+            type: PropType<IconValue>;
+            default: string;
+        };
+        active: BooleanConstructor;
+        color: StringConstructor;
+        dirty: BooleanConstructor;
+        disabled: BooleanConstructor;
+        error: BooleanConstructor;
+        label: StringConstructor;
+        persistentClear: BooleanConstructor;
+        prependInnerIcon: PropType<IconValue>;
+        reverse: BooleanConstructor;
+        singleLine: BooleanConstructor;
+        variant: {
+            type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+        errorMessages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        maxErrors: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        name: StringConstructor;
+        readonly: BooleanConstructor;
+        rules: {
+            type: PropType<ValidationRule[]>;
+            default: () => never[];
+        };
+        modelValue: null;
+        validationValue: null;
+        density: {
+            type: PropType<"default" | "compact" | "comfortable" | null>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        id: StringConstructor;
+        appendIcon: PropType<IconValue>;
+        prependIcon: PropType<IconValue>;
+        hideDetails: PropType<boolean | "auto">;
+        messages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        direction: {
+            type: PropType<"horizontal" | "vertical">;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+        autofocus: BooleanConstructor;
+        counter: PropType<string | number | true>;
+        counterValue: PropType<(value: any) => number>;
+        hint: StringConstructor;
+        persistentHint: BooleanConstructor;
+        prefix: StringConstructor;
+        placeholder: StringConstructor;
+        persistentPlaceholder: BooleanConstructor;
+        persistentCounter: BooleanConstructor;
+        suffix: StringConstructor;
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+    } & SlotsToProps<Omit<MakeSlots<{
+        default: [VInputSlot];
+        prepend: [VInputSlot];
+        append: [VInputSlot];
+        details: [VInputSlot];
+    }> & MakeSlots<{
+        clear: [];
+        'prepend-inner': [DefaultInputSlot & VInputSlot];
+        'append-inner': [DefaultInputSlot & VInputSlot];
+        label: [DefaultInputSlot & VInputSlot];
+        loader: [LoaderSlotProps];
+        default: [VFieldSlot];
+    }>, "default"> & MakeSlots<{
+        default: [];
+    }>>>> & {
+        "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+        "onClick:control"?: ((e: MouseEvent) => any) | undefined;
+        "onClick:input"?: ((e: MouseEvent) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+    loading: BooleanConstructor;
+    theme: StringConstructor;
+    appendInnerIcon: PropType<IconValue>;
+    bgColor: StringConstructor;
+    clearable: BooleanConstructor;
+    clearIcon: {
+        type: PropType<IconValue>;
+        default: string;
+    };
+    active: BooleanConstructor;
+    color: StringConstructor;
+    dirty: BooleanConstructor;
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    label: StringConstructor;
+    persistentClear: BooleanConstructor;
+    prependInnerIcon: PropType<IconValue>;
+    reverse: BooleanConstructor;
+    singleLine: BooleanConstructor;
+    variant: {
+        type: PropType<"filled" | "outlined" | "plain" | "underlined" | "solo">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:clear': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:appendInner': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:prependInner': PropType<EventProp<(...args: any[]) => any>>;
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    modelValue: null;
+    validationValue: null;
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: PropType<IconValue>;
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    autofocus: BooleanConstructor;
+    counter: PropType<string | number | true>;
+    counterValue: PropType<(value: any) => number>;
+    hint: StringConstructor;
+    persistentHint: BooleanConstructor;
+    prefix: StringConstructor;
+    placeholder: StringConstructor;
+    persistentPlaceholder: BooleanConstructor;
+    persistentCounter: BooleanConstructor;
+    suffix: StringConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+} & SlotsToProps<Omit<MakeSlots<{
+    default: [VInputSlot];
+    prepend: [VInputSlot];
+    append: [VInputSlot];
+    details: [VInputSlot];
+}> & MakeSlots<{
+    clear: [];
+    'prepend-inner': [DefaultInputSlot & VInputSlot];
+    'append-inner': [DefaultInputSlot & VInputSlot];
+    label: [DefaultInputSlot & VInputSlot];
+    loader: [LoaderSlotProps];
+    default: [VFieldSlot];
+}>, "default"> & MakeSlots<{
+    default: [];
+}>>>> & {
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+    "onClick:control"?: ((e: MouseEvent) => any) | undefined;
+    "onClick:input"?: ((e: MouseEvent) => any) | undefined;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'click:control': (e: MouseEvent) => boolean;
+    'click:input': (e: MouseEvent) => boolean;
+    'update:modelValue': (val: string) => boolean;
+}, string, {
+    reverse: boolean;
+    type: string;
+    error: boolean;
+    active: boolean;
+    direction: "horizontal" | "vertical";
+    loading: boolean;
+    autofocus: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    messages: string | string[];
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "filled" | "outlined" | "plain" | "underlined" | "solo";
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    clearIcon: IconValue;
+    clearable: boolean;
+    dirty: boolean;
+    persistentClear: boolean;
+    singleLine: boolean;
+    persistentHint: boolean;
+    persistentPlaceholder: boolean;
+    persistentCounter: boolean;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
+    $slots: Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{
+        default: [];
+    }>;
+});
+declare type VTextField = InstanceType<typeof VTextField>;
+
+export { VTextField };

package/lib/components/VTextField/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTextField/index.ts"],"names":["VTextField"],"mappings":"SAASA,U","sourcesContent":["export { VTextField } from './VTextField'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VTextField"],"sources":["../../../src/components/VTextField/index.ts"],"sourcesContent":["export { VTextField } from './VTextField'\n"],"mappings":"SAASA,U"}

package/lib/components/VTextarea/VTextarea.css

@@ -1,11 +1,14 @@
-.v-textarea .v-field--active textarea {
-  opacity: 1;
+.v-textarea .v-field {
+  --v-textarea-control-height: var(--v-input-control-height);
+}
+.v-textarea .v-field__field {
+  --v-input-control-height: var(--v-textarea-control-height);
 }
 .v-textarea .v-field__input {
   flex: 1 1 auto;
-  line-height: 1.75;
   outline: none;
-  mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) / 1.25), black var(--v-field-padding-top, 0));
+  -webkit-mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) - 6px), black calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px));
+  mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) - 6px), black calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px));
 }
 .v-textarea--auto-grow .v-field__input {
   overflow: hidden;
@@ -19,11 +22,17 @@
   top: 0;
   left: 0;
   height: 0 !important;
+  min-height: 0 !important;
   pointer-events: none;
 }
+.v-textarea .v-field--no-label textarea,
+.v-textarea .v-field--active textarea {
+  opacity: 1;
+}
 .v-textarea textarea {
-  flex: 1;
   opacity: 0;
+  flex: 1;
+  min-width: 0;
   transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-textarea textarea:focus, .v-textarea textarea:active {