vuetify 3.6.13 → 3.6.14

package/lib/components/VSelectionControl/VSelectionControl.css

@@ -72,6 +72,12 @@
   height: 100%;
   opacity: 0;
 }
+.v-selection-control__input::before {
+  border-radius: 100%;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+}
 .v-selection-control__input::before {
   content: "";
   position: absolute;
@@ -79,10 +85,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 100%;
-  background-color: currentColor;
-  opacity: 0;
-  pointer-events: none;
 }
 .v-selection-control__input:hover::before {
   opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));

package/lib/components/VSelectionControl/VSelectionControl.sass

@@ -74,11 +74,11 @@
       opacity: 0
 
     &::before
-      @include tools.absolute(true)
       border-radius: 100%
       background-color: currentColor
       opacity: 0
       pointer-events: none
+      @include tools.absolute(true)
 
     &:hover::before
       opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))

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

@@ -64,26 +64,26 @@ type VSelectionControlSlots = {
 };
 declare const VSelectionControl: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
         } | undefined;
         valueComparator: typeof deepEqual;
     } & {
-        class?: any;
-        id?: string | undefined;
-        label?: string | undefined;
         type?: string | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        color?: string | undefined;
         value?: any;
+        label?: string | undefined;
+        class?: any;
         theme?: string | undefined;
-        color?: string | undefined;
-        name?: string | undefined;
         baseColor?: string | undefined;
         defaultsTarget?: string | undefined;
         falseIcon?: IconValue | undefined;
@@ -95,27 +95,27 @@ declare const VSelectionControl: {
         input: Ref<HTMLInputElement | undefined>;
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
         'update:modelValue': (value: any) => boolean;
-    }, "v-slot:default" | "$children" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:input" | "v-slot:label">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        style: vue.StyleValue;
+    }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:input" | "v-slot:label">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
         } | undefined;
         valueComparator: typeof deepEqual;
     } & {
-        class?: any;
-        id?: string | undefined;
-        label?: string | undefined;
         type?: string | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        color?: string | undefined;
         value?: any;
+        label?: string | undefined;
+        class?: any;
         theme?: string | undefined;
-        color?: string | undefined;
-        name?: string | undefined;
         baseColor?: string | undefined;
         defaultsTarget?: string | undefined;
         falseIcon?: IconValue | undefined;
@@ -123,12 +123,12 @@ declare const VSelectionControl: {
         trueValue?: any;
         falseValue?: any;
     } & {}, {
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -158,26 +158,26 @@ declare const VSelectionControl: {
         M: {};
         Defaults: {};
     }, {
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
         } | undefined;
         valueComparator: typeof deepEqual;
     } & {
-        class?: any;
-        id?: string | undefined;
-        label?: string | undefined;
         type?: string | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        color?: string | undefined;
         value?: any;
+        label?: string | undefined;
+        class?: any;
         theme?: string | undefined;
-        color?: string | undefined;
-        name?: string | undefined;
         baseColor?: string | undefined;
         defaultsTarget?: string | undefined;
         falseIcon?: IconValue | undefined;
@@ -188,12 +188,12 @@ declare const VSelectionControl: {
         isFocused: vue.ShallowRef<boolean>;
         input: Ref<HTMLInputElement | undefined>;
     }, {}, {}, {}, {
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -204,26 +204,26 @@ declare const VSelectionControl: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
-    style: vue.StyleValue;
+    inline: boolean;
     error: boolean;
+    style: vue.StyleValue;
     disabled: boolean | null;
-    readonly: boolean | null;
-    inline: boolean;
     multiple: boolean | null;
+    readonly: boolean | null;
     density: Density;
     ripple: boolean | {
         class: string;
     } | undefined;
     valueComparator: typeof deepEqual;
 } & {
-    class?: any;
-    id?: string | undefined;
-    label?: string | undefined;
     type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
     value?: any;
+    label?: string | undefined;
+    class?: any;
     theme?: string | undefined;
-    color?: string | undefined;
-    name?: string | undefined;
     baseColor?: string | undefined;
     defaultsTarget?: string | undefined;
     falseIcon?: IconValue | undefined;
@@ -235,13 +235,13 @@ declare const VSelectionControl: {
     input: Ref<HTMLInputElement | undefined>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (value: any) => boolean;
-}, "v-slot:default" | "$children" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:input" | "v-slot:label">, string, {
-    style: vue.StyleValue;
+}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:input" | "v-slot:label">, string, {
+    inline: boolean;
     error: boolean;
+    style: vue.StyleValue;
     disabled: boolean | null;
-    readonly: boolean | null;
-    inline: boolean;
     multiple: boolean | null;
+    readonly: boolean | null;
     density: Density;
     ripple: boolean | {
         class: string;

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

@@ -39,12 +39,12 @@ declare const IconValue: PropType<IconValue>;
 
 declare const VSelectionControlGroup: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -52,23 +52,23 @@ declare const VSelectionControlGroup: {
         defaultsTarget: string;
         valueComparator: typeof deepEqual;
     } & {
-        class?: any;
-        id?: string | undefined;
         type?: string | undefined;
-        theme?: string | undefined;
-        color?: string | undefined;
+        id?: string | undefined;
         name?: string | undefined;
+        color?: string | undefined;
+        class?: any;
+        theme?: string | undefined;
         falseIcon?: IconValue | undefined;
         trueIcon?: IconValue | undefined;
     } & {}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
         'update:modelValue': (value: any) => boolean;
-    }, "v-slot:default" | "$children" | "v-slots" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        style: vue.StyleValue;
+    }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -76,21 +76,21 @@ declare const VSelectionControlGroup: {
         defaultsTarget: string;
         valueComparator: typeof deepEqual;
     } & {
-        class?: any;
-        id?: string | undefined;
         type?: string | undefined;
-        theme?: string | undefined;
-        color?: string | undefined;
+        id?: string | undefined;
         name?: string | undefined;
+        color?: string | undefined;
+        class?: any;
+        theme?: string | undefined;
         falseIcon?: IconValue | undefined;
         trueIcon?: IconValue | undefined;
     } & {}, {
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -109,12 +109,12 @@ declare const VSelectionControlGroup: {
         M: {};
         Defaults: {};
     }, {
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -122,21 +122,21 @@ declare const VSelectionControlGroup: {
         defaultsTarget: string;
         valueComparator: typeof deepEqual;
     } & {
-        class?: any;
-        id?: string | undefined;
         type?: string | undefined;
-        theme?: string | undefined;
-        color?: string | undefined;
+        id?: string | undefined;
         name?: string | undefined;
+        color?: string | undefined;
+        class?: any;
+        theme?: string | undefined;
         falseIcon?: IconValue | undefined;
         trueIcon?: IconValue | undefined;
     } & {}, {}, {}, {}, {}, {
-        style: vue.StyleValue;
+        inline: boolean;
         error: boolean;
+        style: vue.StyleValue;
         disabled: boolean | null;
-        readonly: boolean | null;
-        inline: boolean;
         multiple: boolean | null;
+        readonly: boolean | null;
         density: Density;
         ripple: boolean | {
             class: string;
@@ -148,12 +148,12 @@ declare const VSelectionControlGroup: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
-    style: vue.StyleValue;
+    inline: boolean;
     error: boolean;
+    style: vue.StyleValue;
     disabled: boolean | null;
-    readonly: boolean | null;
-    inline: boolean;
     multiple: boolean | null;
+    readonly: boolean | null;
     density: Density;
     ripple: boolean | {
         class: string;
@@ -161,23 +161,23 @@ declare const VSelectionControlGroup: {
     defaultsTarget: string;
     valueComparator: typeof deepEqual;
 } & {
-    class?: any;
-    id?: string | undefined;
     type?: string | undefined;
-    theme?: string | undefined;
-    color?: string | undefined;
+    id?: string | undefined;
     name?: string | undefined;
+    color?: string | undefined;
+    class?: any;
+    theme?: string | undefined;
     falseIcon?: IconValue | undefined;
     trueIcon?: IconValue | undefined;
 } & {}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (value: any) => boolean;
-}, "v-slot:default" | "$children" | "v-slots" | "modelValue" | "update:modelValue">, string, {
-    style: vue.StyleValue;
+}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue">, string, {
+    inline: boolean;
     error: boolean;
+    style: vue.StyleValue;
     disabled: boolean | null;
-    readonly: boolean | null;
-    inline: boolean;
     multiple: boolean | null;
+    readonly: boolean | null;
     density: Density;
     ripple: boolean | {
         class: string;

package/lib/components/VSheet/VSheet.css

@@ -1,17 +1,18 @@
 .v-sheet {
   display: block;
+}
+.v-sheet {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  border-radius: 0;
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-sheet--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-sheet {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
 .v-sheet--absolute {
   position: absolute;
 }
@@ -24,6 +25,13 @@
 .v-sheet--sticky {
   position: sticky;
 }
+.v-sheet {
+  border-radius: 0;
+}
+.v-sheet {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
 .v-sheet--rounded {
   border-radius: 4px;
 }

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

@@ -17,20 +17,20 @@ declare const VSheet: {
         tag: string;
         tile: boolean;
     } & {
-        class?: any;
-        width?: string | number | undefined;
+        location?: Anchor | undefined;
         height?: string | number | undefined;
-        theme?: string | undefined;
-        color?: string | undefined;
+        width?: string | number | undefined;
         border?: string | number | boolean | undefined;
-        position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        rounded?: string | number | boolean | undefined;
+        color?: string | undefined;
         maxHeight?: string | number | undefined;
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        position?: "fixed" | "absolute" | "static" | "sticky" | "relative" | undefined;
+        class?: any;
         elevation?: string | number | undefined;
-        location?: Anchor | undefined;
+        theme?: string | undefined;
+        rounded?: string | number | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -45,20 +45,20 @@ declare const VSheet: {
         tag: string;
         tile: boolean;
     } & {
-        class?: any;
-        width?: string | number | undefined;
+        location?: Anchor | undefined;
         height?: string | number | undefined;
-        theme?: string | undefined;
-        color?: string | undefined;
+        width?: string | number | undefined;
         border?: string | number | boolean | undefined;
-        position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        rounded?: string | number | boolean | undefined;
+        color?: string | undefined;
         maxHeight?: string | number | undefined;
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        position?: "fixed" | "absolute" | "static" | "sticky" | "relative" | undefined;
+        class?: any;
         elevation?: string | number | undefined;
-        location?: Anchor | undefined;
+        theme?: string | undefined;
+        rounded?: string | number | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -89,20 +89,20 @@ declare const VSheet: {
         tag: string;
         tile: boolean;
     } & {
-        class?: any;
-        width?: string | number | undefined;
+        location?: Anchor | undefined;
         height?: string | number | undefined;
-        theme?: string | undefined;
-        color?: string | undefined;
+        width?: string | number | undefined;
         border?: string | number | boolean | undefined;
-        position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        rounded?: string | number | boolean | undefined;
+        color?: string | undefined;
         maxHeight?: string | number | undefined;
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        position?: "fixed" | "absolute" | "static" | "sticky" | "relative" | undefined;
+        class?: any;
         elevation?: string | number | undefined;
-        location?: Anchor | undefined;
+        theme?: string | undefined;
+        rounded?: string | number | boolean | undefined;
     } & {
         $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -126,20 +126,20 @@ declare const VSheet: {
     tag: string;
     tile: boolean;
 } & {
-    class?: any;
-    width?: string | number | undefined;
+    location?: Anchor | undefined;
     height?: string | number | undefined;
-    theme?: string | undefined;
-    color?: string | undefined;
+    width?: string | number | undefined;
     border?: string | number | boolean | undefined;
-    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-    rounded?: string | number | boolean | undefined;
+    color?: string | undefined;
     maxHeight?: string | number | undefined;
     maxWidth?: string | number | undefined;
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
+    position?: "fixed" | "absolute" | "static" | "sticky" | "relative" | undefined;
+    class?: any;
     elevation?: string | number | undefined;
-    location?: Anchor | undefined;
+    theme?: string | undefined;
+    rounded?: string | number | boolean | undefined;
 } & {
     $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
@@ -165,12 +165,12 @@ declare const VSheet: {
         default: string;
     };
     rounded: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     tile: BooleanConstructor;
     position: {
-        type: vue.PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
+        type: vue.PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
         validator: (v: any) => boolean;
     };
     location: vue.PropType<Anchor>;
@@ -189,7 +189,7 @@ declare const VSheet: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
-    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     color: StringConstructor;
 }, vue.ExtractPropTypes<{
     theme: StringConstructor;
@@ -198,12 +198,12 @@ declare const VSheet: {
         default: string;
     };
     rounded: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     tile: BooleanConstructor;
     position: {
-        type: vue.PropType<"fixed" | "absolute" | "relative" | "static" | "sticky">;
+        type: vue.PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
         validator: (v: any) => boolean;
     };
     location: vue.PropType<Anchor>;
@@ -222,7 +222,7 @@ declare const VSheet: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
-    border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     color: StringConstructor;
 }>>;
 type VSheet = InstanceType<typeof VSheet>;

package/lib/components/VSkeletonLoader/VSkeletonLoader.css

@@ -41,6 +41,12 @@
   overflow: hidden;
   position: relative;
 }
+.v-skeleton-loader__bone::after {
+  animation: loading 1.5s infinite;
+  background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0), rgba(var(--v-theme-surface), 0.3), rgba(var(--v-theme-surface), 0));
+  transform: translateX(-100%);
+  z-index: 1;
+}
 .v-skeleton-loader__bone::after {
   content: "";
   position: absolute;
@@ -48,10 +54,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  animation: loading 1.5s infinite;
-  background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0), rgba(var(--v-theme-surface), 0.3), rgba(var(--v-theme-surface), 0));
-  transform: translateX(-100%);
-  z-index: 1;
 }
 .v-skeleton-loader__avatar {
   border-radius: 50%;

package/lib/components/VSkeletonLoader/VSkeletonLoader.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VSkeletonLoader.css";
 
@@ -127,16 +127,17 @@ export const VSkeletonLoader = genericComponent()({
     const items = computed(() => genStructure(wrapInArray(props.type).join(',')));
     useRender(() => {
       const isLoading = !slots.default || props.loading;
-      return _createVNode("div", {
+      const loadingProps = props.boilerplate || !isLoading ? {} : {
+        ariaLive: 'polite',
+        ariaLabel: t(props.loadingText),
+        role: 'alert'
+      };
+      return _createVNode("div", _mergeProps({
         "class": ['v-skeleton-loader', {
           'v-skeleton-loader--boilerplate': props.boilerplate
         }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
-        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}],
-        "aria-busy": !props.boilerplate ? isLoading : undefined,
-        "aria-live": !props.boilerplate ? 'polite' : undefined,
-        "aria-label": !props.boilerplate ? t(props.loadingText) : undefined,
-        "role": !props.boilerplate ? 'alert' : undefined
-      }, [isLoading ? items.value : slots.default?.()]);
+        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}]
+      }, loadingProps), [isLoading ? items.value : slots.default?.()]);
     });
     return {};
   }