@waggylabs/yumekit 0.2.4 → 0.2.5

package/README.md

@@ -42,10 +42,6 @@ npm install @waggylabs/yumekit
 The IIFE bundle includes all components and icons. Drop it into any HTML page:
 
 ```html
-<link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@waggylabs/yumekit/dist/styles/blue-light.css"
-/>
 <script src="https://cdn.jsdelivr.net/npm/@waggylabs/yumekit/dist/yumekit.min.js"></script>
 
 <y-button color="primary">Click me</y-button>

package/dist/components/y-appbar.js

@@ -221,6 +221,7 @@ class YumeButton extends HTMLElement {
         .button {
             box-sizing: border-box;
             display: inline-flex;
+            width: 100%;
             min-height: var(--button-min-height, var(--sizing-medium, 40px));
             min-width: var(--button-min-width, var(--sizing-medium, 40px));
             padding: var(--button-padding, var(--component-button-padding-medium));
@@ -836,6 +837,31 @@ if (!customElements.get("y-icon")) {
     customElements.define("y-icon", YumeIcon);
 }
 
+/* ================================================================== */
+/*  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.                                 */
+/* ================================================================== */
+
+/* ── Chevrons ─────────────────────────────────────────────────────── */
+
+const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+
+const chevronDown = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+
+/* ── Double chevrons (collapse / expand) ──────────────────────────── */
+
+const collapseLeft = `<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="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>`;
+
+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 YumeMenu extends HTMLElement {
     static get observedAttributes() {
         return ["items", "anchor", "visible", "direction", "size"];
@@ -972,10 +998,16 @@ class YumeMenu extends HTMLElement {
                 });
             }
 
+            if (!item.children?.length) {
+                li.addEventListener("click", () => {
+                    this.visible = false;
+                });
+            }
+
             if (item.children?.length) {
                 const indicator = document.createElement("span");
                 indicator.className = "submenu-indicator";
-                indicator.textContent = "▶";
+                indicator.innerHTML = chevronRight;
                 li.appendChild(indicator);
 
                 const submenu = this._createMenuList(item.children);
@@ -1129,8 +1161,6 @@ class YumeMenu extends HTMLElement {
                 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 {
@@ -1142,6 +1172,7 @@ class YumeMenu extends HTMLElement {
                 white-space: nowrap;
                 color: var(--component-menu-color, #f7f7fa);
                 font-size: var(--font-size-button, 1em);
+                position: relative;
             }
 
             li.menuitem:hover {
@@ -1161,7 +1192,8 @@ class YumeMenu extends HTMLElement {
             }
 
             .submenu-indicator {
-                font-size: 0.75em;
+                display: inline-flex;
+                align-items: center;
                 margin-left: 0.5rem;
                 opacity: 0.6;
             }
@@ -1186,31 +1218,6 @@ if (!customElements.get("y-menu")) {
     customElements.define("y-menu", YumeMenu);
 }
 
-/* ================================================================== */
-/*  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.                                 */
-/* ================================================================== */
-
-/* ── Chevrons ─────────────────────────────────────────────────────── */
-
-const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
-
-const chevronDown = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
-
-/* ── Double chevrons (collapse / expand) ──────────────────────────── */
-
-const collapseLeft = `<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="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>`;
-
-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 [

package/dist/components/y-button.js

@@ -219,6 +219,7 @@ class YumeButton extends HTMLElement {
         .button {
             box-sizing: border-box;
             display: inline-flex;
+            width: 100%;
             min-height: var(--button-min-height, var(--sizing-medium, 40px));
             min-width: var(--button-min-width, var(--sizing-medium, 40px));
             padding: var(--button-padding, var(--component-button-padding-medium));

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

@@ -1,27 +1 @@
-declare class YumeMenu extends HTMLElement {
-    static get observedAttributes(): string[];
-    static _closeAll(except: any): void;
-    _onAnchorClick(e: any): void;
-    _onDocumentClick(e: any): void;
-    _onScrollOrResize(): void;
-    connectedCallback(): void;
-    set items(val: any);
-    get items(): any;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    set anchor(val: string);
-    get anchor(): string;
-    set visible(val: boolean);
-    get visible(): boolean;
-    set direction(val: string);
-    get direction(): string;
-    set size(val: string);
-    get size(): string;
-    _createMenuList(items: any): HTMLUListElement;
-    _findTemplate(name: any): Element;
-    _setupAnchor(): void;
-    _anchorEl: any;
-    _teardownAnchor(): void;
-    _updatePosition(): void;
-    render(): void;
-}
+export {};

package/dist/components/y-menu.js

@@ -1,3 +1,16 @@
+/* ================================================================== */
+/*  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.                                 */
+/* ================================================================== */
+
+/* ── Chevrons ─────────────────────────────────────────────────────── */
+
+const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+
 class YumeMenu extends HTMLElement {
     static get observedAttributes() {
         return ["items", "anchor", "visible", "direction", "size"];
@@ -134,10 +147,16 @@ class YumeMenu extends HTMLElement {
                 });
             }
 
+            if (!item.children?.length) {
+                li.addEventListener("click", () => {
+                    this.visible = false;
+                });
+            }
+
             if (item.children?.length) {
                 const indicator = document.createElement("span");
                 indicator.className = "submenu-indicator";
-                indicator.textContent = "▶";
+                indicator.innerHTML = chevronRight;
                 li.appendChild(indicator);
 
                 const submenu = this._createMenuList(item.children);
@@ -291,8 +310,6 @@ class YumeMenu extends HTMLElement {
                 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 {
@@ -304,6 +321,7 @@ class YumeMenu extends HTMLElement {
                 white-space: nowrap;
                 color: var(--component-menu-color, #f7f7fa);
                 font-size: var(--font-size-button, 1em);
+                position: relative;
             }
 
             li.menuitem:hover {
@@ -323,7 +341,8 @@ class YumeMenu extends HTMLElement {
             }
 
             .submenu-indicator {
-                font-size: 0.75em;
+                display: inline-flex;
+                align-items: center;
                 margin-left: 0.5rem;
                 opacity: 0.6;
             }

package/dist/components/y-panel.js

@@ -191,17 +191,13 @@ class YumePanel extends HTMLElement {
                 return;
             }
 
-            if (this.hasChildren()) {
-                this.toggle();
-            } else {
-                this.dispatchEvent(
-                    new CustomEvent("select", {
-                        detail: { selected: true },
-                        bubbles: true,
-                        composed: true,
-                    }),
-                );
-            }
+            this.dispatchEvent(
+                new CustomEvent("select", {
+                    detail: { selected: true },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
         });
 
         header.addEventListener("keydown", (e) => {
@@ -211,6 +207,21 @@ class YumePanel extends HTMLElement {
             }
         });
 
+        const arrow = this.shadowRoot.querySelector(".arrow");
+        if (arrow) {
+            arrow.addEventListener("click", (e) => {
+                e.stopPropagation();
+                this.toggle();
+            });
+
+            arrow.addEventListener("keydown", (e) => {
+                if (e.key === " " || e.key === "Enter") {
+                    e.preventDefault();
+                    this.toggle();
+                }
+            });
+        }
+
         const childrenSlot = this.shadowRoot.querySelector(
             'slot[name="children"]',
         );
@@ -254,13 +265,13 @@ class YumePanel extends HTMLElement {
 
     updateExpandedState() {
         const hasChildren = this.hasChildren();
-        const header = this.shadowRoot.querySelector(".header");
+        const arrow = this.shadowRoot.querySelector(".arrow");
         const isExpanded = this.expanded && hasChildren;
 
         this._expanded = isExpanded;
 
-        if (header) {
-            header.setAttribute("aria-expanded", String(isExpanded));
+        if (arrow) {
+            arrow.setAttribute("aria-expanded", String(isExpanded));
         }
     }
 
@@ -315,10 +326,6 @@ class YumePanel extends HTMLElement {
                 background: var(--component-panel-hover-background);
             }
 
-            :host([data-has-children="false"]) .header {
-                cursor: default;
-            }
-
             .header ::slotted([slot="icon"]) {
                 margin-right: 6px;
             }
@@ -335,6 +342,17 @@ class YumePanel extends HTMLElement {
                 align-items: center;
                 justify-content: center;
                 transition: transform 0.2s ease;
+                background: none;
+                border: none;
+                padding: 0;
+                cursor: pointer;
+                color: inherit;
+                flex-shrink: 0;
+            }
+
+            .arrow:focus-visible {
+                outline: 2px solid var(--component-panel-accent, currentColor);
+                border-radius: 2px;
             }
 
             .arrow svg {
@@ -369,12 +387,12 @@ class YumePanel extends HTMLElement {
 
         this.shadowRoot.adoptedStyleSheets = [sheet];
         this.shadowRoot.innerHTML = `
-            <div class="header" part="header" role="button" tabindex="0" aria-expanded="false">
+            <div class="header" part="header" role="button" tabindex="0">
                 <slot name="icon"></slot>
                 <slot name="label"><slot></slot></slot>
-                <span class="arrow" id="arrow" part="arrow">
+                <button class="arrow" id="arrow" part="arrow" tabindex="0" aria-expanded="false" aria-label="Toggle children">
                     ${chevronDown}
-                </span>
+                </button>
             </div>
             <div class="children" id="childrenContainer" part="children">
                 <slot name="children"></slot>

package/dist/icons/all.js

@@ -18,7 +18,7 @@ var bolt = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
 
 var calendar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n  <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n  <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n  <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n  <rect x=\"7\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n  <rect x=\"14\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n</svg>\n";
 
-var campfire = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 3c0 4-4 6-4 10a4 4 0 0 0 8 0c0-4-4-6-4-10z\"/>\n  <path d=\"M12 17a1.5 1.5 0 0 1-1.5-1.5c0-1.5 1.5-2.5 1.5-4 0 1.5 1.5 2.5 1.5 4A1.5 1.5 0 0 1 12 17z\"/>\n  <line x1=\"5\" y1=\"21\" x2=\"19\" y2=\"21\"/>\n  <line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"17\"/>\n  <line x1=\"21\" y1=\"21\" x2=\"14\" y2=\"17\"/>\n</svg>\n";
+var campfire = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
 
 var chart = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>\n</svg>\n";
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from "./components/y-checkbox.js";
 export * from "./components/y-drawer.js";
 export * from "./components/y-icon.js";
 export * from "./components/y-input.js";
+export * from "./components/y-menu.js";
 export * from "./components/y-panel.js";
 export * from "./components/y-panelbar.js";
 export * from "./components/y-progress.js";