@waggylabs/yumekit 0.2.4 → 0.2.6

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/components/y-slider.js

@@ -300,11 +300,11 @@ class YumeSlider extends HTMLElement {
             <style>
                 :host {
                     display: inline-block;
-                    width: var(--component-slider-width, 129px);
                     font-family: var(--font-family-body);
                     color: var(--base-content--);
                     opacity: ${isDisabled ? "0.5" : "1"};
                     pointer-events: ${isDisabled ? "none" : "auto"};
+                    min-width: 100px;
                 }
 
                 .slider-wrapper {

package/dist/components/y-tabs.js

@@ -129,7 +129,6 @@ class YumeTabs extends HTMLElement {
         return `
             :host {
                 display: flex;
-                font-family: var(--component-tabs-font-family, var(--font-family-body));
             }
             :host([position="top"]) { flex-direction: column; }
             :host([position="bottom"]) { flex-direction: column-reverse; }

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

@@ -2,7 +2,14 @@ export class YumeTheme extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set crossOrigin(val: boolean);
+    /** Whether cross-origin theme-path URLs are allowed. */
+    get crossOrigin(): boolean;
     _applyTheme(): Promise<void>;
+    /** Resolves theme CSS from either a remote path or the built-in theme map. */
+    _resolveThemeCSS(): Promise<any>;
+    /** Rebuilds the shadow DOM with base variables, optional theme styles, and a slot. */
+    _buildShadowDOM(themeCSS: any): void;
     /**
      * Parses CSS custom properties from the given text and sets them on the host element.
      * @param {string} cssText - Raw CSS containing custom property declarations.