@waggylabs/yumekit 0.4.2 → 0.4.3-beta.37

package/CHANGELOG.md

@@ -31,6 +31,16 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
+## [0.4.3] - 2026-04-17
+
+### Added
+
+- New `y-gallery` component — a media gallery that accepts `<img>` or `<figure>` children and arranges them in `grid`, `row`, `column`, or `masonry` layouts. Supports `columns`, `gap` (`"small"` | `"medium"` | `"large"` or any CSS length), `aspect-ratio`, `expandable` (lightbox with prev/next navigation), `loop`, and `size` attributes. The expanded view uses `<y-icon>` for nav arrows and supports `data-src` for full-resolution images, `<figcaption>` captions, and image counter. Icon slots (`expand-prev-icon`, `expand-next-icon`, `expand-close-icon`) allow custom icons. Fires `expand`, `close`, and `navigate` events.
+- 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.
+- 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.
+- 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.
+- 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
 
 ### Added

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-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.
+YumeKit is a collection of 32 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
@@ -86,6 +86,7 @@ Then use the `<y-theme>` component to apply a theme:
 | DatePicker   | `<y-datepicker>`   | A date and time picker                              |
 | Dialog       | `<y-dialog>`       | Modal dialog                                        |
 | Drawer       | `<y-drawer>`       | Side drawer / sidebar                               |
+| Gallery      | `<y-gallery>`      | Media gallery with lightbox                         |
 | Icon         | `<y-icon>`         | SVG icon display                                    |
 | Input        | `<y-input>`        | Text input field                                    |
 | Menu         | `<y-menu>`         | Dropdown navigation menu                            |
@@ -96,6 +97,7 @@ Then use the `<y-theme>` component to apply a theme:
 | Rating       | `<y-rating>`       | Star / icon rating input                            |
 | Select       | `<y-select>`       | Select / dropdown input                             |
 | Slider       | `<y-slider>`       | Range slider input                                  |
+| Stack        | `<y-stack>`        | Layout container (row, column, grid, masonry)       |
 | Switch       | `<y-switch>`       | Toggle switch                                       |
 | Table        | `<y-table>`        | Sortable data table                                 |
 | Textarea     | `<y-textarea>`     | Multi-line text input                               |

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 {};