@c2n/avatar 0.0.8 → 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
@@ -14,6 +14,14 @@ npm install @c2n/avatar
 <c2-avatar name="Ada Lovelace" initial-count="2"></c2-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.
@@ -21,5 +29,6 @@ npm install @c2n/avatar
 - **Status and badge**: `status="online|away|busy|offline"` draws a dot in the bottom-right corner; the `badge` slot replaces it with your own element (a count, an icon) and gets the same ring.
 - **Sizing**: one `--c2-avatar--size` token drives width, height and the font size (40% of the size by default); `--c2-avatar--width` and `--height` override it for non-square shapes.
 - **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

@@ -1,10 +1,10 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/avatar.scss?inline
-var avatar_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n  flex: none;\n}\n\n.c2-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  user-select: none;\n  line-height: 1;\n  width: var(--c2-avatar--width,var(--c2-avatar--size,32px));\n  height: var(--c2-avatar--height,var(--c2-avatar--size,32px));\n  font-size: var(--c2-avatar--font-size,calc(var(--c2-avatar--size, 32px) * 0.4));\n  font-weight: var(--c2-avatar--font-weight,600);\n  font-style: var(--c2-avatar--font-style);\n  font-family: var(--c2-avatar--font-family);\n  letter-spacing: var(--c2-avatar--letter-spacing,0.02em);\n  border-top-left-radius: var(--c2-avatar--border-top-left-radius,999px);\n  border-top-right-radius: var(--c2-avatar--border-top-right-radius,999px);\n  border-bottom-left-radius: var(--c2-avatar--border-bottom-left-radius,999px);\n  border-bottom-right-radius: var(--c2-avatar--border-bottom-right-radius,999px);\n  border-top: var(--c2-avatar--border-top);\n  border-bottom: var(--c2-avatar--border-bottom);\n  border-right: var(--c2-avatar--border-right);\n  border-left: var(--c2-avatar--border-left);\n  background: var(--c2-avatar--background,rgb(0, 122, 77));\n  color: var(--c2-avatar--color,#ffffff);\n  box-shadow: var(--c2-avatar--box-shadow);\n}\n.c2-avatar ::slotted(svg),\n.c2-avatar ::slotted(img) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--c2-avatar__image--object-fit,cover);\n}\n.c2-avatar ::slotted(svg) {\n  width: 60%;\n  height: 60%;\n}\n\n:host([auto-color]) .c2-avatar {\n  background: hsl(var(--c2-avatar--hue, 160), var(--c2-avatar__auto-color--saturation,55%), var(--c2-avatar__auto-color--lightness,42%));\n}\n\n.c2-avatar-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--c2-avatar__image--object-fit,cover);\n}\n\n.c2-avatar-badge {\n  position: absolute;\n  right: calc(-1 * var(--c2-avatar__badge--offset,0px));\n  bottom: calc(-1 * var(--c2-avatar__badge--offset,0px));\n  display: flex;\n  z-index: 1;\n  line-height: 1;\n}\n.c2-avatar-badge::slotted(*) {\n  box-sizing: border-box;\n  border: var(--c2-avatar__badge--border,2px solid #ffffff);\n  border-radius: 999px;\n}\n\n.c2-avatar-status {\n  display: block;\n  box-sizing: content-box;\n  width: var(--c2-avatar__badge--size,10px);\n  height: var(--c2-avatar__badge--size,10px);\n  border: var(--c2-avatar__badge--border,2px solid #ffffff);\n  border-radius: 999px;\n  background: var(--c2-avatar__badge__offline--color,rgb(161, 161, 170));\n}\n\n:host([status=online]) .c2-avatar-status {\n  background: var(--c2-avatar__badge__online--color,rgb(34, 197, 94));\n}\n\n:host([status=away]) .c2-avatar-status {\n  background: var(--c2-avatar__badge__away--color,rgb(245, 158, 11));\n}\n\n:host([status=busy]) .c2-avatar-status {\n  background: var(--c2-avatar__badge__busy--color,rgb(239, 68, 68));\n}";
+var avatar_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n  flex: none;\n}\n\ninput {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.c2-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  user-select: none;\n  line-height: 1;\n  width: var(--c2-avatar--width,var(--c2-avatar--size,32px));\n  height: var(--c2-avatar--height,var(--c2-avatar--size,32px));\n  font-size: var(--c2-avatar--font-size,calc(var(--c2-avatar--size, 32px) * 0.4));\n  font-weight: var(--c2-avatar--font-weight,600);\n  font-style: var(--c2-avatar--font-style);\n  font-family: var(--c2-avatar--font-family);\n  letter-spacing: var(--c2-avatar--letter-spacing,0.02em);\n  border-top-left-radius: var(--c2-avatar--border-top-left-radius,999px);\n  border-top-right-radius: var(--c2-avatar--border-top-right-radius,999px);\n  border-bottom-left-radius: var(--c2-avatar--border-bottom-left-radius,999px);\n  border-bottom-right-radius: var(--c2-avatar--border-bottom-right-radius,999px);\n  border-top: var(--c2-avatar--border-top);\n  border-bottom: var(--c2-avatar--border-bottom);\n  border-right: var(--c2-avatar--border-right);\n  border-left: var(--c2-avatar--border-left);\n  background: var(--c2-avatar--background,rgb(0, 122, 77));\n  color: var(--c2-avatar--color,#ffffff);\n  box-shadow: var(--c2-avatar--box-shadow);\n}\n.c2-avatar ::slotted(svg),\n.c2-avatar ::slotted(img) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--c2-avatar__image--object-fit,cover);\n}\n.c2-avatar ::slotted(svg) {\n  width: 60%;\n  height: 60%;\n}\n\n:host([auto-color]) .c2-avatar {\n  background: hsl(var(--c2-avatar--hue, 160), var(--c2-avatar__auto-color--saturation,55%), var(--c2-avatar__auto-color--lightness,42%));\n}\n\n.c2-avatar-image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--c2-avatar__image--object-fit,cover);\n}\n\n.avatar-trigger {\n  all: unset;\n  position: relative;\n  display: inline-flex;\n  border-radius: var(--c2-avatar--border-top-left-radius,999px) var(--c2-avatar--border-top-right-radius,999px) var(--c2-avatar--border-bottom-right-radius,999px) var(--c2-avatar--border-bottom-left-radius,999px);\n  cursor: pointer;\n}\n.avatar-trigger:focus-visible {\n  outline: var(--c2-avatar__editor__focus--outline,2px solid rgba(2, 101, 220, 0.45));\n  outline-offset: var(--c2-avatar__editor__focus--outline-offset,2px);\n}\n.avatar-trigger:disabled {\n  cursor: default;\n}\n\n.edit-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-left-radius: var(--c2-avatar--border-top-left-radius,999px);\n  border-top-right-radius: var(--c2-avatar--border-top-right-radius,999px);\n  border-bottom-left-radius: var(--c2-avatar--border-bottom-left-radius,999px);\n  border-bottom-right-radius: var(--c2-avatar--border-bottom-right-radius,999px);\n  background: var(--c2-avatar__editor--background,rgba(0, 0, 0, 0.5));\n  color: var(--c2-avatar__editor--color,#ffffff);\n  opacity: 0;\n  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.edit-overlay svg,\n.edit-overlay ::slotted(*) {\n  display: block;\n  width: var(--c2-avatar__editor-icon--size,18px);\n  height: var(--c2-avatar__editor-icon--size,18px);\n}\n\n.avatar-trigger:hover:not(:disabled) .edit-overlay,\n.avatar-trigger:focus-visible .edit-overlay {\n  opacity: 1;\n}\n\n.remove-action {\n  all: unset;\n  position: absolute;\n  z-index: 2;\n  top: -6px;\n  right: -6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-avatar__remove--size,22px);\n  height: var(--c2-avatar__remove--size,22px);\n  border: var(--c2-avatar__remove--border,1px solid #e4e4e7);\n  border-radius: 999px;\n  background: var(--c2-avatar__remove--background,#ffffff);\n  color: var(--c2-avatar__remove--color,#52525b);\n  box-shadow: var(--c2-avatar__remove--box-shadow,0 1px 3px rgba(0, 0, 0, 0.18));\n  cursor: pointer;\n}\n.remove-action:focus-visible {\n  outline: var(--c2-avatar__editor__focus--outline,2px solid rgba(2, 101, 220, 0.45));\n  outline-offset: var(--c2-avatar__editor__focus--outline-offset,2px);\n}\n.remove-action:disabled {\n  cursor: default;\n  opacity: 0.38;\n}\n.remove-action svg,\n.remove-action ::slotted(*) {\n  display: block;\n  width: 60%;\n  height: 60%;\n}\n\n.c2-avatar-badge {\n  position: absolute;\n  right: calc(-1 * var(--c2-avatar__badge--offset,0px));\n  bottom: calc(-1 * var(--c2-avatar__badge--offset,0px));\n  display: flex;\n  z-index: 1;\n  line-height: 1;\n}\n.c2-avatar-badge::slotted(*) {\n  box-sizing: border-box;\n  border: var(--c2-avatar__badge--border,2px solid #ffffff);\n  border-radius: 999px;\n}\n\n.c2-avatar-status {\n  display: block;\n  box-sizing: content-box;\n  width: var(--c2-avatar__badge--size,10px);\n  height: var(--c2-avatar__badge--size,10px);\n  border: var(--c2-avatar__badge--border,2px solid #ffffff);\n  border-radius: 999px;\n  background: var(--c2-avatar__badge__offline--color,rgb(161, 161, 170));\n}\n\n:host([status=online]) .c2-avatar-status {\n  background: var(--c2-avatar__badge__online--color,rgb(34, 197, 94));\n}\n\n:host([status=away]) .c2-avatar-status {\n  background: var(--c2-avatar__badge__away--color,rgb(245, 158, 11));\n}\n\n:host([status=busy]) .c2-avatar-status {\n  background: var(--c2-avatar__badge__busy--color,rgb(239, 68, 68));\n}";
 //#endregion
 //#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
@@ -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 {
@@ -26,7 +161,12 @@ var Avatar = class Avatar extends LitElement {
 		this.alt = void 0;
 		this.autoColor = false;
 		this.status = void 0;
+		this.editable = false;
+		this.disabled = false;
+		this.accept = "image/*";
+		this.maxSize = 0;
 		this.imageFailed = false;
+		this.previewUrl = void 0;
 	}
 	static {
 		this.styles = unsafeCSS(avatar_default);
@@ -56,14 +196,105 @@ var Avatar = class Avatar extends LitElement {
 		return (hash >>> 0) % 360;
 	}
 	willUpdate(changed) {
-		if (changed.has("src")) this.imageFailed = false;
+		if (changed.has("src")) {
+			this.imageFailed = false;
+			if (this.previewUrl) {
+				this.revokePreview();
+				this.selectedFile = void 0;
+			}
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.revokePreview();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.selectedFile && !this.previewUrl) this.previewUrl = URL.createObjectURL(this.selectedFile);
+	}
+	/** Locally selected image file, if the avatar was changed through its picker. */
+	get file() {
+		return this.selectedFile;
+	}
+	/** Opens the avatar image picker. */
+	browse() {
+		if (this.editable && !this.disabled) this.input.click();
+	}
+	/** Clears the selected preview and the current `src` image. */
+	removeImage() {
+		if (this.disabled || !this.previewUrl && !this.src) return;
+		const detail = {
+			file: this.selectedFile,
+			previousSrc: this.previewUrl ?? this.src
+		};
+		this.revokePreview();
+		this.selectedFile = void 0;
+		this.removeAttribute("src");
+		this.src = void 0;
+		this.imageFailed = false;
+		if (this.input) this.input.value = "";
+		this.dispatchEvent(new CustomEvent("avatar-remove", {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
 	}
 	handleImageError() {
 		this.imageFailed = true;
 		this.dispatchEvent(new Event("error"));
 	}
-	render() {
-		const showImage = !!this.src && !this.imageFailed;
+	handleFileChange(event) {
+		event.stopPropagation();
+		const input = event.currentTarget;
+		const file = input.files?.[0];
+		input.value = "";
+		if (!file) return;
+		const rejection = this.validateFile(file);
+		if (rejection) {
+			this.dispatchEvent(new CustomEvent("file-reject", {
+				detail: rejection,
+				bubbles: true,
+				composed: true
+			}));
+			return;
+		}
+		this.revokePreview();
+		this.selectedFile = file;
+		this.previewUrl = URL.createObjectURL(file);
+		this.imageFailed = false;
+		this.dispatchEvent(new CustomEvent("avatar-change", {
+			detail: {
+				file,
+				previewUrl: this.previewUrl
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	stopNativeInput(event) {
+		event.stopPropagation();
+	}
+	validateFile(file) {
+		const rules = this.accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+		const name = file.name.toLowerCase();
+		const type = file.type.toLowerCase();
+		if (!(rules.length === 0 || rules.some((rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule))) return {
+			file,
+			reason: "type",
+			message: `${file.name} is not an accepted image type.`
+		};
+		if (this.maxSize > 0 && file.size > this.maxSize) return {
+			file,
+			reason: "size",
+			message: `${file.name} exceeds the avatar size limit.`
+		};
+	}
+	revokePreview() {
+		if (this.previewUrl) URL.revokeObjectURL(this.previewUrl);
+		this.previewUrl = void 0;
+	}
+	renderVisual(source, interactive) {
+		const showImage = !!source && !this.imageFailed;
 		const label = this.alt ?? this.name;
 		return html`
       <div
@@ -72,18 +303,57 @@ var Avatar = class Avatar extends LitElement {
 			"has-image": showImage
 		})}
         style=${this.autoColor ? `--c2-avatar--hue: ${this.hue}` : nothing}
-        role="img"
-        aria-label=${label || nothing}
+        role=${interactive ? nothing : "img"}
+        aria-label=${interactive ? nothing : label || nothing}
+        aria-hidden=${interactive ? "true" : nothing}
       >
         ${showImage ? html`<img
                 class="c2-avatar-image"
-                src=${this.src}
-                alt=${ifDefined(this.alt ?? (this.name || void 0))}
+                src=${source}
+                alt=${interactive ? "" : ifDefined(this.alt ?? (this.name || void 0))}
                 loading="lazy"
                 @error=${this.handleImageError}
               />` : html`<slot>${this.initial}</slot>`}
       </div>
+    `;
+	}
+	render() {
+		const source = this.previewUrl ?? this.src;
+		const showImage = !!source && !this.imageFailed;
+		const subject = this.name ? `${this.name} avatar` : "avatar";
+		return html`
+      <input
+        type="file"
+        tabindex="-1"
+        .accept=${this.accept}
+        ?disabled=${!this.editable || this.disabled}
+        aria-label=${`${subject} image file`}
+        @input=${this.stopNativeInput}
+        @change=${this.handleFileChange}
+      />
+      ${this.editable ? html`<button
+              type="button"
+              class="avatar-trigger"
+              ?disabled=${this.disabled}
+              aria-label=${showImage ? `Change ${subject}` : `Upload ${subject}`}
+              @click=${this.browse}
+            >
+              ${this.renderVisual(source, true)}
+              <span class="edit-overlay" aria-hidden="true">
+                <slot name="edit-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14.5 4h-5L8 6H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3l-1.5-2z"></path>
+                    <circle cx="12" cy="13" r="3"></circle>
+                  </svg>
+                </slot>
+              </span>
+            </button>` : this.renderVisual(source, false)}
       <slot name="badge" class="c2-avatar-badge"> ${this.status ? html`<span class="c2-avatar-status" aria-label=${this.status}></span>` : nothing} </slot>
+      ${this.editable && showImage ? html`<button type="button" class="remove-action" ?disabled=${this.disabled} aria-label=${`Remove ${subject}`} @click=${this.removeImage}>
+              <slot name="remove-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"></path></svg>
+              </slot>
+            </button>` : nothing}
     `;
 	}
 };
@@ -101,7 +371,22 @@ __decorate([property({
 	attribute: "auto-color"
 })], Avatar.prototype, "autoColor", void 0);
 __decorate([property({ reflect: true })], Avatar.prototype, "status", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Avatar.prototype, "editable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Avatar.prototype, "disabled", void 0);
+__decorate([property()], Avatar.prototype, "accept", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-size"
+})], Avatar.prototype, "maxSize", void 0);
 __decorate([state()], Avatar.prototype, "imageFailed", void 0);
+__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.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/avatar.js",
   "exports": {
@@ -61,12 +61,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.8",
+    "@c2n/core": "0.0.10",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
+  "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

@@ -1,9 +1,25 @@
 import { LitElement, type PropertyValues } from 'lit';
 import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+export interface AvatarChangeDetail {
+    file: File;
+    previewUrl: string;
+}
+export interface AvatarRemoveDetail {
+    file?: File;
+    previousSrc?: string;
+}
+export interface AvatarFileRejection {
+    file: File;
+    reason: 'type' | 'size';
+    message: string;
+}
 /** Events fired by {@link Avatar}, keyed for `addEventListener`. */
 export interface AvatarEventMap {
     error: Event;
+    'avatar-change': CustomEvent<AvatarChangeDetail>;
+    'avatar-remove': CustomEvent<AvatarRemoveDetail>;
+    'file-reject': CustomEvent<AvatarFileRejection>;
 }
 export interface Avatar {
     addEventListener: TypedAddEventListener<Avatar, AvatarEventMap>;
@@ -19,8 +35,13 @@ export interface Avatar {
  *
  * @slot - Custom content shown instead of the initials (an icon, an emoji, an `<img>`).
  * @slot badge - Small element pinned to the bottom-right corner (a count, an icon). Replaces the `status` dot.
+ * @slot edit-icon - Icon shown over an editable avatar. Defaults to a camera.
+ * @slot remove-icon - Icon shown in the remove action. Defaults to a close mark.
  *
  * @event {Event} error - Fired when the `src` image fails to load; the initials are shown instead.
+ * @event {CustomEvent<AvatarChangeDetail>} avatar-change - Fired after an editable avatar accepts a local image. Upload `detail.file` and use `detail.previewUrl` for the immediate preview.
+ * @event {CustomEvent<AvatarRemoveDetail>} avatar-remove - Fired after the current local preview or `src` image is removed.
+ * @event {CustomEvent<AvatarFileRejection>} file-reject - Fired when an editable avatar rejects a file by type or size.
  *
  * @cssproperty {pixel} [--c2-avatar--size=32px]
  * @cssproperty {pixel} --c2-avatar--width - Falls back to `--c2-avatar--size`.
@@ -49,6 +70,16 @@ export interface Avatar {
  * @cssproperty {lightness} [--c2-avatar__auto-color--lightness=42%] - Lightness of the hue derived from the name.
  *
  * @cssproperty {object-fit} [--c2-avatar__image--object-fit=cover]
+ * @cssproperty {color} [--c2-avatar__editor--background=rgba(0, 0, 0, 0.5)]
+ * @cssproperty {color} [--c2-avatar__editor--color=#ffffff]
+ * @cssproperty {outline} [--c2-avatar__editor__focus--outline=2px solid rgba(2, 101, 220, 0.45)]
+ * @cssproperty {pixel} [--c2-avatar__editor__focus--outline-offset=2px]
+ * @cssproperty {pixel} [--c2-avatar__editor-icon--size=18px]
+ * @cssproperty {pixel} [--c2-avatar__remove--size=22px]
+ * @cssproperty {color} [--c2-avatar__remove--background=#ffffff]
+ * @cssproperty {color} [--c2-avatar__remove--color=#52525b]
+ * @cssproperty {border} [--c2-avatar__remove--border=1px solid #e4e4e7]
+ * @cssproperty {box-shadow} [--c2-avatar__remove--box-shadow=0 1px 3px rgba(0, 0, 0, 0.18)]
  *
  * @cssproperty {pixel} [--c2-avatar__badge--size=10px] - Diameter of the status dot; slotted badges size themselves.
  * @cssproperty {border} [--c2-avatar__badge--border=2px solid #ffffff] - Ring separating the badge from the avatar.
@@ -74,7 +105,18 @@ export declare class Avatar extends LitElement {
     autoColor: boolean;
     /** Presence dot in the bottom-right corner. */
     status: AvatarStatus | undefined;
+    /** Allows the avatar to open an image picker and exposes a remove action for the current image. */
+    editable: boolean;
+    /** Disables editable avatar actions. */
+    disabled: boolean;
+    /** Accepted image MIME types or file extensions, using native file-input syntax. */
+    accept: string;
+    /** Maximum accepted image size in bytes. Zero means unlimited. */
+    maxSize: number;
     private imageFailed;
+    private previewUrl;
+    private selectedFile;
+    private input;
     /** Accepts the pre-1.0 camelCase `initialCount="2"` attribute as well. */
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
@@ -83,7 +125,20 @@ export declare class Avatar extends LitElement {
     /** Hue (0–359) derived from the name, used by `auto-color`. */
     get hue(): number;
     willUpdate(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    /** Locally selected image file, if the avatar was changed through its picker. */
+    get file(): File | undefined;
+    /** Opens the avatar image picker. */
+    browse(): void;
+    /** Clears the selected preview and the current `src` image. */
+    removeImage(): void;
     private handleImageError;
+    private handleFileChange;
+    private stopNativeInput;
+    private validateFile;
+    private revokePreview;
+    private renderVisual;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -91,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":"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;AAIjE,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAA;CACb;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;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;IAEhE,OAAO,CAAC,WAAW,CAAQ;IAEpC,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;IAIjD,OAAO,CAAC,gBAAgB;IAKf,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/avatar.ts"],"names":[],"mappings":"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"}

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
@@ -19,7 +19,19 @@ declare module 'vue' {
       C2Props<Avatar> & {
         'initial-count'?: unknown
         'auto-color'?: unknown
+        'max-size'?: unknown
+        onAvatarRemove?: (event: AvatarEventMap['avatar-remove']) => void
         onError?: (event: AvatarEventMap['error']) => void
+        onFileReject?: (event: AvatarEventMap['file-reject']) => void
+        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
       }
     >
   }