@studious-creative/yumekit 0.1.0

package/dist/components/y-menu.js

@@ -0,0 +1,299 @@
+class YumeMenu extends HTMLElement {
+    static get observedAttributes() {
+        return ["items", "anchor", "visible", "direction", "size"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._onAnchorClick = this._onAnchorClick.bind(this);
+        this._onDocumentClick = this._onDocumentClick.bind(this);
+        this._onScrollOrResize = this._onScrollOrResize.bind(this);
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("items")) this.items = [];
+        this._setupAnchor();
+        this.render();
+        document.addEventListener("click", this._onDocumentClick);
+        window.addEventListener("scroll", this._onScrollOrResize, true);
+        window.addEventListener("resize", this._onScrollOrResize);
+        this.style.position = "fixed";
+        this.style.zIndex = "1000";
+        this.style.display = "none";
+    }
+
+    disconnectedCallback() {
+        this._teardownAnchor();
+        document.removeEventListener("click", this._onDocumentClick);
+        window.removeEventListener("scroll", this._onScrollOrResize, true);
+        window.removeEventListener("resize", this._onScrollOrResize);
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        if (name === "items" || name === "size") this.render();
+        if (name === "anchor") {
+            this._teardownAnchor();
+            this._setupAnchor();
+        }
+        if (name === "visible") {
+            this._updatePosition();
+        }
+        if (name === "direction") {
+            this._updatePosition();
+        }
+    }
+
+    get items() {
+        try {
+            return JSON.parse(this.getAttribute("items")) || [];
+        } catch {
+            return [];
+        }
+    }
+    set items(val) {
+        this.setAttribute("items", JSON.stringify(val));
+    }
+
+    get anchor() {
+        return this.getAttribute("anchor");
+    }
+    set anchor(val) {
+        this.setAttribute("anchor", val);
+    }
+
+    get visible() {
+        return this.hasAttribute("visible");
+    }
+    set visible(val) {
+        if (val) this.setAttribute("visible", "");
+        else this.removeAttribute("visible");
+    }
+
+    get direction() {
+        return this.getAttribute("direction") || "down";
+    }
+    set direction(val) {
+        this.setAttribute("direction", val);
+    }
+
+    get size() {
+        const sz = this.getAttribute("size");
+        return ["small", "medium", "large"].includes(sz) ? sz : "medium";
+    }
+    set size(val) {
+        if (["small", "medium", "large"].includes(val))
+            this.setAttribute("size", val);
+        else this.setAttribute("size", "medium");
+    }
+
+    _createMenuList(items) {
+        const ul = document.createElement("ul");
+
+        items.forEach((item) => {
+            const li = document.createElement("li");
+            li.className = "menuitem";
+            li.setAttribute("role", "menuitem");
+            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));
+            }
+
+            if (item.template) {
+                const textTpl = this._findTemplate(item.template);
+                if (textTpl) {
+                    contentWrapper.appendChild(textTpl.content.cloneNode(true));
+                } else {
+                    contentWrapper.textContent = item.text;
+                }
+            } else {
+                contentWrapper.textContent = item.text;
+            }
+
+            li.appendChild(contentWrapper);
+
+            if (item.url) {
+                li.addEventListener("click", () => {
+                    window.location.href = item.url;
+                });
+            }
+
+            if (item.children?.length) {
+                const indicator = document.createElement("span");
+                indicator.className = "submenu-indicator";
+                indicator.textContent = "▶";
+                li.appendChild(indicator);
+
+                const submenu = this._createMenuList(item.children);
+                submenu.classList.add("submenu");
+                submenu.setAttribute("role", "menu");
+                li.appendChild(submenu);
+            }
+
+            ul.appendChild(li);
+        });
+
+        return ul;
+    }
+
+    _findTemplate(name) {
+        return this.querySelector(`template[slot="${name}"]`);
+    }
+
+    _onAnchorClick(e) {
+        e.stopPropagation();
+        this.visible = !this.visible;
+    }
+
+    _onDocumentClick(e) {
+        const path = e.composedPath();
+        if (this._anchorEl && path.includes(this._anchorEl)) return;
+        if (path.includes(this)) return;
+        this.visible = false;
+    }
+
+    _onScrollOrResize() {
+        if (this.visible) this._updatePosition();
+    }
+
+    _setupAnchor() {
+        const id = this.anchor;
+        if (id) {
+            const root = this.getRootNode();
+            const el = root?.getElementById
+                ? root.getElementById(id)
+                : document.getElementById(id);
+            if (el) {
+                this._anchorEl = el;
+                this._anchorEl.addEventListener("click", this._onAnchorClick);
+            }
+        }
+    }
+
+    _teardownAnchor() {
+        if (this._anchorEl) {
+            this._anchorEl.removeEventListener("click", this._onAnchorClick);
+            this._anchorEl = null;
+        }
+    }
+
+    _updatePosition() {
+        if (!this.visible || !this._anchorEl) {
+            this.style.display = "none";
+            return;
+        }
+
+        const anchorRect = this._anchorEl.getBoundingClientRect();
+        const menuRect = this.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        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 = vh - menuRect.height - 10;
+            }
+        } else {
+            top = anchorRect.bottom;
+            left = anchorRect.left;
+
+            if (top + menuRect.height > vh) {
+                top = anchorRect.top - menuRect.height;
+            }
+            if (left + menuRect.width > vw) {
+                left = vw - menuRect.width - 10;
+            }
+        }
+
+        top = Math.max(10, Math.min(top, vh - menuRect.height - 10));
+        left = Math.max(10, Math.min(left, vw - menuRect.width - 10));
+
+        this.style.top = `${top}px`;
+        this.style.left = `${left}px`;
+        this.style.display = "block";
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = "";
+
+        const paddingVar = `var(--component-button-padding-${this.size}, 0.5rem)`;
+
+        const style = document.createElement("style");
+        style.textContent = `
+            ul.menu,
+            ul.submenu {
+                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);
+                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;
+                max-height: 300px;
+                overflow-y: auto;
+            }
+
+            li.menuitem {
+                cursor: pointer;
+                padding: ${paddingVar};
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                white-space: nowrap;
+                color: var(--component-menu-color, #000);
+                font-size: var(--font-size-button, 1em);
+            }
+
+            li.menuitem:hover {
+                background: var(--component-menu-hover-background, #eee);
+            }
+
+            ul.submenu {
+                position: absolute;
+                top: 0;
+                left: 100%;
+                display: none;
+                z-index: 1001;
+            }
+
+            li.menuitem:hover > ul.submenu {
+                display: block;
+            }
+
+            .submenu-indicator {
+                font-size: 0.75em;
+                margin-left: 0.5rem;
+                opacity: 0.6;
+            }
+
+            .item-content {
+                flex: 1;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const rootUl = this._createMenuList(this.items);
+        rootUl.classList.add("menu");
+        rootUl.setAttribute("role", "menu");
+        this.shadowRoot.appendChild(rootUl);
+    }
+}
+
+if (!customElements.get("y-menu")) {
+    customElements.define("y-menu", YumeMenu);
+}

package/dist/components/y-panel.js

@@ -0,0 +1,350 @@
+/* ================================================================== */
+/*  Centralized SVG icon strings for the YumeKit component library.   */
+/*                                                                     */
+/*  Each static icon also lives in its own .svg file in this directory */
+/*  so it can be used standalone (e.g. <img src="…">, CSS background, */
+/*  design tools, etc.).  The strings below mirror those files — keep  */
+/*  them in sync when editing an icon.                                 */
+/* ================================================================== */
+
+
+const chevronDownLg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" aria-hidden="true"><path d="M5 7 L10 12 L15 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" /></svg>`;
+
+class YumePanel extends HTMLElement {
+    static get observedAttributes() {
+        return ["selected", "expanded", "href", "history"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._expanded = false;
+        this._checkRouteMatchBound = this.checkRouteMatch.bind(this);
+        this.render();
+    }
+
+    connectedCallback() {
+        this.addHeaderListeners();
+        this.checkForChildren();
+        this.updateChildState();
+        this.updateSelectedState();
+        this.updateExpandedState();
+
+        if (this.hasAttribute("href")) {
+            this.checkRouteMatch();
+            window.addEventListener("popstate", this._checkRouteMatchBound);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.hasAttribute("href")) {
+            window.removeEventListener("popstate", this._checkRouteMatchBound);
+        }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+
+        if (name === "selected") {
+            this.updateSelectedState();
+        }
+
+        if (name === "expanded") {
+            this.updateExpandedState();
+        }
+
+        if (name === "href") {
+            this.checkRouteMatch();
+        }
+    }
+
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+
+    set selected(val) {
+        if (val) this.setAttribute("selected", "");
+        else this.removeAttribute("selected");
+    }
+
+    get expanded() {
+        return this.hasAttribute("expanded");
+    }
+
+    set expanded(val) {
+        if (val) this.setAttribute("expanded", "");
+        else this.removeAttribute("expanded");
+    }
+
+    toggle() {
+        if (!this.hasChildren()) return;
+        if (!this._expanded) {
+            const parentBar = this.closest("y-panelbar");
+            if (parentBar && parentBar.hasAttribute("exclusive")) {
+                const siblingPanels = parentBar.querySelectorAll("y-panel");
+                siblingPanels.forEach((panel) => {
+                    if (panel !== this && panel.expanded) {
+                        panel.collapse();
+                    }
+                });
+            }
+            this.expand();
+        } else {
+            this.collapse();
+        }
+        this.dispatchEvent(
+            new CustomEvent("toggle", {
+                detail: { expanded: this._expanded },
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
+    expand() {
+        if (!this.hasChildren()) return;
+        this.expanded = true;
+        this._expanded = true;
+        this.updateExpandedState();
+        this.dispatchEvent(
+            new CustomEvent("expand", {
+                detail: { expanded: true },
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
+    collapse() {
+        this.expanded = false;
+        this._expanded = false;
+        this.updateExpandedState();
+        this.dispatchEvent(
+            new CustomEvent("collapse", {
+                detail: { expanded: false },
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
+    updateSelectedState() {
+        this.classList.toggle("selected", this.selected);
+    }
+
+    updateChildState() {
+        const parentPanel = this.parentElement?.closest("y-panel");
+        const isChild = Boolean(parentPanel && parentPanel !== this);
+        this.setAttribute("data-is-child", isChild ? "true" : "false");
+    }
+
+    checkRouteMatch() {
+        const href = this.getAttribute("href");
+        if (href && window.location.pathname === href) {
+            this.selected = true;
+        } else {
+            this.selected = false;
+        }
+    }
+
+    addHeaderListeners() {
+        const header = this.shadowRoot.querySelector(".header");
+        if (!header) return;
+
+        header.addEventListener("click", () => {
+            if (this.hasAttribute("href")) {
+                const href = this.getAttribute("href");
+                if (this.getAttribute("history") !== "false") {
+                    history.pushState({}, "", href);
+                    window.dispatchEvent(
+                        new PopStateEvent("popstate", { state: {} }),
+                    );
+                } else {
+                    window.location.href = href;
+                }
+                return;
+            }
+
+            if (this.hasChildren()) {
+                this.toggle();
+            } else {
+                this.dispatchEvent(
+                    new CustomEvent("select", {
+                        detail: { selected: true },
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
+            }
+        });
+
+        header.addEventListener("keydown", (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                header.click();
+            }
+        });
+
+        const childrenSlot = this.shadowRoot.querySelector(
+            'slot[name="children"]',
+        );
+        if (childrenSlot) {
+            childrenSlot.addEventListener("slotchange", () =>
+                this.checkForChildren(),
+            );
+        }
+    }
+
+    hasChildren() {
+        const childrenSlot = this.shadowRoot.querySelector(
+            'slot[name="children"]',
+        );
+        if (!childrenSlot) return false;
+        const nodes = childrenSlot.assignedNodes({ flatten: true });
+        return nodes.some((n) => {
+            if (n.nodeType === Node.TEXT_NODE) {
+                return n.textContent.trim() !== "";
+            }
+            return true;
+        });
+    }
+
+    checkForChildren() {
+        const hasChildren = this.hasChildren();
+        this.setAttribute("data-has-children", hasChildren ? "true" : "false");
+        if (!hasChildren && this.expanded) {
+            this.expanded = false;
+        }
+    }
+
+    updateExpandedState() {
+        const hasChildren = this.hasChildren();
+        const header = this.shadowRoot.querySelector(".header");
+        const isExpanded = this.expanded && hasChildren;
+        this._expanded = isExpanded;
+
+        if (header) {
+            header.setAttribute("aria-expanded", String(isExpanded));
+        }
+    }
+
+    render() {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+            :host {
+                display: block;
+                box-sizing: border-box;
+                background: var(--component-panel-background);
+                color: var(--component-panel-color);
+                font-family: var(--font-family-body);
+                overflow: hidden;
+            }
+
+            :host([expanded]) {
+                background: var(--component-panel-expanded-background);
+            }
+
+            :host([selected]) {
+                color: var(--component-panel-accent);
+            }
+
+            :host([data-is-child="true"]) {
+                box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-active-border);
+            }
+
+            :host([data-is-child="true"][selected]) {
+                box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-accent);
+            }
+
+            :host([selected]) .header:hover {
+                background: var(--component-panel-accent-hover-background);
+            }
+
+            :host([data-is-child="true"]) .header {
+                padding-left: calc(var(--component-panelbar-padding, 4px) * 2);
+            }
+
+            .header {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-medium, 8px);
+                padding: var(--component-panelbar-padding, 4px);
+                cursor: pointer;
+                transition: background 0.2s ease;
+                user-select: none;
+            }
+
+            .header:hover {
+                background: var(--component-panel-hover-background);
+            }
+
+            :host([data-has-children="false"]) .header {
+                cursor: default;
+            }
+
+            .header ::slotted([slot="icon"]) {
+                margin-right: 6px;
+            }
+
+            .header ::slotted([slot="label"]) {
+                flex-grow: 1;
+                cursor: inherit;
+                font-size: 1rem;
+                line-height: 1.2;
+            }
+
+            .arrow {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 20px;
+                height: 20px;
+                transition: transform 0.2s ease;
+            }
+
+            :host([expanded]) .arrow {
+                transform: rotate(180deg);
+            }
+
+            .children {
+                display: none;
+                padding: 0;
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            .children ::slotted(y-panel) {
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            :host([expanded]) .children {
+                display: block;
+            }
+
+            :host([data-has-children="false"]) .arrow {
+                visibility: hidden;
+            }
+        `);
+
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+        this.shadowRoot.innerHTML = `
+            <div class="header" part="header" role="button" tabindex="0" aria-expanded="false">
+                <slot name="icon"></slot>
+                <slot name="label"><slot></slot></slot>
+                <span class="arrow" id="arrow" part="arrow">
+                    ${chevronDownLg}
+                </span>
+            </div>
+            <div class="children" id="childrenContainer" part="children">
+                <slot name="children"></slot>
+            </div>
+        `;
+    }
+}
+
+if (!customElements.get("y-panel")) {
+    customElements.define("y-panel", YumePanel);
+}
+
+export { YumePanel };

package/dist/components/y-panelbar.js

@@ -0,0 +1,27 @@
+class YumePanelBar extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    render() {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+            :host {
+                display: block;
+            }
+        `);
+
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+        this.shadowRoot.innerHTML = `
+            <slot></slot>
+        `;
+    }
+}
+
+if (!customElements.get("y-panelbar")) {
+    customElements.define("y-panelbar", YumePanelBar);
+}
+
+export { YumePanelBar };