@waggylabs/yumekit 0.4.3 → 0.4.4

package/dist/components/y-menu.js

@@ -1,6 +1,221 @@
-import { resolveAnchor } from '../../modules/helpers.js';
+import { createElement, resolveAnchor } from '../../modules/helpers.js';
+import { getIcon } from '../../icons/registry.js';
+
+// Allowlist-based SVG sanitizer — only known-safe elements and attributes are kept.
+const ALLOWED_ELEMENTS = new Set([
+    "svg", "g", "path", "circle", "ellipse", "rect", "line", "polyline",
+    "polygon", "text", "tspan", "defs", "clippath", "mask", "lineargradient",
+    "radialgradient", "stop", "symbol", "title", "desc", "metadata",
+]);
+
+const ALLOWED_ATTRS = new Set([
+    "viewbox", "xmlns", "fill", "stroke", "stroke-width", "stroke-linecap",
+    "stroke-linejoin", "stroke-dasharray", "stroke-dashoffset", "stroke-miterlimit",
+    "stroke-opacity", "fill-opacity", "fill-rule", "clip-rule", "opacity",
+    "d", "cx", "cy", "r", "rx", "ry", "x", "x1", "x2", "y", "y1", "y2",
+    "width", "height", "points", "transform", "id", "class", "clip-path", "mask",
+    "offset", "stop-color", "stop-opacity", "gradient-units", "gradienttransform",
+    "gradientunits", "spreadmethod", "patternunits", "patterntransform",
+    "font-size", "font-family", "font-weight", "text-anchor", "dominant-baseline",
+    "alignment-baseline", "dx", "dy", "rotate", "textlength", "lengthadjust",
+    "display", "visibility", "color", "vector-effect",
+]);
+
+function sanitizeSvg(raw) {
+    if (!raw) return "";
+    const doc = new DOMParser().parseFromString(raw, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) return "";
+
+    const walk = (el) => {
+        for (const child of [...el.children]) {
+            if (!ALLOWED_ELEMENTS.has(child.tagName.toLowerCase())) {
+                child.remove();
+                continue;
+            }
+            for (const attr of [...child.attributes]) {
+                if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
+                    child.removeAttribute(attr.name);
+                }
+            }
+            walk(child);
+        }
+    };
+
+    for (const attr of [...svg.attributes]) {
+        if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
+            svg.removeAttribute(attr.name);
+        }
+    }
+    walk(svg);
+    return svg.outerHTML;
+}
+
+// Cache sanitized SVG markup per icon name to avoid repeated DOMParser + DOM-walk
+// on every render. The cache is naturally bounded by the number of registered icons.
+const sanitizedSvgCache = new Map();
+
+function getCachedSvg(name) {
+    if (sanitizedSvgCache.has(name)) return sanitizedSvgCache.get(name);
+    const result = sanitizeSvg(getIcon(name));
+    sanitizedSvgCache.set(name, result);
+    return result;
+}
+
+class YumeIcon extends HTMLElement {
+    static get observedAttributes() {
+        return ["name", "size", "color", "label", "weight"];
+    }
+
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
 
-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";
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters / Setters
+    // -------------------------------------------------------------------------
+
+    /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
+    get color() { return this.getAttribute("color") || ""; }
+    set color(val) {
+        if (val) this.setAttribute("color", val);
+        else this.removeAttribute("color");
+    }
+
+    /** Accessible label for the icon. When set, the icon gets role="img". */
+    get label() { return this.getAttribute("label") || ""; }
+    set label(val) {
+        if (val) this.setAttribute("label", val);
+        else this.removeAttribute("label");
+    }
+
+    /** The registered icon name to display. */
+    get name() { return this.getAttribute("name") || ""; }
+    set name(val) { this.setAttribute("name", val); }
+
+    /** Icon size: "x-small" | "small" | "medium" | "large" | "x-large" (default "medium"). */
+    get size() { return this.getAttribute("size") || "medium"; }
+    set size(val) { this.setAttribute("size", val); }
+
+    /** Stroke weight: "thin" | "regular" | "thick". */
+    get weight() { return this.getAttribute("weight") || "regular"; }
+    set weight(val) {
+        if (val) this.setAttribute("weight", val);
+        else this.removeAttribute("weight");
+    }
+
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    render() {
+        const svg = getCachedSvg(this.name);
+        const sizeVal = this._getSize(this.size);
+        const colorVal = this.color ? this._getColor(this.color) : "inherit";
+        const weightVal = this._getWeight(this.weight);
+
+        this._updateAria();
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: ${sizeVal};
+                    height: ${sizeVal};
+                    color: ${colorVal};
+                    line-height: 0;
+                }
+                .icon-wrapper svg {
+                    width: 100%;
+                    height: 100%;
+                }
+                ${this._getWeightCSS(weightVal)}
+            </style>
+            <span class="icon-wrapper" part="icon">${svg}</span>
+        `;
+    }
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
+    _getColor(color) {
+        const map = {
+            base: "var(--base-content--, #f7f7fa)",
+            primary: "var(--primary-content--, #0576ff)",
+            secondary: "var(--secondary-content--, #04b8b8)",
+            success: "var(--success-content--, #2dba73)",
+            warning: "var(--warning-content--, #d17f04)",
+            error: "var(--error-content--, #b80421)",
+            help: "var(--help-content--, #5405ff)",
+        };
+        if (map[color]) return map[color];
+        if (color && (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl"))) {
+            return color;
+        }
+        return map.base;
+    }
+
+    _getSize(size) {
+        const map = {
+            "x-small": "var(--component-icon-size-x-small, 10px)",
+            small: "var(--component-icon-size-small, 14px)",
+            medium: "var(--component-icon-size-medium, 18px)",
+            large: "var(--component-icon-size-large, 22px)",
+            "x-large": "var(--component-icon-size-x-large, 28px)",
+        };
+        return map[size] || map.medium;
+    }
+
+    _getWeight(weight) {
+        const map = {
+            "x-thin":  "1",
+            thin:      "1.5",
+            regular:   "2",
+            thick:     "2.5",
+            "x-thick": "3",
+        };
+        return map[weight] || "";
+    }
+
+    _getWeightCSS(weightVal) {
+        if (!weightVal) return "";
+        return `.icon-wrapper svg,
+                .icon-wrapper svg * { stroke-width: ${weightVal} !important; }`;
+    }
+
+    _updateAria() {
+        if (this.label) {
+            this.setAttribute("role", "img");
+            this.setAttribute("aria-label", this.label);
+            this.removeAttribute("aria-hidden");
+        } else {
+            this.setAttribute("aria-hidden", "true");
+            this.removeAttribute("role");
+            this.removeAttribute("aria-label");
+        }
+    }
+}
+
+if (!customElements.get("y-icon")) {
+    customElements.define("y-icon", YumeIcon);
+}
 
 class YumeMenu extends HTMLElement {
     static get observedAttributes() {
@@ -17,6 +232,8 @@ class YumeMenu extends HTMLElement {
         this._onAnchorClick = this._onAnchorClick.bind(this);
         this._onDocumentClick = this._onDocumentClick.bind(this);
         this._onScrollOrResize = this._onScrollOrResize.bind(this);
+        this._isReady = false;
+        this._slottedHandlers = new Map();
     }
 
     connectedCallback() {
@@ -33,10 +250,13 @@ class YumeMenu extends HTMLElement {
         this.style.zIndex = "1000";
         this.style.display = "none";
         if (this.visible) this._updatePosition();
+
+        this._isReady = true;
     }
 
     disconnectedCallback() {
         this._teardownAnchor();
+        this._teardownSlottedItems();
 
         document.removeEventListener("click", this._onDocumentClick);
         window.removeEventListener("scroll", this._onScrollOrResize, true);
@@ -56,6 +276,13 @@ class YumeMenu extends HTMLElement {
         if (name === "visible" || name === "direction") {
             this._updatePosition();
         }
+
+        if (name === "visible" && this._isReady) {
+            this.dispatchEvent(new CustomEvent(this.visible ? "open" : "close", {
+                bubbles: true,
+                composed: true,
+            }));
+        }
     }
 
     // -------------------------------------------------------------------------
@@ -70,6 +297,16 @@ class YumeMenu extends HTMLElement {
     get direction() { return this.getAttribute("direction") || "down"; }
     set direction(val) { this.setAttribute("direction", val); }
 
+    /**
+     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
+     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
+     */
+    get history() { return this.getAttribute("history"); }
+    set history(val) {
+        if (val != null) this.setAttribute("history", val);
+        else this.removeAttribute("history");
+    }
+
     /** Menu items array (JSON attribute). */
     get items() {
         try {
@@ -82,16 +319,6 @@ class YumeMenu extends HTMLElement {
         this.setAttribute("items", Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"));
     }
 
-    /**
-     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
-     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
-     */
-    get history() { return this.getAttribute("history"); }
-    set history(val) {
-        if (val != null) this.setAttribute("history", val);
-        else this.removeAttribute("history");
-    }
-
     /** Size: "small" | "medium" | "large" (default "medium"). */
     get size() {
         const sz = this.getAttribute("size");
@@ -115,63 +342,94 @@ class YumeMenu extends HTMLElement {
     render() {
         this.shadowRoot.innerHTML = "";
 
-        const style = document.createElement("style");
-        style.textContent = this._buildStyles();
-        this.shadowRoot.appendChild(style);
+        const style = createElement("style", {}, [this._buildStyles()]);
+
+        const root = this._createMenuList(this.items);
+        root.classList.add("menu");
+        root.setAttribute("role", "menu");
+        root.setAttribute("part", "menu");
 
-        const rootUl = this._createMenuList(this.items);
-        rootUl.classList.add("menu");
-        rootUl.setAttribute("role", "menu");
-        rootUl.setAttribute("part", "menu");
+        const childSlot = createElement("slot");
+        childSlot.addEventListener("slotchange", () => this._processSlottedItems());
+        root.appendChild(childSlot);
 
-        this.shadowRoot.appendChild(rootUl);
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(root);
+        this._processSlottedItems();
     }
 
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
 
+    _activateItem(item) {
+        if (item.children?.length > 0) return;
+
+        this._dispatchSelect({
+            value: item.value ?? item.text,
+            item,
+        });
+
+        const href = item.href ?? item.url;
+        if (href) this._navigateTo(href);
+
+        this.visible = false;
+    }
+
+    _activateSlottedItem(el) {
+        this._dispatchSelect({
+            value: el.dataset.value ?? el.textContent.trim(),
+            element: el,
+        });
+        this.visible = false;
+    }
+
     _buildStyles() {
         const paddingVar = `var(--component-button-padding-${this.size}, 0.5rem)`;
         return `
-            ul.menu,
-            ul.submenu {
-                list-style: none;
-                margin: 0;
-                padding: 0;
+            .menu,
+            .submenu {
                 background: var(--component-menu-background, #0c0c0d);
                 border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
                 border-radius: var(--component-menu-border-radius, 4px);
                 box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
                 min-width: 150px;
+                display: flex;
+                flex-direction: column;
             }
 
-            li.menuitem {
+            .menuitem,
+            ::slotted(:not([slot])) {
                 cursor: pointer;
                 padding: ${paddingVar};
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
                 white-space: nowrap;
                 color: var(--component-menu-color, #f7f7fa);
                 font-size: var(--font-size-button, 1em);
+                box-sizing: border-box;
+            }
+
+            .menuitem {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
                 position: relative;
             }
 
-            li.menuitem:hover {
+            .menuitem:hover,
+            ::slotted(:not([slot]):hover) {
                 background: var(--component-menu-hover-background, #292a2b);
             }
 
-            li.menuitem.selected {
+            .menuitem.selected {
                 background: var(--component-menu-selected-background);
                 color: var(--component-menu-selected-color);
             }
 
-            li.menuitem.selected:hover {
+            .menuitem.selected:hover {
                 background: var(--component-menu-selected-background);
             }
 
-            ul.submenu {
+            .submenu {
                 position: absolute;
                 top: 0;
                 left: 100%;
@@ -179,8 +437,8 @@ class YumeMenu extends HTMLElement {
                 z-index: var(--component-menu-z-index, 1001);
             }
 
-            li.menuitem:hover > ul.submenu {
-                display: block;
+            .menuitem:hover > .submenu {
+                display: flex;
             }
 
             .submenu-indicator {
@@ -190,13 +448,11 @@ class YumeMenu extends HTMLElement {
                 opacity: 0.6;
             }
 
-            .submenu-indicator svg {
-                width: 16px;
-                height: 16px;
-            }
-
             .item-content {
                 flex: 1;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.5rem;
             }
         `;
     }
@@ -209,91 +465,140 @@ class YumeMenu extends HTMLElement {
         });
     }
 
-    _createMenuList(items) {
-        const ul = document.createElement("ul");
-
-        items.forEach((item) => {
-            const li = document.createElement("li");
-            li.className = item.selected ? "menuitem selected" : "menuitem";
-            li.setAttribute("role", "menuitem");
-            li.setAttribute("part", item.selected ? "menuitem selected" : "menuitem");
-            li.setAttribute("aria-current", item.selected ? "true" : "false");
-            li.tabIndex = 0;
-
-            const contentWrapper = document.createElement("span");
-            contentWrapper.className = "item-content";
-
-            if (item["icon-template"]) {
-                const iconTpl = this._findTemplate(item["icon-template"]);
-                if (iconTpl)
-                    contentWrapper.appendChild(iconTpl.content.cloneNode(true));
-            }
+    _computeMenuOffset(direction, anchorRect, menuRect, vw, vh) {
+        if (direction === "right") {
+            let top = anchorRect.top;
+            let left = anchorRect.right;
+            if (left + menuRect.width > vw) left = anchorRect.left - menuRect.width;
+            if (top + menuRect.height > vh) top = anchorRect.top - menuRect.height;
+            return { top, left };
+        }
 
-            if (item.template) {
-                const textTpl = this._findTemplate(item.template);
-                if (textTpl) {
-                    contentWrapper.appendChild(textTpl.content.cloneNode(true));
-                } else {
-                    contentWrapper.append(item.text);
-                }
-            } else {
-                contentWrapper.append(item.text);
-            }
+        if (direction === "up") {
+            let top = anchorRect.top - menuRect.height;
+            let left = anchorRect.left;
+            if (top < 0) top = anchorRect.bottom;
+            if (left + menuRect.width > vw) left = vw - menuRect.width - 10;
+            return { top, left };
+        }
 
-            li.appendChild(contentWrapper);
-
-            if (item.url) {
-                li.addEventListener("click", () => {
-                    const event = new CustomEvent("navigate", {
-                        bubbles: true,
-                        composed: true,
-                        cancelable: true,
-                        detail: { href: item.url },
-                    });
-                    const cancelled = !this.dispatchEvent(event);
-                    if (cancelled) return;
-                    if (this.getAttribute("history") !== "false") {
-                        history.pushState({}, "", item.url);
-                        window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
-                    } else {
-                        window.location.href = item.url;
-                    }
-                });
-            }
+        if (direction === "left") {
+            let top = anchorRect.top;
+            let left = anchorRect.left - menuRect.width;
+            if (left < 0) left = anchorRect.right;
+            if (top + menuRect.height > vh) top = anchorRect.top - menuRect.height;
+            return { top, left };
+        }
 
-            if (!item.children?.length) {
-                li.addEventListener("click", () => {
-                    this.visible = false;
-                });
-            }
+        // "down" (default)
+        let top = anchorRect.bottom;
+        let left = anchorRect.left;
+        if (top + menuRect.height > vh) top = anchorRect.top - menuRect.height;
+        if (left + menuRect.width > vw) left = vw - menuRect.width - 10;
+        return { top, left };
+    }
 
-            if (item.children?.length) {
-                const indicator = document.createElement("span");
-                indicator.className = "submenu-indicator";
-                indicator.innerHTML = chevronRight;
-                li.appendChild(indicator);
+    _createItemContent(item) {
+        const wrapper = createElement("span", { class: "item-content" });
 
-                const submenu = this._createMenuList(item.children);
-                submenu.classList.add("submenu");
-                submenu.setAttribute("role", "menu");
-                li.appendChild(submenu);
-            }
+        if (item.icon) {
+            wrapper.appendChild(createElement("y-icon", { name: item.icon, size: this.size }));
+        } else if (item["icon-template"]) {
+            YumeMenu._warnTemplateFieldDeprecated();
+            const tpl = this._findTemplate(item["icon-template"]);
+            if (tpl) wrapper.appendChild(tpl.content.cloneNode(true));
+        }
 
-            ul.appendChild(li);
+        if (item.template) {
+            YumeMenu._warnTemplateFieldDeprecated();
+            const tpl = this._findTemplate(item.template);
+            if (tpl) wrapper.appendChild(tpl.content.cloneNode(true));
+            else wrapper.append(item.text ?? "");
+        } else {
+            wrapper.append(item.text ?? "");
+        }
+
+        if (!item.slot) return wrapper;
+
+        const slotEl = createElement("slot", { name: item.slot });
+        slotEl.appendChild(wrapper);
+        return slotEl;
+    }
+
+    _createMenuItem(item) {
+        const isSelected = !!item.selected;
+        const partValue = isSelected ? "menuitem selected" : "menuitem";
+
+        const itemEl = createElement("div", {
+            class: partValue,
+            role: "menuitem",
+            part: partValue,
+            "aria-current": isSelected ? "true" : "false",
+            tabindex: "0",
         });
 
-        return ul;
+        itemEl.appendChild(this._createItemContent(item));
+
+        if (item.url && !item.href) YumeMenu._warnUrlDeprecated();
+
+        itemEl.addEventListener("click", () => this._activateItem(item));
+
+        if (item.children?.length > 0) {
+            itemEl.appendChild(this._createSubmenuIndicator());
+
+            const submenu = this._createMenuList(item.children);
+            submenu.classList.add("submenu");
+            submenu.setAttribute("role", "menu");
+            itemEl.appendChild(submenu);
+        }
+
+        return itemEl;
+    }
+
+    _createMenuList(items) {
+        const container = createElement("div");
+        items.forEach((item) => container.appendChild(this._createMenuItem(item)));
+        return container;
+    }
+
+    _createSubmenuIndicator() {
+        return createElement("span", { class: "submenu-indicator" }, [
+            createElement("y-icon", { name: "chevron-right", size: this.size }),
+        ]);
+    }
+
+    _dispatchSelect(detail) {
+        this.dispatchEvent(new CustomEvent("select", {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
     }
 
     _findTemplate(name) {
         return this.querySelector(`template[slot="${name}"]`);
     }
 
+    _navigateTo(href) {
+        const event = new CustomEvent("navigate", {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: { href },
+        });
+        if (!this.dispatchEvent(event)) return;
+
+        if (this.getAttribute("history") === "false") {
+            window.location.href = href;
+        } else {
+            history.pushState({}, "", href);
+            window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
+        }
+    }
+
     _onAnchorClick(e) {
         e.stopPropagation();
-        if (!this.visible) {
-            YumeMenu._closeAll(this);
-        }
+        if (!this.visible) YumeMenu._closeAll(this);
         this.visible = !this.visible;
     }
 
@@ -308,9 +613,34 @@ class YumeMenu extends HTMLElement {
         if (this.visible) this._updatePosition();
     }
 
+    _processSlottedItems() {
+        const slot = this.shadowRoot.querySelector(".menu > slot");
+        if (!slot) return;
+
+        const assigned = new Set(slot.assignedElements());
+
+        for (const [el, handler] of this._slottedHandlers) {
+            if (assigned.has(el)) continue;
+            el.removeEventListener("click", handler);
+            this._slottedHandlers.delete(el);
+        }
+
+        for (const el of assigned) {
+            if (this._slottedHandlers.has(el)) continue;
+
+            if (!el.hasAttribute("role")) el.setAttribute("role", "menuitem");
+            if (el.tabIndex < 0) el.tabIndex = 0;
+
+            const handler = () => this._activateSlottedItem(el);
+            el.addEventListener("click", handler);
+            this._slottedHandlers.set(el, handler);
+        }
+    }
+
     _setupAnchor() {
         const id = this.anchor;
         if (!id) return;
+
         const root = this.getRootNode();
         this._anchorResolveDispose = resolveAnchor(
             this,
@@ -334,6 +664,13 @@ class YumeMenu extends HTMLElement {
         }
     }
 
+    _teardownSlottedItems() {
+        for (const [el, handler] of this._slottedHandlers) {
+            el.removeEventListener("click", handler);
+        }
+        this._slottedHandlers.clear();
+    }
+
     _updatePosition() {
         if (!this.visible || !this._anchorEl) {
             this.style.display = "none";
@@ -342,7 +679,7 @@ class YumeMenu extends HTMLElement {
 
         const anchorRect = this._anchorEl.getBoundingClientRect();
 
-        // Temporarily show off-screen to measure actual dimensions
+        // Measure menu off-screen so we know its size before placing it.
         this.style.visibility = "hidden";
         this.style.display = "block";
         const menuRect = this.getBoundingClientRect();
@@ -350,61 +687,43 @@ class YumeMenu extends HTMLElement {
 
         const vw = window.innerWidth;
         const vh = window.innerHeight;
+        const { top, left } = this._computeMenuOffset(
+            this.direction,
+            anchorRect,
+            menuRect,
+            vw,
+            vh,
+        );
 
-        let top, left;
-
-        if (this.direction === "right") {
-            top = anchorRect.top;
-            left = anchorRect.right;
-
-            if (left + menuRect.width > vw) {
-                left = anchorRect.left - menuRect.width;
-            }
-            if (top + menuRect.height > vh) {
-                top = anchorRect.top - menuRect.height;
-            }
-        } else if (this.direction === "up") {
-            top = anchorRect.top - menuRect.height;
-            left = anchorRect.left;
-
-            if (top < 0) {
-                top = anchorRect.bottom;
-            }
-            if (left + menuRect.width > vw) {
-                left = vw - menuRect.width - 10;
-            }
-        } else if (this.direction === "left") {
-            top = anchorRect.top;
-            left = anchorRect.left - menuRect.width;
-
-            if (left < 0) {
-                left = anchorRect.right;
-            }
-            if (top + menuRect.height > vh) {
-                top = anchorRect.top - menuRect.height;
-            }
-        } else {
-            // "down" (default)
-            top = anchorRect.bottom;
-            left = anchorRect.left;
+        const clampedTop = Math.max(0, Math.min(top, vh - menuRect.height));
+        const clampedLeft = Math.max(0, Math.min(left, vw - menuRect.width));
 
-            if (top + menuRect.height > vh) {
-                top = anchorRect.top - menuRect.height;
-            }
-            if (left + menuRect.width > vw) {
-                left = vw - menuRect.width - 10;
-            }
-        }
+        this.style.top = `${clampedTop}px`;
+        this.style.left = `${clampedLeft}px`;
+        this.style.display = "block";
+    }
 
-        top = Math.max(0, Math.min(top, vh - menuRect.height));
-        left = Math.max(0, Math.min(left, vw - menuRect.width));
+    static _warnTemplateFieldDeprecated() {
+        if (YumeMenu._templateFieldDeprecationWarned) return;
+        YumeMenu._templateFieldDeprecationWarned = true;
+        // eslint-disable-next-line no-console
+        console.warn(
+            "[y-menu] item.template and item['icon-template'] are deprecated; use item.icon (icon name) and item.slot (named slot) instead. Support will be removed in a future release.",
+        );
+    }
 
-        this.style.top = `${top}px`;
-        this.style.left = `${left}px`;
-        this.style.display = "block";
+    static _warnUrlDeprecated() {
+        if (YumeMenu._urlDeprecationWarned) return;
+        YumeMenu._urlDeprecationWarned = true;
+        // eslint-disable-next-line no-console
+        console.warn(
+            "[y-menu] item.url is deprecated; use item.href instead. Support for item.url will be removed in a future release.",
+        );
     }
 }
 
 if (!customElements.get("y-menu")) {
     customElements.define("y-menu", YumeMenu);
 }
+
+export { YumeMenu };