@studious-creative/yumekit 0.1.6 → 0.1.8

package/dist/components/y-appbar.js

@@ -554,6 +554,292 @@ if (!customElements.get("y-button")) {
     customElements.define("y-button", YumeButton);
 }
 
+/**
+ * Icon registry — a runtime map of icon names to SVG markup strings.
+ *
+ * Register only the icons you need for tree-shaking:
+ *
+ *   import { registerIcon } from "@studious-creative/yumekit";
+ *   registerIcon("home", homeSvgString);
+ *
+ * Or register all bundled icons at once (separate import):
+ *
+ *   import "@studious-creative/yumekit/icons/all.js";
+ */
+
+const icons = new Map();
+
+function getIcon(name) {
+    return icons.get(name) || "";
+}
+
+// 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);
+        }
+    };
+
+    // Sanitize the <svg> element's own attributes
+    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"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    get name() {
+        return this.getAttribute("name") || "";
+    }
+    set name(val) {
+        this.setAttribute("name", val);
+    }
+
+    get size() {
+        return this.getAttribute("size") || "medium";
+    }
+    set size(val) {
+        this.setAttribute("size", val);
+    }
+
+    get color() {
+        return this.getAttribute("color") || "";
+    }
+    set color(val) {
+        if (val) this.setAttribute("color", val);
+        else this.removeAttribute("color");
+    }
+
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        if (val) this.setAttribute("label", val);
+        else this.removeAttribute("label");
+    }
+
+    get weight() {
+        return this.getAttribute("weight") || "";
+    }
+    set weight(val) {
+        if (val) this.setAttribute("weight", val);
+        else this.removeAttribute("weight");
+    }
+
+    _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)",
+        };
+        return map[color] || map.base;
+    }
+
+    _getSize(size) {
+        const map = {
+            small: "var(--component-icon-size-small, 16px)",
+            medium: "var(--component-icon-size-medium, 24px)",
+            large: "var(--component-icon-size-large, 32px)",
+        };
+        return map[size] || map.medium;
+    }
+
+    _getWeight(weight) {
+        const map = {
+            thin: "1",
+            regular: "1.5",
+            thick: "2",
+        };
+        return map[weight] || "";
+    }
+
+    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);
+        const label = this.label;
+
+        if (label) {
+            this.setAttribute("role", "img");
+            this.setAttribute("aria-label", label);
+            this.removeAttribute("aria-hidden");
+        } else {
+            this.setAttribute("aria-hidden", "true");
+            this.removeAttribute("role");
+            this.removeAttribute("aria-label");
+        }
+
+        const weightCSS = weightVal
+            ? `.icon-wrapper svg,
+                .icon-wrapper svg * { stroke-width: ${weightVal} !important; }`
+            : "";
+
+        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%;
+                }
+                ${weightCSS}
+            </style>
+            <span class="icon-wrapper" part="icon">${svg}</span>
+        `;
+    }
+}
+
+if (!customElements.get("y-icon")) {
+    customElements.define("y-icon", YumeIcon);
+}
+
 class YumeMenu extends HTMLElement {
     static get observedAttributes() {
         return ["items", "anchor", "visible", "direction", "size"];
@@ -762,9 +1048,30 @@ class YumeMenu extends HTMLElement {
                 left = anchorRect.left - menuRect.width;
             }
             if (top + menuRect.height > vh) {
-                top = vh - menuRect.height - 10;
+                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;
 
@@ -776,8 +1083,8 @@ class YumeMenu extends HTMLElement {
             }
         }
 
-        top = Math.max(10, Math.min(top, vh - menuRect.height - 10));
-        left = Math.max(10, Math.min(left, vw - menuRect.width - 10));
+        top = Math.max(0, Math.min(top, vh - menuRect.height));
+        left = Math.max(0, Math.min(left, vw - menuRect.width));
 
         this.style.top = `${top}px`;
         this.style.left = `${left}px`;
@@ -825,7 +1132,7 @@ class YumeMenu extends HTMLElement {
                 top: 0;
                 left: 100%;
                 display: none;
-                z-index: 1001;
+                z-index: var(--component-menu-z-index, 1001);
             }
 
             li.menuitem:hover > ul.submenu {
@@ -1024,7 +1331,7 @@ class YumeAppbar extends HTMLElement {
 
             :host([sticky]) {
                 position: sticky;
-                z-index: 100;
+                z-index: var(--component-appbar-z-index, 100);
             }
             :host([orientation="vertical"][sticky="start"]),
             :host(:not([orientation])[sticky="start"]) {
@@ -1249,6 +1556,7 @@ class YumeAppbar extends HTMLElement {
 
         const bar = document.createElement("div");
         bar.className = `appbar ${isVertical ? "vertical" : "horizontal"}`;
+
         if (isCollapsed) bar.classList.add("collapsed");
         bar.setAttribute("role", "navigation");
         bar.style.setProperty("--_appbar-padding", cfg.padding);
@@ -1269,6 +1577,7 @@ class YumeAppbar extends HTMLElement {
 
         const logoWrapper = document.createElement("div");
         logoWrapper.className = "logo-wrapper";
+
         const logoSlot = document.createElement("slot");
         logoSlot.name = "logo";
         logoWrapper.appendChild(logoSlot);
@@ -1276,6 +1585,7 @@ class YumeAppbar extends HTMLElement {
 
         const titleWrapper = document.createElement("div");
         titleWrapper.className = "header-title";
+
         const titleSlot = document.createElement("slot");
         titleSlot.name = "title";
         titleWrapper.appendChild(titleSlot);
@@ -1304,10 +1614,18 @@ class YumeAppbar extends HTMLElement {
             btn.setAttribute("size", cfg.buttonSize);
 
             if (item.icon) {
-                const iconEl = document.createElement("span");
-                iconEl.slot = "left-icon";
-                iconEl.innerHTML = item.icon;
-                btn.appendChild(iconEl);
+                if (item.icon.trim().startsWith("<")) {
+                    const iconEl = document.createElement("span");
+                    iconEl.slot = "left-icon";
+                    iconEl.innerHTML = item.icon;
+                    btn.appendChild(iconEl);
+                } else {
+                    const iconEl = document.createElement("y-icon");
+                    iconEl.slot = "left-icon";
+                    iconEl.setAttribute("name", item.icon);
+                    iconEl.setAttribute("size", "small");
+                    btn.appendChild(iconEl);
+                }
             }
 
             if (item.text && !isCollapsed) {

package/dist/components/y-checkbox.js

@@ -180,6 +180,16 @@ class YumeCheckbox extends HTMLElement {
                 line-height: 0;
             }
 
+            :host([disabled]) .checkbox {
+                border-color: var(--component-checkbox-border-color);
+                background: var(--component-checkbox-disabled-background, var(--component-checkbox-background));
+                cursor: not-allowed;
+            }
+
+            :host([disabled]) .checkbox:hover {
+                border-color: var(--component-checkbox-border-color);
+            }
+
             .checkbox:hover {
                 border-color: var(--component-checkbox-accent);
             }
@@ -191,7 +201,7 @@ class YumeCheckbox extends HTMLElement {
                 display: block;
             }
 
-            .label {
+            [part="label"] {
                 display: inline-flex;
                 align-items: center;
                 font-size: 0.9em;

package/dist/components/y-dialog.js

@@ -104,7 +104,7 @@ class YumeDialog extends HTMLElement {
                 align-items: center;
                 justify-content: center;
                 background: rgba(0,0,0,0.5);
-                z-index: 1000;
+                z-index: var(--component-dialog-z-index, 1000);
             }
             :host([visible]) { display: flex; }
             .dialog {

package/dist/components/y-drawer.js

@@ -261,7 +261,7 @@ class YumeDrawer extends HTMLElement {
                 position: fixed;
                 top: 0; left: 0; right: 0; bottom: 0;
                 display: none;
-                z-index: 1000;
+                z-index: var(--component-drawer-z-index, 5000);
             }
             :host([visible]) {
                 display: block;

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

@@ -0,0 +1,19 @@
+export class YumeIcon extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set name(val: string);
+    get name(): string;
+    set size(val: string);
+    get size(): string;
+    set color(val: string);
+    get color(): string;
+    set label(val: string);
+    get label(): string;
+    set weight(val: string);
+    get weight(): string;
+    _getColor(color: any): any;
+    _getSize(size: any): any;
+    _getWeight(weight: any): any;
+    render(): void;
+}