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

package/CHANGELOG.md

@@ -35,9 +35,11 @@ Delete any empty sections before publishing.
 
 ### Added
 
-- 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. CSS custom properties: `--component-banner-padding-small/medium/large`, `--component-banner-gap`, `--component-banner-icon-size-small/medium/large`, `--component-banner-z-index`, `--component-banner-border-radius`. CSS parts: `banner`, `icon`, `content`, `action`, `close-btn`.
+- 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-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-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/dist/components/y-colorpicker/y-colorpicker.d.ts

@@ -0,0 +1,70 @@
+export class YumeColorpicker extends HTMLElement {
+    static get observedAttributes(): string[];
+    _h: number;
+    _s: number;
+    _v: number;
+    _a: number;
+    _dragging: string;
+    _rendered: boolean;
+    _updatingValue: boolean;
+    _onPointerMove: (e: any) => void;
+    _onPointerUp: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set value(val: string);
+    get value(): string;
+    set format(val: string);
+    get format(): string;
+    set formats(val: any);
+    get formats(): any;
+    set showAlpha(val: boolean);
+    get showAlpha(): boolean;
+    set size(val: string);
+    get size(): string;
+    setColor(value: any): void;
+    render(): void;
+    _canvas: Element;
+    _canvasHandle: Element;
+    _hueSlider: Element;
+    _hueThumb: Element;
+    _alphaSlider: Element;
+    _alphaThumb: Element;
+    _formatSelect: Element;
+    _channelInputs: Element;
+    _swatchPreview: Element;
+    _parseAndApply(str: any): void;
+    _formatColor(fmt: any): string;
+    _getColorRepresentations(): {
+        hex: string;
+        rgb: string;
+        hsl: string;
+        hsv: string;
+    };
+    _drawCanvas(): void;
+    _updateAll(): void;
+    _updateCanvasHandle(): void;
+    _updateHueThumb(): void;
+    _updateAlphaThumb(): void;
+    _updateSwatch(): void;
+    _updateAriaValues(): void;
+    _updateInputs(): void;
+    _bindEvents(): void;
+    _addGlobalListeners(): void;
+    _removeGlobalListeners(): void;
+    _onCanvasDown(e: any): void;
+    _updateCanvasFromPointer(e: any): void;
+    _onHueDown(e: any): void;
+    _updateHueFromPointer(e: any): void;
+    _onAlphaDown(e: any): void;
+    _updateAlphaFromPointer(e: any): void;
+    _onGlobalMove(e: any): void;
+    _onGlobalUp(): void;
+    _onCanvasKey(e: any): void;
+    _onHueKey(e: any): void;
+    _onAlphaKey(e: any): void;
+    _handleChannelInput(channel: any, rawValue: any, fieldDef: any): void;
+    _syncValueAttr(): void;
+    _emitChange(): void;
+    _buildStyles(): string;
+}

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

@@ -0,0 +1,118 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    namespace argTypes {
+        namespace value {
+            let control: string;
+            let description: string;
+        }
+        namespace format {
+            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 showAlpha {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 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 value_1: string;
+        export { value_1 as value };
+        let format_1: string;
+        export { format_1 as format };
+        let size_1: string;
+        export { size_1 as size };
+        let showAlpha_1: boolean;
+        export { showAlpha_1 as showAlpha };
+    }
+    function render({ value, format, size, showAlpha }: {
+        value: any;
+        format: any;
+        size: any;
+        showAlpha: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace WithAlpha {
+    export namespace args_1 {
+        let showAlpha_2: boolean;
+        export { showAlpha_2 as showAlpha };
+        let value_2: string;
+        export { value_2 as value };
+    }
+    export { args_1 as args };
+}
+export namespace RGBFormat {
+    export namespace args_2 {
+        let format_2: string;
+        export { format_2 as format };
+        let value_3: string;
+        export { value_3 as value };
+    }
+    export { args_2 as args };
+}
+export namespace HSLFormat {
+    export namespace args_3 {
+        let format_3: string;
+        export { format_3 as format };
+        let value_4: string;
+        export { value_4 as value };
+    }
+    export { args_3 as args };
+}
+export namespace HSVFormat {
+    export namespace args_4 {
+        let format_4: string;
+        export { format_4 as format };
+        let value_5: string;
+        export { value_5 as value };
+    }
+    export { args_4 as args };
+}
+export namespace Sizes {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace LimitedFormats {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace WithAlphaAllFormats {
+    export function render_3(): string;
+    export { render_3 as render };
+}

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

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