@waggylabs/yumekit 0.4.1-beta.78 → 0.4.1-beta.79

package/CHANGELOG.md

@@ -31,6 +31,14 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
+## [Unreleased]
+
+### Added
+
+- `href`, `target`, and `rel` attributes on `y-button`. When `href` is set the internal element switches from `<button>` to `<a>`, preserving all visual styles and size/color/style-type variants. Disabled state is handled via `aria-disabled` and `pointer-events: none` since `<a>` has no native disabled.
+- `navigate` custom event on `y-appbar`, `y-panel`, and `y-menu`. Fires before any navigation when an item with an `href` / `url` is clicked. The event is cancelable (`e.preventDefault()`) and carries `event.detail.href` — React Router and other SPA routers can intercept it without any framework-specific glue.
+- `history` attribute on `y-appbar` and `y-menu` (already present on `y-panel`). When omitted (default), navigation uses `history.pushState` + a synthetic `popstate` event so all `popstate`-based routers (React Router `BrowserRouter`, Vue Router, etc.) respond automatically. Set `history="false"` to opt back in to full-page `window.location.href` navigation.
+
 ## [0.4.2] - 2026-04-11
 
 ### Changed

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

@@ -34,6 +34,12 @@ export class YumeAppbar extends HTMLElement {
     set size(val: string);
     /** Size variant: "small" | "medium" | "large" (default "medium"). */
     get size(): string;
+    set history(val: string);
+    /**
+     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
+     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
+     */
+    get history(): string;
     set sticky(val: string | false);
     /** Sticky position: "start" | "end" | false. */
     get sticky(): string | false;

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

@@ -79,7 +79,12 @@ export namespace Sizes {
     export function render_2(): string;
     export { render_2 as render };
 }
-export namespace WithFooter {
-    export function render_3(): string;
+export namespace NavigateEvent {
+    export let name: string;
+    export function render_3(): HTMLDivElement;
     export { render_3 as render };
 }
+export namespace WithFooter {
+    export function render_4(): string;
+    export { render_4 as render };
+}

package/dist/components/y-appbar.js

@@ -8,6 +8,7 @@ class YumeButton extends HTMLElement {
             "disabled", "name", "value", "autofocus", "form", "formaction",
             "formenctype", "formmethod", "formnovalidate", "formtarget",
             "aria-label", "aria-pressed", "aria-hidden",
+            "href", "target", "rel",
         ];
     }
 
@@ -49,6 +50,27 @@ class YumeButton extends HTMLElement {
     // Getters / Setters
     // -------------------------------------------------------------------------
 
+    /** URL to navigate to. When set, the internal element renders as an <a> instead of <button>. */
+    get href() { return this.getAttribute("href"); }
+    set href(val) {
+        if (val != null) this.setAttribute("href", val);
+        else this.removeAttribute("href");
+    }
+
+    /** Anchor target (e.g. "_blank"). Only applies when href is set. */
+    get target() { return this.getAttribute("target"); }
+    set target(val) {
+        if (val != null) this.setAttribute("target", val);
+        else this.removeAttribute("target");
+    }
+
+    /** Anchor rel attribute (e.g. "noopener noreferrer"). Only applies when href is set. */
+    get rel() { return this.getAttribute("rel"); }
+    set rel(val) {
+        if (val != null) this.setAttribute("rel", val);
+        else this.removeAttribute("rel");
+    }
+
     /** Color theme for the button (default "base"). */
     get color() { return this.getAttribute("color") || "base"; }
     set color(val) { this.setAttribute("color", val); }
@@ -287,9 +309,15 @@ class YumeButton extends HTMLElement {
                 line-height: 1;
             }
 
-            .button:disabled {
+            .button {
+                text-decoration: none;
+            }
+
+            .button:disabled,
+            .button[aria-disabled="true"] {
                 opacity: 0.5;
                 cursor: not-allowed;
+                pointer-events: none;
             }
 
             .button:hover:not(:disabled),
@@ -419,23 +447,49 @@ class YumeButton extends HTMLElement {
     }
 
     _render() {
+        const needsAnchor = this.hasAttribute("href");
+        const isAnchor = this.button?.tagName === "A";
+
+        if (this.button && needsAnchor !== isAnchor) {
+            this.button.remove();
+            this.button = null;
+        }
+
         if (!this.button) {
-            this.button = document.createElement("button");
+            this.button = needsAnchor
+                ? document.createElement("a")
+                : document.createElement("button");
             this.button.classList.add("button");
-            this.button.setAttribute("role", "button");
-            this.button.setAttribute("tabindex", "0");
             this.button.setAttribute("part", "button");
+            if (!needsAnchor) {
+                this.button.setAttribute("role", "button");
+                this.button.setAttribute("tabindex", "0");
+            }
             this.shadowRoot.appendChild(this.button);
         }
 
         this._updateButtonAttributes();
 
-        if (this.hasAttribute("disabled")) {
-            this.button.setAttribute("disabled", "");
-            this.button.setAttribute("aria-disabled", "true");
+        const disabled = this.hasAttribute("disabled");
+        if (needsAnchor) {
+            // <a> has no native disabled — manage via aria and href removal
+            if (disabled) {
+                this.button.removeAttribute("href");
+                this.button.setAttribute("aria-disabled", "true");
+                this.button.setAttribute("tabindex", "-1");
+            } else {
+                this.button.setAttribute("href", this.getAttribute("href"));
+                this.button.setAttribute("aria-disabled", "false");
+                this.button.removeAttribute("tabindex");
+            }
         } else {
-            this.button.removeAttribute("disabled");
-            this.button.setAttribute("aria-disabled", "false");
+            if (disabled) {
+                this.button.setAttribute("disabled", "");
+                this.button.setAttribute("aria-disabled", "true");
+            } else {
+                this.button.removeAttribute("disabled");
+                this.button.setAttribute("aria-disabled", "false");
+            }
         }
 
         this.button.innerHTML = `
@@ -450,9 +504,17 @@ class YumeButton extends HTMLElement {
     }
 
     _updateButtonAttributes() {
-        const attributes = YumeButton.observedAttributes;
+        const isAnchor = this.button?.tagName === "A";
+        // These are only meaningful on <button>
+        const buttonOnlyAttrs = new Set(["type", "disabled", "name", "value", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"]);
+        // These are only meaningful on <a>; href is managed separately in _render
+        const anchorOnlyAttrs = new Set(["href", "target", "rel"]);
+
+        YumeButton.observedAttributes.forEach((attr) => {
+            if (isAnchor && buttonOnlyAttrs.has(attr)) return;
+            if (isAnchor && attr === "href") return; // handled in _render (disabled-aware)
+            if (!isAnchor && anchorOnlyAttrs.has(attr)) return;
 
-        attributes.forEach((attr) => {
             if (this.hasAttribute(attr)) {
                 this.button.setAttribute(attr, this.getAttribute(attr));
             } else {
@@ -732,7 +794,7 @@ var menu = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
 
 class YumeMenu extends HTMLElement {
     static get observedAttributes() {
-        return ["items", "anchor", "visible", "direction", "size"];
+        return ["items", "anchor", "visible", "direction", "size", "history"];
     }
 
     // -------------------------------------------------------------------------
@@ -810,6 +872,16 @@ class YumeMenu extends HTMLElement {
         this.setAttribute("items", Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"));
     }
 
+    /**
+     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
+     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
+     */
+    get history() { return this.getAttribute("history"); }
+    set history(val) {
+        if (val != null) this.setAttribute("history", val);
+        else this.removeAttribute("history");
+    }
+
     /** Size: "small" | "medium" | "large" (default "medium"). */
     get size() {
         const sz = this.getAttribute("size");
@@ -962,7 +1034,20 @@ class YumeMenu extends HTMLElement {
 
             if (item.url) {
                 li.addEventListener("click", () => {
-                    window.location.href = item.url;
+                    const event = new CustomEvent("navigate", {
+                        bubbles: true,
+                        composed: true,
+                        cancelable: true,
+                        detail: { href: item.url },
+                    });
+                    const cancelled = !this.dispatchEvent(event);
+                    if (cancelled) return;
+                    if (this.getAttribute("history") !== "false") {
+                        history.pushState({}, "", item.url);
+                        window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
+                    } else {
+                        window.location.href = item.url;
+                    }
                 });
             }
 
@@ -1143,6 +1228,7 @@ class YumeAppbar extends HTMLElement {
             "menu-direction",
             "sticky",
             "mobile-breakpoint",
+            "history",
         ];
     }
 
@@ -1229,6 +1315,16 @@ class YumeAppbar extends HTMLElement {
     get size() { return this.getAttribute("size") || "medium"; }
     set size(val) { this.setAttribute("size", val); }
 
+    /**
+     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
+     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
+     */
+    get history() { return this.getAttribute("history"); }
+    set history(val) {
+        if (val != null) this.setAttribute("history", val);
+        else this.removeAttribute("history");
+    }
+
     /** Sticky position: "start" | "end" | false. */
     get sticky() {
         const val = this.getAttribute("sticky");
@@ -1346,7 +1442,20 @@ class YumeAppbar extends HTMLElement {
 
         if (item.href && !hasChildren) {
             btn.addEventListener("click", () => {
-                window.location.href = item.href;
+                const event = new CustomEvent("navigate", {
+                    bubbles: true,
+                    composed: true,
+                    cancelable: true,
+                    detail: { href: item.href },
+                });
+                const cancelled = !this.dispatchEvent(event);
+                if (cancelled) return;
+                if (this.getAttribute("history") !== "false") {
+                    history.pushState({}, "", item.href);
+                    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
+                } else {
+                    window.location.href = item.href;
+                }
             });
         }
 

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

@@ -3,6 +3,15 @@ export class YumeButton extends HTMLElement {
     selectedValues: Set<any>;
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set href(val: string);
+    /** URL to navigate to. When set, the internal element renders as an <a> instead of <button>. */
+    get href(): string;
+    set target(val: string);
+    /** Anchor target (e.g. "_blank"). Only applies when href is set. */
+    get target(): string;
+    set rel(val: string);
+    /** Anchor rel attribute (e.g. "noopener noreferrer"). Only applies when href is set. */
+    get rel(): string;
     set color(val: string);
     /** Color theme for the button (default "base"). */
     get color(): string;
@@ -50,7 +59,7 @@ export class YumeButton extends HTMLElement {
     _manageSlotVisibility(slotName: any, selector: any): void;
     _proxyNativeOnClick(): void;
     _render(): void;
-    button: HTMLButtonElement;
+    button: any;
     _updateButtonAttributes(): void;
     _updateStyles(): void;
 }

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

@@ -129,3 +129,8 @@ export namespace Disabled {
     }
     export { args_1 as args };
 }
+export namespace AsLink {
+    export let name: string;
+    export function render_5(): string;
+    export { render_5 as render };
+}

package/dist/components/y-button.js

@@ -7,6 +7,7 @@ class YumeButton extends HTMLElement {
             "disabled", "name", "value", "autofocus", "form", "formaction",
             "formenctype", "formmethod", "formnovalidate", "formtarget",
             "aria-label", "aria-pressed", "aria-hidden",
+            "href", "target", "rel",
         ];
     }
 
@@ -48,6 +49,27 @@ class YumeButton extends HTMLElement {
     // Getters / Setters
     // -------------------------------------------------------------------------
 
+    /** URL to navigate to. When set, the internal element renders as an <a> instead of <button>. */
+    get href() { return this.getAttribute("href"); }
+    set href(val) {
+        if (val != null) this.setAttribute("href", val);
+        else this.removeAttribute("href");
+    }
+
+    /** Anchor target (e.g. "_blank"). Only applies when href is set. */
+    get target() { return this.getAttribute("target"); }
+    set target(val) {
+        if (val != null) this.setAttribute("target", val);
+        else this.removeAttribute("target");
+    }
+
+    /** Anchor rel attribute (e.g. "noopener noreferrer"). Only applies when href is set. */
+    get rel() { return this.getAttribute("rel"); }
+    set rel(val) {
+        if (val != null) this.setAttribute("rel", val);
+        else this.removeAttribute("rel");
+    }
+
     /** Color theme for the button (default "base"). */
     get color() { return this.getAttribute("color") || "base"; }
     set color(val) { this.setAttribute("color", val); }
@@ -286,9 +308,15 @@ class YumeButton extends HTMLElement {
                 line-height: 1;
             }
 
-            .button:disabled {
+            .button {
+                text-decoration: none;
+            }
+
+            .button:disabled,
+            .button[aria-disabled="true"] {
                 opacity: 0.5;
                 cursor: not-allowed;
+                pointer-events: none;
             }
 
             .button:hover:not(:disabled),
@@ -418,23 +446,49 @@ class YumeButton extends HTMLElement {
     }
 
     _render() {
+        const needsAnchor = this.hasAttribute("href");
+        const isAnchor = this.button?.tagName === "A";
+
+        if (this.button && needsAnchor !== isAnchor) {
+            this.button.remove();
+            this.button = null;
+        }
+
         if (!this.button) {
-            this.button = document.createElement("button");
+            this.button = needsAnchor
+                ? document.createElement("a")
+                : document.createElement("button");
             this.button.classList.add("button");
-            this.button.setAttribute("role", "button");
-            this.button.setAttribute("tabindex", "0");
             this.button.setAttribute("part", "button");
+            if (!needsAnchor) {
+                this.button.setAttribute("role", "button");
+                this.button.setAttribute("tabindex", "0");
+            }
             this.shadowRoot.appendChild(this.button);
         }
 
         this._updateButtonAttributes();
 
-        if (this.hasAttribute("disabled")) {
-            this.button.setAttribute("disabled", "");
-            this.button.setAttribute("aria-disabled", "true");
+        const disabled = this.hasAttribute("disabled");
+        if (needsAnchor) {
+            // <a> has no native disabled — manage via aria and href removal
+            if (disabled) {
+                this.button.removeAttribute("href");
+                this.button.setAttribute("aria-disabled", "true");
+                this.button.setAttribute("tabindex", "-1");
+            } else {
+                this.button.setAttribute("href", this.getAttribute("href"));
+                this.button.setAttribute("aria-disabled", "false");
+                this.button.removeAttribute("tabindex");
+            }
         } else {
-            this.button.removeAttribute("disabled");
-            this.button.setAttribute("aria-disabled", "false");
+            if (disabled) {
+                this.button.setAttribute("disabled", "");
+                this.button.setAttribute("aria-disabled", "true");
+            } else {
+                this.button.removeAttribute("disabled");
+                this.button.setAttribute("aria-disabled", "false");
+            }
         }
 
         this.button.innerHTML = `
@@ -449,9 +503,17 @@ class YumeButton extends HTMLElement {
     }
 
     _updateButtonAttributes() {
-        const attributes = YumeButton.observedAttributes;
+        const isAnchor = this.button?.tagName === "A";
+        // These are only meaningful on <button>
+        const buttonOnlyAttrs = new Set(["type", "disabled", "name", "value", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"]);
+        // These are only meaningful on <a>; href is managed separately in _render
+        const anchorOnlyAttrs = new Set(["href", "target", "rel"]);
+
+        YumeButton.observedAttributes.forEach((attr) => {
+            if (isAnchor && buttonOnlyAttrs.has(attr)) return;
+            if (isAnchor && attr === "href") return; // handled in _render (disabled-aware)
+            if (!isAnchor && anchorOnlyAttrs.has(attr)) return;
 
-        attributes.forEach((attr) => {
             if (this.hasAttribute(attr)) {
                 this.button.setAttribute(attr, this.getAttribute(attr));
             } else {

package/dist/components/y-date.js

@@ -8,6 +8,7 @@ class YumeButton extends HTMLElement {
             "disabled", "name", "value", "autofocus", "form", "formaction",
             "formenctype", "formmethod", "formnovalidate", "formtarget",
             "aria-label", "aria-pressed", "aria-hidden",
+            "href", "target", "rel",
         ];
     }
 
@@ -49,6 +50,27 @@ class YumeButton extends HTMLElement {
     // Getters / Setters
     // -------------------------------------------------------------------------
 
+    /** URL to navigate to. When set, the internal element renders as an <a> instead of <button>. */
+    get href() { return this.getAttribute("href"); }
+    set href(val) {
+        if (val != null) this.setAttribute("href", val);
+        else this.removeAttribute("href");
+    }
+
+    /** Anchor target (e.g. "_blank"). Only applies when href is set. */
+    get target() { return this.getAttribute("target"); }
+    set target(val) {
+        if (val != null) this.setAttribute("target", val);
+        else this.removeAttribute("target");
+    }
+
+    /** Anchor rel attribute (e.g. "noopener noreferrer"). Only applies when href is set. */
+    get rel() { return this.getAttribute("rel"); }
+    set rel(val) {
+        if (val != null) this.setAttribute("rel", val);
+        else this.removeAttribute("rel");
+    }
+
     /** Color theme for the button (default "base"). */
     get color() { return this.getAttribute("color") || "base"; }
     set color(val) { this.setAttribute("color", val); }
@@ -287,9 +309,15 @@ class YumeButton extends HTMLElement {
                 line-height: 1;
             }
 
-            .button:disabled {
+            .button {
+                text-decoration: none;
+            }
+
+            .button:disabled,
+            .button[aria-disabled="true"] {
                 opacity: 0.5;
                 cursor: not-allowed;
+                pointer-events: none;
             }
 
             .button:hover:not(:disabled),
@@ -419,23 +447,49 @@ class YumeButton extends HTMLElement {
     }
 
     _render() {
+        const needsAnchor = this.hasAttribute("href");
+        const isAnchor = this.button?.tagName === "A";
+
+        if (this.button && needsAnchor !== isAnchor) {
+            this.button.remove();
+            this.button = null;
+        }
+
         if (!this.button) {
-            this.button = document.createElement("button");
+            this.button = needsAnchor
+                ? document.createElement("a")
+                : document.createElement("button");
             this.button.classList.add("button");
-            this.button.setAttribute("role", "button");
-            this.button.setAttribute("tabindex", "0");
             this.button.setAttribute("part", "button");
+            if (!needsAnchor) {
+                this.button.setAttribute("role", "button");
+                this.button.setAttribute("tabindex", "0");
+            }
             this.shadowRoot.appendChild(this.button);
         }
 
         this._updateButtonAttributes();
 
-        if (this.hasAttribute("disabled")) {
-            this.button.setAttribute("disabled", "");
-            this.button.setAttribute("aria-disabled", "true");
+        const disabled = this.hasAttribute("disabled");
+        if (needsAnchor) {
+            // <a> has no native disabled — manage via aria and href removal
+            if (disabled) {
+                this.button.removeAttribute("href");
+                this.button.setAttribute("aria-disabled", "true");
+                this.button.setAttribute("tabindex", "-1");
+            } else {
+                this.button.setAttribute("href", this.getAttribute("href"));
+                this.button.setAttribute("aria-disabled", "false");
+                this.button.removeAttribute("tabindex");
+            }
         } else {
-            this.button.removeAttribute("disabled");
-            this.button.setAttribute("aria-disabled", "false");
+            if (disabled) {
+                this.button.setAttribute("disabled", "");
+                this.button.setAttribute("aria-disabled", "true");
+            } else {
+                this.button.removeAttribute("disabled");
+                this.button.setAttribute("aria-disabled", "false");
+            }
         }
 
         this.button.innerHTML = `
@@ -450,9 +504,17 @@ class YumeButton extends HTMLElement {
     }
 
     _updateButtonAttributes() {
-        const attributes = YumeButton.observedAttributes;
+        const isAnchor = this.button?.tagName === "A";
+        // These are only meaningful on <button>
+        const buttonOnlyAttrs = new Set(["type", "disabled", "name", "value", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"]);
+        // These are only meaningful on <a>; href is managed separately in _render
+        const anchorOnlyAttrs = new Set(["href", "target", "rel"]);
+
+        YumeButton.observedAttributes.forEach((attr) => {
+            if (isAnchor && buttonOnlyAttrs.has(attr)) return;
+            if (isAnchor && attr === "href") return; // handled in _render (disabled-aware)
+            if (!isAnchor && anchorOnlyAttrs.has(attr)) return;
 
-        attributes.forEach((attr) => {
             if (this.hasAttribute(attr)) {
                 this.button.setAttribute(attr, this.getAttribute(attr));
             } else {