@waggylabs/yumekit 0.4.0 → 0.4.1-beta.24

package/CHANGELOG.md

@@ -31,7 +31,43 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
-## [0.4.0] – 2026-03-29
+## [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
+
+- New `y-date` component — a form-associated date (and optional time) input field. Displays a trigger button that opens a `y-datepicker` popup. Supports `name`, `value`, `label`, `label-position`, `placeholder`, `size`, `disabled`, `required`, `invalid`, `clearable`, `show-hours`, `min`, `max`, `format`, and `mode` attributes. Emits `change` and `input` events. Fully keyboard accessible with `aria-expanded` management.
+- New `y-datepicker` component — a standalone calendar and optional time picker widget. Supports single date and date range selection via the `mode` attribute. Configurable with `value`, `min`, `max`, `show-hours`, `show-seconds`, `format`, `first-day-of-week`, `year-range`, and `panel-count` attributes. Emits a `change` event with the selected date value or `[start, end]` range array. Public API: `clear()`, `formatDate(date)`.
+- 10 new bundled icons: `fan`, `thermometer-high`, `thermometer-low`, `ban`, `bluetooth`, `unlock`, `plug`, `gasoline`, `ev-charger`, `tools`.
+- `comp-date` icon added to the bundled icon registry.
+- Storybook integration — all 28 components now have Storybook stories. Includes a theme background selector that applies the correct design tokens for each active theme.
+- 18 new built-in themes (9 color families × dark + light): `green`, `red`, `teal`, `yellow`, `indigo`, `purple`, `pink`, `brown`, `olive`. All are usable by name in the `theme` attribute of `<y-theme>`.
+
+### Changed
+
+- All component source files moved into per-component subdirectories under `src/components/` (e.g. `src/components/y-button/y-button.js`). Tests co-located alongside their component files.
+- `--lime-*` color tokens in `variables.css` renamed to `--olive-*` to better reflect the adjusted core color (`#838807`).
+- Core token values adjusted for WCAG 3:1 accessibility compliance against both black and white backgrounds: `--green--`, `--teal--`, `--indigo--`, and `--olive--` (formerly `--lime--`). Corresponding dark and light scale variants regenerated using linear RGB interpolation.
+
+### Fixed
+
+- `y-table` sort indicator no longer resizes columns when applied
+- `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
 
 ### Added
 
@@ -63,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
 
@@ -83,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
 
@@ -105,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,11 +17,11 @@
 
 ## 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
-- **Themeable** — four built-in themes plus support for fully custom themes
+- **Themeable** — 22 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
 
@@ -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.d.ts → 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

@@ -0,0 +1,90 @@
+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 size {
+            let control_1: string;
+            export { control_1 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            let description_1: string;
+            export { description_1 as description };
+            export namespace table_1 {
+                export namespace defaultValue_1 {
+                    let summary_1: string;
+                    export { summary_1 as summary };
+                }
+                export { defaultValue_1 as defaultValue };
+            }
+            export { table_1 as table };
+        }
+        namespace collapsed {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+            export namespace table_2 {
+                export namespace defaultValue_2 {
+                    let summary_2: boolean;
+                    export { summary_2 as summary };
+                }
+                export { defaultValue_2 as defaultValue };
+            }
+            export { table_2 as table };
+        }
+    }
+    namespace args {
+        let orientation_1: string;
+        export { orientation_1 as orientation };
+        let size_1: string;
+        export { size_1 as size };
+        let collapsed_1: boolean;
+        export { collapsed_1 as collapsed };
+    }
+    function render({ orientation, size, collapsed }: {
+        orientation: any;
+        size: any;
+        collapsed: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace Collapsed {
+    export namespace args_1 {
+        let collapsed_2: boolean;
+        export { collapsed_2 as collapsed };
+    }
+    export { args_1 as args };
+}
+export namespace Horizontal {
+    export namespace args_2 {
+        let orientation_2: string;
+        export { orientation_2 as orientation };
+    }
+    export { args_2 as args };
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace Sizes {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+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

@@ -1,5 +1,5 @@
-import { contrastTextColor } from '../modules/helpers.js';
-import { getIcon } from '../icons/registry.js';
+import { contrastTextColor } from '../../modules/helpers.js';
+import { getIcon } from '../../icons/registry.js';
 
 class YumeButton extends HTMLElement {
     static get observedAttributes() {
@@ -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"];
     }
 
     // -------------------------------------------------------------------------
@@ -760,6 +822,7 @@ class YumeMenu extends HTMLElement {
         this.style.position = "fixed";
         this.style.zIndex = "1000";
         this.style.display = "none";
+        if (this.visible) this._updatePosition();
     }
 
     disconnectedCallback() {
@@ -809,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");
@@ -961,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;
+                    }
                 });
             }
 
@@ -1142,6 +1228,7 @@ class YumeAppbar extends HTMLElement {
             "menu-direction",
             "sticky",
             "mobile-breakpoint",
+            "history",
         ];
     }
 
@@ -1228,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");
@@ -1345,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-avatar/y-avatar.stories.d.ts

@@ -0,0 +1,119 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    namespace argTypes {
+        namespace alt {
+            let control: string;
+            let description: string;
+            namespace table {
+                namespace defaultValue {
+                    let summary: string;
+                }
+            }
+        }
+        namespace src {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace color {
+            let control_2: string;
+            export { control_2 as control };
+            export let options: string[];
+            let description_2: string;
+            export { description_2 as description };
+            export namespace table_1 {
+                export namespace defaultValue_1 {
+                    let summary_1: string;
+                    export { summary_1 as summary };
+                }
+                export { defaultValue_1 as defaultValue };
+            }
+            export { table_1 as table };
+        }
+        namespace size {
+            let control_3: string;
+            export { control_3 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            let description_3: string;
+            export { description_3 as description };
+            export namespace table_2 {
+                export namespace defaultValue_2 {
+                    let summary_2: string;
+                    export { summary_2 as summary };
+                }
+                export { defaultValue_2 as defaultValue };
+            }
+            export { table_2 as table };
+        }
+        namespace shape {
+            let control_4: string;
+            export { control_4 as control };
+            let options_2: string[];
+            export { options_2 as options };
+            let description_4: string;
+            export { description_4 as description };
+            export namespace table_3 {
+                export namespace defaultValue_3 {
+                    let summary_3: string;
+                    export { summary_3 as summary };
+                }
+                export { defaultValue_3 as defaultValue };
+            }
+            export { table_3 as table };
+        }
+    }
+    namespace args {
+        let alt_1: string;
+        export { alt_1 as alt };
+        let src_1: string;
+        export { src_1 as src };
+        let color_1: string;
+        export { color_1 as color };
+        let size_1: string;
+        export { size_1 as size };
+        let shape_1: string;
+        export { shape_1 as shape };
+    }
+    function render({ alt, src, color, size, shape }: {
+        alt: any;
+        src: any;
+        color: any;
+        size: any;
+        shape: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace WithImage {
+    export namespace args_1 {
+        let src_2: string;
+        export { src_2 as src };
+        let alt_2: string;
+        export { alt_2 as alt };
+    }
+    export { args_1 as args };
+}
+export namespace Initials {
+    export namespace args_2 {
+        let alt_3: string;
+        export { alt_3 as alt };
+        let src_3: string;
+        export { src_3 as src };
+    }
+    export { args_2 as args };
+}
+export namespace Colors {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace Sizes {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace Shapes {
+    export function render_3(): string;
+    export { render_3 as render };
+}

package/dist/components/y-avatar.js

@@ -1,4 +1,4 @@
-import { getColorVarPair } from '../modules/helpers.js';
+import { getColorVarPair } from '../../modules/helpers.js';
 
 class YumeAvatar extends HTMLElement {
     static get observedAttributes() {