juxscript 1.1.143 → 1.1.145

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,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,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO/C;;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;CAwDnE;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,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO/C;;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

@@ -120,15 +120,21 @@ export class Button extends BaseComponent {
     }
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { content, icon, iconPosition, style, class: className } = this.state;
+        const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
         const button = document.createElement('button');
-        // ✅ ONLY set base class - NO variant/size classes
+        // ✅ Base class + variant + size
         button.className = 'jux-button';
+        if (variant && variant !== 'primary') {
+            button.className += ` jux-button-${variant}`;
+        }
+        if (size && size !== 'medium') {
+            button.className += ` jux-button-${size}`;
+        }
         button.id = this._id;
-        // ✅ Add user classes only
+        // ✅ Add user classes
         if (className)
             button.className += ` ${className}`;
-        // ✅ Apply style (NO variant/size logic - pure cascade)
+        // ✅ Apply user style (no variant/size logic here)
         if (style)
             button.setAttribute('style', style);
         if (icon && iconPosition === 'left') {
@@ -138,7 +144,6 @@ export class Button extends BaseComponent {
             button.appendChild(iconEl);
         }
         const textEl = document.createElement('span');
-        // ✅ Priority: content (HTML) > label (text) > loading state
         if (content) {
             textEl.innerHTML = content;
         }

package/lib/components/button.ts

@@ -173,18 +173,25 @@ export class Button extends BaseComponent<ButtonState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { content, icon, iconPosition, style, class: className } = this.state;
+    const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
 
     const button = document.createElement('button');
 
-    // ✅ ONLY set base class - NO variant/size classes
+    // ✅ Base class + variant + size
     button.className = 'jux-button';
+    if (variant && variant !== 'primary') {
+      button.className += ` jux-button-${variant}`;
+    }
+    if (size && size !== 'medium') {
+      button.className += ` jux-button-${size}`;
+    }
+
     button.id = this._id;
 
-    // ✅ Add user classes only
+    // ✅ Add user classes
     if (className) button.className += ` ${className}`;
 
-    // ✅ Apply style (NO variant/size logic - pure cascade)
+    // ✅ Apply user style (no variant/size logic here)
     if (style) button.setAttribute('style', style);
 
     if (icon && iconPosition === 'left') {
@@ -195,8 +202,6 @@ export class Button extends BaseComponent<ButtonState> {
     }
 
     const textEl = document.createElement('span');
-
-    // ✅ Priority: content (HTML) > label (text) > loading state
     if (content) {
       textEl.innerHTML = content;
     } else if (this.state.label) {
@@ -205,7 +210,6 @@ export class Button extends BaseComponent<ButtonState> {
       // Fallback to auto-generated label from ID
       textEl.textContent = this.state.loading ? 'Loading...' : formatIdAsLabel(this._id);
     }
-
     button.appendChild(textEl);
 
     if (icon && iconPosition === 'right') {

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

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,YAAY,GAAG;IAChB,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;gBACxC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IASpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAatC,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI;IAKzC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS5B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8BrE;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,YAAY,GAAG;IAChB,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;gBACxC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IASpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA0BtC,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI;IAKzC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS5B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8BrE;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/heading.js

@@ -18,7 +18,20 @@ export class Heading extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     update(prop, value) {
-        // No reactive updates needed
+        const el = document.getElementById(this._id);
+        if (!el)
+            return;
+        switch (prop) {
+            case 'content':
+                el.textContent = value;
+                break;
+            case 'level':
+                // Would need to recreate element - skip for now
+                break;
+            default:
+                super.update(prop, value);
+                break;
+        }
     }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API

package/lib/components/heading.ts

@@ -37,7 +37,20 @@ export class Heading extends BaseComponent<HeadingState> {
     }
 
     update(prop: string, value: any): void {
-        // No reactive updates needed
+        const el = document.getElementById(this._id);
+        if (!el) return;
+
+        switch (prop) {
+            case 'content':
+                el.textContent = value;
+                break;
+            case 'level':
+                // Would need to recreate element - skip for now
+                break;
+            default:
+                super.update(prop, value);
+                break;
+        }
     }
 
     /* ═════════════════════════════════════════════════════════════════

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

@@ -1 +1 @@
-{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["paragraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,cAAc,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAQtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAqCtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQzB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAuCrE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["paragraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,cAAc,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,CAAC;gBAC5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IAQtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAwBtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQzB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAuCrE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAE/E"}

package/lib/components/paragraph.js

@@ -24,22 +24,11 @@ export class Paragraph extends BaseComponent {
         const el = document.getElementById(this._id);
         if (!el)
             return;
-        // Handle paragraph-specific properties
         switch (prop) {
             case 'content':
                 el.textContent = value;
                 break;
-            case 'class':
-                // Preserve base jux-paragraph class, add custom classes
-                const baseClass = 'jux-paragraph';
-                const userClasses = value.split(' ').filter((c) => c);
-                el.className = [baseClass, ...userClasses].join(' ');
-                break;
-            case 'style':
-                el.setAttribute('style', value);
-                break;
             default:
-                // Call parent for base properties (visible, disabled, loading, etc.)
                 super.update(prop, value);
                 break;
         }

package/lib/components/paragraph.ts

@@ -41,25 +41,12 @@ export class Paragraph extends BaseComponent<ParagraphState> {
         const el = document.getElementById(this._id);
         if (!el) return;
 
-        // Handle paragraph-specific properties
         switch (prop) {
             case 'content':
                 el.textContent = value;
                 break;
 
-            case 'class':
-                // Preserve base jux-paragraph class, add custom classes
-                const baseClass = 'jux-paragraph';
-                const userClasses = value.split(' ').filter((c: string) => c);
-                el.className = [baseClass, ...userClasses].join(' ');
-                break;
-
-            case 'style':
-                el.setAttribute('style', value);
-                break;
-
             default:
-                // Call parent for base properties (visible, disabled, loading, etc.)
                 super.update(prop, value);
                 break;
         }

package/lib/styles/foundation.css

@@ -321,7 +321,7 @@ html {
 .jux-button {
   /* Colors */
   background: var(--jux-brand-bg);
-  color: #fff;
+  color: var(--jux-surface-from); /* ✅ Fixed - button text uses surface color (inverts with theme) */
   border: var(--jux-stroke) solid var(--jux-border-color);
   
   /* Shape */
@@ -363,4 +363,163 @@ html {
 .jux-button:disabled {
   opacity: var(--jux-burn-strong);
   cursor: not-allowed;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   BUTTON VARIANTS
+   ══════════════════════════════════════════════════════════════════ */
+
+.jux-button-primary {
+  /* Default - uses --jux-brand-bg from above */
+}
+
+.jux-button-secondary {
+  background: var(--jux-brand-accent-bg);
+}
+
+.jux-button-secondary:hover:not(:disabled) {
+  background: var(--jux-brand-accent-color-hover);
+}
+
+.jux-button-secondary:active:not(:disabled) {
+  background: var(--jux-brand-accent-color-active);
+}
+
+.jux-button-danger {
+  background: var(--jux-danger-bg);
+}
+
+.jux-button-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, 
+    var(--jux-danger-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-danger-to) calc(var(--jux-burn-hover) * 100%)
+  );
+}
+
+.jux-button-success {
+  background: var(--jux-success-bg);
+}
+
+.jux-button-success:hover:not(:disabled) {
+  background: color-mix(in srgb, 
+    var(--jux-success-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-success-to) calc(var(--jux-burn-hover) * 100%)
+  );
+}
+
+.jux-button-warning {
+  background: var(--jux-warning-bg);
+}
+
+.jux-button-warning:hover:not(:disabled) {
+  background: color-mix(in srgb, 
+    var(--jux-warning-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-warning-to) calc(var(--jux-burn-hover) * 100%)
+  );
+}
+
+.jux-button-info {
+  background: var(--jux-info-bg);
+}
+
+.jux-button-info:hover:not(:disabled) {
+  background: color-mix(in srgb, 
+    var(--jux-info-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-info-to) calc(var(--jux-burn-hover) * 100%)
+  );
+}
+
+.jux-button-ghost {
+  background: transparent;
+  color: var(--jux-brand-color);
+  border-color: var(--jux-brand-color);
+}
+
+.jux-button-ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--jux-brand-color) 10%, transparent 90%);
+}
+
+.jux-button-link {
+  background: transparent;
+  color: var(--jux-brand-color);
+  border: none;
+  text-decoration: underline;
+}
+
+.jux-button-link:hover:not(:disabled) {
+  background: transparent;
+  opacity: 0.8;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   BUTTON SIZES
+   ══════════════════════════════════════════════════════════════════ */
+
+.jux-button-small {
+  padding: calc(var(--jux-space-sm) * 0.75) calc(var(--jux-space-md) * 0.75);
+  font-size: calc(var(--jux-text-base) * var(--jux-size-sm));
+}
+
+.jux-button-medium {
+  /* Default size from .jux-button */
+}
+
+.jux-button-large {
+  padding: calc(var(--jux-space-md) * 1.25) calc(var(--jux-space-lg) * 1.25);
+  font-size: calc(var(--jux-text-base) * var(--jux-size-lg));
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   HEADING STYLES
+   ══════════════════════════════════════════════════════════════════ */
+
+.jux-heading {
+  margin: 0;
+  font-family: var(--jux-font-family);
+  font-weight: var(--jux-weight-bold);
+  line-height: var(--jux-leading-tight);
+  color: var(--jux-text-color);
+}
+
+.jux-heading-1 {
+  font-size: var(--jux-text-4xl);
+  font-weight: var(--jux-weight-black);
+}
+
+.jux-heading-2 {
+  font-size: var(--jux-text-3xl);
+  font-weight: var(--jux-weight-bold);
+}
+
+.jux-heading-3 {
+  font-size: var(--jux-text-2xl);
+  font-weight: var(--jux-weight-bold);
+}
+
+.jux-heading-4 {
+  font-size: var(--jux-text-xl);
+  font-weight: var(--jux-weight-semibold);
+}
+
+.jux-heading-5 {
+  font-size: var(--jux-text-lg);
+  font-weight: var(--jux-weight-semibold);
+}
+
+.jux-heading-6 {
+  font-size: var(--jux-text-base);
+  font-weight: var(--jux-weight-semibold);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   PARAGRAPH STYLES
+   ══════════════════════════════════════════════════════════════════ */
+
+.jux-paragraph {
+  margin: 0;
+  font-family: var(--jux-font-family);
+  font-size: var(--jux-text-base);
+  font-weight: var(--jux-weight-normal);
+  line-height: var(--jux-leading-normal);
+  color: var(--jux-text-color);
 }

package/lib/styles/stacks.css

@@ -1,80 +1,132 @@
-/* ═══════════════════════════════════════════════════════════════════
- * STACK LAYOUT COMPONENTS
- * Pure layout structure - no animations, no modifiers
- * ═══════════════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════════════
+   JUX STACKS - Layout System
+   Uses foundation tokens for spacing, auto-adapts to themes
+   ══════════════════════════════════════════════════════════════════ */
 
-/* Vertical Stack */
-.jux-vstack {
+/* ═════════════════════════════════════════════════════════════════
+ * BASE STACK STYLES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack,
+.jux-hstack,
+.jux-zstack {
   display: flex;
+  
+  /* ✅ Use CSS variables from foundation/theme */
+  gap: var(--jux-gap);
+  padding: var(--jux-pad);
+  
+  /* Default alignment */
+  align-items: var(--jux-align, flex-start);
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * VERTICAL STACK (Column)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack {
   flex-direction: column;
 }
 
-.jux-vstack-tight { gap: 0.5rem; }
-.jux-vstack-loose { gap: 1.5rem; }
-.jux-vstack-none { gap: 0; }
+/* ═════════════════════════════════════════════════════════════════
+ * HORIZONTAL STACK (Row)
+ * ═════════════════════════════════════════════════════════════════ */
 
-/* Horizontal Stack */
 .jux-hstack {
-  display: flex;
   flex-direction: row;
-  align-items: center;
+  flex-wrap: wrap; /* Allow wrapping on mobile */
 }
 
-.jux-hstack-tight { gap: 0.5rem; }
-.jux-hstack-loose { gap: 1.5rem; }
-.jux-hstack-none { gap: 0; }
+/* ═════════════════════════════════════════════════════════════════
+ * Z-STACK (Layered)
+ * ═════════════════════════════════════════════════════════════════ */
 
-/* Z-Stack (Layered/Overlapping) */
 .jux-zstack {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   position: relative;
+  flex-direction: column;
 }
 
 .jux-zstack > * {
-  grid-column: 1;
-  grid-row: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.jux-zstack-tight > * { margin: 0.25rem; }
-.jux-zstack-loose > * { margin: 0.75rem; }
-.jux-zstack-none > * { margin: 0; }
-
-/* Stack Alignment Options */
-.jux-stack-start { align-items: flex-start; }
-.jux-stack-center { align-items: center; }
-.jux-stack-end { align-items: flex-end; }
-.jux-stack-stretch { align-items: stretch; }
-
-/* Stack Justification Options */
-.jux-stack-justify-start { justify-content: flex-start; }
-.jux-stack-justify-center { justify-content: center; }
-.jux-stack-justify-end { justify-content: flex-end; }
-.jux-stack-justify-between { justify-content: space-between; }
-.jux-stack-justify-around { justify-content: space-around; }
-.jux-stack-justify-evenly { justify-content: space-evenly; }
-
-/* Responsive Stacks */
+/* ═════════════════════════════════════════════════════════════════
+ * ALIGNMENT UTILITIES (Via CSS Variables)
+ * Applied via .align-* descriptor classes
+ * ═════════════════════════════════════════════════════════════════ */
+
+.align-start    { --jux-align: flex-start; }
+.align-center   { --jux-align: center; }
+.align-end      { --jux-align: flex-end; }
+.align-stretch  { --jux-align: stretch; }
+.align-baseline { --jux-align: baseline; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * JUSTIFY CONTENT (For HStack distribution)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+.justify-evenly  { justify-content: space-evenly; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * RESPONSIVE BEHAVIOR
+ * HStack becomes VStack on mobile for better UX
+ * ═════════════════════════════════════════════════════════════════ */
+
 @media (max-width: 768px) {
-  .jux-hstack-responsive {
+  .jux-hstack {
     flex-direction: column;
+    /* Gap remains consistent via CSS variables */
+  }
+  
+  /* Optional: Force HStack to stay horizontal on mobile */
+  .jux-hstack.stay-horizontal {
+    flex-direction: row;
   }
 }
 
-/* Stack with Dividers */
-.jux-vstack-divider > *:not(:last-child) {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e4e4e7;
-  margin-bottom: 1rem;
+/* ═════════════════════════════════════════════════════════════════
+ * FULL WIDTH/HEIGHT UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+  min-height: 100vh;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * CENTERED CONTENT (Common Layout Pattern)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.center-content {
+  justify-content: center;
+  align-items: center;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * SCROLL BEHAVIOR
+ * ═════════════════════════════════════════════════════════════════ */
+
+.scroll-x {
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
-.jux-hstack-divider > *:not(:last-child) {
-  padding-right: 1rem;
-  border-right: 1px solid #e4e4e7;
-  margin-right: 1rem;
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.jux-zstack-divider > * {
-  border: 1px solid #e4e4e7;
+.scroll-both {
+  overflow: auto;
 }

package/lib/styles/themes.css

@@ -63,6 +63,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.6;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-lg);
+  --jux-pad-token: var(--jux-space-xl);
 }
 
 [data-swag="apple"][data-mode="dark"] {
@@ -80,7 +84,9 @@
   --jux-border-from: #38383a;
   --jux-border-to: #545456;
   
-  /* Radius, spacing, typography inherited from light mode */
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-lg);
+  --jux-pad-token: var(--jux-space-xl);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -133,6 +139,10 @@
   --jux-burn-active: 0.15;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 [data-swag="google"][data-mode="dark"] {
@@ -149,6 +159,10 @@
   
   --jux-border-from: #3c4043;
   --jux-border-to: #5f6368;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -201,6 +215,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 [data-swag="stripe"][data-mode="dark"] {
@@ -217,6 +235,10 @@
   
   --jux-border-from: #1a365d;
   --jux-border-to: #2d4a6f;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -269,6 +291,10 @@
   --jux-burn-active: 0.15;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.4;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-xl);
+  --jux-pad-token: var(--jux-space-2xl);
 }
 
 [data-swag="gumroad"][data-mode="dark"] {
@@ -285,6 +311,10 @@
   
   --jux-border-from: #333333;
   --jux-border-to: #666666;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-xl);
+  --jux-pad-token: var(--jux-space-2xl);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -337,6 +367,10 @@
   --jux-burn-active: 0.12;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 [data-swag="meta"][data-mode="dark"] {
@@ -353,6 +387,10 @@
   
   --jux-border-from: #3a3b3c;
   --jux-border-to: #4e4f50;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -405,6 +443,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.35;
   --jux-burn-strong: 0.6;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 [data-swag="notion"][data-mode="dark"] {
@@ -421,6 +463,10 @@
   
   --jux-border-from: #373737;
   --jux-border-to: #4a4a4a;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.143",
+  "version": "1.1.145",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",