@c2n/avatar 0.0.9 → 0.0.10

package/README.md

@@ -1,6 +1,6 @@
 # @c2n/avatar
 
-Avatar built with Lit: image, initials or any slotted content, with an optional status dot or badge.
+Avatar components built with Lit: `c2-avatar` renders an image, initials or slotted content, while `c2-avatar-group` creates a responsive overlapping stack with an automatic overflow count.
 
 ```bash
 npm install @c2n/avatar
@@ -15,6 +15,13 @@ npm install @c2n/avatar
 <c2-avatar name="Ada Lovelace" src="/ada.jpg" status="online"></c2-avatar>
 <c2-avatar name="Ada Lovelace" auto-color initial-count="2"></c2-avatar>
 <c2-avatar name="Ada Lovelace" src="/ada.jpg" editable></c2-avatar>
+
+<c2-avatar-group aria-label="Contributors" style="--c2-avatar-group--max-width: 160px">
+  <c2-avatar auto-color name="Ada Lovelace"></c2-avatar>
+  <c2-avatar auto-color name="Grace Hopper"></c2-avatar>
+  <c2-avatar auto-color name="Alan Turing"></c2-avatar>
+  <c2-avatar auto-color name="Katherine Johnson"></c2-avatar>
+</c2-avatar-group>
 ```
 
 - **Content resolution**: the `src` image first (a failed load fires `error` and falls back to the initials), then slotted content (an icon, an emoji, an `<img>`), then the initials computed from `name`. `initial-count="2"` uses the first and last word of a longer name; `initials` overrides the computation.
@@ -24,4 +31,4 @@ npm install @c2n/avatar
 - **Accessibility**: the avatar is `role="img"` labelled by `alt` or `name`.
 - **Editing**: `editable` lets the user choose, replace, and remove an image. Listen for `avatar-change` to upload its `detail.file`, and `avatar-remove` to delete the persisted image. The component immediately displays a local preview; use `accept` and `max-size` for client-side validation.
 
-Every visual aspect is a CSS custom property (`--c2-avatar--*`, `--c2-avatar__badge--*`, `--c2-avatar__image--*`). For stacked groups give each avatar `--c2-avatar--box-shadow: 0 0 0 2px <page background>` and a negative margin. The full list is in `custom-elements.json` and on the docs site.
+Every visual aspect is a CSS custom property (`--c2-avatar--*`, `--c2-avatar-group--*`, `--c2-avatar__badge--*`, `--c2-avatar__image--*`). The full list is in `custom-elements.json` and on the docs site.

package/dist/avatar.js

@@ -14,6 +14,141 @@ function __decorate(decorators, target, key, desc) {
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
 //#endregion
+//#region src/avatar-group.scss?inline
+var avatar_group_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: var(--c2-avatar-group--max-width,320px);\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.group,\nslot {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.group {\n  width: 100%;\n  overflow: hidden;\n}\n\nslot {\n  flex: none;\n  padding-inline-start: var(--c2-avatar-group--overlap,10px);\n}\n\n::slotted(c2-avatar) {\n  flex: none;\n  margin-inline-start: calc(-1 * var(--c2-avatar-group--overlap,10px));\n  --c2-avatar--box-shadow: var(--c2-avatar-group__avatar--box-shadow,0 0 0 2px #ffffff);\n}\n\n::slotted([data-c2-avatar-group-hidden]) {\n  display: none;\n}\n\n.overflow {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-avatar-group__overflow--size,32px);\n  height: var(--c2-avatar-group__overflow--size,32px);\n  margin-inline-start: calc(-1 * var(--c2-avatar-group--overlap,10px));\n  border: var(--c2-avatar-group__overflow--border,2px solid #ffffff);\n  border-radius: var(--c2-avatar-group__overflow--border-radius,999px);\n  background: var(--c2-avatar-group__overflow--background,#52525b);\n  color: var(--c2-avatar-group__overflow--color,#ffffff);\n  font-size: var(--c2-avatar-group__overflow--font-size,12px);\n  font-weight: var(--c2-avatar-group__overflow--font-weight,600);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.overflow[data-empty] {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n}";
+//#endregion
+//#region src/avatar-group.ts
+var HIDDEN_ATTRIBUTE = "data-c2-avatar-group-hidden";
+var AvatarGroup = class AvatarGroup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.maxVisible = 0;
+		this.countMode = "hidden";
+		this.ariaLabel = "Avatar group";
+		this.renderedVisibleCount = 0;
+		this.renderedTotalCount = 0;
+		this.measureFrame = 0;
+	}
+	static {
+		this.styles = unsafeCSS(avatar_group_default);
+	}
+	/** Current number of slotted avatars. */
+	get total() {
+		return this.renderedTotalCount;
+	}
+	/** Current number of visible avatars. */
+	get visible() {
+		return this.renderedVisibleCount;
+	}
+	/** Current number of avatars represented by the overflow count. */
+	get hiddenCount() {
+		return Math.max(0, this.total - this.visible);
+	}
+	firstUpdated() {
+		if (typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());
+		this.resizeObserver.observe(this);
+		this.scheduleMeasure();
+	}
+	updated(changed) {
+		if (changed.has("maxVisible")) this.scheduleMeasure();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+		cancelAnimationFrame(this.measureFrame);
+		this.avatarItems.forEach((item) => item.removeAttribute(HIDDEN_ATTRIBUTE));
+	}
+	get avatarItems() {
+		if (!this.slotElement) return [];
+		return this.slotElement.assignedElements({ flatten: true }).filter((element) => element instanceof HTMLElement && element.localName === "c2-avatar");
+	}
+	handleSlotChange() {
+		this.scheduleMeasure();
+	}
+	/** Recalculates the responsive limit after application code changes a slotted avatar's dimensions. */
+	refresh() {
+		this.scheduleMeasure();
+	}
+	scheduleMeasure() {
+		cancelAnimationFrame(this.measureFrame);
+		this.measureFrame = requestAnimationFrame(() => this.measure());
+	}
+	measure() {
+		const items = this.avatarItems;
+		items.forEach((item) => item.removeAttribute(HIDDEN_ATTRIBUTE));
+		const total = items.length;
+		const available = this.getBoundingClientRect().width;
+		if (!available || !total) {
+			this.commitCounts(total, total);
+			return;
+		}
+		const styles = getComputedStyle(this);
+		const configuredOverlap = Number.parseFloat(styles.getPropertyValue("--c2-avatar-group--overlap"));
+		const overlap = Number.isFinite(configuredOverlap) ? Math.max(0, configuredOverlap) : 10;
+		const widths = items.map((item) => item.getBoundingClientRect().width);
+		const hardLimit = this.maxVisible > 0 ? Math.min(total, Math.floor(this.maxVisible)) : total;
+		const avatarsWidth = (count) => widths.slice(0, count).reduce((sum, width) => sum + width, 0) - Math.max(0, count - 1) * overlap;
+		const allAllowedFit = hardLimit === total && avatarsWidth(total) <= available;
+		let visible = total;
+		if (!allAllowedFit) {
+			const overflow = this.renderRoot.querySelector(".overflow")?.getBoundingClientRect().width ?? 0;
+			visible = 0;
+			for (let count = 0; count <= hardLimit; count += 1) if (avatarsWidth(count) + overflow - (count > 0 ? overlap : 0) <= available) visible = count;
+			else break;
+		}
+		items.forEach((item, index) => item.toggleAttribute(HIDDEN_ATTRIBUTE, index >= visible));
+		this.commitCounts(total, visible);
+	}
+	commitCounts(total, visible) {
+		if (total === this.renderedTotalCount && visible === this.renderedVisibleCount) return;
+		this.renderedTotalCount = total;
+		this.renderedVisibleCount = visible;
+		const detail = {
+			total,
+			visible,
+			hidden: Math.max(0, total - visible)
+		};
+		this.dispatchEvent(new CustomEvent("overflow-change", {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const hidden = this.hiddenCount;
+		const count = this.countMode === "total" ? this.total : hidden;
+		const label = this.countMode === "total" ? `${this.total} avatars total` : `${hidden} more avatar${hidden === 1 ? "" : "s"}`;
+		return html`
+      <div class="group" role="group" aria-label=${this.ariaLabel || nothing}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <span
+          class="overflow"
+          part="overflow"
+          ?data-empty=${hidden === 0}
+          aria-hidden=${hidden === 0 ? "true" : nothing}
+          aria-label=${hidden ? label : nothing}
+        >
+          ${this.countMode === "hidden" ? "+" : ""}${count}
+        </span>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "max-visible"
+})], AvatarGroup.prototype, "maxVisible", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "count-mode"
+})], AvatarGroup.prototype, "countMode", void 0);
+__decorate([property({ attribute: "aria-label" })], AvatarGroup.prototype, "ariaLabel", void 0);
+__decorate([state()], AvatarGroup.prototype, "renderedVisibleCount", void 0);
+__decorate([state()], AvatarGroup.prototype, "renderedTotalCount", void 0);
+__decorate([query("slot")], AvatarGroup.prototype, "slotElement", void 0);
+AvatarGroup = __decorate([customElement("c2-avatar-group")], AvatarGroup);
+//#endregion
 //#region src/avatar.ts
 var LEGACY_COUNT_ATTRIBUTE = "initialcount";
 var Avatar = class Avatar extends LitElement {
@@ -254,4 +389,4 @@ __decorate([state()], Avatar.prototype, "previewUrl", void 0);
 __decorate([query("input", true)], Avatar.prototype, "input", void 0);
 Avatar = __decorate([customElement("c2-avatar")], Avatar);
 //#endregion
-export { Avatar };
+export { Avatar, AvatarGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/avatar",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/avatar.js",
   "exports": {
@@ -61,12 +61,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.9",
+    "@c2n/core": "0.0.10",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
+  "gitHead": "8d57710b3345fcb01cdb4cb15d2d43ba8bf21642"
 }

package/react.d.ts

@@ -8,7 +8,7 @@
 // attribute and it stringifies.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
-import type { Avatar } from '@c2n/avatar'
+import type { Avatar, AvatarGroup } from '@c2n/avatar'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
@@ -17,6 +17,7 @@ declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
       'c2-avatar': C2Props<Avatar>
+      'c2-avatar-group': C2Props<AvatarGroup>
     }
   }
 }

package/types/src/avatar-group.d.ts

@@ -0,0 +1,78 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+export type AvatarGroupCountMode = 'hidden' | 'total';
+export interface AvatarGroupOverflowDetail {
+    total: number;
+    visible: number;
+    hidden: number;
+}
+export interface AvatarGroupEventMap {
+    'overflow-change': CustomEvent<AvatarGroupOverflowDetail>;
+}
+export interface AvatarGroup {
+    addEventListener: TypedAddEventListener<AvatarGroup, AvatarGroupEventMap>;
+    removeEventListener: TypedRemoveEventListener<AvatarGroup, AvatarGroupEventMap>;
+}
+/**
+ * Responsive stack of `c2-avatar` elements. It observes its rendered width and each avatar's actual size, then hides
+ * the avatars that no longer fit and replaces them with a count. The host fills the available inline space up to
+ * `--c2-avatar-group--max-width`, so it also reacts when its parent becomes narrower.
+ *
+ * @tag c2-avatar-group
+ *
+ * @slotcomponent c2-avatar
+ *
+ * @slot - `c2-avatar` elements displayed in source order.
+ *
+ * @event {CustomEvent<AvatarGroupOverflowDetail>} overflow-change - Fired when resizing changes the visible or hidden counts.
+ *
+ * @csspart overflow - Count shown after the visible avatars.
+ *
+ * @cssproperty {pixel} [--c2-avatar-group--max-width=320px] - Maximum responsive width of the group.
+ * @cssproperty {pixel} [--c2-avatar-group--overlap=10px] - Amount that adjacent avatars overlap.
+ * @cssproperty {box-shadow} [--c2-avatar-group__avatar--box-shadow=0 0 0 2px #ffffff] - Ring applied to slotted avatars so overlaps stay distinct.
+ * @cssproperty {pixel} [--c2-avatar-group__overflow--size=32px] - Width and height of the overflow count.
+ * @cssproperty {color} [--c2-avatar-group__overflow--background=#52525b] - Overflow count background.
+ * @cssproperty {color} [--c2-avatar-group__overflow--color=#ffffff] - Overflow count text colour.
+ * @cssproperty {border} [--c2-avatar-group__overflow--border=2px solid #ffffff] - Ring around the overflow count.
+ * @cssproperty {border-radius} [--c2-avatar-group__overflow--border-radius=999px] - Overflow count corner radius.
+ * @cssproperty {font-size} [--c2-avatar-group__overflow--font-size=12px] - Overflow count text size.
+ * @cssproperty {font-weight} [--c2-avatar-group__overflow--font-weight=600] - Overflow count text weight.
+ */
+export declare class AvatarGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Optional hard cap in addition to the automatically calculated responsive limit. Zero means no hard cap. */
+    maxVisible: number;
+    /** Whether the overflow indicator shows `+hidden` or the total number of avatars. */
+    countMode: AvatarGroupCountMode;
+    /** Accessible name for the group. */
+    ariaLabel: string;
+    private renderedVisibleCount;
+    private renderedTotalCount;
+    private slotElement;
+    private resizeObserver?;
+    private measureFrame;
+    /** Current number of slotted avatars. */
+    get total(): number;
+    /** Current number of visible avatars. */
+    get visible(): number;
+    /** Current number of avatars represented by the overflow count. */
+    get hiddenCount(): number;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private get avatarItems();
+    private handleSlotChange;
+    /** Recalculates the responsive limit after application code changes a slotted avatar's dimensions. */
+    refresh(): void;
+    private scheduleMeasure;
+    private measure;
+    private commitCounts;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-avatar-group': AvatarGroup;
+    }
+}
+//# sourceMappingURL=avatar-group.d.ts.map

package/types/src/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAGhG,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAErD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,WAAW,CAAC,yBAAyB,CAAC,CAAA;CAC1D;AAED,MAAM,WAAW,WAAW;IAC1B,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;IACzE,mBAAmB,EAAE,wBAAwB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;CAChF;AAID;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAE1C,8GAA8G;IACxD,UAAU,SAAI;IAEpE,qFAAqF;IAC/B,SAAS,EAAE,oBAAoB,CAAW;IAEhG,qCAAqC;IACW,SAAS,SAAiB;IAEjE,OAAO,CAAC,oBAAoB,CAAI;IAChC,OAAO,CAAC,kBAAkB,CAAI;IACxB,OAAO,CAAC,WAAW,CAAkB;IAEpD,OAAO,CAAC,cAAc,CAAC,CAAgB;IACvC,OAAO,CAAC,YAAY,CAAI;IAExB,yCAAyC;IACzC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,yCAAyC;IACzC,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,mEAAmE;IACnE,IAAI,WAAW,IAAI,MAAM,CAExB;cAEkB,YAAY,IAAI,IAAI;cAOpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAItD,oBAAoB,IAAI,IAAI;IAOrC,OAAO,KAAK,WAAW,GAKtB;IAED,OAAO,CAAC,gBAAgB;IAIxB,sGAAsG;IACtG,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,OAAO;IAkCf,OAAO,CAAC,YAAY;IAQX,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}

package/types/src/avatar.d.ts

@@ -146,4 +146,5 @@ declare global {
         'c2-avatar': Avatar;
     }
 }
+export { AvatarGroup, type AvatarGroupCountMode, type AvatarGroupOverflowDetail } from './avatar-group';
 //# sourceMappingURL=avatar.d.ts.map

package/types/src/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/avatar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAKhG,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,OAAO,EAAE,MAAM,CAAA;CAChB;AAID,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAA;IACZ,eAAe,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAA;IAChD,eAAe,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAA;IAChD,aAAa,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAA;CAChD;AAED,MAAM,WAAW,MAAM;IACrB,gBAAgB,EAAE,qBAAqB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IAC/D,mBAAmB,EAAE,wBAAwB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1C,wFAAwF;IAC5E,IAAI,SAAK;IAErB,8GAA8G;IACtD,YAAY,SAAI;IAExE,kEAAkE;IACtD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAY;IAEpD,0EAA0E;IAC9D,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAE/C,0CAA0C;IAC9B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAE/C,0EAA0E;IACL,SAAS,UAAQ;IAEtF,+CAA+C;IAClB,MAAM,EAAE,YAAY,GAAG,SAAS,CAAY;IAEzE,mGAAmG;IACvD,QAAQ,UAAQ;IAE5D,wCAAwC;IACI,QAAQ,UAAQ;IAE5D,oFAAoF;IACxE,MAAM,SAAY;IAE9B,kEAAkE;IACf,OAAO,SAAI;IAErD,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,UAAU,CAAgC;IAC3D,OAAO,CAAC,YAAY,CAAkB;IAChB,OAAO,CAAC,KAAK,CAAmB;IAEtD,0EAA0E;IAC1E,WAAoB,kBAAkB,aAErC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAQxF,gEAAgE;IAChE,IAAI,OAAO,IAAI,MAAM,CASpB;IAED,+DAA+D;IAC/D,IAAI,GAAG,IAAI,MAAM,CAKhB;IAEQ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAUxC,oBAAoB,IAAI,IAAI;IAK5B,iBAAiB,IAAI,IAAI;IAKlC,iFAAiF;IACjF,IAAI,IAAI,IAAI,IAAI,GAAG,SAAS,CAE3B;IAED,qCAAqC;IACrC,MAAM,IAAI,IAAI;IAId,+DAA+D;IAC/D,WAAW,IAAI,IAAI;IAYnB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IA0BX,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,gBAAgB,CAAA"}

package/vue.d.ts

@@ -8,7 +8,7 @@
 // nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
 
 import type { DefineComponent, HTMLAttributes } from 'vue'
-import type { Avatar, AvatarEventMap } from '@c2n/avatar'
+import type { Avatar, AvatarEventMap, AvatarGroup, AvatarGroupEventMap } from '@c2n/avatar'
 
 /** The element's own public properties, plus every attribute Vue understands on a host element. */
 type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
@@ -26,6 +26,14 @@ declare module 'vue' {
         onAvatarChange?: (event: AvatarEventMap['avatar-change']) => void
       }
     >
+    'c2-avatar-group': DefineComponent<
+      C2Props<AvatarGroup> & {
+        'max-visible'?: unknown
+        'count-mode'?: unknown
+        'aria-label'?: unknown
+        onOverflowChange?: (event: AvatarGroupEventMap['overflow-change']) => void
+      }
+    >
   }
 }