@waggylabs/yumekit 0.4.1 → 0.4.2-beta.27

package/CHANGELOG.md

@@ -31,7 +31,20 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
-## [0.4.1] – 2026-04-01
+## [0.4.2] - 2026-04-07
+
+### Added
+
+- New `y-button-group` component — wraps `y-button` (and other elements such as `y-input` or `y-select`) into a visually connected toolbar. Automatically removes inner border-radius on middle children and collapses shared borders to avoid double-border artifacts. Supports `orientation` attribute (`"horizontal"` (default) | `"vertical"`). Works with any slotted child that respects the `--component-button-border-radius-outer` CSS custom property.
+- `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.
+
+### Changed
+
+- Added responsive display to `y-date` and `y-datepicker` as well as the ability to set a `native-mobile` property to `y-date` which will allow the input to use the native mobile date and time picker instead of the `y-datepicker`.
+
+## [0.4.1] - 2026-04-01
 
 ### Added
 
@@ -54,7 +67,7 @@ Delete any empty sections before publishing.
 - `y-icon` removed artifact from accessibility icon
 - Dark theme files corrected: `--help-background-component` now uses `var(--indigo-dark-0)` instead of `var(--indigo-light-0)`.
 
-## [0.4.0] – 2026-03-29
+## [0.4.0] - 2026-03-29
 
 ### Added
 
@@ -86,19 +99,19 @@ Delete any empty sections before publishing.
 - `gripDots(horizontal)` function removed from `src/icons/index.js`.
 - Stale `--base-background-border` and `--error-background-border` variable references cleaned up across all theme files (renamed to `--base-border` / `--error-border` in 0.3.9).
 
-## [0.3.10] – 2026-03-25
+## [0.3.10] - 2026-03-25
 
 ### Added
 
 - `y-card`: added `image` slot that displays over the `header` slot if included.
 
-## [0.3.9] – 2026-03-25
+## [0.3.9] - 2026-03-25
 
 ### Fixed
 
 - `y-card`, `y-switch`, `y-slider`, `y-progress`: restored missing borders after theme variable rename in 0.3.8 changed `--{scheme}-background-border` to `--{scheme}-border` without updating component references.
 
-## [0.3.8] – 2026-03-25
+## [0.3.8] - 2026-03-25
 
 ### Fixed
 
@@ -106,7 +119,7 @@ Delete any empty sections before publishing.
 
 - `y-tag`: reverted earlier change adding variables to tag backgrounds. Defaults to -background-app variables
 
-## [0.3.6] – 2026-03-23
+## [0.3.6] - 2026-03-23
 
 ### Added
 
@@ -128,25 +141,25 @@ Delete any empty sections before publishing.
 
 - Removed `features` icon (duplicate of `sun`)
 
-## [0.3.5] – 2026-03-20
+## [0.3.5] - 2026-03-20
 
 ### Fixed
 
 - Patch for 0.3.3 with bug fixes
 
-## [0.3.4] – 2026-03-20
+## [0.3.4] - 2026-03-20
 
 ### Fixed
 
 - Patch for 0.3.3 with bug fixes
 
-## [0.3.3] – 2026-03-20
+## [0.3.3] - 2026-03-20
 
 ### Fixed
 
 - Several bug fixes and test updates
 
-## [0.3.2] – 2026-03-18
+## [0.3.2] - 2026-03-18
 
 ### Added
 

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-YumeKit is a collection of 26 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.
+YumeKit is a collection of 27 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
@@ -73,34 +73,37 @@ Then use the `<y-theme>` component to apply a 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                         |
-| Rating    | `<y-rating>`   | Star / icon rating input                   |
-| Select    | `<y-select>`   | Select / dropdown input                    |
-| Slider    | `<y-slider>`   | Range slider input                         |
-| Switch    | `<y-switch>`   | Toggle switch                              |
-| Table     | `<y-table>`    | Sortable data table                        |
-| Textarea  | `<y-textarea>` | Multi-line text input                      |
-| 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                          |
+| 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          |
+| Button Group | `<y-button-group>` | Groups buttons (or inputs) into a connected toolbar |
+| Card         | `<y-card>`         | Content card container                              |
+| Checkbox     | `<y-checkbox>`     | Form checkbox input                                 |
+| Date         | `<y-date>`         | Date input                                          |
+| DatePicker   | `<y-datepicker>`   | A date and time picker                              |
+| 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                                  |
+| Rating       | `<y-rating>`       | Star / icon rating input                            |
+| Select       | `<y-select>`       | Select / dropdown input                             |
+| Slider       | `<y-slider>`       | Range slider input                                  |
+| Switch       | `<y-switch>`       | Toggle switch                                       |
+| Table        | `<y-table>`        | Sortable data table                                 |
+| Textarea     | `<y-textarea>`     | Multi-line text input                               |
+| 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                                   |
 
 ---
 

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-group/y-button-group.d.ts

@@ -0,0 +1,13 @@
+export class YumeButtonGroup extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set orientation(val: string);
+    /** Layout direction: "horizontal" | "vertical" (default "horizontal"). */
+    get orientation(): string;
+    _applyStyles(): void;
+    _styleEl: HTMLStyleElement;
+    _getRadius(): string;
+    _render(): void;
+    _updateChildren(): void;
+}

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

@@ -0,0 +1,57 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    namespace argTypes {
+        namespace orientation {
+            let control: string;
+            let options: string[];
+            let description: string;
+            namespace table {
+                namespace defaultValue {
+                    let summary: string;
+                }
+            }
+        }
+    }
+    namespace args {
+        let orientation_1: string;
+        export { orientation_1 as orientation };
+    }
+    function render({ orientation }: {
+        orientation: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace StyleTypes {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace Colors {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace Sizes {
+    export function render_3(): string;
+    export { render_3 as render };
+}
+export namespace Vertical {
+    export function render_4(): string;
+    export { render_4 as render };
+}
+export namespace WithIcons {
+    export function render_5(): string;
+    export { render_5 as render };
+}
+export namespace SingleItem {
+    export function render_6(): string;
+    export { render_6 as render };
+}
+export namespace InputAndButton {
+    export function render_7(): string;
+    export { render_7 as render };
+}
+export namespace MixedContent {
+    export function render_8(): string;
+    export { render_8 as render };
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/y-button-group.js

@@ -0,0 +1,118 @@
+class YumeButtonGroup extends HTMLElement {
+    static get observedAttributes() {
+        return ["orientation"];
+    }
+
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this._render();
+        this._updateChildren();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this._applyStyles();
+            this._updateChildren();
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters / Setters
+    // -------------------------------------------------------------------------
+
+    /** Layout direction: "horizontal" | "vertical" (default "horizontal"). */
+    get orientation() { return this.getAttribute("orientation") || "horizontal"; }
+    set orientation(val) { this.setAttribute("orientation", val); }
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
+    _applyStyles() {
+        if (!this._styleEl) {
+            this._styleEl = document.createElement("style");
+            this.shadowRoot.appendChild(this._styleEl);
+        }
+        const isVertical = this.orientation === "vertical";
+        this._styleEl.textContent = `
+            :host {
+                display: inline-flex;
+                flex-direction: ${isVertical ? "column" : "row"};
+                align-items: stretch;
+            }
+            ::slotted(*) {
+                flex-shrink: 0;
+                position: relative;
+            }
+        `;
+    }
+
+    _getRadius() {
+        const val = getComputedStyle(this).getPropertyValue("--component-button-border-radius-outer").trim();
+        return val || "4px";
+    }
+
+    _render() {
+        this._applyStyles();
+        if (!this.shadowRoot.querySelector("slot")) {
+            const slot = document.createElement("slot");
+            slot.addEventListener("slotchange", () => this._updateChildren());
+            this.shadowRoot.appendChild(slot);
+        }
+    }
+
+    _updateChildren() {
+        const slot = this.shadowRoot.querySelector("slot");
+        if (!slot) return;
+
+        const children = slot.assignedElements({ flatten: true });
+        const isVertical = this.orientation === "vertical";
+        const radius = this._getRadius();
+        const total = children.length;
+
+        children.forEach((child, index) => {
+            const isFirst = index === 0;
+            const isLast = index === total - 1;
+
+            // Collapse the shared border between adjacent items
+            if (isVertical) {
+                child.style.marginLeft = "";
+                child.style.marginTop = isFirst ? "" : "-1px";
+            } else {
+                child.style.marginTop = "";
+                child.style.marginLeft = isFirst ? "" : "-1px";
+            }
+
+            // Override border-radius on all child types via their respective CSS custom properties
+            if (total === 1) {
+                child.style.removeProperty("--component-button-border-radius-outer");
+                child.style.removeProperty("--component-inputs-border-radius-outer");
+            } else if (isFirst) {
+                const value = isVertical ? `${radius} ${radius} 0 0` : `${radius} 0 0 ${radius}`;
+                child.style.setProperty("--component-button-border-radius-outer", value);
+                child.style.setProperty("--component-inputs-border-radius-outer", value);
+            } else if (isLast) {
+                const value = isVertical ? `0 0 ${radius} ${radius}` : `0 ${radius} ${radius} 0`;
+                child.style.setProperty("--component-button-border-radius-outer", value);
+                child.style.setProperty("--component-inputs-border-radius-outer", value);
+            } else {
+                child.style.setProperty("--component-button-border-radius-outer", "0");
+                child.style.setProperty("--component-inputs-border-radius-outer", "0");
+            }
+        });
+    }
+}
+
+if (!customElements.get("y-button-group")) {
+    customElements.define("y-button-group", YumeButtonGroup);
+}
+
+export { YumeButtonGroup };