@studious-creative/yumekit 0.1.7 → 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"];
@@ -1328,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-icon.d.ts

@@ -10,7 +10,10 @@ export class YumeIcon extends HTMLElement {
     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;
 }

package/dist/components/y-icon.js

@@ -150,7 +150,7 @@ function getCachedSvg(name) {
 
 class YumeIcon extends HTMLElement {
     static get observedAttributes() {
-        return ["name", "size", "color", "label"];
+        return ["name", "size", "color", "label", "weight"];
     }
 
     constructor() {
@@ -182,10 +182,11 @@ class YumeIcon extends HTMLElement {
     }
 
     get color() {
-        return this.getAttribute("color") || "base";
+        return this.getAttribute("color") || "";
     }
     set color(val) {
-        this.setAttribute("color", val);
+        if (val) this.setAttribute("color", val);
+        else this.removeAttribute("color");
     }
 
     get label() {
@@ -196,6 +197,14 @@ class YumeIcon extends HTMLElement {
         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)",
@@ -218,10 +227,20 @@ class YumeIcon extends HTMLElement {
         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._getColor(this.color);
+        const colorVal = this.color ? this._getColor(this.color) : "inherit";
+        const weightVal = this._getWeight(this.weight);
         const label = this.label;
 
         if (label) {
@@ -234,6 +253,11 @@ class YumeIcon extends HTMLElement {
             this.removeAttribute("aria-label");
         }
 
+        const weightCSS = weightVal
+            ? `.icon-wrapper svg,
+                .icon-wrapper svg * { stroke-width: ${weightVal} !important; }`
+            : "";
+
         this.shadowRoot.innerHTML = `
             <style>
                 :host {
@@ -249,6 +273,7 @@ class YumeIcon extends HTMLElement {
                     width: 100%;
                     height: 100%;
                 }
+                ${weightCSS}
             </style>
             <span class="icon-wrapper" part="icon">${svg}</span>
         `;

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

@@ -16,7 +16,7 @@ export class YumeToast extends HTMLElement {
      * @param {string} [opts.color]  — base|primary|secondary|success|warning|error|help (default base).
      * @param {number} [opts.duration] — Override container-level duration for this toast.
      * @param {boolean} [opts.dismissible] — Show a close button (default true).
-     * @param {string} [opts.icon] — Optional Font Awesome class e.g. "fas fa-check".
+     * @param {string} [opts.icon] — Optional y-icon name e.g. "checkmark".
      * @returns {HTMLElement} The toast element (for manual removal).
      */
     show(opts?: {

package/dist/components/y-toast.js

@@ -124,7 +124,7 @@ class YumeToast extends HTMLElement {
      * @param {string} [opts.color]  — base|primary|secondary|success|warning|error|help (default base).
      * @param {number} [opts.duration] — Override container-level duration for this toast.
      * @param {boolean} [opts.dismissible] — Show a close button (default true).
-     * @param {string} [opts.icon] — Optional Font Awesome class e.g. "fas fa-check".
+     * @param {string} [opts.icon] — Optional y-icon name e.g. "checkmark".
      * @returns {HTMLElement} The toast element (for manual removal).
      */
     show(opts = {}) {
@@ -157,8 +157,10 @@ class YumeToast extends HTMLElement {
         toast.style.color = textColor;
 
         if (icon) {
-            const iconEl = document.createElement("i");
-            iconEl.className = `toast-icon ${icon}`;
+            const iconEl = document.createElement("y-icon");
+            iconEl.setAttribute("name", icon);
+            iconEl.setAttribute("size", "small");
+            iconEl.className = "toast-icon";
             iconEl.setAttribute("part", "icon");
             toast.appendChild(iconEl);
         }