@studious-creative/yumekit 0.1.7 → 0.1.9

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"];
@@ -1016,18 +1302,21 @@ class YumeAppbar extends HTMLElement {
                 collapsedWidth: "40px",
                 bodyGap: "2px",
                 buttonSize: "small",
+                iconSize: "small",
             },
             medium: {
                 padding: "var(--spacing-small, 6px)",
                 collapsedWidth: "52px",
                 bodyGap: "3px",
                 buttonSize: "medium",
+                iconSize: "medium",
             },
             large: {
                 padding: "var(--spacing-medium, 8px)",
                 collapsedWidth: "64px",
                 bodyGap: "4px",
                 buttonSize: "large",
+                iconSize: "large",
             },
         };
         const cfg = sizeConfig[size] || sizeConfig.medium;
@@ -1142,7 +1431,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.vertical .appbar-header {
                 border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding-bottom: var(--_appbar-padding);
+                padding: var(--_appbar-padding);
                 margin-bottom: var(--_appbar-padding);
             }
             .appbar.vertical .appbar-footer {
@@ -1153,7 +1442,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.horizontal .appbar-header {
                 border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding-right: var(--_appbar-padding);
+                padding: var(--_appbar-padding);
                 margin-right: var(--_appbar-padding);
             }
             .appbar.horizontal .appbar-footer {
@@ -1305,7 +1594,10 @@ class YumeAppbar extends HTMLElement {
         titleWrapper.appendChild(titleSlot);
         headerContent.appendChild(titleWrapper);
 
+        const headerSlot = document.createElement("slot");
+        headerSlot.name = "header";
         header.appendChild(headerContent);
+        header.appendChild(headerSlot);
         bar.appendChild(header);
 
         /* --- Body: y-button nav items --- */
@@ -1328,10 +1620,20 @@ 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.setAttribute("part", "icon");
+                    iconEl.innerHTML = item.icon;
+                    btn.appendChild(iconEl);
+                } else {
+                    const iconEl = document.createElement("y-icon");
+                    iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
+                    iconEl.setAttribute("name", item.icon);
+                    iconEl.setAttribute("size", cfg.iconSize);
+                    btn.appendChild(iconEl);
+                }
             }
 
             if (item.text && !isCollapsed) {
@@ -1352,7 +1654,14 @@ class YumeAppbar extends HTMLElement {
                 });
             }
 
-            wrapper.appendChild(btn);
+            if (item.slot) {
+                const slot = document.createElement("slot");
+                slot.name = item.slot;
+                slot.appendChild(btn);
+                wrapper.appendChild(slot);
+            } else {
+                wrapper.appendChild(btn);
+            }
 
             if (hasChildren) {
                 const menu = document.createElement("y-menu");

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-tag.d.ts

@@ -3,5 +3,5 @@ export class YumeTag extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     render(): void;
-    getStyle(color: any, styleType: any, shape: any): string;
+    getStyle(color: any, styleType: any, shape: any, size: any): string;
 }

package/dist/components/y-tag.js

@@ -14,7 +14,7 @@ const close = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width
 
 class YumeTag extends HTMLElement {
     static get observedAttributes() {
-        return ["removable", "color", "style-type", "shape"];
+        return ["removable", "color", "style-type", "shape", "size"];
     }
 
     constructor() {
@@ -36,9 +36,10 @@ class YumeTag extends HTMLElement {
         const color = this.getAttribute("color") || "base";
         const styleType = this.getAttribute("style-type") || "filled";
         const shape = this.getAttribute("shape") || "square";
+        const size = this.getAttribute("size") || "medium";
 
         const style = document.createElement("style");
-        style.textContent = this.getStyle(color, styleType, shape);
+        style.textContent = this.getStyle(color, styleType, shape, size);
 
         this.shadowRoot.innerHTML = "";
         this.shadowRoot.appendChild(style);
@@ -72,7 +73,7 @@ class YumeTag extends HTMLElement {
         }
     }
 
-    getStyle(color, styleType, shape) {
+    getStyle(color, styleType, shape, size) {
         const vars = {
             primary: [
                 "--primary-content--",
@@ -125,20 +126,44 @@ class YumeTag extends HTMLElement {
                 ? "var(--component-tag-border-radius-circle)"
                 : "var(--component-tag-border-radius-square)";
 
+        const sizeConfig = {
+            small: {
+                height: "var(--component-tag-height-small, 22px)",
+                padding:
+                    "var(--component-tag-padding-small, var(--spacing-2x-small))",
+                fontSize: "var(--font-size-small, 0.8em)",
+            },
+            medium: {
+                height: "var(--component-tag-height-medium, 28px)",
+                padding:
+                    "var(--component-tag-padding-medium, var(--spacing-x-small))",
+                fontSize: "var(--font-size-label, 0.83em)",
+            },
+            large: {
+                height: "var(--component-tag-height-large, 38px)",
+                padding:
+                    "var(--component-tag-padding-large, var(--spacing-small))",
+                fontSize: "var(--font-size-paragraph, 1em)",
+            },
+        };
+        const cfg = sizeConfig[size] || sizeConfig.medium;
+
         const baseStyle = `
             :host {
                 display: inline-block;
                 font-family: var(--font-family-body, sans-serif);
-                font-size: var(--font-size-label, 0.83em);
+                font-size: ${cfg.fontSize};
             }
             .tag {
                 display: inline-flex;
                 align-items: center;
                 gap: var(--spacing-2x-small);
-                padding: 0 var(--component-tag-padding-medium, var(--spacing-x-small));
+                height: ${cfg.height};
+                padding: 0 ${cfg.padding};
                 border: 1px solid transparent;
                 transition: background-color 0.2s, color 0.2s;
                 border-radius: ${borderRadius};
+                box-sizing: border-box;
             }
             .remove {
                 all: unset;