@waggylabs/yumekit 0.2.0 → 0.2.2

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

@@ -5,14 +5,20 @@ export class YumeCheckbox extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any): void;
     set checked(val: boolean);
+    /** @type {boolean} Whether the checkbox is checked. */
     get checked(): boolean;
     set disabled(val: boolean);
+    /** @type {boolean} Whether the checkbox is disabled. */
     get disabled(): boolean;
     set indeterminate(val: boolean);
+    /** @type {boolean} Whether the checkbox is in an indeterminate state. */
     get indeterminate(): boolean;
     set value(val: string);
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
     get value(): string;
-    get name(): string;
+    /** @type {string|null} The form name of the checkbox. */
+    get name(): string | null;
+    /** Toggles the checked state and dispatches a "change" event. */
     toggle(): void;
     updateIcon(): void;
     updateState(): void;

package/dist/components/y-checkbox.js

@@ -59,6 +59,7 @@ class YumeCheckbox extends HTMLElement {
         this.updateState();
     }
 
+    /** @type {boolean} Whether the checkbox is checked. */
     get checked() {
         return this.hasAttribute("checked");
     }
@@ -68,6 +69,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("checked");
     }
 
+    /** @type {boolean} Whether the checkbox is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -77,6 +79,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("disabled");
     }
 
+    /** @type {boolean} Whether the checkbox is in an indeterminate state. */
     get indeterminate() {
         return this.hasAttribute("indeterminate");
     }
@@ -86,6 +89,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("indeterminate");
     }
 
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
     get value() {
         return this.getAttribute("value") || "on";
     }
@@ -94,10 +98,12 @@ class YumeCheckbox extends HTMLElement {
         this.setAttribute("value", val);
     }
 
+    /** @type {string|null} The form name of the checkbox. */
     get name() {
         return this.getAttribute("name");
     }
 
+    /** Toggles the checked state and dispatches a "change" event. */
     toggle() {
         if (this.disabled) return;
         if (this.indeterminate) {

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

@@ -5,12 +5,23 @@ declare class YumeDialog extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set visible(val: boolean);
+    /** Whether the dialog is currently displayed. */
     get visible(): boolean;
     set anchor(id: string);
+    /** The id of the element that toggles this dialog on click. */
     get anchor(): string;
     set closable(val: boolean);
+    /** Whether the dialog renders a close button in the header. */
     get closable(): boolean;
+    set showBackdrop(val: boolean);
+    /** Whether to apply a blurred backdrop behind the dialog. */
+    get showBackdrop(): boolean;
+    set animate(val: boolean);
+    /** Whether the dialog uses an entrance animation. */
+    get animate(): boolean;
+    /** Opens the dialog and focuses it. */
     show(): void;
+    /** Closes the dialog. */
     hide(): void;
     setupAnchor(): void;
     _anchorEl: HTMLElement;

package/dist/components/y-dialog.js

@@ -1,6 +1,6 @@
 class YumeDialog extends HTMLElement {
     static get observedAttributes() {
-        return ["visible", "anchor", "closable"];
+        return ["visible", "anchor", "closable", "show-backdrop", "animate"];
     }
 
     constructor() {
@@ -29,6 +29,7 @@ class YumeDialog extends HTMLElement {
         }
     }
 
+    /** Whether the dialog is currently displayed. */
     get visible() {
         return this.hasAttribute("visible");
     }
@@ -38,6 +39,7 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("visible");
     }
 
+    /** The id of the element that toggles this dialog on click. */
     get anchor() {
         return this.getAttribute("anchor");
     }
@@ -46,6 +48,7 @@ class YumeDialog extends HTMLElement {
         this.setAttribute("anchor", id);
     }
 
+    /** Whether the dialog renders a close button in the header. */
     get closable() {
         return this.hasAttribute("closable");
     }
@@ -54,6 +57,25 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("closable");
     }
 
+    /** Whether to apply a blurred backdrop behind the dialog. */
+    get showBackdrop() {
+        return this.hasAttribute("show-backdrop");
+    }
+    set showBackdrop(val) {
+        if (val) this.setAttribute("show-backdrop", "");
+        else this.removeAttribute("show-backdrop");
+    }
+
+    /** Whether the dialog uses an entrance animation. */
+    get animate() {
+        return this.hasAttribute("animate");
+    }
+    set animate(val) {
+        if (val) this.setAttribute("animate", "");
+        else this.removeAttribute("animate");
+    }
+
+    /** Opens the dialog and focuses it. */
     show() {
         if (!this.shadowRoot.querySelector(".dialog")) {
             this.render();
@@ -67,6 +89,7 @@ class YumeDialog extends HTMLElement {
         }
     }
 
+    /** Closes the dialog. */
     hide() {
         document.removeEventListener("keydown", this.onKeyDown);
     }
@@ -107,6 +130,16 @@ class YumeDialog extends HTMLElement {
                 z-index: var(--component-dialog-z-index, 1000);
             }
             :host([visible]) { display: flex; }
+            :host([show-backdrop]) {
+                backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
+                -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
+            }
+
+            @keyframes dialog-fade-in {
+                from { opacity: 0; transform: translateY(16px) scale(0.97); }
+                to   { opacity: 1; transform: translateY(0) scale(1); }
+            }
+
             .dialog {
                 background: var(--component-dialog-background);
                 border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);
@@ -117,6 +150,9 @@ class YumeDialog extends HTMLElement {
                 flex-direction: column;
                 box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));
             }
+            :host([animate][visible]) .dialog {
+                animation: dialog-fade-in var(--component-dialog-animation-duration, 0.2s) ease-out both;
+            }
             .header {
                 padding: var(--component-dialog-padding, var(--spacing-medium));
                 font-weight: bold;
@@ -129,26 +165,6 @@ class YumeDialog extends HTMLElement {
             .header-content {
                 flex: 1;
             }
-            .close-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: var(--spacing-x-small, 4px);
-                color: var(--component-dialog-color, #f7f7fa);
-                font-size: 1.25em;
-                line-height: 1;
-                border-radius: var(--component-button-border-radius-outer, 4px);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            .close-btn:hover {
-                background: var(--component-dialog-hover-background, #292a2b);
-            }
-            .close-btn:focus-visible {
-                outline: 2px solid var(--component-dialog-accent);
-                outline-offset: -1px;
-            }
             .body {
                 padding: var(--component-dialog-padding, var(--spacing-medium));
                 overflow: auto;
@@ -184,10 +200,11 @@ class YumeDialog extends HTMLElement {
         header.appendChild(headerContent);
 
         if (this.closable) {
-            const closeBtn = document.createElement("button");
-            closeBtn.className = "close-btn";
+            const closeBtn = document.createElement("y-button");
+            closeBtn.setAttribute("size", "small");
+            closeBtn.setAttribute("style-type", "flat");
             closeBtn.setAttribute("aria-label", "Close");
-            closeBtn.innerHTML = "✕";
+            closeBtn.textContent = "\u2715";
             closeBtn.addEventListener("click", () => {
                 this.visible = false;
             });
@@ -209,18 +226,20 @@ class YumeDialog extends HTMLElement {
         dialog.appendChild(footer);
         this.shadowRoot.appendChild(dialog);
 
-        // Hide slot containers that have no slotted content
         const hideIfEmpty = (wrapper) => {
             const slot = wrapper.querySelector("slot");
             if (!slot) return;
+
             const update = () => {
                 const hasContent =
                     slot.assignedNodes({ flatten: true }).length > 0;
                 wrapper.style.display = hasContent ? "" : "none";
             };
+
             slot.addEventListener("slotchange", update);
             update();
         };
+
         if (!this.closable) hideIfEmpty(header);
         hideIfEmpty(body);
         hideIfEmpty(footer);

package/dist/components/y-drawer.js

@@ -130,8 +130,7 @@ class YumeDrawer extends HTMLElement {
 
     _show() {
         this.style.display = "block";
-        // Force a reflow so the browser registers the initial state
-        this.offsetHeight; // eslint-disable-line no-unused-expressions
+        this.offsetHeight;
 
         const overlay = this.shadowRoot.querySelector(".overlay");
         const panel = this.shadowRoot.querySelector(".drawer-panel");

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

@@ -3,14 +3,19 @@ export class YumeIcon extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
     set name(val: string);
+    /** The registered icon name to display. */
     get name(): string;
     set size(val: string);
+    /** Icon size: "small" | "medium" | "large" (default "medium"). */
     get size(): string;
     set color(val: string);
+    /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
     get color(): string;
     set label(val: string);
+    /** Accessible label for the icon. When set, the icon gets role="img". */
     get label(): string;
     set weight(val: string);
+    /** Stroke weight: "thin" | "regular" | "thick". */
     get weight(): string;
     _getColor(color: any): any;
     _getSize(size: any): any;

package/dist/components/y-icon.js

@@ -108,7 +108,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);
@@ -150,6 +149,7 @@ class YumeIcon extends HTMLElement {
         this.render();
     }
 
+    /** The registered icon name to display. */
     get name() {
         return this.getAttribute("name") || "";
     }
@@ -157,6 +157,7 @@ class YumeIcon extends HTMLElement {
         this.setAttribute("name", val);
     }
 
+    /** Icon size: "small" | "medium" | "large" (default "medium"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -164,6 +165,7 @@ class YumeIcon extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
     get color() {
         return this.getAttribute("color") || "";
     }
@@ -172,6 +174,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") || "";
     }
@@ -180,8 +183,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);
@@ -203,18 +207,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] || "";
     }

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

@@ -5,7 +5,12 @@ export class YumeInput extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set value(val: string);
+    /** @type {string} The current input value. */
     get value(): string;
+    /**
+     * Checks the validity of the underlying input element.
+     * @returns {boolean} Whether the input is valid.
+     */
     checkValidity(): boolean;
     updateValidationState(): void;
     render(): void;

package/dist/components/y-input.js

@@ -57,6 +57,7 @@ class YumeInput extends HTMLElement {
         this.render();
     }
 
+    /** @type {string} The current input value. */
     get value() {
         return this.input?.value || "";
     }
@@ -67,6 +68,10 @@ class YumeInput extends HTMLElement {
         this._internals.setFormValue(val, this.getAttribute("name"));
     }
 
+    /**
+     * Checks the validity of the underlying input element.
+     * @returns {boolean} Whether the input is valid.
+     */
     checkValidity() {
         return this.input?.checkValidity?.() ?? true;
     }
@@ -102,6 +107,7 @@ class YumeInput extends HTMLElement {
             }[size] || "var(--sizing-medium, 40px)";
 
         const sheet = new CSSStyleSheet();
+
         sheet.replaceSync(`
             :host {
                 display: block;

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

@@ -1,5 +1,6 @@
 declare class YumeMenu extends HTMLElement {
     static get observedAttributes(): string[];
+    static _closeAll(except: any): void;
     _onAnchorClick(e: any): void;
     _onDocumentClick(e: any): void;
     _onScrollOrResize(): void;

package/dist/components/y-menu.js

@@ -13,11 +13,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";
@@ -25,6 +28,7 @@ class YumeMenu extends HTMLElement {
 
     disconnectedCallback() {
         this._teardownAnchor();
+
         document.removeEventListener("click", this._onDocumentClick);
         window.removeEventListener("scroll", this._onScrollOrResize, true);
         window.removeEventListener("resize", this._onScrollOrResize);
@@ -32,14 +36,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();
         }
@@ -150,9 +158,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;
@@ -192,7 +211,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;
 
@@ -253,8 +278,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 {
@@ -307,12 +332,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);
     }
 }

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

@@ -6,17 +6,26 @@ export class YumePanel extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set selected(val: boolean);
+    /** @type {boolean} Whether the panel is in a selected/active state. */
     get selected(): boolean;
     set expanded(val: boolean);
+    /** @type {boolean} Whether the panel's children slot is visible. */
     get expanded(): boolean;
+    /** Toggles the expanded state (collapses siblings when inside an exclusive panelbar). */
     toggle(): void;
+    /** Expands the panel to show its children. */
     expand(): void;
+    /** Collapses the panel to hide its children. */
     collapse(): void;
     updateSelectedState(): void;
     updateChildState(): void;
     checkRouteMatch(): void;
     addHeaderListeners(): void;
-    hasChildren(): any;
+    /**
+     * Checks whether the panel has slotted children content.
+     * @returns {boolean}
+     */
+    hasChildren(): boolean;
     checkForChildren(): void;
     updateExpandedState(): void;
     render(): void;

package/dist/components/y-panel.js

@@ -18,8 +18,10 @@ class YumePanel extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+
         this._expanded = false;
         this._checkRouteMatchBound = this.checkRouteMatch.bind(this);
+
         this.render();
     }
 
@@ -58,6 +60,7 @@ class YumePanel extends HTMLElement {
         }
     }
 
+    /** @type {boolean} Whether the panel is in a selected/active state. */
     get selected() {
         return this.hasAttribute("selected");
     }
@@ -67,6 +70,7 @@ class YumePanel extends HTMLElement {
         else this.removeAttribute("selected");
     }
 
+    /** @type {boolean} Whether the panel's children slot is visible. */
     get expanded() {
         return this.hasAttribute("expanded");
     }
@@ -76,8 +80,10 @@ class YumePanel extends HTMLElement {
         else this.removeAttribute("expanded");
     }
 
+    /** Toggles the expanded state (collapses siblings when inside an exclusive panelbar). */
     toggle() {
         if (!this.hasChildren()) return;
+
         if (!this._expanded) {
             const parentBar = this.closest("y-panelbar");
             if (parentBar && parentBar.hasAttribute("exclusive")) {
@@ -97,6 +103,7 @@ class YumePanel extends HTMLElement {
         } else {
             this.collapse();
         }
+
         this.dispatchEvent(
             new CustomEvent("toggle", {
                 detail: { expanded: this._expanded },
@@ -106,6 +113,7 @@ class YumePanel extends HTMLElement {
         );
     }
 
+    /** Expands the panel to show its children. */
     expand() {
         if (!this.hasChildren()) return;
         this.expanded = true;
@@ -120,6 +128,7 @@ class YumePanel extends HTMLElement {
         );
     }
 
+    /** Collapses the panel to hide its children. */
     collapse() {
         this.expanded = false;
         this._expanded = false;
@@ -149,6 +158,7 @@ class YumePanel extends HTMLElement {
                 break;
             }
         }
+
         this.setAttribute("data-is-child", depth > 0 ? "true" : "false");
         this.style.setProperty("--panel-depth", depth);
     }
@@ -204,6 +214,7 @@ class YumePanel extends HTMLElement {
         const childrenSlot = this.shadowRoot.querySelector(
             'slot[name="children"]',
         );
+
         if (childrenSlot) {
             childrenSlot.addEventListener("slotchange", () =>
                 this.checkForChildren(),
@@ -211,11 +222,17 @@ class YumePanel extends HTMLElement {
         }
     }
 
+    /**
+     * Checks whether the panel has slotted children content.
+     * @returns {boolean}
+     */
     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) {
@@ -227,7 +244,9 @@ class YumePanel extends HTMLElement {
 
     checkForChildren() {
         const hasChildren = this.hasChildren();
+
         this.setAttribute("data-has-children", hasChildren ? "true" : "false");
+
         if (!hasChildren && this.expanded) {
             this.expanded = false;
         }
@@ -237,6 +256,7 @@ class YumePanel extends HTMLElement {
         const hasChildren = this.hasChildren();
         const header = this.shadowRoot.querySelector(".header");
         const isExpanded = this.expanded && hasChildren;
+
         this._expanded = isExpanded;
 
         if (header) {
@@ -246,6 +266,7 @@ class YumePanel extends HTMLElement {
 
     render() {
         const sheet = new CSSStyleSheet();
+
         sheet.replaceSync(`
             :host {
                 display: block;