@waggylabs/yumekit 0.5.0-beta.76 → 0.5.0-beta.79

package/CHANGELOG.md

@@ -53,6 +53,8 @@ Delete any empty sections before publishing.
 
 - New `y-paginator` component — page navigation control with a configurable button window.
 
+- New `y-animate` component — a declarative wrapper that applies CSS-based entrance animations to its slotted children.
+
 ### Changed
 
 - **Icon rename — `comp-*` prefix dropped.** All 26 component-illustrating icons renamed. Two resolved collisions: `comp-menu` → `droplist` and `comp-tag` → `chip`.
@@ -90,7 +92,7 @@ Delete any empty sections before publishing.
 
     | Old name   | New name               | Glyph                      |
     | ---------- | ---------------------- | -------------------------- |
-    | `ai`       | `robot`                | Microchip / CPU            |
+    | `ai`       | `robot`                | Robot Head                 |
     | `ban`      | `circle-slash`         | Circle with diagonal slash |
     | `chart`    | `waveform`             | ECG / pulse waveform       |
     | `close`    | `x`                    | × mark                     |
@@ -113,6 +115,10 @@ Delete any empty sections before publishing.
 
 - **Breaking** `y-stack`: refocused as a flexbox-only primitive. Migration: `<y-stack mode="grid" …>` → `<y-grid …>`; `<y-stack mode="masonry" …>` → `<y-masonry …>`. The `mode` and `columns` attributes and the related `--component-stack-*` variables are removed.
 
+### Fixed
+
+- `y-avatar`: when the image at `src` fails to load, the component now falls back to the initials rendering rather than displaying the browser's broken-image graphic.
+
 ### Security
 
 - **Breaking** `y-appbar` / `y-sidebar`: nav-item `icon` no longer accepts raw SVG markup — only registered icon names. Use `registerIcon` / `registerIcons` for custom glyphs.

package/dist/components/y-avatar/y-avatar.d.ts

@@ -1,5 +1,6 @@
 export class YumeAvatar extends HTMLElement {
     static get observedAttributes(): string[];
+    _imgFailed: boolean;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set alt(val: string);
     /** Initials fallback text when no src is provided (default "AN"). */
@@ -17,8 +18,8 @@ export class YumeAvatar extends HTMLElement {
     /** Image URL. When set, renders an <img> instead of initials. */
     get src(): string;
     render(): void;
-    _buildAvatar(): HTMLElement;
-    _buildStyleSheet(dimensions: any, borderRadius: any, bgColor: any, textColor: any): CSSStyleSheet;
+    _buildAvatar(showImg: any): HTMLElement;
+    _buildStyleSheet(showImg: any, dimensions: any, borderRadius: any, bgColor: any, textColor: any): CSSStyleSheet;
     _getDimensions(size: any): any;
     _getInitials(alt: any): any;
 }

package/dist/components/y-avatar-group.js

@@ -12,11 +12,14 @@ class YumeAvatar extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this._imgFailed = false;
         this.render();
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) this.render();
+        if (oldValue === newValue) return;
+        if (name === "src") this._imgFailed = false;
+        this.render();
     }
 
     // -------------------------------------------------------------------------
@@ -54,31 +57,37 @@ class YumeAvatar extends HTMLElement {
         const dimensions = this._getDimensions(this.size);
         const borderRadius = `var(--component-avatar-border-radius-${this.shape}, 9999px)`;
         const [bgColor, textColor] = getColorVarPair(this.color);
+        const showImg = !!this.src && !this._imgFailed;
 
-        this.shadowRoot.adoptedStyleSheets = [this._buildStyleSheet(dimensions, borderRadius, bgColor, textColor)];
-        this.shadowRoot.replaceChildren(this._buildAvatar());
+        this.shadowRoot.adoptedStyleSheets = [this._buildStyleSheet(showImg, dimensions, borderRadius, bgColor, textColor)];
+        this.shadowRoot.replaceChildren(this._buildAvatar(showImg));
     }
 
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
 
-    _buildAvatar() {
-        if (this.src) {
-            return createElement("img", {
+    _buildAvatar(showImg) {
+        if (showImg) {
+            const img = createElement("img", {
                 src: this.src,
                 alt: this.alt,
                 part: "avatar",
             });
+            img.addEventListener("error", () => {
+                this._imgFailed = true;
+                this.render();
+            }, { once: true });
+            return img;
         }
         return createElement("div", { class: "avatar", part: "avatar" }, [
             createElement("h5", null, [this._getInitials(this.alt)]),
         ]);
     }
 
-    _buildStyleSheet(dimensions, borderRadius, bgColor, textColor) {
+    _buildStyleSheet(showImg, dimensions, borderRadius, bgColor, textColor) {
         const sheet = new CSSStyleSheet();
-        const css = this.src
+        const css = showImg
             ? `
               :host {
                 display: inline-block;

package/dist/components/y-avatar.d.ts

@@ -1,5 +1,6 @@
 export class YumeAvatar extends HTMLElement {
     static get observedAttributes(): string[];
+    _imgFailed: boolean;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set alt(val: string);
     /** Initials fallback text when no src is provided (default "AN"). */
@@ -17,8 +18,8 @@ export class YumeAvatar extends HTMLElement {
     /** Image URL. When set, renders an <img> instead of initials. */
     get src(): string;
     render(): void;
-    _buildAvatar(): HTMLElement;
-    _buildStyleSheet(dimensions: any, borderRadius: any, bgColor: any, textColor: any): CSSStyleSheet;
+    _buildAvatar(showImg: any): HTMLElement;
+    _buildStyleSheet(showImg: any, dimensions: any, borderRadius: any, bgColor: any, textColor: any): CSSStyleSheet;
     _getDimensions(size: any): any;
     _getInitials(alt: any): any;
 }

package/dist/components/y-avatar.js

@@ -12,11 +12,14 @@ class YumeAvatar extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this._imgFailed = false;
         this.render();
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) this.render();
+        if (oldValue === newValue) return;
+        if (name === "src") this._imgFailed = false;
+        this.render();
     }
 
     // -------------------------------------------------------------------------
@@ -54,31 +57,37 @@ class YumeAvatar extends HTMLElement {
         const dimensions = this._getDimensions(this.size);
         const borderRadius = `var(--component-avatar-border-radius-${this.shape}, 9999px)`;
         const [bgColor, textColor] = getColorVarPair(this.color);
+        const showImg = !!this.src && !this._imgFailed;
 
-        this.shadowRoot.adoptedStyleSheets = [this._buildStyleSheet(dimensions, borderRadius, bgColor, textColor)];
-        this.shadowRoot.replaceChildren(this._buildAvatar());
+        this.shadowRoot.adoptedStyleSheets = [this._buildStyleSheet(showImg, dimensions, borderRadius, bgColor, textColor)];
+        this.shadowRoot.replaceChildren(this._buildAvatar(showImg));
     }
 
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
 
-    _buildAvatar() {
-        if (this.src) {
-            return createElement("img", {
+    _buildAvatar(showImg) {
+        if (showImg) {
+            const img = createElement("img", {
                 src: this.src,
                 alt: this.alt,
                 part: "avatar",
             });
+            img.addEventListener("error", () => {
+                this._imgFailed = true;
+                this.render();
+            }, { once: true });
+            return img;
         }
         return createElement("div", { class: "avatar", part: "avatar" }, [
             createElement("h5", null, [this._getInitials(this.alt)]),
         ]);
     }
 
-    _buildStyleSheet(dimensions, borderRadius, bgColor, textColor) {
+    _buildStyleSheet(showImg, dimensions, borderRadius, bgColor, textColor) {
         const sheet = new CSSStyleSheet();
-        const css = this.src
+        const css = showImg
             ? `
               :host {
                 display: inline-block;

package/dist/components/y-droplist/y-droplist.d.ts

@@ -268,6 +268,14 @@ export class YumeDroplist extends HTMLElement {
     _findListForElement(el: any): any;
     _findSwapTarget(e: any): Element;
     _flip(snapshot: any): void;
+    /**
+     * Pick the element to mount drag-time overlays (preview, float ghost) into.
+     * Prefer the nearest `<y-theme>` ancestor so the overlay inherits the theme's
+     * CSS custom properties — `y-theme` sets them as inline styles on its host,
+     * so they only cascade to descendants. Falls back to `document.body` when no
+     * `<y-theme>` is in scope.
+     */
+    _getOverlayHost(): any;
     /**
      * Returns the zero-based index at which the ghost is currently projected
      * to be inserted (counting only non-ghost children before the ghost).

package/dist/components/y-droplist.d.ts

@@ -268,6 +268,14 @@ export class YumeDroplist extends HTMLElement {
     _findListForElement(el: any): any;
     _findSwapTarget(e: any): Element;
     _flip(snapshot: any): void;
+    /**
+     * Pick the element to mount drag-time overlays (preview, float ghost) into.
+     * Prefer the nearest `<y-theme>` ancestor so the overlay inherits the theme's
+     * CSS custom properties — `y-theme` sets them as inline styles on its host,
+     * so they only cascade to descendants. Falls back to `document.body` when no
+     * `<y-theme>` is in scope.
+     */
+    _getOverlayHost(): any;
     /**
      * Returns the zero-based index at which the ghost is currently projected
      * to be inserted (counting only non-ghost children before the ghost).

package/dist/components/y-droplist.js

@@ -919,7 +919,7 @@ class YumeDroplist extends HTMLElement {
             return;
         }
 
-        document.body.appendChild(preview);
+        this._getOverlayHost().appendChild(preview);
         this._dragPreview = preview;
         _previewOwner = this;
 
@@ -1192,6 +1192,20 @@ class YumeDroplist extends HTMLElement {
         }
     }
 
+    /**
+     * Pick the element to mount drag-time overlays (preview, float ghost) into.
+     * Prefer the nearest `<y-theme>` ancestor so the overlay inherits the theme's
+     * CSS custom properties — `y-theme` sets them as inline styles on its host,
+     * so they only cascade to descendants. Falls back to `document.body` when no
+     * `<y-theme>` is in scope.
+     */
+    _getOverlayHost() {
+        // `this.closest()` is overridden as a public coordinate-lookup API on
+        // y-droplist, so reach for the native traversal via the prototype.
+        const theme = Element.prototype.closest.call(this, "y-theme");
+        return theme || document.body;
+    }
+
     /**
      * Returns the zero-based index at which the ghost is currently projected
      * to be inserted (counting only non-ghost children before the ghost).
@@ -1728,7 +1742,7 @@ class YumeDroplist extends HTMLElement {
             this._positionFloatGhost(reference);
 
             if (!this._ghost.parentNode) {
-                document.body.appendChild(this._ghost);
+                this._getOverlayHost().appendChild(this._ghost);
             }
         } else {
             if (

package/dist/components/y-gallery.js

@@ -531,8 +531,11 @@ class YumeGallery extends HTMLElement {
         });
         if (!this.dispatchEvent(event)) return;
 
-        const item_el = this.shadowRoot.querySelector(`.item[data-index="${index}"]`);
-        this._previouslyFocused = item_el?.querySelector(".item-btn") || item_el;
+        const item_el = this.shadowRoot.querySelector(
+            `.item[data-index="${index}"]`,
+        );
+        this._previouslyFocused =
+            item_el?.querySelector(".item-btn") || item_el;
         this._expandedIndex = index;
         this._showExpandedView();
         document.addEventListener("keydown", this._onKeyDown);
@@ -753,7 +756,7 @@ class YumeGallery extends HTMLElement {
         const closeBtn = this._createNavButton(
             "expand-close",
             "Close image viewer",
-            "close",
+            "x",
             "expand-close-icon",
         );
         const prevBtn = this._createNavButton(
@@ -941,14 +944,28 @@ class YumeGallery extends HTMLElement {
     }
 
     _createItemWrapper(data, index) {
-        const attrs = { class: "item", part: "item", role: "listitem", "data-index": String(index) };
-        const img = createElement("img", { src: data.src, alt: data.alt, part: "item-img", draggable: "false" });
+        const attrs = {
+            class: "item",
+            part: "item",
+            role: "listitem",
+            "data-index": String(index),
+        };
+        const img = createElement("img", {
+            src: data.src,
+            alt: data.alt,
+            part: "item-img",
+            draggable: "false",
+        });
 
         if (this.expandable) {
-            const btn = createElement("button", {
-                class: "item-btn",
-                "aria-label": `View image: ${data.alt || `Image ${index + 1}`}`,
-            }, [img]);
+            const btn = createElement(
+                "button",
+                {
+                    class: "item-btn",
+                    "aria-label": `View image: ${data.alt || `Image ${index + 1}`}`,
+                },
+                [img],
+            );
             btn.addEventListener("click", () => this.open(index));
             return createElement("div", attrs, [btn]);
         }
@@ -1020,7 +1037,9 @@ class YumeGallery extends HTMLElement {
             if (!data) return;
 
             this._items.push(data);
-            gallery.appendChild(this._createItemWrapper(data, this._items.length - 1));
+            gallery.appendChild(
+                this._createItemWrapper(data, this._items.length - 1),
+            );
         });
     }
 
@@ -1060,7 +1079,11 @@ class YumeGallery extends HTMLElement {
 
         if (gapMap[gap]) return gapMap[gap];
 
-        if (typeof CSS !== "undefined" && CSS.supports && CSS.supports("gap", gap)) {
+        if (
+            typeof CSS !== "undefined" &&
+            CSS.supports &&
+            CSS.supports("gap", gap)
+        ) {
             return gap;
         }
 

package/dist/components/y-progress.js

@@ -313,6 +313,7 @@ class YumeProgress extends HTMLElement {
     }
     set values(val) {
         if (val === null || val === undefined) this.removeAttribute("values");
+        else if (typeof val === "string") this.setAttribute("values", val);
         else this.setAttribute("values", JSON.stringify(val));
     }
 

package/dist/index.js

@@ -3690,11 +3690,14 @@ class YumeAvatar extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this._imgFailed = false;
         this.render();
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) this.render();
+        if (oldValue === newValue) return;
+        if (name === "src") this._imgFailed = false;
+        this.render();
     }
 
     // -------------------------------------------------------------------------
@@ -3732,31 +3735,37 @@ class YumeAvatar extends HTMLElement {
         const dimensions = this._getDimensions(this.size);
         const borderRadius = `var(--component-avatar-border-radius-${this.shape}, 9999px)`;
         const [bgColor, textColor] = getColorVarPair(this.color);
+        const showImg = !!this.src && !this._imgFailed;
 
-        this.shadowRoot.adoptedStyleSheets = [this._buildStyleSheet(dimensions, borderRadius, bgColor, textColor)];
-        this.shadowRoot.replaceChildren(this._buildAvatar());
+        this.shadowRoot.adoptedStyleSheets = [this._buildStyleSheet(showImg, dimensions, borderRadius, bgColor, textColor)];
+        this.shadowRoot.replaceChildren(this._buildAvatar(showImg));
     }
 
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
 
-    _buildAvatar() {
-        if (this.src) {
-            return createElement("img", {
+    _buildAvatar(showImg) {
+        if (showImg) {
+            const img = createElement("img", {
                 src: this.src,
                 alt: this.alt,
                 part: "avatar",
             });
+            img.addEventListener("error", () => {
+                this._imgFailed = true;
+                this.render();
+            }, { once: true });
+            return img;
         }
         return createElement("div", { class: "avatar", part: "avatar" }, [
             createElement("h5", null, [this._getInitials(this.alt)]),
         ]);
     }
 
-    _buildStyleSheet(dimensions, borderRadius, bgColor, textColor) {
+    _buildStyleSheet(showImg, dimensions, borderRadius, bgColor, textColor) {
         const sheet = new CSSStyleSheet();
-        const css = this.src
+        const css = showImg
             ? `
               :host {
                 display: inline-block;
@@ -13646,7 +13655,7 @@ class YumeDroplist extends HTMLElement {
             return;
         }
 
-        document.body.appendChild(preview);
+        this._getOverlayHost().appendChild(preview);
         this._dragPreview = preview;
         _previewOwner = this;
 
@@ -13919,6 +13928,20 @@ class YumeDroplist extends HTMLElement {
         }
     }
 
+    /**
+     * Pick the element to mount drag-time overlays (preview, float ghost) into.
+     * Prefer the nearest `<y-theme>` ancestor so the overlay inherits the theme's
+     * CSS custom properties — `y-theme` sets them as inline styles on its host,
+     * so they only cascade to descendants. Falls back to `document.body` when no
+     * `<y-theme>` is in scope.
+     */
+    _getOverlayHost() {
+        // `this.closest()` is overridden as a public coordinate-lookup API on
+        // y-droplist, so reach for the native traversal via the prototype.
+        const theme = Element.prototype.closest.call(this, "y-theme");
+        return theme || document.body;
+    }
+
     /**
      * Returns the zero-based index at which the ghost is currently projected
      * to be inserted (counting only non-ghost children before the ghost).
@@ -14455,7 +14478,7 @@ class YumeDroplist extends HTMLElement {
             this._positionFloatGhost(reference);
 
             if (!this._ghost.parentNode) {
-                document.body.appendChild(this._ghost);
+                this._getOverlayHost().appendChild(this._ghost);
             }
         } else {
             if (
@@ -15494,8 +15517,11 @@ class YumeGallery extends HTMLElement {
         });
         if (!this.dispatchEvent(event)) return;
 
-        const item_el = this.shadowRoot.querySelector(`.item[data-index="${index}"]`);
-        this._previouslyFocused = item_el?.querySelector(".item-btn") || item_el;
+        const item_el = this.shadowRoot.querySelector(
+            `.item[data-index="${index}"]`,
+        );
+        this._previouslyFocused =
+            item_el?.querySelector(".item-btn") || item_el;
         this._expandedIndex = index;
         this._showExpandedView();
         document.addEventListener("keydown", this._onKeyDown);
@@ -15716,7 +15742,7 @@ class YumeGallery extends HTMLElement {
         const closeBtn = this._createNavButton(
             "expand-close",
             "Close image viewer",
-            "close",
+            "x",
             "expand-close-icon",
         );
         const prevBtn = this._createNavButton(
@@ -15904,14 +15930,28 @@ class YumeGallery extends HTMLElement {
     }
 
     _createItemWrapper(data, index) {
-        const attrs = { class: "item", part: "item", role: "listitem", "data-index": String(index) };
-        const img = createElement("img", { src: data.src, alt: data.alt, part: "item-img", draggable: "false" });
+        const attrs = {
+            class: "item",
+            part: "item",
+            role: "listitem",
+            "data-index": String(index),
+        };
+        const img = createElement("img", {
+            src: data.src,
+            alt: data.alt,
+            part: "item-img",
+            draggable: "false",
+        });
 
         if (this.expandable) {
-            const btn = createElement("button", {
-                class: "item-btn",
-                "aria-label": `View image: ${data.alt || `Image ${index + 1}`}`,
-            }, [img]);
+            const btn = createElement(
+                "button",
+                {
+                    class: "item-btn",
+                    "aria-label": `View image: ${data.alt || `Image ${index + 1}`}`,
+                },
+                [img],
+            );
             btn.addEventListener("click", () => this.open(index));
             return createElement("div", attrs, [btn]);
         }
@@ -15983,7 +16023,9 @@ class YumeGallery extends HTMLElement {
             if (!data) return;
 
             this._items.push(data);
-            gallery.appendChild(this._createItemWrapper(data, this._items.length - 1));
+            gallery.appendChild(
+                this._createItemWrapper(data, this._items.length - 1),
+            );
         });
     }
 
@@ -16023,7 +16065,11 @@ class YumeGallery extends HTMLElement {
 
         if (gapMap[gap]) return gapMap[gap];
 
-        if (typeof CSS !== "undefined" && CSS.supports && CSS.supports("gap", gap)) {
+        if (
+            typeof CSS !== "undefined" &&
+            CSS.supports &&
+            CSS.supports("gap", gap)
+        ) {
             return gap;
         }
 
@@ -18523,6 +18569,7 @@ class YumeProgress extends HTMLElement {
     }
     set values(val) {
         if (val === null || val === undefined) this.removeAttribute("values");
+        else if (typeof val === "string") this.setAttribute("values", val);
         else this.setAttribute("values", JSON.stringify(val));
     }