@waggylabs/yumekit 0.4.2-beta.32 → 0.4.2-beta.34

package/CHANGELOG.md

@@ -35,7 +35,11 @@ Delete any empty sections before publishing.
 
 ### Added
 
-- New `y-stack` component — a layout container for arranging child elements in rows, columns, grids, or masonry patterns. Supports `mode` (`"flex"` | `"grid"` | `"masonry"`), `direction`, `columns`, `gap` (maps to `--spacing-*` tokens), `wrap`, `align`, `justify`, and `responsive` attributes. Masonry mode uses JS absolute positioning with `ResizeObserver`. Responsive mode auto-collapses columns at configurable breakpoints. CSS custom properties: `--component-stack-gap`, `--component-stack-columns`, `--component-stack-mobile-breakpoint`, `--component-stack-tablet-breakpoint`.
+- New `y-colorpicker` component — a standalone color picker widget with a 2D saturation/brightness canvas, hue slider, optional alpha slider, format selector, and channel inputs. Supports `value` (`#hex`, `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hsv()`, `hsva()`), `format` (`"hex"` | `"rgb"` | `"hsl"` | `"hsv"`), `formats` (JSON array of available formats), `show-alpha` (alpha channel), and `size` attributes. Public method: `setColor(value)`. Events: `change` (with `value`, `hex`, `rgb`, `hsl`, `hsv`, `alpha` in detail), `format-change`.
+
+- New `y-banner` component — a full-width informational banner that renders in a semantic color with matching text. Supports `color` (`"base"` | `"primary"` | `"secondary"` | `"success"` | `"error"` | `"warning"` | `"help"`), `icon` attribute (or `icon` slot), `position` (`"push"` | `"overlap"`), `sticky` (fixed to viewport when overlapping), `dismissable` close button, `size` (`"small"` | `"medium"` | `"large"`), and an `action` slot for CTA elements. Public methods: `dismiss()`, `show()`. Fires a cancelable `dismiss` event.
+
+- New `y-stack` component — a layout container for arranging child elements in rows, columns, grids, or masonry patterns. Supports `mode` (`"flex"` | `"grid"` | `"masonry"`), `direction`, `columns`, `gap` (maps to `--spacing-*` tokens), `wrap`, `align`, `justify`, and `responsive` attributes. Masonry mode uses JS absolute positioning with `ResizeObserver`. Responsive mode auto-collapses columns at configurable breakpoints.
 
 ## [0.4.2] - 2026-04-07
 

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-YumeKit is a collection of 30 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 31 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

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

@@ -0,0 +1,38 @@
+export class YumeBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set color(val: string);
+    /** Semantic color for the banner background. */
+    get color(): string;
+    set icon(val: string);
+    /** Icon name passed to an internal y-icon. */
+    get icon(): string;
+    set position(val: string);
+    /** Position mode: "push" (in-flow) or "overlap" (over content). */
+    get position(): string;
+    set sticky(val: boolean);
+    /** When true with position="overlap", fixes to viewport top on scroll. */
+    get sticky(): boolean;
+    set dismissable(val: boolean);
+    /** Whether the banner shows a close button. */
+    get dismissable(): boolean;
+    set dismissed(val: boolean);
+    /** Whether the banner is currently dismissed (hidden). */
+    get dismissed(): boolean;
+    set size(val: string);
+    /** Controls padding, icon size, and font size. */
+    get size(): string;
+    /** Hides the banner and fires the dismiss event. */
+    dismiss(): void;
+    /** Shows the banner if it is currently dismissed. */
+    show(): void;
+    render(): void;
+    _bindSlotListeners(): void;
+    _updateSlotVisibility(): void;
+    _applyDismissedState(): void;
+    _getAriaLabel(color: any): any;
+    _getIconSize(size: any): any;
+    _getColorVars(color: any): any;
+    _buildStyles(color: any, size: any): string;
+}

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

@@ -0,0 +1,139 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    namespace argTypes {
+        namespace message {
+            let control: string;
+            let description: string;
+        }
+        namespace color {
+            let control_1: string;
+            export { control_1 as control };
+            export let options: string[];
+            let description_1: string;
+            export { description_1 as description };
+            export namespace table {
+                namespace defaultValue {
+                    let summary: string;
+                }
+            }
+        }
+        namespace size {
+            let control_2: string;
+            export { control_2 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            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 position {
+            let control_3: string;
+            export { control_3 as control };
+            let options_2: string[];
+            export { options_2 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 icon {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace dismissable {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+            export namespace table_3 {
+                export namespace defaultValue_3 {
+                    let summary_3: boolean;
+                    export { summary_3 as summary };
+                }
+                export { defaultValue_3 as defaultValue };
+            }
+            export { table_3 as table };
+        }
+        namespace sticky {
+            let control_6: string;
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+            export namespace table_4 {
+                export namespace defaultValue_4 {
+                    let summary_4: boolean;
+                    export { summary_4 as summary };
+                }
+                export { defaultValue_4 as defaultValue };
+            }
+            export { table_4 as table };
+        }
+    }
+    namespace args {
+        let message_1: string;
+        export { message_1 as message };
+        let color_1: string;
+        export { color_1 as color };
+        let size_1: string;
+        export { size_1 as size };
+        let position_1: string;
+        export { position_1 as position };
+        let icon_1: string;
+        export { icon_1 as icon };
+        let dismissable_1: boolean;
+        export { dismissable_1 as dismissable };
+        let sticky_1: boolean;
+        export { sticky_1 as sticky };
+    }
+    function render({ message, color, size, position, icon, dismissable, sticky }: {
+        message: any;
+        color: any;
+        size: any;
+        position: any;
+        icon: any;
+        dismissable: any;
+        sticky: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace Colors {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace WithIcon {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace Dismissable {
+    export function render_3(): string;
+    export { render_3 as render };
+}
+export namespace WithAction {
+    export function render_4(): string;
+    export { render_4 as render };
+}
+export namespace Sizes {
+    export function render_5(): string;
+    export { render_5 as render };
+}
+export namespace SlottedIcon {
+    export function render_6(): string;
+    export { render_6 as render };
+}

package/dist/components/y-banner/y-banner.test.d.ts

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