@studious-creative/yumekit 0.1.5 → 0.1.7

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 {
@@ -134,7 +134,7 @@ class YumeDialog extends HTMLElement {
                 border: none;
                 cursor: pointer;
                 padding: var(--spacing-x-small, 4px);
-                color: var(--component-dialog-color, #000);
+                color: var(--component-dialog-color, #f7f7fa);
                 font-size: 1.25em;
                 line-height: 1;
                 border-radius: var(--component-button-border-radius-outer, 4px);
@@ -143,7 +143,7 @@ class YumeDialog extends HTMLElement {
                 justify-content: center;
             }
             .close-btn:hover {
-                background: var(--component-dialog-hover-background, #eee);
+                background: var(--component-dialog-hover-background, #292a2b);
             }
             .close-btn:focus-visible {
                 outline: 2px solid var(--component-dialog-accent);

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;
@@ -279,8 +279,8 @@ class YumeDrawer extends HTMLElement {
 
             .drawer-panel {
                 position: absolute;
-                background: var(--component-drawer-background, #fff);
-                color: var(--component-drawer-color, #000);
+                background: var(--component-drawer-background, #0c0c0d);
+                color: var(--component-drawer-color, #f7f7fa);
                 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                 overflow: hidden;
                 outline: none;
@@ -301,12 +301,12 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="left"] {
                 left: 0;
                 transform: translateX(-100%);
-                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
             .drawer-panel[data-position="right"] {
                 right: 0;
                 transform: translateX(100%);
-                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
 
             .drawer-panel[data-position="top"],
@@ -318,12 +318,12 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="top"] {
                 top: 0;
                 transform: translateY(-100%);
-                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
             .drawer-panel[data-position="bottom"] {
                 bottom: 0;
                 transform: translateY(100%);
-                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
 
             .drawer-panel.open { transform: translate(0, 0); }
@@ -360,7 +360,7 @@ class YumeDrawer extends HTMLElement {
                 flex-shrink: 0;
                 align-items: center;
                 justify-content: center;
-                color: var(--component-drawer-color, #999);
+                color: var(--component-drawer-color, #f7f7fa);
                 opacity: 0.6;
                 touch-action: none;         /* needed for pointer events */
                 user-select: none;
@@ -369,7 +369,7 @@ class YumeDrawer extends HTMLElement {
             .resize-handle:hover,
             .resize-handle:active {
                 opacity: 1;
-                background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));
+                background: var(--component-drawer-hover-background, #292a2b);
             }
 
             .drawer-panel[data-position="left"] > .resize-handle,

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

@@ -0,0 +1,16 @@
+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;
+    _getColor(color: any): any;
+    _getSize(size: any): any;
+    render(): void;
+}

package/dist/components/y-icon.js

@@ -0,0 +1,262 @@
+/**
+ * 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"];
+    }
+
+    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") || "base";
+    }
+    set color(val) {
+        this.setAttribute("color", val);
+    }
+
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        if (val) this.setAttribute("label", val);
+        else this.removeAttribute("label");
+    }
+
+    _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;
+    }
+
+    render() {
+        const svg = getCachedSvg(this.name);
+        const sizeVal = this._getSize(this.size);
+        const colorVal = this._getColor(this.color);
+        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");
+        }
+
+        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%;
+                }
+            </style>
+            <span class="icon-wrapper" part="icon">${svg}</span>
+        `;
+    }
+}
+
+if (!customElements.get("y-icon")) {
+    customElements.define("y-icon", YumeIcon);
+}
+
+export { YumeIcon };

package/dist/components/y-menu.js

@@ -206,9 +206,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;
 
@@ -220,8 +241,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`;
@@ -240,8 +261,8 @@ class YumeMenu extends HTMLElement {
                 list-style: none;
                 margin: 0;
                 padding: 0;
-                background: var(--component-menu-background, #fff);
-                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
+                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;
@@ -256,12 +277,12 @@ class YumeMenu extends HTMLElement {
                 align-items: center;
                 justify-content: space-between;
                 white-space: nowrap;
-                color: var(--component-menu-color, #000);
+                color: var(--component-menu-color, #f7f7fa);
                 font-size: var(--font-size-button, 1em);
             }
 
             li.menuitem:hover {
-                background: var(--component-menu-hover-background, #eee);
+                background: var(--component-menu-hover-background, #292a2b);
             }
 
             ul.submenu {
@@ -269,7 +290,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 {

package/dist/components/y-panel.js

@@ -81,7 +81,12 @@ class YumePanel extends HTMLElement {
         if (!this._expanded) {
             const parentBar = this.closest("y-panelbar");
             if (parentBar && parentBar.hasAttribute("exclusive")) {
-                const siblingPanels = parentBar.querySelectorAll("y-panel");
+                const parent = this.parentElement;
+                const siblingPanels = parent
+                    ? Array.from(parent.children).filter(
+                          (el) => el.tagName === "Y-PANEL",
+                      )
+                    : [];
                 siblingPanels.forEach((panel) => {
                     if (panel !== this && panel.expanded) {
                         panel.collapse();
@@ -133,9 +138,19 @@ class YumePanel extends HTMLElement {
     }
 
     updateChildState() {
-        const parentPanel = this.parentElement?.closest("y-panel");
-        const isChild = Boolean(parentPanel && parentPanel !== this);
-        this.setAttribute("data-is-child", isChild ? "true" : "false");
+        let depth = 0;
+        let el = this.parentElement;
+        while (el) {
+            const parent = el.closest("y-panel");
+            if (parent && parent !== this) {
+                depth++;
+                el = parent.parentElement;
+            } else {
+                break;
+            }
+        }
+        this.setAttribute("data-is-child", depth > 0 ? "true" : "false");
+        this.style.setProperty("--panel-depth", depth);
     }
 
     checkRouteMatch() {
@@ -151,7 +166,8 @@ class YumePanel extends HTMLElement {
         const header = this.shadowRoot.querySelector(".header");
         if (!header) return;
 
-        header.addEventListener("click", () => {
+        header.addEventListener("click", (e) => {
+            e.stopPropagation();
             if (this.hasAttribute("href")) {
                 const href = this.getAttribute("href");
                 if (this.getAttribute("history") !== "false") {
@@ -261,7 +277,7 @@ class YumePanel extends HTMLElement {
             }
 
             :host([data-is-child="true"]) .header {
-                padding-left: calc(var(--component-panelbar-padding, 4px) * 2);
+                padding-left: calc(var(--component-panelbar-padding, 4px) + (var(--panel-depth, 1) * var(--component-panelbar-indent, 16px)));
             }
 
             .header {

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

@@ -3,7 +3,9 @@ export class YumeSelect extends HTMLElement {
     static get observedAttributes(): string[];
     _internals: ElementInternals;
     selectedValues: Set<any>;
+    _onDocumentClick(e: any): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set value(val: any);
     get value(): any;

package/dist/components/y-select.js

@@ -24,6 +24,7 @@ class YumeSelect extends HTMLElement {
             "placeholder",
             "options",
             "display-mode",
+            "close-on-click-outside",
         ];
     }
 
@@ -32,6 +33,7 @@ class YumeSelect extends HTMLElement {
         this._internals = this.attachInternals();
         this.attachShadow({ mode: "open" });
         this.selectedValues = new Set();
+        this._onDocumentClick = this._onDocumentClick.bind(this);
         this.render();
     }
 
@@ -43,6 +45,18 @@ class YumeSelect extends HTMLElement {
         this._internals.setFormValue(this.value);
     }
 
+    disconnectedCallback() {
+        this.closeDropdown();
+    }
+
+    _onDocumentClick(e) {
+        if (this.getAttribute("close-on-click-outside") === "false") return;
+        const path = e.composedPath();
+        if (!path.includes(this) && this.dropdown?.classList.contains("open")) {
+            this.closeDropdown();
+        }
+    }
+
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
 
@@ -141,15 +155,18 @@ class YumeSelect extends HTMLElement {
             this._onScrollOrResize = this._positionDropdown.bind(this);
             window.addEventListener("scroll", this._onScrollOrResize, true);
             window.addEventListener("resize", this._onScrollOrResize);
+            document.addEventListener("click", this._onDocumentClick, true);
         }
     }
 
     closeDropdown() {
-        this.dropdown.classList.remove("open");
-        this.selectContainer.classList.remove("open");
+        this.dropdown?.classList.remove("open");
+        this.selectContainer?.classList.remove("open");
+        document.removeEventListener("click", this._onDocumentClick, true);
         if (this._onScrollOrResize) {
             window.removeEventListener("scroll", this._onScrollOrResize, true);
             window.removeEventListener("resize", this._onScrollOrResize);
+            this._onScrollOrResize = null;
         }
     }
 
@@ -309,6 +326,7 @@ class YumeSelect extends HTMLElement {
     }
 
     render() {
+        this.closeDropdown();
         this.applyStyles();
         this.shadowRoot.innerHTML = this.generateTemplate();
         this.queryRefs();
@@ -382,7 +400,7 @@ class YumeSelect extends HTMLElement {
 
             .dropdown {
                 position: fixed;
-                z-index: 9999;
+                z-index: var(--component-select-z-index, 6000);
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);

package/dist/components/y-table.js

@@ -150,12 +150,12 @@ class YumeTable extends HTMLElement {
 
         const topColor =
             dir === "asc"
-                ? "var(--component-table-color, #333)"
-                : "var(--component-table-color-light, #bbb)";
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
         const bottomColor =
             dir === "desc"
-                ? "var(--component-table-color, #333)"
-                : "var(--component-table-color-light, #bbb)";
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
 
         return sortArrows(topColor, bottomColor);
     }
@@ -175,7 +175,7 @@ class YumeTable extends HTMLElement {
             :host {
                 display: block;
                 font-family: var(--font-family-body, sans-serif);
-                color: var(--component-table-color, #000);
+                color: var(--component-table-color, #f7f7fa);
             }
 
             .table-wrapper {
@@ -196,7 +196,7 @@ class YumeTable extends HTMLElement {
                 font-size: var(--font-size-paragraph, 1em);
                 white-space: nowrap;
                 background: transparent;
-                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #ccc);
+                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);
                 user-select: none;
             }
 
@@ -205,7 +205,7 @@ class YumeTable extends HTMLElement {
             }
 
             thead th.sortable:hover {
-                background: var(--component-table-hover-background, #f5f5f5);
+                background: var(--component-table-hover-background, #292a2b);
             }
 
             .th-content {
@@ -222,7 +222,7 @@ class YumeTable extends HTMLElement {
             tbody td {
                 padding: ${paddingVar};
                 font-size: var(--font-size-paragraph, 1em);
-                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #ccc);
+                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);
             }
 
             tbody tr:last-child td {
@@ -236,13 +236,13 @@ class YumeTable extends HTMLElement {
             ${
                 striped
                     ? `tbody tr:nth-child(even) {
-                    background: var(--component-table-hover-background, #f9f9f9);
+                    background: var(--component-table-hover-background, #292a2b);
                 }`
                     : ""
             }
 
             tbody tr:hover {
-                background: var(--component-table-active-background, #eee);
+                background: var(--component-table-active-background, #46474a);
             }
         `;
         this.shadowRoot.appendChild(style);