@waggylabs/yumekit 0.2.3 → 0.2.5

package/README.md

@@ -0,0 +1,117 @@
+<p align="center">
+  <img src="logo.svg" alt="Yumekit Logo" width="120" />
+</p>
+
+<h1 align="center">Yumekit</h1>
+
+<p align="center">
+  A modern, themeable Web Components UI kit — no framework required.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@waggylabs/yumekit"><img src="https://img.shields.io/npm/v/@waggylabs/yumekit" alt="npm version" /></a>
+  <a href="https://github.com/waggylabs/yumekit/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@waggylabs/yumekit" alt="license" /></a>
+</p>
+
+---
+
+## Overview
+
+YumeKit is a collection of 23 production-ready custom elements built with native Web Components. It works with any framework — or none at all — and ships with a comprehensive design token system, built-in theming, an icon registry, and full TypeScript support.
+
+- **Zero dependencies** — built entirely on web standards
+- **Framework-agnostic** — works with React, Vue, Svelte, or plain HTML
+- **Themeable** — four built-in themes plus support for fully custom themes
+- **Accessible** — ARIA-compliant, keyboard navigable, form-associated inputs
+- **Tree-shakeable** — import only the components you use
+
+---
+
+## Installation
+
+```bash
+npm install @waggylabs/yumekit
+```
+
+---
+
+## Usage
+
+### Via CDN (script tag)
+
+The IIFE bundle includes all components and icons. Drop it into any HTML page:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@waggylabs/yumekit/dist/yumekit.min.js"></script>
+
+<y-button color="primary">Click me</y-button>
+```
+
+### Via ESM (recommended)
+
+Import the full library or individual components for tree-shaking:
+
+```js
+// Full library
+import "@waggylabs/yumekit";
+
+// Individual components
+import "@waggylabs/yumekit/components/y-theme";
+import "@waggylabs/yumekit/components/y-button";
+import "@waggylabs/yumekit/components/y-input";
+```
+
+Then use the `<y-theme>` component to apply a theme:
+
+```html
+<y-theme name="blue-light">
+    <!-- your app content -->
+</y-theme>
+```
+
+---
+
+## Components
+
+| Component | Element        | Description                                |
+| --------- | -------------- | ------------------------------------------ |
+| App Bar   | `<y-appbar>`   | Top or side navigation bar                 |
+| Avatar    | `<y-avatar>`   | User avatar with shape and color variants  |
+| Badge     | `<y-badge>`    | Status badge or label                      |
+| Button    | `<y-button>`   | Button with icon, size, and style variants |
+| Card      | `<y-card>`     | Content card container                     |
+| Checkbox  | `<y-checkbox>` | Form checkbox input                        |
+| Dialog    | `<y-dialog>`   | Modal dialog                               |
+| Drawer    | `<y-drawer>`   | Side drawer / sidebar                      |
+| Icon      | `<y-icon>`     | SVG icon display                           |
+| Input     | `<y-input>`    | Text input field                           |
+| Menu      | `<y-menu>`     | Dropdown navigation menu                   |
+| Panel     | `<y-panel>`    | Accordion panel                            |
+| Panel Bar | `<y-panelbar>` | Accordion panel group                      |
+| Progress  | `<y-progress>` | Progress bar                               |
+| Radio     | `<y-radio>`    | Radio button input                         |
+| Select    | `<y-select>`   | Select / dropdown input                    |
+| Slider    | `<y-slider>`   | Range slider input                         |
+| Switch    | `<y-switch>`   | Toggle switch                              |
+| Table     | `<y-table>`    | Data table                                 |
+| Tabs      | `<y-tabs>`     | Tabbed interface                           |
+| Tag       | `<y-tag>`      | Tag / chip label                           |
+| Theme     | `<y-theme>`    | Theme provider                             |
+| Toast     | `<y-toast>`    | Notification toast                         |
+| Tooltip   | `<y-tooltip>`  | Tooltip / popover                          |
+
+---
+
+## TypeScript
+
+Type definitions are included. React-specific type augmentations are available at `@waggylabs/yumekit/react`.
+
+```ts
+import "@waggylabs/yumekit";
+```
+
+---
+
+## License
+
+MIT © [WaggyLabs](https://github.com/waggylabs)

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 [
@@ -1574,21 +1581,21 @@ class YumeAppbar extends HTMLElement {
         const sizeConfig = {
             small: {
                 padding: "var(--spacing-x-small, 4px)",
-                collapsedWidth: "40px",
+                collapsedWidth: "var(--component-appbar-collapsed-width-small, 40px)",
                 bodyGap: "2px",
                 buttonSize: "small",
                 iconSize: "small",
             },
             medium: {
                 padding: "var(--spacing-small, 6px)",
-                collapsedWidth: "52px",
+                collapsedWidth: "var(--component-appbar-collapsed-width-medium, 52px)",
                 bodyGap: "3px",
                 buttonSize: "medium",
                 iconSize: "medium",
             },
             large: {
                 padding: "var(--spacing-medium, 8px)",
-                collapsedWidth: "64px",
+                collapsedWidth: "var(--component-appbar-collapsed-width-large, 64px)",
                 bodyGap: "4px",
                 buttonSize: "large",
                 iconSize: "large",
@@ -1840,7 +1847,7 @@ class YumeAppbar extends HTMLElement {
         bar.style.setProperty("--_appbar-body-gap", cfg.bodyGap);
         bar.style.setProperty(
             "--_icon-col-width",
-            `calc(${cfg.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)))`,
+            `calc(${cfg.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) - 2 * var(--component-button-border-width, 1px))`,
         );
 
         const header = document.createElement("div");

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-dialog.js

@@ -126,11 +126,11 @@ class YumeDialog extends HTMLElement {
                 display: none;
                 align-items: center;
                 justify-content: center;
-                background: rgba(0,0,0,0.5);
                 z-index: var(--component-dialog-z-index, 1000);
             }
             :host([visible]) { display: flex; }
             :host([show-backdrop]) {
+                background: rgba(0,0,0,0.5);
                 backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
                 -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
             }

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

@@ -8,7 +8,7 @@
 /* ================================================================== */
 
 
-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>`;
+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>`;
 
 class YumePanel extends HTMLElement {
     static get observedAttributes() {
@@ -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;
             }
@@ -334,9 +341,23 @@ class YumePanel extends HTMLElement {
                 display: inline-flex;
                 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 {
                 width: 20px;
                 height: 20px;
-                transition: transform 0.2s ease;
             }
 
             :host([expanded]) .arrow {
@@ -366,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">
-                    ${chevronDownLg}
-                </span>
+                <button class="arrow" id="arrow" part="arrow" tabindex="0" aria-expanded="false" aria-label="Toggle children">
+                    ${chevronDown}
+                </button>
             </div>
             <div class="children" id="childrenContainer" part="children">
                 <slot name="children"></slot>

package/dist/components/y-select.js

@@ -8,7 +8,7 @@
 /* ================================================================== */
 
 
-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>`;
+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>`;
 
 class YumeSelect extends HTMLElement {
     static formAssociated = true;
@@ -490,6 +490,8 @@ class YumeSelect extends HTMLElement {
             }
 
             .chevron-icon svg {
+                width: 20px;
+                height: 20px;
                 transition: transform 0.2s ease;
                 transform-origin: center;
             }
@@ -516,7 +518,7 @@ class YumeSelect extends HTMLElement {
                 <div class="select-container ${isInvalid ? "is-invalid" : ""}" tabindex="0">
                     <div class="value-display">${this.getDisplayText()}</div>
                     <div class="chevron-icon" part="chevron-icon">
-                        ${chevronDownLg}
+                        ${chevronDown}
                     </div>
                 </div>
                 ${!isLabelTop ? '<div class="label-wrapper"><slot name="label"></slot></div>' : ""}

package/dist/components/y-table.js

@@ -195,7 +195,7 @@ class YumeTable extends HTMLElement {
                 position: relative;
                 padding: ${paddingVar};
                 text-align: left;
-                font-weight: 500;
+                font-weight: 400;
                 font-size: var(--font-size-paragraph, 1em);
                 white-space: nowrap;
                 background: transparent;
@@ -233,7 +233,7 @@ class YumeTable extends HTMLElement {
             }
 
             tbody td.row-header {
-                font-weight: 500;
+                font-weight: 400;
             }
 
             ${