@vuetify/nightly 3.11.8-dev.2026-02-01 → 3.11.8-dev.2026-02-07

package/lib/labs/VAvatarGroup/VAvatarGroup.d.ts

@@ -0,0 +1,401 @@
+// Styles
+
+// Types
+import type { PropType } from 'vue';
+import type { SelectItemKey } from '../../util/index.js';
+export type AvatarGroupItem = string | Record<string, any>;
+export type VAvatarGroupSlots = {
+    default: never;
+    prepend: never;
+    append: never;
+    item: {
+        props: any;
+        index: number;
+    };
+    overflow: {
+        overflow: number;
+    };
+};
+export declare const makeVAvatarGroupProps: <Defaults extends {
+    class?: unknown;
+    style?: unknown;
+    tag?: unknown;
+    border?: unknown;
+    gap?: unknown;
+    hoverable?: unknown;
+    items?: unknown;
+    itemProps?: unknown;
+    limit?: unknown;
+    overflowText?: unknown;
+    reverse?: unknown;
+    size?: unknown;
+    vertical?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    class: unknown extends Defaults["class"] ? PropType<any> : {
+        type: PropType<unknown extends Defaults["class"] ? any : any>;
+        default: unknown extends Defaults["class"] ? any : any;
+    };
+    style: unknown extends Defaults["style"] ? {
+        type: PropType<import("vue").StyleValue>;
+        default: null;
+    } : Omit<{
+        type: PropType<import("vue").StyleValue>;
+        default: null;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
+        default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
+    };
+    tag: unknown extends Defaults["tag"] ? {
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
+        default: string;
+    } : Omit<{
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
+        default: string;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
+        default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
+    };
+    border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
+        type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
+        default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
+    };
+    gap: unknown extends Defaults["gap"] ? (NumberConstructor | StringConstructor)[] : {
+        type: PropType<unknown extends Defaults["gap"] ? string | number : string | number | Defaults["gap"]>;
+        default: unknown extends Defaults["gap"] ? string | number : Defaults["gap"] | NonNullable<string | number>;
+    };
+    hoverable: unknown extends Defaults["hoverable"] ? BooleanConstructor : {
+        type: PropType<unknown extends Defaults["hoverable"] ? boolean : boolean | Defaults["hoverable"]>;
+        default: unknown extends Defaults["hoverable"] ? boolean : boolean | Defaults["hoverable"];
+    };
+    items: unknown extends Defaults["items"] ? {
+        type: PropType<AvatarGroupItem[]>;
+        default: () => never[];
+    } : Omit<{
+        type: PropType<AvatarGroupItem[]>;
+        default: () => never[];
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["items"] ? AvatarGroupItem[] : AvatarGroupItem[] | Defaults["items"]>;
+        default: unknown extends Defaults["items"] ? AvatarGroupItem[] : AvatarGroupItem[] | Defaults["items"];
+    };
+    itemProps: unknown extends Defaults["itemProps"] ? {
+        type: PropType<SelectItemKey>;
+        default: null;
+    } : Omit<{
+        type: PropType<SelectItemKey>;
+        default: null;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["itemProps"] ? SelectItemKey : Defaults["itemProps"] | SelectItemKey>;
+        default: unknown extends Defaults["itemProps"] ? SelectItemKey : Defaults["itemProps"] | NonNullable<SelectItemKey>;
+    };
+    limit: unknown extends Defaults["limit"] ? NumberConstructor : {
+        type: PropType<unknown extends Defaults["limit"] ? number : number | Defaults["limit"]>;
+        default: unknown extends Defaults["limit"] ? number : number | Defaults["limit"];
+    };
+    overflowText: unknown extends Defaults["overflowText"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["overflowText"] ? string : string | Defaults["overflowText"]>;
+        default: unknown extends Defaults["overflowText"] ? string : string | Defaults["overflowText"];
+    };
+    reverse: unknown extends Defaults["reverse"] ? BooleanConstructor : {
+        type: PropType<unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"]>;
+        default: unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"];
+    };
+    size: unknown extends Defaults["size"] ? (NumberConstructor | StringConstructor)[] : {
+        type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
+        default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
+    };
+    vertical: unknown extends Defaults["vertical"] ? BooleanConstructor : {
+        type: PropType<unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"]>;
+        default: unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"];
+    };
+};
+export declare const VAvatarGroup: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
+        tag: string | import("../../util/index.js").JSXComponent;
+        hoverable: boolean;
+        items: AvatarGroupItem[];
+        itemProps: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
+        reverse: boolean;
+        vertical: boolean;
+    } & {
+        class?: any;
+        border?: string | number | boolean | undefined;
+        gap?: string | number | undefined;
+        limit?: number | undefined;
+        overflowText?: string | undefined;
+        size?: string | number | undefined;
+    } & {
+        $children?: {
+            default?: (() => import("vue").VNodeChild) | undefined;
+            prepend?: (() => import("vue").VNodeChild) | undefined;
+            append?: (() => import("vue").VNodeChild) | undefined;
+            item?: ((arg: {
+                props: any;
+                index: number;
+            }) => import("vue").VNodeChild) | undefined;
+            overflow?: ((arg: {
+                overflow: number;
+            }) => import("vue").VNodeChild) | undefined;
+        } | {
+            $stable?: boolean | undefined;
+        } | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
+        "v-slots"?: {
+            default?: false | (() => import("vue").VNodeChild) | undefined;
+            prepend?: false | (() => import("vue").VNodeChild) | undefined;
+            append?: false | (() => import("vue").VNodeChild) | undefined;
+            item?: false | ((arg: {
+                props: any;
+                index: number;
+            }) => import("vue").VNodeChild) | undefined;
+            overflow?: false | ((arg: {
+                overflow: number;
+            }) => import("vue").VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
+        "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
+        "v-slot:item"?: false | ((arg: {
+            props: any;
+            index: number;
+        }) => import("vue").VNodeChild) | undefined;
+        "v-slot:overflow"?: false | ((arg: {
+            overflow: number;
+        }) => import("vue").VNodeChild) | undefined;
+        "v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
+        style: import("vue").StyleValue;
+        tag: string | import("../../util/index.js").JSXComponent;
+        hoverable: boolean;
+        items: AvatarGroupItem[];
+        itemProps: SelectItemKey;
+        reverse: boolean;
+        vertical: boolean;
+    }, true, {}, import("vue").SlotsType<Partial<{
+        default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+        prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+        append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+        item: (arg: {
+            props: any;
+            index: number;
+        }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+        overflow: (arg: {
+            overflow: number;
+        }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+    }>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, {
+        style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
+        tag: string | import("../../util/index.js").JSXComponent;
+        hoverable: boolean;
+        items: AvatarGroupItem[];
+        itemProps: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
+        reverse: boolean;
+        vertical: boolean;
+    } & {
+        class?: any;
+        border?: string | number | boolean | undefined;
+        gap?: string | number | undefined;
+        limit?: number | undefined;
+        overflowText?: string | undefined;
+        size?: string | number | undefined;
+    } & {
+        $children?: {
+            default?: (() => import("vue").VNodeChild) | undefined;
+            prepend?: (() => import("vue").VNodeChild) | undefined;
+            append?: (() => import("vue").VNodeChild) | undefined;
+            item?: ((arg: {
+                props: any;
+                index: number;
+            }) => import("vue").VNodeChild) | undefined;
+            overflow?: ((arg: {
+                overflow: number;
+            }) => import("vue").VNodeChild) | undefined;
+        } | {
+            $stable?: boolean | undefined;
+        } | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
+        "v-slots"?: {
+            default?: false | (() => import("vue").VNodeChild) | undefined;
+            prepend?: false | (() => import("vue").VNodeChild) | undefined;
+            append?: false | (() => import("vue").VNodeChild) | undefined;
+            item?: false | ((arg: {
+                props: any;
+                index: number;
+            }) => import("vue").VNodeChild) | undefined;
+            overflow?: false | ((arg: {
+                overflow: number;
+            }) => import("vue").VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
+        "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
+        "v-slot:item"?: false | ((arg: {
+            props: any;
+            index: number;
+        }) => import("vue").VNodeChild) | undefined;
+        "v-slot:overflow"?: false | ((arg: {
+            overflow: number;
+        }) => import("vue").VNodeChild) | undefined;
+        "v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
+    }, {}, {}, {}, {}, {
+        style: import("vue").StyleValue;
+        tag: string | import("../../util/index.js").JSXComponent;
+        hoverable: boolean;
+        items: AvatarGroupItem[];
+        itemProps: SelectItemKey;
+        reverse: boolean;
+        vertical: boolean;
+    }>;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<{
+    style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
+    tag: string | import("../../util/index.js").JSXComponent;
+    hoverable: boolean;
+    items: AvatarGroupItem[];
+    itemProps: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
+    reverse: boolean;
+    vertical: boolean;
+} & {
+    class?: any;
+    border?: string | number | boolean | undefined;
+    gap?: string | number | undefined;
+    limit?: number | undefined;
+    overflowText?: string | undefined;
+    size?: string | number | undefined;
+} & {
+    $children?: {
+        default?: (() => import("vue").VNodeChild) | undefined;
+        prepend?: (() => import("vue").VNodeChild) | undefined;
+        append?: (() => import("vue").VNodeChild) | undefined;
+        item?: ((arg: {
+            props: any;
+            index: number;
+        }) => import("vue").VNodeChild) | undefined;
+        overflow?: ((arg: {
+            overflow: number;
+        }) => import("vue").VNodeChild) | undefined;
+    } | {
+        $stable?: boolean | undefined;
+    } | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
+    "v-slots"?: {
+        default?: false | (() => import("vue").VNodeChild) | undefined;
+        prepend?: false | (() => import("vue").VNodeChild) | undefined;
+        append?: false | (() => import("vue").VNodeChild) | undefined;
+        item?: false | ((arg: {
+            props: any;
+            index: number;
+        }) => import("vue").VNodeChild) | undefined;
+        overflow?: false | ((arg: {
+            overflow: number;
+        }) => import("vue").VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
+    "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
+    "v-slot:item"?: false | ((arg: {
+        props: any;
+        index: number;
+    }) => import("vue").VNodeChild) | undefined;
+    "v-slot:overflow"?: false | ((arg: {
+        overflow: number;
+    }) => import("vue").VNodeChild) | undefined;
+    "v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+    style: import("vue").StyleValue;
+    tag: string | import("../../util/index.js").JSXComponent;
+    hoverable: boolean;
+    items: AvatarGroupItem[];
+    itemProps: SelectItemKey;
+    reverse: boolean;
+    vertical: boolean;
+}, {}, string, import("vue").SlotsType<Partial<{
+    default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    item: (arg: {
+        props: any;
+        index: number;
+    }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    overflow: (arg: {
+        overflow: number;
+    }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
+    class: PropType<any>;
+    style: {
+        type: PropType<import("vue").StyleValue>;
+        default: null;
+    };
+    tag: {
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
+        default: string;
+    };
+    border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+    gap: (NumberConstructor | StringConstructor)[];
+    hoverable: BooleanConstructor;
+    items: {
+        type: PropType<AvatarGroupItem[]>;
+        default: () => never[];
+    };
+    itemProps: {
+        type: PropType<SelectItemKey>;
+        default: null;
+    };
+    limit: NumberConstructor;
+    overflowText: StringConstructor;
+    reverse: BooleanConstructor;
+    size: (NumberConstructor | StringConstructor)[];
+    vertical: BooleanConstructor;
+}, import("vue").ExtractPropTypes<{
+    class: PropType<any>;
+    style: {
+        type: PropType<import("vue").StyleValue>;
+        default: null;
+    };
+    tag: {
+        type: PropType<string | import("../../util/index.js").JSXComponent>;
+        default: string;
+    };
+    border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+    gap: (NumberConstructor | StringConstructor)[];
+    hoverable: BooleanConstructor;
+    items: {
+        type: PropType<AvatarGroupItem[]>;
+        default: () => never[];
+    };
+    itemProps: {
+        type: PropType<SelectItemKey>;
+        default: null;
+    };
+    limit: NumberConstructor;
+    overflowText: StringConstructor;
+    reverse: BooleanConstructor;
+    size: (NumberConstructor | StringConstructor)[];
+    vertical: BooleanConstructor;
+}>>;
+export type VAvatarGroup = InstanceType<typeof VAvatarGroup>;

package/lib/labs/VAvatarGroup/VAvatarGroup.js

@@ -0,0 +1,91 @@
+import { createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
+// Styles
+import "./VAvatarGroup.css";
+
+// Components
+import { VAvatar } from "../../components/VAvatar/index.js";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.js"; // Composables
+import { makeComponentProps } from "../../composables/component.js";
+import { makeTagProps } from "../../composables/tag.js"; // Utilities
+import { computed } from 'vue';
+import { convertToUnit, genericComponent, getPropertyFromItem, isObject, propsFactory, useRender } from "../../util/index.js"; // Types
+export const makeVAvatarGroupProps = propsFactory({
+  border: [Boolean, Number, String],
+  gap: [Number, String],
+  hoverable: Boolean,
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemProps: {
+    type: [Boolean, String, Array, Function],
+    default: null
+  },
+  limit: Number,
+  overflowText: String,
+  reverse: Boolean,
+  size: [Number, String],
+  vertical: Boolean,
+  ...makeComponentProps(),
+  ...makeTagProps()
+}, 'VAvatarGroup');
+export const VAvatarGroup = genericComponent()({
+  name: 'VAvatarGroup',
+  props: makeVAvatarGroupProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const items = computed(() => {
+      const visibleItems = props.limit ? props.items.slice(0, props.limit) : props.items;
+      const orderedItems = props.reverse ? visibleItems.toReversed() : visibleItems;
+      return orderedItems.map(item => {
+        const avatarProps = props.itemProps === true ? isObject(item) ? item : {
+          image: item
+        } : getPropertyFromItem(item, props.itemProps, item);
+        if (avatarProps != null) return avatarProps;
+        if (!isObject(item)) return {
+          image: item
+        };
+        return item;
+      });
+    });
+    const overflow = computed(() => props.limit ? Math.max(props.items.length - props.limit, 0) : 0);
+    const overflowText = computed(() => props.overflowText ?? (overflow.value ? `+${overflow.value}` : ''));
+    const overflowItem = () => slots.overflow?.({
+      overflow: overflow.value
+    }) ?? _createVNode(VAvatar, {
+      "class": "v-avatar-group__overflow",
+      "text": overflowText.value
+    }, null);
+    useRender(() => _createVNode(props.tag, {
+      "class": _normalizeClass(['v-avatar-group', `v-avatar-group--${props.vertical ? 'vertical' : 'horizontal'}`, {
+        'v-avatar-group--hoverable': props.hoverable,
+        'v-avatar-group--reverse': props.reverse
+      }, props.class]),
+      "style": _normalizeStyle([{
+        '--v-avatar-group-gap': convertToUnit(props.gap)
+      }, props.style])
+    }, {
+      default: () => [slots.prepend?.(), _createElementVNode("div", {
+        "class": "v-avatar-group__content"
+      }, [_createVNode(VDefaultsProvider, {
+        "defaults": {
+          VAvatar: {
+            size: props.size,
+            border: props.border
+          }
+        }
+      }, {
+        default: () => [slots.default?.() ?? _createElementVNode(_Fragment, null, [props.reverse && overflowText.value && overflowItem(), items.value.map((item, index) => slots.item?.({
+          props: item,
+          index
+        }) ?? _createVNode(VAvatar, _mergeProps({
+          "key": index
+        }, item), null)), !props.reverse && overflowText.value && overflowItem()])]
+      })]), slots.append?.()]
+    }));
+    return {};
+  }
+});
+//# sourceMappingURL=VAvatarGroup.js.map

package/lib/labs/VAvatarGroup/VAvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VAvatarGroup.js","names":["VAvatar","VDefaultsProvider","makeComponentProps","makeTagProps","computed","convertToUnit","genericComponent","getPropertyFromItem","isObject","propsFactory","useRender","makeVAvatarGroupProps","border","Boolean","Number","String","gap","hoverable","items","type","Array","default","itemProps","Function","limit","overflowText","reverse","size","vertical","VAvatarGroup","name","props","setup","_ref","slots","visibleItems","slice","orderedItems","toReversed","map","item","avatarProps","image","overflow","Math","max","length","value","overflowItem","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style","prepend","_createElementVNode","_Fragment","index","_mergeProps","append"],"sources":["../../../src/labs/VAvatarGroup/VAvatarGroup.tsx"],"sourcesContent":["// Styles\nimport './VAvatarGroup.scss'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed } from 'vue'\nimport { convertToUnit, genericComponent, getPropertyFromItem, isObject, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { SelectItemKey } from '@/util'\n\nexport type AvatarGroupItem = string | Record<string, any>\n\nexport type VAvatarGroupSlots = {\n  default: never\n  prepend: never\n  append: never\n  item: { props: any, index: number }\n  overflow: { overflow: number }\n}\n\nexport const makeVAvatarGroupProps = propsFactory({\n  border: [Boolean, Number, String],\n  gap: [Number, String],\n  hoverable: Boolean,\n  items: {\n    type: Array as PropType<AvatarGroupItem[]>,\n    default: () => ([]),\n  },\n  itemProps: {\n    type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n    default: null,\n  },\n  limit: Number,\n  overflowText: String,\n  reverse: Boolean,\n  size: [Number, String],\n  vertical: Boolean,\n\n  ...makeComponentProps(),\n  ...makeTagProps(),\n}, 'VAvatarGroup')\n\nexport const VAvatarGroup = genericComponent<VAvatarGroupSlots>()({\n  name: 'VAvatarGroup',\n\n  props: makeVAvatarGroupProps(),\n\n  setup (props, { slots }) {\n    const items = computed(() => {\n      const visibleItems = props.limit\n        ? props.items.slice(0, props.limit)\n        : props.items\n\n      const orderedItems = props.reverse\n        ? visibleItems.toReversed()\n        : visibleItems\n\n      return orderedItems.map(item => {\n        const avatarProps = props.itemProps === true\n          ? (isObject(item) ? item : { image: item })\n          : getPropertyFromItem(item, props.itemProps, item)\n\n        if (avatarProps != null) return avatarProps\n\n        if (!isObject(item)) return { image: item }\n\n        return item\n      })\n    })\n\n    const overflow = computed(() => props.limit ? Math.max(props.items.length - props.limit, 0) : 0)\n    const overflowText = computed(() => props.overflowText ?? (overflow.value ? `+${overflow.value}` : ''))\n\n    const overflowItem = () => (\n      slots.overflow?.({ overflow: overflow.value }) ?? (\n        <VAvatar class=\"v-avatar-group__overflow\" text={ overflowText.value } />\n      )\n    )\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar-group',\n          `v-avatar-group--${props.vertical ? 'vertical' : 'horizontal'}`,\n          {\n            'v-avatar-group--hoverable': props.hoverable,\n            'v-avatar-group--reverse': props.reverse,\n          },\n          props.class,\n        ]}\n        style={[\n          { '--v-avatar-group-gap': convertToUnit(props.gap) },\n          props.style,\n        ]}\n      >\n        { slots.prepend?.() }\n\n        <div class=\"v-avatar-group__content\">\n          <VDefaultsProvider\n            defaults={{\n              VAvatar: {\n                size: props.size,\n                border: props.border,\n              },\n            }}\n          >\n            { slots.default?.() ?? (\n              <>\n                { props.reverse && overflowText.value && overflowItem() }\n                { items.value.map((item, index) => (\n                  slots.item?.({ props: item, index }) ?? (\n                    <VAvatar\n                      key={ index }\n                      { ...item }\n                    />\n                  )\n                ))}\n                { !props.reverse && overflowText.value && overflowItem() }\n              </>\n            )}\n          </VDefaultsProvider>\n        </div>\n\n        { slots.append?.() }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatarGroup = InstanceType<typeof VAvatarGroup>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VAvatarGroup/VAvatarGroup.scss

@@ -0,0 +1,79 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+@use './variables' as *;
+
+@include tools.layer('components') {
+  .v-avatar-group {
+    display: inline-flex;
+    align-items: center;
+    gap: $avatar-group-container-gap;
+
+    &--hoverable {
+      .v-avatar {
+        cursor: pointer;
+        transition: transform 0.25s settings.$standard-easing;
+
+        &:hover {
+          transform: $avatar-group-hoverable-horizontal-transform;
+        }
+      }
+
+      &.v-avatar-group--vertical .v-avatar:hover {
+        transform: $avatar-group-hoverable-vertical-transform;
+      }
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+    }
+
+    .v-avatar-group__overflow {
+      background: $avatar-group-overflow-background;
+      color: $avatar-group-overflow-color;
+    }
+
+    &--horizontal {
+      .v-avatar:not(:first-child) {
+        margin-inline-start: var(--v-avatar-group-gap, $avatar-group-gap);
+      }
+
+      &.v-avatar-group--reverse {
+        .v-avatar-group__content {
+          flex-direction: row-reverse;
+        }
+
+        /* upgrade someday: https://caniuse.com/wf-sibling-count */
+        // .v-avatar {
+        //   z-index: calc(99 - sibling-index());
+        // }
+
+        .v-avatar:not(:first-child) {
+          margin-inline-start: 0;
+          margin-inline-end: var(--v-avatar-group-gap, $avatar-group-gap);
+        }
+      }
+    }
+
+    &--vertical {
+      .v-avatar-group__content {
+        flex-direction: column;
+      }
+
+      .v-avatar:not(:first-child) {
+        margin-block-start: var(--v-avatar-group-gap, $avatar-group-gap);
+      }
+
+      &.v-avatar-group--reverse {
+        .v-avatar-group__content {
+          flex-direction: column-reverse;
+        }
+
+        .v-avatar:not(:first-child) {
+          margin-block-start: 0;
+          margin-block-end: var(--v-avatar-group-gap, $avatar-group-gap);
+        }
+      }
+    }
+  }
+}

package/lib/labs/VAvatarGroup/_variables.scss

@@ -0,0 +1,6 @@
+$avatar-group-container-gap: 8px !default;
+$avatar-group-gap: -12px !default;
+$avatar-group-hoverable-horizontal-transform: translateY(-8px) !default;
+$avatar-group-hoverable-vertical-transform: translateX(8px) !default;
+$avatar-group-overflow-background: rgb(var(--v-theme-surface-light)) !default;
+$avatar-group-overflow-color: rgb(var(--v-theme-on-surface-light)) !default;

package/lib/labs/VAvatarGroup/index.d.ts

@@ -0,0 +1 @@
+export { VAvatarGroup } from './VAvatarGroup.js';

package/lib/labs/VAvatarGroup/index.js

@@ -0,0 +1,2 @@
+export { VAvatarGroup } from "./VAvatarGroup.js";
+//# sourceMappingURL=index.js.map

package/lib/labs/VAvatarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VAvatarGroup"],"sources":["../../../src/labs/VAvatarGroup/index.ts"],"sourcesContent":["export { VAvatarGroup } from './VAvatarGroup'\n"],"mappings":"SAASA,YAAY","ignoreList":[]}

package/lib/labs/components.d.ts

@@ -1,3 +1,4 @@
+export * from './VAvatarGroup/index.js';
 export * from './VColorInput/index.js';
 export * from './VCommandPalette/index.js';
 export * from './VDateInput/index.js';

package/lib/labs/components.js

@@ -1,3 +1,4 @@
+export * from "./VAvatarGroup/index.js";
 export * from "./VColorInput/index.js";
 export * from "./VCommandPalette/index.js";
 export * from "./VDateInput/index.js";

package/lib/labs/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","names":[],"sources":["../../src/labs/components.ts"],"sourcesContent":["export * from './VColorInput'\nexport * from './VCommandPalette'\nexport * from './VDateInput'\nexport * from './VFileUpload'\nexport * from './VIconBtn'\nexport * from './VMaskInput'\nexport * from './VPicker'\nexport * from './VPie'\nexport * from './VStepperVertical'\nexport * from './VPullToRefresh'\nexport * from './VVideo'\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"components.js","names":[],"sources":["../../src/labs/components.ts"],"sourcesContent":["export * from './VAvatarGroup'\nexport * from './VColorInput'\nexport * from './VCommandPalette'\nexport * from './VDateInput'\nexport * from './VFileUpload'\nexport * from './VIconBtn'\nexport * from './VMaskInput'\nexport * from './VPicker'\nexport * from './VPie'\nexport * from './VStepperVertical'\nexport * from './VPullToRefresh'\nexport * from './VVideo'\n"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/nightly",
   "description": "Vue Material Component Framework",
-  "version": "3.11.8-dev.2026-02-01",
+  "version": "3.11.8-dev.2026-02-07",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"