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

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,12 @@ 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.
+
+- Orphaned CSS custom properties across several components now resolve to real design tokens instead of only their inline fallbacks. `y-dialog`, `y-banner`, `y-droplist`, `y-gallery`, `y-breadcrumbs`, `y-dock`, `y-input`, `y-progress`, `y-slider`, `y-stepper`, and `y-table` referenced `--component-*` variables that were never defined in the token pipeline; these are now themeable. Also fixed `y-gallery`'s broken `--neutral-black-translucent` fallback and stale `--y-color-*` references in the `y-droplist` stories.
+
 ### 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-dock/y-dock.d.ts

@@ -25,6 +25,7 @@ export class YumeDock extends HTMLElement {
     _buildBar(): HTMLElement;
     _buildItem(item: any): HTMLElement;
     _buildStyles(): HTMLStyleElement;
+    _getDefaultFontSize(): any;
     _handleItemClick(item: any): void;
     _setupBreakpoint(): void;
     _setupItemKeyboard(bar: any): void;

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

@@ -25,6 +25,7 @@ export class YumeDock extends HTMLElement {
     _buildBar(): HTMLElement;
     _buildItem(item: any): HTMLElement;
     _buildStyles(): HTMLStyleElement;
+    _getDefaultFontSize(): any;
     _handleItemClick(item: any): void;
     _setupBreakpoint(): void;
     _setupItemKeyboard(bar: any): void;

package/dist/components/y-dock.js

@@ -516,8 +516,7 @@ class YumeDock extends HTMLElement {
         const pos = this.position;
         const sz = this.size;
         const heightVar = `var(--component-dock-height, var(--component-dock-height-${sz}))`;
-        const fontSize =
-            sz === "small" ? "10px" : sz === "large" ? "13px" : "11px";
+        const fontSizeVar = `var(--component-dock-font-size-${sz}, ${this._getDefaultFontSize()})`;
         style.textContent = `
             :host {
                 display: block;
@@ -560,7 +559,7 @@ class YumeDock extends HTMLElement {
                 cursor: pointer;
                 color: var(--component-dock-color);
                 font-family: inherit;
-                font-size: ${fontSize};
+                font-size: ${fontSizeVar};
                 min-width: 48px;
                 outline: none;
                 transition: color 0.15s ease;
@@ -594,6 +593,11 @@ class YumeDock extends HTMLElement {
         return style;
     }
 
+    _getDefaultFontSize() {
+        const map = { small: "10px", medium: "11px", large: "13px" };
+        return map[this.size] || map.medium;
+    }
+
     _handleItemClick(item) {
         if (!item.href) return;
 

package/dist/components/y-drawer.js

@@ -185,7 +185,7 @@ class YumeDrawer extends HTMLElement {
                 position: absolute;
                 top: 0; left: 0; right: 0; bottom: 0;
                 background: rgba(0, 0, 0, 0);
-                transition: background var(--drawer-transition-duration, 0.3s) ease;
+                transition: background var(--component-drawer-transition-duration, 0.3s) ease;
             }
             .overlay.open {
                 background: rgba(0, 0, 0, 0.4);
@@ -202,14 +202,14 @@ class YumeDrawer extends HTMLElement {
                 flex-direction: column;
                 border: none;
                 border-radius: var(--component-drawer-border-radius, 0);
-                transition: transform var(--drawer-transition-duration, 0.3s) ease;
+                transition: transform var(--component-drawer-transition-duration, 0.3s) ease;
             }
 
             .drawer-panel[data-position="left"],
             .drawer-panel[data-position="right"] {
                 top: 0;
                 bottom: 0;
-                width: var(--drawer-width, 300px);
+                width: var(--component-drawer-width, 300px);
                 flex-direction: row;
             }
             .drawer-panel[data-position="left"] {
@@ -227,7 +227,7 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="bottom"] {
                 left: 0;
                 right: 0;
-                height: var(--drawer-height, 300px);
+                height: var(--component-drawer-height, 300px);
             }
             .drawer-panel[data-position="top"] {
                 top: 0;

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(
@@ -811,7 +814,7 @@ class YumeGallery extends HTMLElement {
                 content: "";
                 position: absolute;
                 inset: 0;
-                background: var(--component-gallery-thumbnail-overlay-color, var(--neutral-black-translucent, rgba(0,0,0,0.12)));
+                background: var(--component-gallery-thumbnail-overlay-color, rgba(0, 0, 0, 0.12));
                 opacity: 0;
                 transition: opacity 0.2s ease;
                 pointer-events: none;
@@ -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));
     }