juxscript 1.1.82 → 1.1.87

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T04:14:03.006Z",
+  "generatedAt": "2026-02-12T18:17:52.009Z",
   "components": [
     {
       "file": "alert.js",

package/index.d.ts

@@ -46,6 +46,9 @@ import { registry } from './lib/components/registry.js';
 import { stateHistory } from './lib/components/history/StateHistory.js';
 import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory };
+import { vstack } from './lib/components/stack/VStack.js';
+import { hstack } from './lib/components/stack/HStack.js';
+import { zstack } from './lib/components/stack/ZStack.js';
 export declare const jux: {
     alert: typeof alert;
     app: typeof app;
@@ -89,6 +92,9 @@ export declare const jux: {
     themeToggle: typeof themeToggle;
     tooltip: typeof tooltip;
     write: typeof write;
+    vstack: typeof vstack;
+    hstack: typeof hstack;
+    zstack: typeof zstack;
     fetch: typeof import("./lib/utils/fetch.js").juxFetch & {
         all: typeof import("./lib/utils/fetch.js").fetchAll;
         get: <T = any>(url: string, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method">) => {
@@ -201,4 +207,5 @@ export declare const jux: {
     getOrCreateContainer: typeof getOrCreateContainer;
     watcher: typeof watcher;
 };
+export { vstack, hstack, zstack };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -48,6 +48,10 @@ import { registry } from './lib/components/registry.js'; // ✅ Import registry
 import { stateHistory } from './lib/components/history/StateHistory.js'; // ✅ Import history
 import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory }; // ✅ Export history
+// ✅ Import Stack components
+import { vstack } from './lib/components/stack/VStack.js';
+import { hstack } from './lib/components/stack/HStack.js';
+import { zstack } from './lib/components/stack/ZStack.js';
 // Utilities
 export const jux = {
     alert,
@@ -92,6 +96,10 @@ export const jux = {
     themeToggle,
     tooltip,
     write,
+    // ✅ Stack components
+    vstack,
+    hstack,
+    zstack,
     // Utilities
     fetch: fetchAPI,
     renderIcon,
@@ -99,3 +107,5 @@ export const jux = {
     getOrCreateContainer,
     watcher
 };
+// ✅ Export Stack components directly
+export { vstack, hstack, zstack };

package/lib/components/button.d.ts

@@ -14,6 +14,7 @@ export interface ButtonOptions {
 }
 type ButtonState = {
     label: string;
+    content: string;
     icon: string;
     variant: string;
     size: string;
@@ -30,13 +31,28 @@ export declare class Button extends BaseComponent<ButtonState> {
     constructor(id: string, options?: ButtonOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    /**
+     * Set button label (plain text, auto-escaped)
+     * Clears any HTML content
+     */
     label(value: string): this;
-    icon(value: string): this;
-    variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this;
-    size(value: 'small' | 'medium' | 'large'): this;
-    iconPosition(value: 'left' | 'right'): this;
-    fullWidth(value: boolean): this;
-    type(value: 'button' | 'submit' | 'reset'): this;
+    /**
+     * Alias for label() - more semantic for buttons
+     */
+    text(value: string): this;
+    /**
+     * Set button content as HTML (overrides label)
+     */
+    content(value: string): this;
+    /**
+     * Alias for content() - more semantic
+     */
+    html(value: string): this;
+    /**
+     * Update button text/HTML based on priority
+     * Priority: content (HTML) > label (text) > loading state
+     */
+    private _updateButtonText;
     update(prop: string, value: any): void;
     /**
      * Override visible() to update the actual button element

package/lib/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAkB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAK3G,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAK/C,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAK3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAKhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAkDnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAmB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}

package/lib/components/button.js

@@ -8,7 +8,8 @@ export class Button extends BaseComponent {
     constructor(id, options) {
         const opts = options || {};
         super(id, {
-            label: opts.label ?? formatIdAsLabel(id), // ✅ Use utility for default
+            label: opts.label ?? formatIdAsLabel(id), // ✅ Auto-generate label
+            content: '', // ✅ Empty by default
             icon: opts.icon ?? '',
             variant: opts.variant ?? 'primary',
             size: opts.size ?? 'medium',
@@ -20,7 +21,7 @@ export class Button extends BaseComponent {
             style: opts.style ?? '',
             class: opts.class ?? ''
         });
-        this._buttonElement = null; // ✅ Store button reference
+        this._buttonElement = null;
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -29,36 +30,56 @@ export class Button extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
+     * FLUENT API - Priority: content > label > auto-generated
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
+    /**
+     * Set button label (plain text, auto-escaped)
+     * Clears any HTML content
+     */
     label(value) {
         this.state.label = value;
+        this.state.content = ''; // ✅ Clear HTML content when label is set
+        this._updateButtonText();
         return this;
     }
-    icon(value) {
-        this.state.icon = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    size(value) {
-        this.state.size = value;
-        return this;
+    /**
+     * Alias for label() - more semantic for buttons
+     */
+    text(value) {
+        return this.label(value);
     }
-    iconPosition(value) {
-        this.state.iconPosition = value;
+    /**
+     * Set button content as HTML (overrides label)
+     */
+    content(value) {
+        this.state.content = value;
+        this._updateButtonText();
         return this;
     }
-    fullWidth(value) {
-        this.state.fullWidth = value;
-        return this;
+    /**
+     * Alias for content() - more semantic
+     */
+    html(value) {
+        return this.content(value);
     }
-    type(value) {
-        this.state.type = value;
-        return this;
+    /**
+     * Update button text/HTML based on priority
+     * Priority: content (HTML) > label (text) > loading state
+     */
+    _updateButtonText() {
+        if (!this._buttonElement)
+            return;
+        const textEl = this._buttonElement.querySelector('span:not(.jux-button-icon)');
+        if (!textEl)
+            return;
+        // Priority 1: HTML content (if set)
+        if (this.state.content) {
+            textEl.innerHTML = this.state.content;
+        }
+        // Priority 2: Label text
+        else if (this.state.label) {
+            textEl.textContent = this.state.loading ? 'Loading...' : this.state.label;
+        }
     }
     update(prop, value) {
         // No reactive updates needed
@@ -79,9 +100,9 @@ export class Button extends BaseComponent {
     }
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { label, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+        const { label, content, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
         const button = document.createElement('button');
-        this._buttonElement = button; // ✅ Store reference
+        this._buttonElement = button;
         button.className = `jux-button jux-button-${variant} jux-button-${size}`;
         button.id = this._id;
         button.disabled = disabled || loading;
@@ -96,7 +117,17 @@ export class Button extends BaseComponent {
             button.appendChild(iconEl);
         }
         const textEl = document.createElement('span');
-        textEl.textContent = loading ? 'Loading...' : label;
+        // ✅ Priority: content (HTML) > label (text) > loading state
+        if (content) {
+            textEl.innerHTML = content;
+        }
+        else if (label) {
+            textEl.textContent = loading ? 'Loading...' : label;
+        }
+        else {
+            // Fallback to auto-generated label from ID
+            textEl.textContent = loading ? 'Loading...' : formatIdAsLabel(this._id);
+        }
         button.appendChild(textEl);
         if (icon && iconPosition === 'right') {
             const iconEl = document.createElement('span');

package/lib/components/button.ts

@@ -22,6 +22,7 @@ export interface ButtonOptions {
 
 type ButtonState = {
   label: string;
+  content: string; // ✅ Raw HTML content (overrides label if set)
   icon: string;
   variant: string;
   size: string;
@@ -35,13 +36,14 @@ type ButtonState = {
 };
 
 export class Button extends BaseComponent<ButtonState> {
-  private _buttonElement: HTMLButtonElement | null = null; // ✅ Store button reference
+  private _buttonElement: HTMLButtonElement | null = null;
 
   constructor(id: string, options?: ButtonOptions) {
     const opts = options || {};
 
     super(id, {
-      label: opts.label ?? formatIdAsLabel(id),  // ✅ Use utility for default
+      label: opts.label ?? formatIdAsLabel(id), // ✅ Auto-generate label
+      content: '', // ✅ Empty by default
       icon: opts.icon ?? '',
       variant: opts.variant ?? 'primary',
       size: opts.size ?? 'medium',
@@ -64,44 +66,61 @@ export class Button extends BaseComponent<ButtonState> {
   }
 
   /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
+   * FLUENT API - Priority: content > label > auto-generated
    * ═════════════════════════════════════════════════════════════════ */
 
-  // ✅ Inherited from BaseComponent
-
+  /**
+   * Set button label (plain text, auto-escaped)
+   * Clears any HTML content
+   */
   label(value: string): this {
     this.state.label = value;
+    this.state.content = ''; // ✅ Clear HTML content when label is set
+    this._updateButtonText();
     return this;
   }
 
-  icon(value: string): this {
-    this.state.icon = value;
-    return this;
+  /**
+   * Alias for label() - more semantic for buttons
+   */
+  text(value: string): this {
+    return this.label(value);
   }
 
-  variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this {
-    this.state.variant = value;
+  /**
+   * Set button content as HTML (overrides label)
+   */
+  content(value: string): this {
+    this.state.content = value;
+    this._updateButtonText();
     return this;
   }
 
-  size(value: 'small' | 'medium' | 'large'): this {
-    this.state.size = value;
-    return this;
+  /**
+   * Alias for content() - more semantic
+   */
+  html(value: string): this {
+    return this.content(value);
   }
 
-  iconPosition(value: 'left' | 'right'): this {
-    this.state.iconPosition = value;
-    return this;
-  }
+  /**
+   * Update button text/HTML based on priority
+   * Priority: content (HTML) > label (text) > loading state
+   */
+  private _updateButtonText(): void {
+    if (!this._buttonElement) return;
 
-  fullWidth(value: boolean): this {
-    this.state.fullWidth = value;
-    return this;
-  }
+    const textEl = this._buttonElement.querySelector('span:not(.jux-button-icon)') as HTMLElement;
+    if (!textEl) return;
 
-  type(value: 'button' | 'submit' | 'reset'): this {
-    this.state.type = value;
-    return this;
+    // Priority 1: HTML content (if set)
+    if (this.state.content) {
+      textEl.innerHTML = this.state.content;
+    }
+    // Priority 2: Label text
+    else if (this.state.label) {
+      textEl.textContent = this.state.loading ? 'Loading...' : this.state.label;
+    }
   }
 
   update(prop: string, value: any): void {
@@ -128,10 +147,10 @@ export class Button extends BaseComponent<ButtonState> {
 
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
-    const { label, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+    const { label, content, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
 
     const button = document.createElement('button');
-    this._buttonElement = button; // ✅ Store reference
+    this._buttonElement = button;
     button.className = `jux-button jux-button-${variant} jux-button-${size}`;
     button.id = this._id;
     button.disabled = disabled || loading;
@@ -147,7 +166,17 @@ export class Button extends BaseComponent<ButtonState> {
     }
 
     const textEl = document.createElement('span');
-    textEl.textContent = loading ? 'Loading...' : label;
+
+    // ✅ Priority: content (HTML) > label (text) > loading state
+    if (content) {
+      textEl.innerHTML = content;
+    } else if (label) {
+      textEl.textContent = loading ? 'Loading...' : label;
+    } else {
+      // Fallback to auto-generated label from ID
+      textEl.textContent = loading ? 'Loading...' : formatIdAsLabel(this._id);
+    }
+
     button.appendChild(textEl);
 
     if (icon && iconPosition === 'right') {

package/lib/components/stack/BaseStack.d.ts

@@ -0,0 +1,112 @@
+import { BaseComponent, BaseState } from '../base/BaseComponent.js';
+export interface StackOptions {
+    spacing?: 'none' | 'tight' | 'default' | 'loose';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    divider?: boolean;
+    responsive?: boolean;
+    class?: string;
+    style?: string;
+}
+export interface ChildStyleFunction {
+    (index: number): string;
+}
+interface StackState extends BaseState {
+    spacing: string;
+    align?: string;
+    justify?: string;
+    divider: boolean;
+    responsive: boolean;
+    children: Array<any>;
+    childStyles?: ChildStyleFunction | string[];
+}
+/**
+ * BaseStack - Foundation for all stack layout components
+ * Provides common styling, child management, and progressive effects
+ */
+export declare abstract class BaseStack extends BaseComponent<StackState> {
+    protected abstract baseClassName: string;
+    private _inlineStyles;
+    constructor(id: string, children: Record<string, any> | any[], options?: StackOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    spacing(value: 'none' | 'tight' | 'default' | 'loose'): this;
+    align(value: 'start' | 'center' | 'end' | 'stretch'): this;
+    justify(value: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'): this;
+    divider(value?: boolean): this;
+    responsive(value?: boolean): this;
+    /**
+     * Internal helper to add individual CSS properties
+     */
+    private _addStyle;
+    /**
+     * Build and apply the complete style attribute
+     */
+    private _updateStyleAttribute;
+    padding(value: string): this;
+    margin(value: string): this;
+    border(value: string): this;
+    borderRadius(value: string): this;
+    width(value: string): this;
+    height(value: string): this;
+    minWidth(value: string): this;
+    maxWidth(value: string): this;
+    minHeight(value: string): this;
+    maxHeight(value: string): this;
+    background(value: string): this;
+    backgroundColor(value: string): this;
+    boxShadow(value: string): this;
+    opacity(value: string | number): this;
+    position(value: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'): this;
+    top(value: string): this;
+    right(value: string): this;
+    bottom(value: string): this;
+    left(value: string): this;
+    zIndex(value: string | number): this;
+    overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
+    overflowX(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
+    overflowY(value: 'visible' | 'hidden' | 'scroll' | 'auto'): this;
+    display(value: string): this;
+    cursor(value: string): this;
+    transform(value: string): this;
+    transformOrigin(value: string): this;
+    transition(value: string): this;
+    animation(value: string): this;
+    /**
+     * Apply custom styles to each child progressively
+     */
+    childStyle(stylesOrFunction: string[] | ChildStyleFunction): this;
+    /**
+     * Cascade effect - offset children progressively
+     */
+    cascade(baseOffset?: number, axis?: 'x' | 'y' | 'both' | 'horizontal' | 'vertical' | 'xy'): this;
+    /**
+     * Fan effect - rotate children progressively
+     */
+    fan(angle?: number, origin?: string): this;
+    /**
+     * Scale progression - shrink/grow children
+     */
+    scaleProgressive(startScale?: number, step?: number, origin?: string): this;
+    /**
+     * Fade effect - progressive opacity
+     */
+    fade(startOpacity?: number, step?: number): this;
+    /**
+     * Blur effect - progressive blur
+     */
+    blur(startBlur?: number, step?: number): this;
+    /**
+     * Stagger animation delays
+     */
+    stagger(baseDelay?: number): this;
+    protected buildClasses(): string;
+    protected renderChild(child: any, index: number): string;
+    private wrapChildWithStyle;
+    private injectChildStyle;
+    private getChildStyle;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+    update(prop: string, value: any): void;
+}
+export {};
+//# sourceMappingURL=BaseStack.d.ts.map

package/lib/components/stack/BaseStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}