@waggylabs/yumekit 0.2.1 → 0.2.2

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

@@ -1,7 +1,10 @@
 export class YumeAppbar extends HTMLElement {
     static get observedAttributes(): string[];
     _onCollapseClick(): void;
+    _onMediaChange(e: any): void;
     _idCounter: number;
+    _mql: MediaQueryList;
+    _isMobile: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
@@ -21,8 +24,26 @@ export class YumeAppbar extends HTMLElement {
     get menuDirection(): string;
     set sticky(val: string | false);
     get sticky(): string | false;
+    set mobileBreakpoint(val: string);
+    /**
+     * Override the mobile breakpoint (in pixels) for this instance.
+     * Falls back to the CSS variable --component-appbar-mobile-breakpoint (default 768).
+     */
+    get mobileBreakpoint(): string;
+    /** Whether the appbar is currently rendering in mobile mode. */
+    get mobile(): boolean;
     toggle(): void;
     _uid(prefix: any): string;
     _isItemActive(item: any): boolean;
+    _getBreakpointPx(): number;
+    _setupMediaQuery(): void;
+    _teardownMediaQuery(): void;
+    /**
+     * Convert appbar nav items to y-menu item format.
+     * Maps `href` → `url` and recursively converts children.
+     */
+    _toMenuItems(items: any): any;
     render(): void;
+    _renderMobile(): void;
+    _renderDesktop(): void;
 }

package/dist/components/y-appbar.js

@@ -57,6 +57,7 @@ class YumeButton extends HTMLElement {
         }
     }
 
+    /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value() {
         if (this.hasAttribute("multiple")) {
             return Array.from(this.selectedValues).join(",");
@@ -87,6 +88,10 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /**
+     * Sets the button options from an array of objects.
+     * @param {Array<Object>} options
+     */
     setOptions(options) {
         this.setAttribute("options", JSON.stringify(options));
     }
@@ -664,7 +669,6 @@ function sanitizeSvg(raw) {
         }
     };
 
-    // Sanitize the <svg> element's own attributes
     for (const attr of [...svg.attributes]) {
         if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
             svg.removeAttribute(attr.name);
@@ -706,6 +710,7 @@ class YumeIcon extends HTMLElement {
         this.render();
     }
 
+    /** The registered icon name to display. */
     get name() {
         return this.getAttribute("name") || "";
     }
@@ -713,6 +718,7 @@ class YumeIcon extends HTMLElement {
         this.setAttribute("name", val);
     }
 
+    /** Icon size: "small" | "medium" | "large" (default "medium"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -720,6 +726,7 @@ class YumeIcon extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
     get color() {
         return this.getAttribute("color") || "";
     }
@@ -728,6 +735,7 @@ class YumeIcon extends HTMLElement {
         else this.removeAttribute("color");
     }
 
+    /** Accessible label for the icon. When set, the icon gets role="img". */
     get label() {
         return this.getAttribute("label") || "";
     }
@@ -736,8 +744,9 @@ class YumeIcon extends HTMLElement {
         else this.removeAttribute("label");
     }
 
+    /** Stroke weight: "thin" | "regular" | "thick". */
     get weight() {
-        return this.getAttribute("weight") || "";
+        return this.getAttribute("weight") || "regular";
     }
     set weight(val) {
         if (val) this.setAttribute("weight", val);
@@ -759,18 +768,22 @@ class YumeIcon extends HTMLElement {
 
     _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)",
+            "x-small": "var(--component-icon-size-x-small, 10px)",
+            small: "var(--component-icon-size-small, 14px)",
+            medium: "var(--component-icon-size-medium, 18px)",
+            large: "var(--component-icon-size-large, 22px)",
+            "x-large": "var(--component-icon-size-x-large, 28px)",
         };
         return map[size] || map.medium;
     }
 
     _getWeight(weight) {
         const map = {
-            thin: "1",
-            regular: "1.5",
-            thick: "2",
+            "x-thin": "1",
+            thin: "1.5",
+            regular: "2",
+            thick: "2.5",
+            "x-thick": "3",
         };
         return map[weight] || "";
     }
@@ -838,11 +851,14 @@ class YumeMenu extends HTMLElement {
 
     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";
@@ -850,6 +866,7 @@ class YumeMenu extends HTMLElement {
 
     disconnectedCallback() {
         this._teardownAnchor();
+
         document.removeEventListener("click", this._onDocumentClick);
         window.removeEventListener("scroll", this._onScrollOrResize, true);
         window.removeEventListener("resize", this._onScrollOrResize);
@@ -857,14 +874,18 @@ class YumeMenu extends HTMLElement {
 
     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();
         }
@@ -975,9 +996,20 @@ class YumeMenu extends HTMLElement {
 
     _onAnchorClick(e) {
         e.stopPropagation();
+        if (!this.visible) {
+            YumeMenu._closeAll(this);
+        }
         this.visible = !this.visible;
     }
 
+    static _closeAll(except) {
+        document.querySelectorAll("y-menu").forEach((menu) => {
+            if (menu !== except && menu.visible) {
+                menu.visible = false;
+            }
+        });
+    }
+
     _onDocumentClick(e) {
         const path = e.composedPath();
         if (this._anchorEl && path.includes(this._anchorEl)) return;
@@ -1017,7 +1049,13 @@ class YumeMenu extends HTMLElement {
         }
 
         const anchorRect = this._anchorEl.getBoundingClientRect();
+
+        // Temporarily show off-screen to measure actual dimensions
+        this.style.visibility = "hidden";
+        this.style.display = "block";
         const menuRect = this.getBoundingClientRect();
+        this.style.visibility = "";
+
         const vw = window.innerWidth;
         const vh = window.innerHeight;
 
@@ -1078,8 +1116,8 @@ class YumeMenu extends HTMLElement {
         this.shadowRoot.innerHTML = "";
 
         const paddingVar = `var(--component-button-padding-${this.size}, 0.5rem)`;
-
         const style = document.createElement("style");
+
         style.textContent = `
             ul.menu,
             ul.submenu {
@@ -1132,12 +1170,14 @@ class YumeMenu extends HTMLElement {
                 flex: 1;
             }
         `;
+
         this.shadowRoot.appendChild(style);
 
         const rootUl = this._createMenuList(this.items);
         rootUl.classList.add("menu");
         rootUl.setAttribute("role", "menu");
         rootUl.setAttribute("part", "menu");
+
         this.shadowRoot.appendChild(rootUl);
     }
 }
@@ -1167,6 +1207,10 @@ const collapseLeft = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height=
 
 const expandRight = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>`;
 
+/* ── Menu (hamburger) ────────────────────────────────────────────── */
+
+const menu = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>`;
+
 class YumeAppbar extends HTMLElement {
     static get observedAttributes() {
         return [
@@ -1176,6 +1220,7 @@ class YumeAppbar extends HTMLElement {
             "size",
             "menu-direction",
             "sticky",
+            "mobile-breakpoint",
         ];
     }
 
@@ -1183,17 +1228,26 @@ class YumeAppbar extends HTMLElement {
         super();
         this.attachShadow({ mode: "open" });
         this._onCollapseClick = this._onCollapseClick.bind(this);
+        this._onMediaChange = this._onMediaChange.bind(this);
         this._idCounter = 0;
+        this._mql = null;
+        this._isMobile = false;
     }
 
     connectedCallback() {
+        this._setupMediaQuery();
         this.render();
     }
 
-    disconnectedCallback() {}
+    disconnectedCallback() {
+        this._teardownMediaQuery();
+    }
 
     attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
+        if (name === "mobile-breakpoint" || name === "orientation") {
+            this._setupMediaQuery();
+        }
         this.render();
     }
 
@@ -1251,6 +1305,23 @@ class YumeAppbar extends HTMLElement {
         else this.removeAttribute("sticky");
     }
 
+    /**
+     * Override the mobile breakpoint (in pixels) for this instance.
+     * Falls back to the CSS variable --component-appbar-mobile-breakpoint (default 768).
+     */
+    get mobileBreakpoint() {
+        return this.getAttribute("mobile-breakpoint") || "";
+    }
+    set mobileBreakpoint(val) {
+        if (val) this.setAttribute("mobile-breakpoint", val);
+        else this.removeAttribute("mobile-breakpoint");
+    }
+
+    /** Whether the appbar is currently rendering in mobile mode. */
+    get mobile() {
+        return this._isMobile;
+    }
+
     toggle() {
         this.collapsed = !this.collapsed;
     }
@@ -1273,7 +1344,228 @@ class YumeAppbar extends HTMLElement {
         return false;
     }
 
+    _getBreakpointPx() {
+        const attr = this.mobileBreakpoint;
+        if (attr) {
+            const px = parseInt(attr, 10);
+            if (!isNaN(px) && px > 0) return px;
+        }
+        const cssVal = getComputedStyle(document.documentElement)
+            .getPropertyValue("--component-appbar-mobile-breakpoint")
+            .trim();
+        if (cssVal) {
+            const px = parseInt(cssVal, 10);
+            if (!isNaN(px) && px > 0) return px;
+        }
+        return 768;
+    }
+
+    _setupMediaQuery() {
+        this._teardownMediaQuery();
+        if (this.orientation !== "horizontal") {
+            this._isMobile = false;
+            return;
+        }
+        const bp = this._getBreakpointPx();
+        this._mql = window.matchMedia(`(max-width: ${bp}px)`);
+        this._isMobile = this._mql.matches;
+        this._mql.addEventListener("change", this._onMediaChange);
+    }
+
+    _teardownMediaQuery() {
+        if (this._mql) {
+            this._mql.removeEventListener("change", this._onMediaChange);
+            this._mql = null;
+        }
+    }
+
+    _onMediaChange(e) {
+        this._isMobile = e.matches;
+        this.render();
+    }
+
+    /**
+     * Convert appbar nav items to y-menu item format.
+     * Maps `href` → `url` and recursively converts children.
+     */
+    _toMenuItems(items) {
+        return items.map((item) => {
+            const mi = { text: item.text || "" };
+            if (item.href) mi.url = item.href;
+            if (item.icon) mi.icon = item.icon;
+            if (item.children?.length) {
+                mi.children = this._toMenuItems(item.children);
+            }
+            return mi;
+        });
+    }
+
     render() {
+        if (this._isMobile) {
+            this._renderMobile();
+        } else {
+            this._renderDesktop();
+        }
+    }
+
+    _renderMobile() {
+        const size = this.size;
+
+        const sizeConfig = {
+            small: {
+                padding: "var(--spacing-x-small, 4px)",
+                buttonSize: "small",
+                iconSize: "small",
+            },
+            medium: {
+                padding: "var(--spacing-small, 6px)",
+                buttonSize: "medium",
+                iconSize: "medium",
+            },
+            large: {
+                padding: "var(--spacing-medium, 8px)",
+                buttonSize: "large",
+                iconSize: "large",
+            },
+        };
+
+        this.shadowRoot.innerHTML = "";
+        this._idCounter = 0;
+
+        const cfg = sizeConfig[size] || sizeConfig.medium;
+        const style = document.createElement("style");
+
+        style.textContent = `
+            :host {
+                display: block;
+                font-family: var(--font-family-body, sans-serif);
+                color: var(--component-appbar-color, #f7f7fa);
+            }
+
+            :host([sticky]),
+            :host([sticky="start"]),
+            :host([sticky="end"]) {
+                position: sticky;
+                top: 0;
+                left: 0;
+                width: 100%;
+                z-index: var(--component-appbar-z-index, 100);
+            }
+
+            :host([sticky]) .appbar {
+                border-radius: 0;
+                border: none;
+                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+            }
+
+            .appbar {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                background: var(--component-appbar-background, #0c0c0d);
+                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
+                overflow: visible;
+                padding: var(--_appbar-padding);
+                box-sizing: border-box;
+                width: 100%;
+                height: auto;
+            }
+
+            .mobile-start {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+            }
+
+            .mobile-center {
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                overflow: hidden;
+            }
+
+            .mobile-end {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+            }
+
+            .mobile-end ::slotted(*) {
+                display: block;
+            }
+
+            ::slotted(*) {
+                display: block;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const bar = document.createElement("div");
+        bar.className = "appbar";
+        bar.setAttribute("role", "navigation");
+        bar.style.setProperty("--_appbar-padding", cfg.padding);
+
+        /* ── Left: hamburger button ── */
+        const startSection = document.createElement("div");
+        startSection.className = "mobile-start";
+
+        const menuBtn = document.createElement("y-button");
+        const menuBtnId = this._uid("appbar-mobile-menu");
+        menuBtn.id = menuBtnId;
+        menuBtn.setAttribute("color", "base");
+        menuBtn.setAttribute("style-type", "flat");
+        menuBtn.setAttribute("size", cfg.buttonSize);
+        menuBtn.setAttribute("aria-label", "Open menu");
+
+        const menuIcon = document.createElement("span");
+        menuIcon.slot = "left-icon";
+        menuIcon.innerHTML = menu;
+        menuBtn.appendChild(menuIcon);
+
+        startSection.appendChild(menuBtn);
+
+        const navItems = this.items;
+        if (navItems.length > 0) {
+            const mobileMenu = document.createElement("y-menu");
+            mobileMenu.setAttribute("anchor", menuBtnId);
+            mobileMenu.setAttribute("direction", "down");
+            mobileMenu.setAttribute("size", cfg.buttonSize);
+            mobileMenu.items = this._toMenuItems(navItems);
+            startSection.appendChild(mobileMenu);
+        }
+
+        bar.appendChild(startSection);
+
+        /* ── Center: logo + title ── */
+        const centerSection = document.createElement("div");
+        centerSection.className = "mobile-center";
+
+        const logoSlot = document.createElement("slot");
+        logoSlot.name = "logo";
+        centerSection.appendChild(logoSlot);
+
+        const titleSlot = document.createElement("slot");
+        titleSlot.name = "title";
+        centerSection.appendChild(titleSlot);
+
+        bar.appendChild(centerSection);
+
+        /* ── Right: footer slot ── */
+        const endSection = document.createElement("div");
+        endSection.className = "mobile-end";
+        endSection.setAttribute("part", "footer");
+
+        const footerSlot = document.createElement("slot");
+        footerSlot.name = "footer";
+        endSection.appendChild(footerSlot);
+
+        bar.appendChild(endSection);
+        this.shadowRoot.appendChild(bar);
+    }
+
+    _renderDesktop() {
         const isVertical = this.orientation === "vertical";
         const isCollapsed = this.collapsed && isVertical;
         const size = this.size;
@@ -1302,12 +1594,13 @@ class YumeAppbar extends HTMLElement {
                 iconSize: "large",
             },
         };
-        const cfg = sizeConfig[size] || sizeConfig.medium;
 
         this.shadowRoot.innerHTML = "";
         this._idCounter = 0;
 
+        const cfg = sizeConfig[size] || sizeConfig.medium;
         const style = document.createElement("style");
+
         style.textContent = `
             :host {
                 display: block;
@@ -1536,15 +1829,11 @@ class YumeAppbar extends HTMLElement {
         `;
         this.shadowRoot.appendChild(style);
 
-        // Clone document stylesheets so CSS-class-based icons (e.g. Font Awesome) render in shadow DOM
-        document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
-            this.shadowRoot.appendChild(link.cloneNode(true));
-        });
-
         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);
         bar.style.setProperty("--_appbar-collapsed-width", cfg.collapsedWidth);
@@ -1554,7 +1843,6 @@ class YumeAppbar extends HTMLElement {
             `calc(${cfg.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)))`,
         );
 
-        /* --- Header: logo + title --- */
         const header = document.createElement("div");
         header.className = "appbar-header";
         header.setAttribute("part", "header");
@@ -1584,21 +1872,22 @@ class YumeAppbar extends HTMLElement {
         header.appendChild(headerSlot);
         bar.appendChild(header);
 
-        /* --- Body: y-button nav items --- */
         const body = document.createElement("div");
         body.className = "appbar-body";
         body.setAttribute("part", "body");
 
         const navItems = this.items;
+
         navItems.forEach((item) => {
             const hasChildren = item.children?.length > 0;
             const wrapper = document.createElement("div");
-            wrapper.className = "nav-item";
-
             const btn = document.createElement("y-button");
             const btnId = this._uid("appbar-btn");
-            btn.id = btnId;
             const isActive = this._isItemActive(item);
+
+            wrapper.className = "nav-item";
+            btn.id = btnId;
+
             btn.setAttribute("color", isActive ? "primary" : "base");
             btn.setAttribute("style-type", "flat");
             btn.setAttribute("size", cfg.buttonSize);
@@ -1661,7 +1950,6 @@ class YumeAppbar extends HTMLElement {
 
         bar.appendChild(body);
 
-        /* --- Footer: slot + collapse toggle (vertical only) --- */
         const footer = document.createElement("div");
         footer.className = "appbar-footer";
         footer.setAttribute("part", "footer");

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

@@ -2,10 +2,15 @@ export class YumeBadge extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    /** Horizontal alignment of the badge: "left" | "right" (default "right"). */
     get alignment(): string;
+    /** Color theme: "primary" | "secondary" | "base" | "success" | "warning" | "error" | "help". */
     get color(): string;
+    /** Vertical position of the badge: "top" | "bottom" (default "top"). */
     get position(): string;
+    /** Badge size: "small" | "medium" | "large" (default "small"). */
     get size(): string;
+    /** The text content displayed inside the badge. */
     get value(): string;
     getBadgeColors(color: any): any;
     getBadgePosition(position: any, alignment: any): string;

package/dist/components/y-badge.js

@@ -19,22 +19,27 @@ class YumeBadge extends HTMLElement {
         }
     }
 
+    /** Horizontal alignment of the badge: "left" | "right" (default "right"). */
     get alignment() {
         return this.getAttribute("alignment") || "right";
     }
 
+    /** Color theme: "primary" | "secondary" | "base" | "success" | "warning" | "error" | "help". */
     get color() {
         return this.getAttribute("color") || "primary";
     }
 
+    /** Vertical position of the badge: "top" | "bottom" (default "top"). */
     get position() {
         return this.getAttribute("position") || "top";
     }
 
+    /** Badge size: "small" | "medium" | "large" (default "small"). */
     get size() {
         return this.getAttribute("size") || "small";
     }
 
+    /** The text content displayed inside the badge. */
     get value() {
         return this.getAttribute("value") || "";
     }

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

@@ -3,9 +3,14 @@ export class YumeButton extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set value(newVal: any);
+    /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value(): any;
     selectedValues: any;
-    setOptions(options: any): void;
+    /**
+     * Sets the button options from an array of objects.
+     * @param {Array<Object>} options
+     */
+    setOptions(options: Array<any>): void;
     handleClick(): void;
     init(): void;
     proxyNativeOnClick(): void;

package/dist/components/y-button.js

@@ -55,6 +55,7 @@ class YumeButton extends HTMLElement {
         }
     }
 
+    /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value() {
         if (this.hasAttribute("multiple")) {
             return Array.from(this.selectedValues).join(",");
@@ -85,6 +86,10 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /**
+     * Sets the button options from an array of objects.
+     * @param {Array<Object>} options
+     */
     setOptions(options) {
         this.setAttribute("options", JSON.stringify(options));
     }