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

package/CHANGELOG.md

@@ -35,6 +35,7 @@ Delete any empty sections before publishing.
 
 ### Added
 
+- New `y-stepper` component — a multi-step wizard that guides users through a sequential flow. Step content is provided via named slots defined in the `items` JSON array (`{ label, slot, description?, icon?, status? }`). Supports `current` (zero-based active step index), `orientation` (`"horizontal"` | `"vertical"`), `position` (`"start"` | `"end"` — controls whether indicators appear before or after the content), `size` (`"small"` | `"medium"` | `"large"`), `linear` (restricts free navigation), and `editable` (allows returning to completed steps). Methods: `next()`, `previous()`, `goTo(index)`, `complete(index?)`, `reset()`. Events: cancelable `change`, `complete`, `finish`. Full ARIA support with `role="list"`, `aria-current="step"`, `aria-controls`/`aria-labelledby` linkage, and keyboard navigation.
 - 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.

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-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.
+YumeKit is a collection of 33 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
@@ -98,6 +98,7 @@ Then use the `<y-theme>` component to apply a theme:
 | Select       | `<y-select>`       | Select / dropdown input                             |
 | Slider       | `<y-slider>`       | Range slider input                                  |
 | Stack        | `<y-stack>`        | Layout container (row, column, grid, masonry)       |
+| Stepper      | `<y-stepper>`      | Multi-step wizard with sequential flow              |
 | Switch       | `<y-switch>`       | Toggle switch                                       |
 | Table        | `<y-table>`        | Sortable data table                                 |
 | Textarea     | `<y-textarea>`     | Multi-line text input                               |

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

@@ -0,0 +1,58 @@
+export class YumeStepper extends HTMLElement {
+    static get observedAttributes(): string[];
+    _stepStates: any[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set current(val: number);
+    /** Zero-based index of the active step. */
+    get current(): number;
+    set editable(val: boolean);
+    /** When set, completed steps can be clicked to return to them. */
+    get editable(): boolean;
+    set items(val: any);
+    /** Array of step definitions. */
+    get items(): any;
+    set linear(val: boolean);
+    /** When set, users can only advance via next() or complete(). */
+    get linear(): boolean;
+    set orientation(val: "vertical" | "horizontal");
+    /** Layout direction of step indicators. */
+    get orientation(): "vertical" | "horizontal";
+    set position(val: "start" | "end");
+    /** Whether step indicators appear before or after the content panels. */
+    get position(): "start" | "end";
+    set size(val: string);
+    /** Controls indicator size, font size, and spacing. */
+    get size(): string;
+    /** Marks a step as complete without advancing. Defaults to the current step. */
+    complete(index: any): void;
+    /** Jumps to the step at the given index. */
+    goTo(index: any): void;
+    /** Advances to the next step. Marks current as complete. */
+    next(): void;
+    /** Returns to the previous step. */
+    previous(): void;
+    render(): void;
+    /** Returns all steps to pending and sets current back to 0. */
+    reset(): void;
+    _buildConnectorStyles(): string;
+    _buildHostStyles(): string;
+    _buildIndicator(item: any, index: any, items: any): HTMLElement[];
+    _buildIndicatorButton(item: any, index: any, state: any, isActive: any, isClickable: any): HTMLElement;
+    _buildIndicatorIcon(item: any, index: any, state: any): HTMLElement;
+    _buildIndicatorLabel(item: any): HTMLElement;
+    _buildIndicators(items: any): HTMLElement;
+    _buildIndicatorStyles(): string;
+    _buildPanelStyles(): string;
+    _buildPanels(items: any): HTMLElement;
+    _buildStyles(): string;
+    _fireChangeAndApply(nextIndex: any): void;
+    _getDefaultGap(): any;
+    _getDefaultIndicatorSize(): any;
+    _getIconSize(): any;
+    _getStepState(index: any): any;
+    _isIndicatorClickable(index: any, state: any): boolean;
+    _onIndicatorClick(index: any): void;
+    _onIndicatorKeydown(e: any, index: any): void;
+    _syncStepStates(): void;
+}

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

@@ -0,0 +1,129 @@
+declare namespace _default {
+    let title: string;
+    let tags: string[];
+    namespace argTypes {
+        namespace orientation {
+            let control: string;
+            let options: string[];
+            let description: string;
+            namespace table {
+                namespace defaultValue {
+                    let summary: string;
+                }
+            }
+        }
+        namespace size {
+            let control_1: string;
+            export { control_1 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            let description_1: string;
+            export { description_1 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 linear {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 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 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_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 editable {
+            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 args {
+        let orientation_1: string;
+        export { orientation_1 as orientation };
+        let position_1: string;
+        export { position_1 as position };
+        let size_1: string;
+        export { size_1 as size };
+        let linear_1: boolean;
+        export { linear_1 as linear };
+        let editable_1: boolean;
+        export { editable_1 as editable };
+    }
+    function render({ orientation, position, size, linear, editable }: {
+        orientation: any;
+        position: any;
+        size: any;
+        linear: any;
+        editable: any;
+    }): string;
+}
+export default _default;
+export const Default: {};
+export namespace WithDescriptions {
+    export function render_1(): string;
+    export { render_1 as render };
+}
+export namespace WithIcons {
+    export function render_2(): string;
+    export { render_2 as render };
+}
+export namespace WithStatus {
+    export function render_3(): string;
+    export { render_3 as render };
+}
+export namespace Vertical {
+    export function render_4(): string;
+    export { render_4 as render };
+}
+export namespace PositionEnd {
+    export function render_5(): string;
+    export { render_5 as render };
+}
+export namespace Sizes {
+    export function render_6(): string;
+    export { render_6 as render };
+}
+export namespace Interactive {
+    export function render_7(): string;
+    export { render_7 as render };
+}
+export namespace LinearMode {
+    export function render_8(): string;
+    export { render_8 as render };
+}

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

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