@vuetify/nightly 3.6.1-master.2024-05-01 → 3.6.3-dev.2024-05-06

package/lib/components/VAlert/VAlert.css

@@ -51,13 +51,15 @@
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
-  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   pointer-events: none;
 }
+.v-alert .v-alert__underlay {
+  position: absolute;
+}
 .v-alert--prominent {
   grid-template-areas: "prepend content append close" "prepend content . .";
 }

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

@@ -638,7 +638,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -667,7 +667,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -743,7 +743,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1218,7 +1218,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1247,7 +1247,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1323,7 +1323,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1912,7 +1912,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1941,7 +1941,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -2017,7 +2017,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -2541,7 +2541,7 @@ declare const VAutocomplete: {
             component: vue.Component;
         };
         zIndex: string | number;
-        modelValue: boolean;
+        modelValue: boolean | null;
         origin: Anchor | "auto" | "overlap";
         eager: boolean;
         location: Anchor;
@@ -2570,7 +2570,7 @@ declare const VAutocomplete: {
             component: vue.Component;
         };
         zIndex: string | number;
-        modelValue: boolean;
+        modelValue: boolean | null;
         origin: Anchor | "auto" | "overlap";
         eager: boolean;
         location: Anchor;
@@ -2646,7 +2646,7 @@ declare const VAutocomplete: {
             component: vue.Component;
         };
         zIndex: string | number;
-        modelValue: boolean;
+        modelValue: boolean | null;
         origin: Anchor | "auto" | "overlap";
         eager: boolean;
         location: Anchor;
@@ -3378,7 +3378,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -3407,7 +3407,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -3483,7 +3483,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -4062,7 +4062,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -4091,7 +4091,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -4167,7 +4167,7 @@ declare const VAutocomplete: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;

package/lib/components/VAvatar/VAvatar.css

@@ -10,6 +10,9 @@
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: width, height;
   vertical-align: middle;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: thin;
   border-radius: 50%;
 }
 .v-avatar.v-avatar--size-x-small {
@@ -39,6 +42,10 @@
   height: calc(var(--v-avatar-height) + -8px);
   width: calc(var(--v-avatar-height) + -8px);
 }
+.v-avatar--border {
+  border-width: thin;
+  box-shadow: none;
+}
 .v-avatar--variant-plain, .v-avatar--variant-outlined, .v-avatar--variant-text, .v-avatar--variant-tonal {
   background: transparent;
   color: inherit;
@@ -72,13 +79,15 @@
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
-  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   pointer-events: none;
 }
+.v-avatar .v-avatar__underlay {
+  position: absolute;
+}
 .v-avatar--rounded {
   border-radius: 4px;
 }

package/lib/components/VAvatar/VAvatar.mjs

@@ -6,6 +6,7 @@ import "./VAvatar.css";
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VIcon } from "../VIcon/index.mjs";
 import { VImg } from "../VImg/index.mjs"; // Composables
+import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { IconValue } from "../../composables/icons.mjs";
@@ -21,6 +22,7 @@ export const makeVAvatarProps = propsFactory({
   icon: IconValue,
   image: String,
   text: String,
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -41,6 +43,9 @@ export const VAvatar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
     const {
       colorClasses,
       colorStyles,
@@ -60,7 +65,7 @@ export const VAvatar = genericComponent()({
       "class": ['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
       "style": [colorStyles.value, sizeStyles.value, props.style]
     }, {
       default: () => [!slots.default ? props.image ? _createVNode(VImg, {

package/lib/components/VAvatar/VAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VAvatar.mjs","names":["VDefaultsProvider","VIcon","VImg","makeComponentProps","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","genericComponent","propsFactory","useRender","makeVAvatarProps","start","Boolean","end","icon","image","String","text","variant","VAvatar","name","props","setup","_ref","slots","themeClasses","colorClasses","colorStyles","variantClasses","densityClasses","roundedClasses","sizeClasses","sizeStyles","_createVNode","tag","value","class","style","default","cover"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVAvatarProps = propsFactory({\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n  text: String,\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'flat' } as const),\n}, 'VAvatar')\n\nexport const VAvatar = genericComponent()({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar',\n          {\n            'v-avatar--start': props.start,\n            'v-avatar--end': props.end,\n          },\n          themeClasses.value,\n          colorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n          variantClasses.value,\n          props.class,\n        ]}\n        style={[\n          colorStyles.value,\n          sizeStyles.value,\n          props.style,\n        ]}\n      >\n        { !slots.default ? (\n          props.image\n            ? (<VImg key=\"image\" src={ props.image } alt=\"\" cover />)\n            : props.icon\n              ? (<VIcon key=\"icon\" icon={ props.icon } />)\n              : props.text\n        ) : (\n          <VDefaultsProvider\n            key=\"content-defaults\"\n            defaults={{\n              VImg: {\n                cover: true,\n                image: props.image,\n              },\n              VIcon: {\n                icon: props.icon,\n              },\n            }}\n          >\n            { slots.default() }\n          </VDefaultsProvider>\n        )}\n\n        { genOverlays(false, 'v-avatar') }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VAvatar.mjs","names":["VDefaultsProvider","VIcon","VImg","makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","genericComponent","propsFactory","useRender","makeVAvatarProps","start","Boolean","end","icon","image","String","text","variant","VAvatar","name","props","setup","_ref","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","roundedClasses","sizeClasses","sizeStyles","_createVNode","tag","value","class","style","default","cover"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVAvatarProps = propsFactory({\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n  text: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'flat' } as const),\n}, 'VAvatar')\n\nexport const VAvatar = genericComponent()({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar',\n          {\n            'v-avatar--start': props.start,\n            'v-avatar--end': props.end,\n          },\n          themeClasses.value,\n          borderClasses.value,\n          colorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n          variantClasses.value,\n          props.class,\n        ]}\n        style={[\n          colorStyles.value,\n          sizeStyles.value,\n          props.style,\n        ]}\n      >\n        { !slots.default ? (\n          props.image\n            ? (<VImg key=\"image\" src={ props.image } alt=\"\" cover />)\n            : props.icon\n              ? (<VIcon key=\"icon\" icon={ props.icon } />)\n              : props.text\n        ) : (\n          <VDefaultsProvider\n            key=\"content-defaults\"\n            defaults={{\n              VImg: {\n                cover: true,\n                image: props.image,\n              },\n              VIcon: {\n                icon: props.icon,\n              },\n            }}\n          >\n            { slots.default() }\n          </VDefaultsProvider>\n        )}\n\n        { genOverlays(false, 'v-avatar') }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VAvatar/VAvatar.sass

@@ -19,6 +19,7 @@
 
     @include avatar-sizes($avatar-sizes)
     @include avatar-density(('height', 'width'), $avatar-density)
+    @include tools.border($avatar-border...)
     @include tools.rounded($avatar-border-radius)
     @include tools.variant($avatar-variants...)
 

package/lib/components/VAvatar/_variables.scss

@@ -1,10 +1,16 @@
 @use "sass:map";
+@use '../../styles/settings';
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
 // Defaults
 $avatar-background: var(--v-theme-surface) !default;
 $avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
+$avatar-border-color: settings.$border-color-root !default;
+$avatar-border-radius: map.get(settings.$rounded, 0) !default;
+$avatar-border-style: settings.$border-style-root !default;
+$avatar-border-thin-width: thin !default;
+$avatar-border-width: thin !default;
 $avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $avatar-elevation: 1 !default;
@@ -26,6 +32,13 @@ $avatar-sizes: functions.map-deep-merge(
   $avatar-sizes
 );
 
+$avatar-border: (
+  $avatar-border-color,
+  $avatar-border-style,
+  $avatar-border-width,
+  $avatar-border-thin-width
+) !default;
+
 $avatar-variants: (
   $avatar-background,
   $avatar-color,

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

@@ -27,6 +27,7 @@ declare const VAvatar: {
         theme?: string | undefined;
         color?: string | undefined;
         icon?: IconValue | undefined;
+        border?: string | number | boolean | undefined;
         rounded?: string | number | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -53,6 +54,7 @@ declare const VAvatar: {
         theme?: string | undefined;
         color?: string | undefined;
         icon?: IconValue | undefined;
+        border?: string | number | boolean | undefined;
         rounded?: string | number | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -100,6 +102,7 @@ declare const VAvatar: {
         theme?: string | undefined;
         color?: string | undefined;
         icon?: IconValue | undefined;
+        border?: string | number | boolean | undefined;
         rounded?: string | number | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -140,6 +143,7 @@ declare const VAvatar: {
     theme?: string | undefined;
     color?: string | undefined;
     icon?: IconValue | undefined;
+    border?: string | number | boolean | undefined;
     rounded?: string | number | boolean | undefined;
 } & {
     $children?: vue.VNodeChild | {
@@ -198,6 +202,7 @@ declare const VAvatar: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
+    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
     start: BooleanConstructor;
     end: BooleanConstructor;
     icon: vue.PropType<IconValue>;
@@ -237,6 +242,7 @@ declare const VAvatar: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
+    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
     start: BooleanConstructor;
     end: BooleanConstructor;
     icon: vue.PropType<IconValue>;

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

@@ -95,7 +95,7 @@ declare const VBottomSheet: {
             component: vue.Component;
         }>;
         zIndex: NonNullable<string | number>;
-        modelValue: boolean;
+        modelValue: boolean | null;
         inset: boolean;
         origin: NonNullable<Anchor | "auto" | "overlap">;
         eager: boolean;
@@ -181,7 +181,7 @@ declare const VBottomSheet: {
             component: vue.Component;
         }>;
         zIndex: NonNullable<string | number>;
-        modelValue: boolean;
+        modelValue: boolean | null;
         inset: boolean;
         origin: NonNullable<Anchor | "auto" | "overlap">;
         eager: boolean;
@@ -265,7 +265,7 @@ declare const VBottomSheet: {
             component: vue.Component;
         }>;
         zIndex: NonNullable<string | number>;
-        modelValue: boolean;
+        modelValue: boolean | null;
         inset: boolean;
         origin: NonNullable<Anchor | "auto" | "overlap">;
         eager: boolean;
@@ -317,7 +317,7 @@ declare const VBottomSheet: {
             component: vue.Component;
         }>;
         zIndex: NonNullable<string | number>;
-        modelValue: boolean;
+        modelValue: boolean | null;
         inset: boolean;
         origin: NonNullable<Anchor | "auto" | "overlap">;
         eager: boolean;
@@ -401,7 +401,7 @@ declare const VBottomSheet: {
             component: vue.Component;
         }>;
         zIndex: NonNullable<string | number>;
-        modelValue: boolean;
+        modelValue: boolean | null;
         inset: boolean;
         origin: NonNullable<Anchor | "auto" | "overlap">;
         eager: boolean;
@@ -437,7 +437,7 @@ declare const VBottomSheet: {
         component: vue.Component;
     }>;
     zIndex: NonNullable<string | number>;
-    modelValue: boolean;
+    modelValue: boolean | null;
     inset: boolean;
     origin: NonNullable<Anchor | "auto" | "overlap">;
     eager: boolean;
@@ -523,7 +523,7 @@ declare const VBottomSheet: {
         component: vue.Component;
     }>;
     zIndex: NonNullable<string | number>;
-    modelValue: boolean;
+    modelValue: boolean | null;
     inset: boolean;
     origin: NonNullable<Anchor | "auto" | "overlap">;
     eager: boolean;
@@ -658,7 +658,10 @@ declare const VBottomSheet: {
     disabled: BooleanConstructor;
     opacity: (StringConstructor | NumberConstructor)[];
     noClickAnimation: BooleanConstructor;
-    modelValue: BooleanConstructor;
+    modelValue: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
     persistent: BooleanConstructor;
     scrim: {
         type: (StringConstructor | BooleanConstructor)[];
@@ -778,7 +781,10 @@ declare const VBottomSheet: {
     disabled: BooleanConstructor;
     opacity: (StringConstructor | NumberConstructor)[];
     noClickAnimation: BooleanConstructor;
-    modelValue: BooleanConstructor;
+    modelValue: {
+        type: vue.PropType<boolean | null>;
+        default: null;
+    };
     persistent: BooleanConstructor;
     scrim: {
         type: (StringConstructor | BooleanConstructor)[];

package/lib/components/VBtn/VBtn.css

@@ -144,13 +144,15 @@
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
-  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   pointer-events: none;
 }
+.v-btn .v-btn__underlay {
+  position: absolute;
+}
 @supports selector(:focus-visible) {
   .v-btn::after {
     content: "";

package/lib/components/VCard/VCard.css

@@ -82,13 +82,15 @@
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
-  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   pointer-events: none;
 }
+.v-card .v-card__underlay {
+  position: absolute;
+}
 .v-card--disabled {
   pointer-events: none;
   user-select: none;

package/lib/components/VChip/VChip.css

@@ -332,13 +332,15 @@
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
-  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   pointer-events: none;
 }
+.v-chip .v-chip__underlay {
+  position: absolute;
+}
 .v-chip--border {
   border-width: thin;
 }

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

@@ -638,7 +638,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -667,7 +667,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -743,7 +743,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1218,7 +1218,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1247,7 +1247,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1323,7 +1323,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1912,7 +1912,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -1941,7 +1941,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -2017,7 +2017,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -2541,7 +2541,7 @@ declare const VCombobox: {
             component: vue.Component;
         };
         zIndex: string | number;
-        modelValue: boolean;
+        modelValue: boolean | null;
         origin: Anchor | "auto" | "overlap";
         eager: boolean;
         location: Anchor;
@@ -2570,7 +2570,7 @@ declare const VCombobox: {
             component: vue.Component;
         };
         zIndex: string | number;
-        modelValue: boolean;
+        modelValue: boolean | null;
         origin: Anchor | "auto" | "overlap";
         eager: boolean;
         location: Anchor;
@@ -2646,7 +2646,7 @@ declare const VCombobox: {
             component: vue.Component;
         };
         zIndex: string | number;
-        modelValue: boolean;
+        modelValue: boolean | null;
         origin: Anchor | "auto" | "overlap";
         eager: boolean;
         location: Anchor;
@@ -3384,7 +3384,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -3413,7 +3413,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -3489,7 +3489,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -4077,7 +4077,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -4106,7 +4106,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;
@@ -4182,7 +4182,7 @@ declare const VCombobox: {
                 component: vue.Component;
             };
             zIndex: string | number;
-            modelValue: boolean;
+            modelValue: boolean | null;
             origin: Anchor | "auto" | "overlap";
             eager: boolean;
             location: Anchor;

package/lib/components/VDataTable/VDataTableHeaders.mjs

@@ -166,6 +166,8 @@ export const VDataTableHeaders = genericComponent()({
         return columns.value.filter(column => column?.sortable);
       });
       const appendIcon = computed(() => {
+        const showSelectColumn = columns.value.find(column => column.key === 'data-table-select');
+        if (showSelectColumn == null) return;
         return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff';
       });
       return _createVNode(VDataTableColumn, _mergeProps({