@inlaylab/opaline-element 1.0.0 → 1.1.1

package/README.md

@@ -20,10 +20,19 @@ npm i @inlaylab/opaline-element
 ></opaline-avatar>
 ```
 
-Attributes: `seed`, `look` (`morph`, `gradient`, `aura` or `clay`), `size`, `src`, `alt`, `palette`, `finish`, `expression`, `mood`, `face`, `family`, `backdrop`, `shape`, `body` and `ears`.
+Attributes: `seed`, `look` (`morph`, `gradient`, `aura`, `clay` or `initials`), `size`, `src`, `alt`, `palette`, `finish`, `expression`, `mood`, `face`, `family`, `backdrop`, `shape`, `body`, `ears` and `text`.
 
 With `src`, the photo shows once it loads, and a failed photo leaves the generated avatar. With `alt`, the avatar has `role="img"`; without it, it is hidden from assistive tech.
 
+Groups: wrap avatars in `<opaline-avatar-group>`. It overlaps them and shows a `+N` chip past `max`. Its `look`, `size`, `palette`, `shape` and `finish` are defaults for every child that does not set its own.
+
+```html
+<opaline-avatar-group look="clay" size="40" max="4" alt="Project members">
+  <opaline-avatar seed="ada@inlay.dev" src="/ada.jpg" alt="Ada"></opaline-avatar>
+  <opaline-avatar seed="grace@inlay.dev"></opaline-avatar>
+</opaline-avatar-group>
+```
+
 Same seed, same avatar: from 1.0, the same seed and options give a byte-identical SVG in every 1.x release.
 
 [Playground and docs](https://inlaylab.github.io/Opaline/) · [GitHub](https://github.com/Inlaylab/Opaline) · MIT for code and art.

package/dist/index.d.ts

@@ -1,3 +1,19 @@
+/**
+ * `<opaline-avatar-group max="3" look="clay">` around `<opaline-avatar>` children: overlaps them,
+ * shows at most `max`, then a `+N` chip. Children added or removed later are laid out again.
+ */
+export declare class OpalineAvatarGroup extends HTMLElement {
+  #private;
+  static observedAttributes: readonly string[];
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'opaline-avatar-group': OpalineAvatarGroup;
+  }
+}
 /** `<opaline-avatar seed="ada@inlay.dev" look="morph">`: a seeded avatar with an optional photo. */
 export declare class OpalineAvatar extends HTMLElement {
   #private;

package/dist/index.js

@@ -1,14 +1,93 @@
-import { createAvatar, escapeXml } from "@inlaylab/opaline";
+import { avatarGroup, createAvatar, escapeXml } from "@inlaylab/opaline";
 import { aura } from "@inlaylab/opaline/aura";
 import { clay } from "@inlaylab/opaline/clay";
 import { gradient } from "@inlaylab/opaline/gradient";
+import { initials } from "@inlaylab/opaline/initials";
 import { morph } from "@inlaylab/opaline/morph";
+// src/group.ts
+/** Group attributes that set a default on every child avatar that does not set its own. */
+const SHARED = [
+	"look",
+	"size",
+	"palette",
+	"shape",
+	"finish"
+];
+/**
+* `<opaline-avatar-group max="3" look="clay">` around `<opaline-avatar>` children: overlaps them,
+* shows at most `max`, then a `+N` chip. Children added or removed later are laid out again.
+*/
+var OpalineAvatarGroup = class extends HTMLElement {
+	static observedAttributes = [
+		"max",
+		"alt",
+		...SHARED
+	];
+	#observer = new MutationObserver(() => this.#layout());
+	#given = /* @__PURE__ */ new WeakMap();
+	#more;
+	connectedCallback() {
+		this.#layout();
+		this.#observer.observe(this, { childList: true });
+	}
+	disconnectedCallback() {
+		this.#observer.disconnect();
+	}
+	attributeChangedCallback() {
+		if (this.isConnected) this.#layout();
+	}
+	#layout() {
+		const get = (name) => this.getAttribute(name);
+		const n = Number(get("size"));
+		const size = Number.isFinite(n) && n > 0 ? n : 40;
+		const kids = [...this.children].filter((e) => e.localName === "opaline-avatar");
+		const g = avatarGroup(kids.map(() => 0), {
+			max: Number(get("max") ?? NaN),
+			size,
+			shape: get("shape") ?? void 0
+		});
+		kids.forEach((kid, i) => {
+			let given = this.#given.get(kid);
+			if (!given) this.#given.set(kid, given = /* @__PURE__ */ new Set());
+			for (const name of SHARED) {
+				if (kid.hasAttribute(name) && !given.has(name)) continue;
+				const v = name === "size" ? String(size) : get(name);
+				if (v === null) {
+					if (given.delete(name)) kid.removeAttribute(name);
+				} else if (kid.getAttribute(name) !== v) {
+					kid.setAttribute(name, v);
+					given.add(name);
+				} else given.add(name);
+			}
+			kid.toggleAttribute("data-opaline-member", i < g.shown.length);
+			kid.style.cssText = i >= g.shown.length ? "display:none" : i ? g.css.member : g.css.first;
+		});
+		this.setAttribute("data-opaline-group", "");
+		this.setAttribute("role", "group");
+		const alt = get("alt");
+		if (alt) this.setAttribute("aria-label", alt);
+		else this.removeAttribute("aria-label");
+		this.style.cssText = g.css.root;
+		if (g.rest) {
+			const more = this.#more ??= document.createElement("span");
+			more.setAttribute("data-opaline-more", "");
+			more.setAttribute("role", "img");
+			more.setAttribute("aria-label", `${g.rest} more`);
+			more.style.cssText = g.css.more;
+			more.textContent = `+${g.rest}`;
+			if (this.lastElementChild !== more) this.append(more);
+		} else this.#more?.remove();
+		this.#observer.takeRecords();
+	}
+};
+if (!customElements.get("opaline-avatar-group")) customElements.define("opaline-avatar-group", OpalineAvatarGroup);
 // src/index.ts
 const LOOKS = {
 	morph,
 	gradient,
 	aura,
-	clay
+	clay,
+	initials
 };
 const ATTRS = [
 	"seed",
@@ -25,7 +104,8 @@ const ATTRS = [
 	"shape",
 	"finish",
 	"body",
-	"ears"
+	"ears",
+	"text"
 ];
 const IMG_STYLE = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit";
 let count = 0;
@@ -63,7 +143,8 @@ var OpalineAvatar = class extends HTMLElement {
 			shape: get("shape"),
 			finish: get("finish"),
 			body: get("body"),
-			ears: get("ears")
+			ears: get("ears"),
+			text: get("text")
 		}).svg;
 		const a11y = alt ? `role="img" aria-label="${escapeXml(alt)}"` : "aria-hidden=\"true\"";
 		const img = src ? `<img src="${escapeXml(src)}" alt="" style="${IMG_STYLE}" hidden>` : "";
@@ -76,4 +157,4 @@ var OpalineAvatar = class extends HTMLElement {
 	}
 };
 if (!customElements.get("opaline-avatar")) customElements.define("opaline-avatar", OpalineAvatar);
-export { OpalineAvatar };
+export { OpalineAvatar, OpalineAvatarGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inlaylab/opaline-element",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "<opaline-avatar>: seeded avatars as a framework-free custom element.",
   "keywords": [
     "avatar",
@@ -39,7 +39,7 @@
     "dist"
   ],
   "dependencies": {
-    "@inlaylab/opaline": "1.0.0"
+    "@inlaylab/opaline": "1.1.1"
   },
   "devDependencies": {
     "@inlaylab/opaline-contract": "0.0.0",