@c2n/avatar 0.0.7 → 0.0.9

package/README.md

@@ -14,6 +14,7 @@ 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>
 ```
 
 - **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 +22,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.

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) {
@@ -26,7 +26,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 +61,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 +168,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 +236,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 };

package/package.json

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

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 {

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

@@ -19,7 +19,11 @@ 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
       }
     >
   }