vuetify 3.5.11 → 3.5.13

package/lib/components/VAvatar/VAvatar.css

@@ -82,6 +82,12 @@
 .v-avatar--rounded {
   border-radius: 4px;
 }
+.v-avatar--start {
+  margin-inline-end: 8px;
+}
+.v-avatar--end {
+  margin-inline-start: 8px;
+}
 .v-avatar .v-img {
   height: 100%;
   width: 100%;

package/lib/components/VAvatar/VAvatar.sass

@@ -24,6 +24,12 @@
   &--rounded
     @include tools.rounded($avatar-rounded-border-radius)
 
+  &--start
+    margin-inline-end: $avatar-margin-start
+
+  &--end  
+    margin-inline-start: $avatar-margin-end
+
   .v-img
     height: 100%
     width: 100%

package/lib/components/VAvatar/_variables.scss

@@ -14,6 +14,8 @@ $avatar-plain-opacity: .62 !default;
 $avatar-rounded-border-radius: variables.$border-radius-root !default;
 $avatar-vertical-align: middle !default;
 $avatar-width: 40px !default;
+$avatar-margin-end: map.get(variables.$grid-gutters, 'md') !default;
+$avatar-margin-start: map.get(variables.$grid-gutters, 'md') !default;
 
 $avatar-sizes: () !default;
 $avatar-sizes: functions.map-deep-merge(

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

@@ -107,7 +107,9 @@ declare const VCheckbox: {
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -156,7 +158,9 @@ declare const VCheckbox: {
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -202,7 +206,9 @@ declare const VCheckbox: {
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -259,7 +265,9 @@ declare const VCheckbox: {
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -305,7 +313,9 @@ declare const VCheckbox: {
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -331,7 +341,9 @@ declare const VCheckbox: {
     maxErrors: string | number;
     rules: readonly ValidationRule[];
     density: Density;
-    ripple: boolean;
+    ripple: boolean | {
+        class: string;
+    } | undefined;
     falseIcon: NonNullable<IconValue>;
     trueIcon: NonNullable<IconValue>;
     valueComparator: typeof deepEqual;
@@ -380,7 +392,9 @@ declare const VCheckbox: {
     maxErrors: string | number;
     rules: readonly ValidationRule[];
     density: Density;
-    ripple: boolean;
+    ripple: boolean | {
+        class: string;
+    } | undefined;
     falseIcon: NonNullable<IconValue>;
     trueIcon: NonNullable<IconValue>;
     valueComparator: typeof deepEqual;
@@ -456,7 +470,9 @@ declare const VCheckbox: {
         validator: (v: any) => boolean;
     };
     ripple: {
-        type: BooleanConstructor;
+        type: vue.PropType<boolean | {
+            class: string;
+        } | undefined>;
         default: boolean;
     };
     defaultsTarget: StringConstructor;
@@ -550,7 +566,9 @@ declare const VCheckbox: {
         validator: (v: any) => boolean;
     };
     ripple: {
-        type: BooleanConstructor;
+        type: vue.PropType<boolean | {
+            class: string;
+        } | undefined>;
         default: boolean;
     };
     defaultsTarget: StringConstructor;
@@ -623,7 +641,9 @@ declare const VCheckboxBtn: {
         readonly: boolean | null;
         indeterminate: boolean;
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -655,7 +675,9 @@ declare const VCheckboxBtn: {
         readonly: boolean | null;
         indeterminate: boolean;
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -684,7 +706,9 @@ declare const VCheckboxBtn: {
         readonly: boolean | null;
         indeterminate: boolean;
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -721,7 +745,9 @@ declare const VCheckboxBtn: {
         readonly: boolean | null;
         indeterminate: boolean;
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -750,7 +776,9 @@ declare const VCheckboxBtn: {
         readonly: boolean | null;
         indeterminate: boolean;
         density: Density;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
         falseIcon: NonNullable<IconValue>;
         trueIcon: NonNullable<IconValue>;
         valueComparator: typeof deepEqual;
@@ -768,7 +796,9 @@ declare const VCheckboxBtn: {
     readonly: boolean | null;
     indeterminate: boolean;
     density: Density;
-    ripple: boolean;
+    ripple: boolean | {
+        class: string;
+    } | undefined;
     falseIcon: NonNullable<IconValue>;
     trueIcon: NonNullable<IconValue>;
     valueComparator: typeof deepEqual;
@@ -800,7 +830,9 @@ declare const VCheckboxBtn: {
     readonly: boolean | null;
     indeterminate: boolean;
     density: Density;
-    ripple: boolean;
+    ripple: boolean | {
+        class: string;
+    } | undefined;
     falseIcon: NonNullable<IconValue>;
     trueIcon: NonNullable<IconValue>;
     valueComparator: typeof deepEqual;
@@ -857,7 +889,9 @@ declare const VCheckboxBtn: {
         default: NonNullable<IconValue>;
     };
     ripple: {
-        type: BooleanConstructor;
+        type: vue.PropType<boolean | {
+            class: string;
+        } | undefined>;
         default: boolean;
     };
     multiple: {
@@ -915,7 +949,9 @@ declare const VCheckboxBtn: {
         default: NonNullable<IconValue>;
     };
     ripple: {
-        type: BooleanConstructor;
+        type: vue.PropType<boolean | {
+            class: string;
+        } | undefined>;
         default: boolean;
     };
     multiple: {

package/lib/components/VChip/VChip.css

@@ -14,6 +14,9 @@
   border-width: 0;
   border-radius: 9999px;
 }
+.v-chip .v-icon {
+  --v-icon-size-multiplier: 0.8571428571;
+}
 .v-chip.v-chip--size-x-small {
   --v-chip-size: 0.625rem;
   --v-chip-height: 20px;
@@ -264,11 +267,11 @@
 }
 
 .v-chip.v-chip--density-comfortable {
-  height: calc(var(--v-chip-height) + -8px);
+  height: calc(var(--v-chip-height) + -4px);
 }
 
 .v-chip.v-chip--density-compact {
-  height: calc(var(--v-chip-height) + -12px);
+  height: calc(var(--v-chip-height) + -8px);
 }
 
 .v-chip:hover > .v-chip__overlay {

package/lib/components/VChip/VChip.sass

@@ -14,6 +14,9 @@
   white-space: $chip-white-space
   vertical-align: middle
 
+  .v-icon
+    --v-icon-size-multiplier: #{$chip-icon-size-multiplier}
+
   @at-root
     @include chip-sizes()
     @include chip-density('height', $chip-density)

package/lib/components/VChip/_variables.scss

@@ -12,13 +12,13 @@ $chip-border-thin-width: thin !default;
 $chip-border-width: 0 !default;
 $chip-close-size: 18px !default;
 $chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
-$chip-density: ("default": 0, "comfortable": -2, "compact": -3) !default;
+$chip-density: ("default": 0, "comfortable": -1, "compact": -2) !default;
 $chip-disabled-opacity: 0.3 !default;
 $chip-elevation: 1 !default;
 $chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default;
 $chip-font-weight: 400 !default;
 $chip-height: 32px !default;
-$chip-icon-font-size: 1.25rem !default;
+$chip-icon-size-multiplier: calc(18/21) !default;
 $chip-label-border-radius: settings.$border-radius-root !default;
 $chip-max-width: 100% !default;
 $chip-overflow: hidden !default;

package/lib/components/VDivider/VDivider.css

@@ -12,7 +12,7 @@
   align-self: stretch;
   border-width: 0 thin 0 0;
   display: inline-flex;
-  height: inherit;
+  height: 100%;
   margin-left: -1px;
   max-height: 100%;
   max-width: 0px;

package/lib/components/VDivider/VDivider.sass

@@ -15,7 +15,7 @@
     align-self: stretch
     border-width: $divider-vertical-border-width
     display: inline-flex
-    height: inherit
+    height: 100%
     margin-left: $divider-vertical-margin-left
     max-height: 100%
     max-width: 0px

package/lib/components/VExpansionPanel/VExpansionPanel.css

@@ -38,15 +38,15 @@
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
-.v-expansion-panels--variant-accordion > :first-child {
+.v-expansion-panels--variant-accordion > :first-child:not(:last-child) {
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-.v-expansion-panels--variant-accordion > :last-child {
+.v-expansion-panels--variant-accordion > :last-child:not(:first-child) {
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
-.v-expansion-panels--variant-accordion > :last-child .v-expansion-panel-title--active {
+.v-expansion-panels--variant-accordion > :last-child:not(:first-child) .v-expansion-panel-title--active {
   border-bottom-left-radius: initial;
   border-bottom-right-radius: initial;
 }

package/lib/components/VExpansionPanel/VExpansionPanel.sass

@@ -50,11 +50,11 @@
       border-top-right-radius: 0 !important
 
   &--variant-accordion
-    > :first-child
+    > :first-child:not(:last-child)
       border-bottom-left-radius: 0 !important
       border-bottom-right-radius: 0 !important
 
-    > :last-child
+    > :last-child:not(:first-child)
       border-top-left-radius: 0 !important
       border-top-right-radius: 0 !important
 

package/lib/components/VField/VField.css

@@ -113,7 +113,7 @@
   box-shadow: none;
 }
 .v-field--rounded {
-  border-radius: 9999px;
+  border-radius: 24px;
 }
 .v-field.v-field--prepended {
   --v-field-padding-start: 6px;

package/lib/components/VField/_variables.scss

@@ -4,7 +4,7 @@
 
 // INPUT
 $field-border-radius: settings.$border-radius-root !default;
-$field-rounded-border-radius: map-get(settings.$rounded, 'pill') !default;
+$field-rounded-border-radius: map-get(settings.$rounded, 'xl') !default;
 $field-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $field-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
 $field-error-color: rgb(var(--v-theme-error)) !default;

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

@@ -338,8 +338,8 @@ declare const VFileInput: {
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
         } & {}, {
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             validate: (silent?: boolean) => Promise<string[]>;
             isValid: vue.ComputedRef<boolean | null>;
             errorMessages: vue.ComputedRef<string[]>;
@@ -426,8 +426,8 @@ declare const VFileInput: {
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {}, "reset" | "isValid" | "errorMessages" | "validate" | "resetValidation"> & vue.ShallowUnwrapRef<{
-        reset: () => void;
-        resetValidation: () => void;
+        reset: () => Promise<void>;
+        resetValidation: () => Promise<void>;
         validate: (silent?: boolean) => Promise<string[]>;
         isValid: vue.ComputedRef<boolean | null>;
         errorMessages: vue.ComputedRef<string[]>;
@@ -907,8 +907,8 @@ declare const VFileInput: {
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
         } & {}, {
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             validate: (silent?: boolean) => Promise<string[]>;
             isValid: vue.ComputedRef<boolean | null>;
             errorMessages: vue.ComputedRef<string[]>;
@@ -995,8 +995,8 @@ declare const VFileInput: {
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {}, "reset" | "isValid" | "errorMessages" | "validate" | "resetValidation"> & vue.ShallowUnwrapRef<{
-        reset: () => void;
-        resetValidation: () => void;
+        reset: () => Promise<void>;
+        resetValidation: () => Promise<void>;
         validate: (silent?: boolean) => Promise<string[]>;
         isValid: vue.ComputedRef<boolean | null>;
         errorMessages: vue.ComputedRef<string[]>;
@@ -1299,8 +1299,8 @@ declare const VFileInput: {
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {}, {
-        reset: () => void;
-        resetValidation: () => void;
+        reset: () => Promise<void>;
+        resetValidation: () => Promise<void>;
         validate: (silent?: boolean) => Promise<string[]>;
         isValid: vue.ComputedRef<boolean | null>;
         errorMessages: vue.ComputedRef<string[]>;
@@ -1387,8 +1387,8 @@ declare const VFileInput: {
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
 } & {}, "reset" | "isValid" | "errorMessages" | "validate" | "resetValidation"> & vue.ShallowUnwrapRef<{
-    reset: () => void;
-    resetValidation: () => void;
+    reset: () => Promise<void>;
+    resetValidation: () => Promise<void>;
     validate: (silent?: boolean) => Promise<string[]>;
     isValid: vue.ComputedRef<boolean | null>;
     errorMessages: vue.ComputedRef<string[]>;

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

@@ -42,8 +42,8 @@ declare const VForm: {
                 items: vue.Ref<{
                     id: string | number;
                     validate: () => Promise<string[]>;
-                    reset: () => void;
-                    resetValidation: () => void;
+                    reset: () => Promise<void>;
+                    resetValidation: () => Promise<void>;
                     isValid: boolean | null;
                     errorMessages: string[];
                 }[]>;
@@ -71,8 +71,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -101,8 +101,8 @@ declare const VForm: {
                 items: vue.Ref<{
                     id: string | number;
                     validate: () => Promise<string[]>;
-                    reset: () => void;
-                    resetValidation: () => void;
+                    reset: () => Promise<void>;
+                    resetValidation: () => Promise<void>;
                     isValid: boolean | null;
                     errorMessages: string[];
                 }[]>;
@@ -132,8 +132,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -164,8 +164,8 @@ declare const VForm: {
         items: vue.Ref<{
             id: string | number;
             validate: () => Promise<string[]>;
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             isValid: boolean | null;
             errorMessages: string[];
         }[]>;
@@ -206,8 +206,8 @@ declare const VForm: {
                 items: vue.Ref<{
                     id: string | number;
                     validate: () => Promise<string[]>;
-                    reset: () => void;
-                    resetValidation: () => void;
+                    reset: () => Promise<void>;
+                    resetValidation: () => Promise<void>;
                     isValid: boolean | null;
                     errorMessages: string[];
                 }[]>;
@@ -235,8 +235,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -265,8 +265,8 @@ declare const VForm: {
                 items: vue.Ref<{
                     id: string | number;
                     validate: () => Promise<string[]>;
-                    reset: () => void;
-                    resetValidation: () => void;
+                    reset: () => Promise<void>;
+                    resetValidation: () => Promise<void>;
                     isValid: boolean | null;
                     errorMessages: string[];
                 }[]>;
@@ -296,8 +296,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -336,8 +336,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -385,8 +385,8 @@ declare const VForm: {
                 items: vue.Ref<{
                     id: string | number;
                     validate: () => Promise<string[]>;
-                    reset: () => void;
-                    resetValidation: () => void;
+                    reset: () => Promise<void>;
+                    resetValidation: () => Promise<void>;
                     isValid: boolean | null;
                     errorMessages: string[];
                 }[]>;
@@ -414,8 +414,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -444,8 +444,8 @@ declare const VForm: {
                 items: vue.Ref<{
                     id: string | number;
                     validate: () => Promise<string[]>;
-                    reset: () => void;
-                    resetValidation: () => void;
+                    reset: () => Promise<void>;
+                    resetValidation: () => Promise<void>;
                     isValid: boolean | null;
                     errorMessages: string[];
                 }[]>;
@@ -475,8 +475,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -507,8 +507,8 @@ declare const VForm: {
         items: vue.Ref<{
             id: string | number;
             validate: () => Promise<string[]>;
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             isValid: boolean | null;
             errorMessages: string[];
         }[]>;
@@ -557,8 +557,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -586,8 +586,8 @@ declare const VForm: {
         items: vue.Ref<{
             id: string | number;
             validate: () => Promise<string[]>;
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             isValid: boolean | null;
             errorMessages: string[];
         }[]>;
@@ -616,8 +616,8 @@ declare const VForm: {
             items: vue.Ref<{
                 id: string | number;
                 validate: () => Promise<string[]>;
-                reset: () => void;
-                resetValidation: () => void;
+                reset: () => Promise<void>;
+                resetValidation: () => Promise<void>;
                 isValid: boolean | null;
                 errorMessages: string[];
             }[]>;
@@ -647,8 +647,8 @@ declare const VForm: {
         items: vue.Ref<{
             id: string | number;
             validate: () => Promise<string[]>;
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             isValid: boolean | null;
             errorMessages: string[];
         }[]>;
@@ -679,8 +679,8 @@ declare const VForm: {
     items: vue.Ref<{
         id: string | number;
         validate: () => Promise<string[]>;
-        reset: () => void;
-        resetValidation: () => void;
+        reset: () => Promise<void>;
+        resetValidation: () => Promise<void>;
         isValid: boolean | null;
         errorMessages: string[];
     }[]>;
@@ -718,8 +718,8 @@ declare const VForm: {
         items: vue.Ref<{
             id: string | number;
             validate: () => Promise<string[]>;
-            reset: () => void;
-            resetValidation: () => void;
+            reset: () => Promise<void>;
+            resetValidation: () => Promise<void>;
             isValid: boolean | null;
             errorMessages: string[];
         }[]>;