@waggylabs/yumekit 0.4.3-beta.36 → 0.4.3-beta.37

package/CHANGELOG.md

@@ -35,6 +35,7 @@ Delete any empty sections before publishing.
 
 ### 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.

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-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.
+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                            |

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

@@ -0,0 +1,66 @@
+export class YumeGallery extends HTMLElement {
+    static get observedAttributes(): string[];
+    _expandedIndex: number;
+    _items: any[];
+    _onKeyDown(e: any): void;
+    _previouslyFocused: Element;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set layout(val: string);
+    /** Layout mode for the thumbnail grid. */
+    get layout(): string;
+    set columns(val: number);
+    /** Number of columns in grid/masonry layouts. */
+    get columns(): number;
+    set gap(val: string);
+    /** Gap between items. */
+    get gap(): string;
+    set aspectRatio(val: string);
+    /** Thumbnail aspect ratio for grid/row layouts. */
+    get aspectRatio(): string;
+    set expandable(val: boolean);
+    /** Whether clicking a thumbnail opens the expanded view. */
+    get expandable(): boolean;
+    set loop(val: boolean);
+    /** Whether navigation wraps around. */
+    get loop(): boolean;
+    set size(val: string);
+    /** Size for thumbnails and expand arrows. */
+    get size(): string;
+    /** Closes the expanded view. */
+    close(): void;
+    /** Advances to the next image in the expanded view. */
+    next(): void;
+    /** Opens the expanded view at the given index. */
+    open(index: any): void;
+    /** Returns to the previous image in the expanded view. */
+    previous(): void;
+    render(): void;
+    _bindExpandedListeners(): void;
+    _bindSlotListener(): void;
+    _buildBaseStyles(): string;
+    _buildExpandStyles(): string;
+    _buildExpandedDOM(): HTMLElement;
+    _buildInteractiveStyles(): string;
+    _buildLayoutStyles(): string;
+    _buildStyles(): string;
+    _createExpandContent(item: any, caption: any, counter: any): HTMLElement;
+    _createItemWrapper(data: any, index: any): HTMLElement;
+    _createNavButton(name: any, label: any, iconName: any, slotName: any, disabled: any): HTMLElement;
+    _getExpandIconSize(): any;
+    _getThumbnailMinWidth(): any;
+    _getImageData(el: any): {
+        element: any;
+        src: any;
+        fullSrc: any;
+        alt: any;
+        caption: any;
+    };
+    _indexItems(): void;
+    _removeExpandedView(): void;
+    _resolveGap(): any;
+    _showExpandedView(): void;
+    _trapFocus(e: any): void;
+    _updateExpandedView(): void;
+}

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

@@ -0,0 +1,151 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    namespace argTypes {
+        namespace layout {
+            let control: string;
+            let options: string[];
+            let description: string;
+            namespace table {
+                namespace defaultValue {
+                    let summary: string;
+                }
+            }
+        }
+        namespace columns {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+            export namespace table_1 {
+                export namespace defaultValue_1 {
+                    let summary_1: number;
+                    export { summary_1 as summary };
+                }
+                export { defaultValue_1 as defaultValue };
+            }
+            export { table_1 as table };
+        }
+        namespace gap {
+            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_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 aspectRatio {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 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 expandable {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 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 loop {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+            export namespace table_5 {
+                export namespace defaultValue_5 {
+                    let summary_5: boolean;
+                    export { summary_5 as summary };
+                }
+                export { defaultValue_5 as defaultValue };
+            }
+            export { table_5 as table };
+        }
+        namespace size {
+            let control_6: string;
+            export { control_6 as control };
+            let options_2: string[];
+            export { options_2 as options };
+            let description_6: string;
+            export { description_6 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 args {
+        let layout_1: string;
+        export { layout_1 as layout };
+        let columns_1: number;
+        export { columns_1 as columns };
+        let gap_1: string;
+        export { gap_1 as gap };
+        let aspectRatio_1: string;
+        export { aspectRatio_1 as aspectRatio };
+        let expandable_1: boolean;
+        export { expandable_1 as expandable };
+        let loop_1: boolean;
+        export { loop_1 as loop };
+        let size_1: string;
+        export { size_1 as size };
+    }
+    function render({ layout, columns, gap, aspectRatio, expandable, loop, size }: {
+        layout: any;
+        columns: any;
+        gap: any;
+        aspectRatio: any;
+        expandable: any;
+        loop: any;
+        size: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace Layouts {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace WithCaptions {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace WithDataSrc {
+    export function render_3(): string;
+    export { render_3 as render };
+}
+export namespace AspectRatios {
+    export function render_4(): string;
+    export { render_4 as render };
+}
+export namespace NonExpandable {
+    export function render_5(): string;
+    export { render_5 as render };
+}

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

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