@waggylabs/yumekit 0.4.3-beta.44 → 0.4.3-beta.46

package/CHANGELOG.md

@@ -46,6 +46,10 @@ Delete any empty sections before publishing.
 - `y-tabs`: `leftIcon` and `rightIcon` properties on option objects — set a `<y-icon>` name directly in the options JSON to render icons without requiring extra child elements or named slots.
 - `y-tabs`: `tab-content-{id}` slot — place any content (icons, badges, custom markup) inside the tab button itself by targeting this slot. Takes full precedence over `leftIcon`/`rightIcon` and the default label rendering.
 
+### Fixed
+
+- `y-dialog`, `y-drawer`, `y-menu`: anchor lookup now tolerates DOM insertion races. Previously, setting the `anchor` attribute before the anchor element was in the DOM (common with React portals and async / lazy mounts) left the component without a click listener. Resolution now tries `getElementById` synchronously, retries once on the next animation frame, and falls back to a `MutationObserver` that fires when the anchor appears. `y-dialog` also now cleans up its anchor listener on disconnect.
+
 ### Deprecated
 
 - `y-tabs`: `left-icon-{id}` and `right-icon-{id}` slots — these slots still function but emit a `console.warn` directing users to the `leftIcon`/`rightIcon` option properties or the `tab-content-{id}` slot. They will be removed before the release of version 1.0.

package/dist/components/y-appbar.js

@@ -1,4 +1,4 @@
-import { contrastTextColor } from '../../modules/helpers.js';
+import { contrastTextColor, resolveAnchor } from '../../modules/helpers.js';
 import { getIcon } from '../../icons/registry.js';
 
 class YumeButton extends HTMLElement {
@@ -1100,19 +1100,24 @@ class YumeMenu extends HTMLElement {
 
     _setupAnchor() {
         const id = this.anchor;
-        if (id) {
-            const root = this.getRootNode();
-            const el = root?.getElementById
-                ? root.getElementById(id)
-                : document.getElementById(id);
-            if (el) {
+        if (!id) return;
+        const root = this.getRootNode();
+        this._anchorResolveDispose = resolveAnchor(
+            this,
+            id,
+            (el) => {
                 this._anchorEl = el;
-                this._anchorEl.addEventListener("click", this._onAnchorClick);
-            }
-        }
+                el.addEventListener("click", this._onAnchorClick);
+            },
+            root && root.getElementById ? root : document,
+        );
     }
 
     _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
             this._anchorEl = null;

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

@@ -1,40 +1 @@
-declare class YumeDialog extends HTMLElement {
-    static get observedAttributes(): string[];
-    _onKeyDown(e: any): void;
-    _onAnchorClick(): void;
-    connectedCallback(): void;
-    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    set animate(val: boolean);
-    /** Whether the dialog uses an entrance animation. */
-    get animate(): boolean;
-    set anchor(id: string);
-    /** The id of the element that toggles this dialog on click. */
-    get anchor(): string;
-    set closable(val: boolean);
-    /** Whether the dialog renders a close button in the header. */
-    get closable(): boolean;
-    set position(val: string);
-    /** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
-    get position(): string;
-    set showBackdrop(val: boolean);
-    /** Whether to apply a blurred backdrop behind the dialog. */
-    get showBackdrop(): boolean;
-    set visible(val: boolean);
-    /** Whether the dialog is currently displayed. */
-    get visible(): boolean;
-    /** Closes the dialog. */
-    hide(): void;
-    /** Rebuilds the shadow DOM. */
-    render(): void;
-    /** Opens the dialog and focuses it. */
-    show(): void;
-    _buildCloseButton(): HTMLElement;
-    _buildDialog(): HTMLDivElement;
-    _buildHeader(): HTMLDivElement;
-    _buildSection(slotName: any, partName: any): HTMLDivElement;
-    _buildStyles(): HTMLStyleElement;
-    _focusDialog(): void;
-    _hideIfEmpty(wrapper: any): void;
-    _setupAnchor(): void;
-    _anchorEl: HTMLElement;
-}
+export {};

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

@@ -1,40 +1 @@
-declare class YumeDialog extends HTMLElement {
-    static get observedAttributes(): string[];
-    _onKeyDown(e: any): void;
-    _onAnchorClick(): void;
-    connectedCallback(): void;
-    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    set animate(val: boolean);
-    /** Whether the dialog uses an entrance animation. */
-    get animate(): boolean;
-    set anchor(id: string);
-    /** The id of the element that toggles this dialog on click. */
-    get anchor(): string;
-    set closable(val: boolean);
-    /** Whether the dialog renders a close button in the header. */
-    get closable(): boolean;
-    set position(val: string);
-    /** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
-    get position(): string;
-    set showBackdrop(val: boolean);
-    /** Whether to apply a blurred backdrop behind the dialog. */
-    get showBackdrop(): boolean;
-    set visible(val: boolean);
-    /** Whether the dialog is currently displayed. */
-    get visible(): boolean;
-    /** Closes the dialog. */
-    hide(): void;
-    /** Rebuilds the shadow DOM. */
-    render(): void;
-    /** Opens the dialog and focuses it. */
-    show(): void;
-    _buildCloseButton(): HTMLElement;
-    _buildDialog(): HTMLDivElement;
-    _buildHeader(): HTMLDivElement;
-    _buildSection(slotName: any, partName: any): HTMLDivElement;
-    _buildStyles(): HTMLStyleElement;
-    _focusDialog(): void;
-    _hideIfEmpty(wrapper: any): void;
-    _setupAnchor(): void;
-    _anchorEl: HTMLElement;
-}
+export {};

package/dist/components/y-dialog.js

@@ -1,3 +1,5 @@
+import { resolveAnchor } from '../../modules/helpers.js';
+
 class YumeDialog extends HTMLElement {
     static get observedAttributes() {
         return ["visible", "anchor", "closable", "show-backdrop", "animate", "position"];
@@ -20,10 +22,17 @@ class YumeDialog extends HTMLElement {
         if (this.visible) this.show();
     }
 
+    disconnectedCallback() {
+        this._teardownAnchor();
+    }
+
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
         if (name === "visible") this.visible ? this.show() : this.hide();
-        if (name === "anchor") this._setupAnchor();
+        if (name === "anchor") {
+            this._teardownAnchor();
+            this._setupAnchor();
+        }
         if (name === "closable") this.render();
     }
 
@@ -259,15 +268,22 @@ class YumeDialog extends HTMLElement {
     }
 
     _setupAnchor() {
+        const id = this.anchor;
+        if (!id) return;
+        this._anchorResolveDispose = resolveAnchor(this, id, (el) => {
+            this._anchorEl = el;
+            el.addEventListener("click", this._onAnchorClick);
+        });
+    }
+
+    _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
-        }
-        if (this.anchor) {
-            const el = document.getElementById(this.anchor);
-            if (el) {
-                this._anchorEl = el;
-                el.addEventListener("click", this._onAnchorClick);
-            }
+            this._anchorEl = null;
         }
     }
 }

package/dist/components/y-drawer.js

@@ -1,3 +1,5 @@
+import { resolveAnchor } from '../../modules/helpers.js';
+
 var ellipsisV = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n  <circle cx=\"12\" cy=\"5\" r=\"1.5\"/>\n  <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n  <circle cx=\"12\" cy=\"19\" r=\"1.5\"/>\n</svg>\n";
 
 var ellipsisH = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n  <circle cx=\"5\" cy=\"12\" r=\"1.5\"/>\n  <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n  <circle cx=\"19\" cy=\"12\" r=\"1.5\"/>\n</svg>\n";
@@ -427,13 +429,11 @@ class YumeDrawer extends HTMLElement {
 
     _setupAnchor() {
         const id = this.anchor;
-        if (id) {
-            const el = document.getElementById(id);
-            if (el) {
-                this._anchorEl = el;
-                this._anchorEl.addEventListener("click", this._onAnchorClick);
-            }
-        }
+        if (!id) return;
+        this._anchorResolveDispose = resolveAnchor(this, id, (el) => {
+            this._anchorEl = el;
+            el.addEventListener("click", this._onAnchorClick);
+        });
     }
 
     _show() {
@@ -453,6 +453,10 @@ class YumeDrawer extends HTMLElement {
     }
 
     _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
             this._anchorEl = null;

package/dist/components/y-menu.js

@@ -1,3 +1,5 @@
+import { resolveAnchor } from '../../modules/helpers.js';
+
 var chevronRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"9 18 15 12 9 6\"/>\n</svg>\n";
 
 class YumeMenu extends HTMLElement {
@@ -308,19 +310,24 @@ class YumeMenu extends HTMLElement {
 
     _setupAnchor() {
         const id = this.anchor;
-        if (id) {
-            const root = this.getRootNode();
-            const el = root?.getElementById
-                ? root.getElementById(id)
-                : document.getElementById(id);
-            if (el) {
+        if (!id) return;
+        const root = this.getRootNode();
+        this._anchorResolveDispose = resolveAnchor(
+            this,
+            id,
+            (el) => {
                 this._anchorEl = el;
-                this._anchorEl.addEventListener("click", this._onAnchorClick);
-            }
-        }
+                el.addEventListener("click", this._onAnchorClick);
+            },
+            root && root.getElementById ? root : document,
+        );
     }
 
     _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
             this._anchorEl = null;

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

@@ -27,7 +27,10 @@ export class YumeStack extends HTMLElement {
     /** Main-axis distribution (flex mode only). */
     get justify(): string;
     set responsive(val: boolean);
-    /** Auto-reduce columns at narrow viewports. */
+    /**
+     * Auto-reduce columns at narrow container widths. Defaults to `true`;
+     * set `responsive="false"` to disable.
+     */
     get responsive(): boolean;
     render(): void;
     _container: Element;

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

@@ -27,7 +27,10 @@ export class YumeStack extends HTMLElement {
     /** Main-axis distribution (flex mode only). */
     get justify(): string;
     set responsive(val: boolean);
-    /** Auto-reduce columns at narrow viewports. */
+    /**
+     * Auto-reduce columns at narrow container widths. Defaults to `true`;
+     * set `responsive="false"` to disable.
+     */
     get responsive(): boolean;
     render(): void;
     _container: Element;

package/dist/components/y-stack.js

@@ -110,13 +110,19 @@ class YumeStack extends HTMLElement {
         this.setAttribute("justify", val);
     }
 
-    /** Auto-reduce columns at narrow viewports. */
+    /**
+     * Auto-reduce columns at narrow container widths. Defaults to `true`;
+     * set `responsive="false"` to disable.
+     */
     get responsive() {
-        return this.hasAttribute("responsive");
+        return this.getAttribute("responsive") !== "false";
     }
     set responsive(val) {
-        if (val) this.setAttribute("responsive", "");
-        else this.removeAttribute("responsive");
+        if (val === false || val === "false") {
+            this.setAttribute("responsive", "false");
+        } else {
+            this.removeAttribute("responsive");
+        }
     }
 
     // -------------------------------------------------------------------------

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/y-color/y-color.js";
 export * from "./components/y-colorpicker/y-colorpicker.js";
 export * from "./components/y-date/y-date.js";
 export * from "./components/y-datepicker/y-datepicker.js";
+export * from "./components/y-dialog/y-dialog.js";
 export * from "./components/y-drawer/y-drawer.js";
 export * from "./components/y-dock/y-dock.js";
 export * from "./components/y-gallery/y-gallery.js";

package/dist/index.js

@@ -810,6 +810,64 @@ function manageLabelVisibility(labelWrapper) {
     });
 }
 
+/**
+ * Resolve an anchor element by id for a web component, tolerating DOM insertion
+ * races. A synchronous lookup runs first; if it misses, one
+ * `requestAnimationFrame` retry covers the common React portal commit-ordering
+ * case, and a final `MutationObserver` fallback covers async / lazy mounts.
+ *
+ * The callback fires at most once. If the host disconnects before the anchor
+ * appears, resolution is aborted. Callers must invoke the returned dispose
+ * function on teardown (disconnectedCallback, attribute change, etc.) to
+ * cancel any pending rAF or observer.
+ *
+ * @param {HTMLElement} host — component instance; resolution aborts if it disconnects.
+ * @param {string} id — the anchor element's id.
+ * @param {(el: HTMLElement) => void} onFound — invoked once when the anchor resolves.
+ * @param {Document|ShadowRoot} [root=document] — root to search within.
+ * @returns {() => void} — dispose function.
+ */
+function resolveAnchor(host, id, onFound, root = document) {
+    let disposed = false;
+    let rafId = null;
+    let observer = null;
+
+    const dispose = () => {
+        disposed = true;
+        if (rafId != null) cancelAnimationFrame(rafId);
+        if (observer) observer.disconnect();
+        rafId = null;
+        observer = null;
+    };
+
+    const find = () => {
+        if (disposed) return true;
+        const el = root.getElementById
+            ? root.getElementById(id)
+            : document.getElementById(id);
+        if (el) {
+            dispose();
+            onFound(el);
+            return true;
+        }
+        return false;
+    };
+
+    if (find()) return dispose;
+    if (!host.isConnected) return dispose;
+
+    rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (find()) return;
+        const target = root === document ? document.body : root;
+        if (!target) return;
+        observer = new MutationObserver(find);
+        observer.observe(target, { childList: true, subtree: true });
+    });
+
+    return dispose;
+}
+
 // =============================================================================
 // Slot utilities
 // =============================================================================
@@ -1931,19 +1989,24 @@ class YumeMenu extends HTMLElement {
 
     _setupAnchor() {
         const id = this.anchor;
-        if (id) {
-            const root = this.getRootNode();
-            const el = root?.getElementById
-                ? root.getElementById(id)
-                : document.getElementById(id);
-            if (el) {
+        if (!id) return;
+        const root = this.getRootNode();
+        this._anchorResolveDispose = resolveAnchor(
+            this,
+            id,
+            (el) => {
                 this._anchorEl = el;
-                this._anchorEl.addEventListener("click", this._onAnchorClick);
-            }
-        }
+                el.addEventListener("click", this._onAnchorClick);
+            },
+            root && root.getElementById ? root : document,
+        );
     }
 
     _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
             this._anchorEl = null;
@@ -9725,10 +9788,17 @@ class YumeDialog extends HTMLElement {
         if (this.visible) this.show();
     }
 
+    disconnectedCallback() {
+        this._teardownAnchor();
+    }
+
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
         if (name === "visible") this.visible ? this.show() : this.hide();
-        if (name === "anchor") this._setupAnchor();
+        if (name === "anchor") {
+            this._teardownAnchor();
+            this._setupAnchor();
+        }
         if (name === "closable") this.render();
     }
 
@@ -9964,15 +10034,22 @@ class YumeDialog extends HTMLElement {
     }
 
     _setupAnchor() {
+        const id = this.anchor;
+        if (!id) return;
+        this._anchorResolveDispose = resolveAnchor(this, id, (el) => {
+            this._anchorEl = el;
+            el.addEventListener("click", this._onAnchorClick);
+        });
+    }
+
+    _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
-        }
-        if (this.anchor) {
-            const el = document.getElementById(this.anchor);
-            if (el) {
-                this._anchorEl = el;
-                el.addEventListener("click", this._onAnchorClick);
-            }
+            this._anchorEl = null;
         }
     }
 }
@@ -10406,13 +10483,11 @@ class YumeDrawer extends HTMLElement {
 
     _setupAnchor() {
         const id = this.anchor;
-        if (id) {
-            const el = document.getElementById(id);
-            if (el) {
-                this._anchorEl = el;
-                this._anchorEl.addEventListener("click", this._onAnchorClick);
-            }
-        }
+        if (!id) return;
+        this._anchorResolveDispose = resolveAnchor(this, id, (el) => {
+            this._anchorEl = el;
+            el.addEventListener("click", this._onAnchorClick);
+        });
     }
 
     _show() {
@@ -10432,6 +10507,10 @@ class YumeDrawer extends HTMLElement {
     }
 
     _teardownAnchor() {
+        if (this._anchorResolveDispose) {
+            this._anchorResolveDispose();
+            this._anchorResolveDispose = null;
+        }
         if (this._anchorEl) {
             this._anchorEl.removeEventListener("click", this._onAnchorClick);
             this._anchorEl = null;
@@ -13432,13 +13511,19 @@ class YumeStack extends HTMLElement {
         this.setAttribute("justify", val);
     }
 
-    /** Auto-reduce columns at narrow viewports. */
+    /**
+     * Auto-reduce columns at narrow container widths. Defaults to `true`;
+     * set `responsive="false"` to disable.
+     */
     get responsive() {
-        return this.hasAttribute("responsive");
+        return this.getAttribute("responsive") !== "false";
     }
     set responsive(val) {
-        if (val) this.setAttribute("responsive", "");
-        else this.removeAttribute("responsive");
+        if (val === false || val === "false") {
+            this.setAttribute("responsive", "false");
+        } else {
+            this.removeAttribute("responsive");
+        }
     }
 
     // -------------------------------------------------------------------------

package/dist/modules/helpers.d.ts

@@ -91,6 +91,24 @@ export function createElement(tag: string, attrs?: any, children?: Array<string
  * @param {HTMLElement} labelWrapper — the wrapper element containing the slot
  */
 export function manageLabelVisibility(labelWrapper: HTMLElement): void;
+/**
+ * Resolve an anchor element by id for a web component, tolerating DOM insertion
+ * races. A synchronous lookup runs first; if it misses, one
+ * `requestAnimationFrame` retry covers the common React portal commit-ordering
+ * case, and a final `MutationObserver` fallback covers async / lazy mounts.
+ *
+ * The callback fires at most once. If the host disconnects before the anchor
+ * appears, resolution is aborted. Callers must invoke the returned dispose
+ * function on teardown (disconnectedCallback, attribute change, etc.) to
+ * cancel any pending rAF or observer.
+ *
+ * @param {HTMLElement} host — component instance; resolution aborts if it disconnects.
+ * @param {string} id — the anchor element's id.
+ * @param {(el: HTMLElement) => void} onFound — invoked once when the anchor resolves.
+ * @param {Document|ShadowRoot} [root=document] — root to search within.
+ * @returns {() => void} — dispose function.
+ */
+export function resolveAnchor(host: HTMLElement, id: string, onFound: (el: HTMLElement) => void, root?: Document | ShadowRoot): () => void;
 /**
  * Resolve a CSS custom-property value to a concrete color string.
  * Reads from the given element's computed style.

package/dist/modules/helpers.js

@@ -340,6 +340,64 @@ export function manageLabelVisibility(labelWrapper) {
     });
 }
 
+/**
+ * Resolve an anchor element by id for a web component, tolerating DOM insertion
+ * races. A synchronous lookup runs first; if it misses, one
+ * `requestAnimationFrame` retry covers the common React portal commit-ordering
+ * case, and a final `MutationObserver` fallback covers async / lazy mounts.
+ *
+ * The callback fires at most once. If the host disconnects before the anchor
+ * appears, resolution is aborted. Callers must invoke the returned dispose
+ * function on teardown (disconnectedCallback, attribute change, etc.) to
+ * cancel any pending rAF or observer.
+ *
+ * @param {HTMLElement} host — component instance; resolution aborts if it disconnects.
+ * @param {string} id — the anchor element's id.
+ * @param {(el: HTMLElement) => void} onFound — invoked once when the anchor resolves.
+ * @param {Document|ShadowRoot} [root=document] — root to search within.
+ * @returns {() => void} — dispose function.
+ */
+export function resolveAnchor(host, id, onFound, root = document) {
+    let disposed = false;
+    let rafId = null;
+    let observer = null;
+
+    const dispose = () => {
+        disposed = true;
+        if (rafId != null) cancelAnimationFrame(rafId);
+        if (observer) observer.disconnect();
+        rafId = null;
+        observer = null;
+    };
+
+    const find = () => {
+        if (disposed) return true;
+        const el = root.getElementById
+            ? root.getElementById(id)
+            : document.getElementById(id);
+        if (el) {
+            dispose();
+            onFound(el);
+            return true;
+        }
+        return false;
+    };
+
+    if (find()) return dispose;
+    if (!host.isConnected) return dispose;
+
+    rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (find()) return;
+        const target = root === document ? document.body : root;
+        if (!target) return;
+        observer = new MutationObserver(find);
+        observer.observe(target, { childList: true, subtree: true });
+    });
+
+    return dispose;
+}
+
 /**
  * Resolve a CSS custom-property value to a concrete color string.
  * Reads from the given element's computed style.