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

package/CHANGELOG.md

@@ -45,6 +45,8 @@ Delete any empty sections before publishing.
 
 ### Added
 
+- 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-color` component — a form-associated color input with a trigger/popup pattern (like `<y-date>`). Renders a color swatch preview and value string in the trigger; opens a `<y-colorpicker>` popup on click. Supports `value`, `format`, `formats`, `show-alpha`, `placeholder`, `name`, `disabled`, `invalid`, `clearable`, `size`, and `label-position` attributes. Uses `ElementInternals` for `FormData` participation. Methods: `open()`, `close()`, `clear()`. Events: `change` (re-dispatched from the internal colorpicker). CSS custom properties: `--component-color-swatch-size-small/medium/large`, `--component-color-swatch-border-radius`, `--component-color-trigger-gap`, `--component-color-popup-offset`, `--component-color-z-index`. CSS parts: `color`, `wrapper`, `label-wrapper`, `trigger`, `swatch`, `display`, `clear-btn`, `popup`.
 - 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.

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

@@ -0,0 +1,46 @@
+export class YumeColor extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    _internals: ElementInternals;
+    _onDocumentClick(): void;
+    _onPointerDown: () => void;
+    _clickInsidePopup: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set clearable(v: boolean);
+    get clearable(): boolean;
+    set disabled(v: boolean);
+    get disabled(): boolean;
+    set format(v: string);
+    get format(): string;
+    set formats(v: any);
+    get formats(): any;
+    set invalid(v: boolean);
+    get invalid(): boolean;
+    set labelPosition(v: string);
+    get labelPosition(): string;
+    set name(v: string);
+    get name(): string;
+    set placeholder(v: string);
+    get placeholder(): string;
+    set showAlpha(v: boolean);
+    get showAlpha(): boolean;
+    set size(v: string);
+    get size(): string;
+    set value(v: string);
+    get value(): string;
+    clear(): void;
+    close(): void;
+    open(): void;
+    render(): void;
+    _bindListeners(): void;
+    _fromPicker: boolean;
+    _buildStyles(isDisabled: any): string;
+    _positionPopup(popup: any, trigger: any): void;
+    _setOpen(open: any): void;
+    _syncPickerValue(): void;
+    _updateClearBtn(): void;
+    _updateDisplay(): void;
+    _updateValidationState(): void;
+}

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

@@ -0,0 +1,157 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    let decorators: ((story: any) => 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 placeholder {
+            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: string;
+                    export { summary_2 as summary };
+                }
+                export { defaultValue_2 as defaultValue };
+            }
+            export { table_2 as table };
+        }
+        namespace showAlpha {
+            let control_4: string;
+            export { control_4 as control };
+            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 clearable {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+            export namespace table_4 {
+                export namespace defaultValue_4 {
+                    let summary_4: string;
+                    export { summary_4 as summary };
+                }
+                export { defaultValue_4 as defaultValue };
+            }
+            export { table_4 as table };
+        }
+        namespace disabled {
+            let control_6: string;
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+            export namespace table_5 {
+                export namespace defaultValue_5 {
+                    let summary_5: string;
+                    export { summary_5 as summary };
+                }
+                export { defaultValue_5 as defaultValue };
+            }
+            export { table_5 as table };
+        }
+        namespace invalid {
+            let control_7: string;
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+            export namespace table_6 {
+                export namespace defaultValue_6 {
+                    let summary_6: string;
+                    export { summary_6 as summary };
+                }
+                export { defaultValue_6 as defaultValue };
+            }
+            export { table_6 as table };
+        }
+        namespace labelPosition {
+            let control_8: string;
+            export { control_8 as control };
+            let options_2: string[];
+            export { options_2 as options };
+            let description_8: string;
+            export { description_8 as description };
+            export namespace table_7 {
+                export namespace defaultValue_7 {
+                    let summary_7: string;
+                    export { summary_7 as summary };
+                }
+                export { defaultValue_7 as defaultValue };
+            }
+            export { table_7 as table };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    function render(): string;
+}
+export namespace WithAlpha {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace Formats {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace Clearable {
+    export function render_3(): string;
+    export { render_3 as render };
+}
+export namespace Sizes {
+    export function render_4(): string;
+    export { render_4 as render };
+}
+export namespace Disabled {
+    export function render_5(): string;
+    export { render_5 as render };
+}
+export namespace Invalid {
+    export function render_6(): string;
+    export { render_6 as render };
+}
+export namespace LabelBottom {
+    export function render_7(): string;
+    export { render_7 as render };
+}

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

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