juxscript 1.1.142 → 1.1.144

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;CAqFnE;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

@@ -122,48 +122,21 @@ export class Button extends BaseComponent {
         const container = this._setupContainer(targetId);
         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
         if (className)
             button.className += ` ${className}`;
-        // ✅ Apply variant via CSS variables (inline style)
-        let inlineStyle = style || '';
-        // Map variant to CSS variable overrides
-        if (variant === 'success') {
-            inlineStyle += `--jux-accent-bg: var(--jux-success-bg); --jux-accent-to: var(--jux-success-to);`;
-        }
-        else if (variant === 'danger') {
-            inlineStyle += `--jux-accent-bg: var(--jux-danger-bg); --jux-accent-to: var(--jux-danger-to);`;
-        }
-        else if (variant === 'warning') {
-            inlineStyle += `--jux-accent-bg: var(--jux-warning-bg); --jux-accent-to: var(--jux-warning-to);`;
-        }
-        else if (variant === 'info') {
-            inlineStyle += `--jux-accent-bg: var(--jux-info-bg); --jux-accent-to: var(--jux-info-to);`;
-        }
-        else if (variant === 'secondary') {
-            inlineStyle += `--jux-accent-bg: var(--jux-brand-accent-bg); --jux-accent-to: var(--jux-brand-accent-to);`;
-        }
-        else if (variant === 'ghost') {
-            inlineStyle += `background: transparent; border-color: transparent; color: var(--jux-brand-color);`;
-        }
-        else if (variant === 'outline') {
-            inlineStyle += `background: transparent; color: var(--jux-brand-color); border-color: var(--jux-brand-color);`;
-        }
-        // 'primary' uses default --jux-brand-bg from foundation.css
-        // Map size to CSS variable overrides
-        if (size === 'small') {
-            inlineStyle += `--jux-pad: calc(0.375rem * var(--jux-size-xs)) calc(0.75rem * var(--jux-size-xs)); font-size: calc(var(--jux-base-font) * var(--jux-size-xs));`;
-        }
-        else if (size === 'large') {
-            inlineStyle += `--jux-pad: calc(0.5rem * var(--jux-size-lg)) calc(1rem * var(--jux-size-lg)); font-size: calc(var(--jux-base-font) * var(--jux-size-lg));`;
-        }
-        // 'medium' uses default --jux-base-pad from foundation.css
-        if (inlineStyle) {
-            button.setAttribute('style', inlineStyle);
-        }
+        // ✅ Apply user style (no variant/size logic here)
+        if (style)
+            button.setAttribute('style', style);
         if (icon && iconPosition === 'left') {
             const iconEl = document.createElement('span');
             iconEl.className = 'jux-button-icon';
@@ -171,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;
         }
@@ -196,6 +168,7 @@ export class Button extends BaseComponent {
         });
         this._wireStandardEvents(button);
         container.appendChild(button);
+        this._buttonElement = button;
         return this;
     }
 }

package/lib/components/button.ts

@@ -177,45 +177,22 @@ export class Button extends BaseComponent<ButtonState> {
 
     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
     if (className) button.className += ` ${className}`;
 
-    // ✅ Apply variant via CSS variables (inline style)
-    let inlineStyle = style || '';
-
-    // Map variant to CSS variable overrides
-    if (variant === 'success') {
-      inlineStyle += `--jux-accent-bg: var(--jux-success-bg); --jux-accent-to: var(--jux-success-to);`;
-    } else if (variant === 'danger') {
-      inlineStyle += `--jux-accent-bg: var(--jux-danger-bg); --jux-accent-to: var(--jux-danger-to);`;
-    } else if (variant === 'warning') {
-      inlineStyle += `--jux-accent-bg: var(--jux-warning-bg); --jux-accent-to: var(--jux-warning-to);`;
-    } else if (variant === 'info') {
-      inlineStyle += `--jux-accent-bg: var(--jux-info-bg); --jux-accent-to: var(--jux-info-to);`;
-    } else if (variant === 'secondary') {
-      inlineStyle += `--jux-accent-bg: var(--jux-brand-accent-bg); --jux-accent-to: var(--jux-brand-accent-to);`;
-    } else if (variant === 'ghost') {
-      inlineStyle += `background: transparent; border-color: transparent; color: var(--jux-brand-color);`;
-    } else if (variant === 'outline') {
-      inlineStyle += `background: transparent; color: var(--jux-brand-color); border-color: var(--jux-brand-color);`;
-    }
-    // 'primary' uses default --jux-brand-bg from foundation.css
-
-    // Map size to CSS variable overrides
-    if (size === 'small') {
-      inlineStyle += `--jux-pad: calc(0.375rem * var(--jux-size-xs)) calc(0.75rem * var(--jux-size-xs)); font-size: calc(var(--jux-base-font) * var(--jux-size-xs));`;
-    } else if (size === 'large') {
-      inlineStyle += `--jux-pad: calc(0.5rem * var(--jux-size-lg)) calc(1rem * var(--jux-size-lg)); font-size: calc(var(--jux-base-font) * var(--jux-size-lg));`;
-    }
-    // 'medium' uses default --jux-base-pad from foundation.css
-
-    if (inlineStyle) {
-      button.setAttribute('style', inlineStyle);
-    }
+    // ✅ Apply user style (no variant/size logic here)
+    if (style) button.setAttribute('style', style);
 
     if (icon && iconPosition === 'left') {
       const iconEl = document.createElement('span');
@@ -225,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) {
@@ -235,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') {
@@ -253,6 +227,7 @@ export class Button extends BaseComponent<ButtonState> {
 
     this._wireStandardEvents(button);
     container.appendChild(button);
+    this._buttonElement = button;
     return this;
   }
 }

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

@@ -44,13 +44,13 @@
   /* ═════════════════════════════════════════════════════════════════
    * 📏 SPACING SCALE (Base units for padding, gap, margins)
    * ═════════════════════════════════════════════════════════════════ */
-  --jux-space-xs: 0.25rem;     /* 4px */
-  --jux-space-sm: 0.5rem;      /* 8px */
-  --jux-space-md: 1rem;        /* 16px */
-  --jux-space-lg: 1.5rem;      /* 24px */
-  --jux-space-xl: 2rem;        /* 32px */
-  --jux-space-2xl: 3rem;       /* 48px */
-  --jux-space-3xl: 4rem;       /* 64px */
+  --jux-space-xs: 0.25rem;
+  --jux-space-sm: 0.5rem;
+  --jux-space-md: 1rem;
+  --jux-space-lg: 1.5rem;
+  --jux-space-xl: 2rem;
+  --jux-space-2xl: 3rem;
+  --jux-space-3xl: 4rem;
   
   /* ═════════════════════════════════════════════════════════════════
    * 🔤 TYPOGRAPHY SCALE
@@ -62,15 +62,15 @@
   --jux-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   
   /* Font Sizes */
-  --jux-text-xs: 0.75rem;      /* 12px */
-  --jux-text-sm: 0.875rem;     /* 14px */
-  --jux-text-base: 1rem;       /* 16px */
-  --jux-text-lg: 1.125rem;     /* 18px */
-  --jux-text-xl: 1.25rem;      /* 20px */
-  --jux-text-2xl: 1.5rem;      /* 24px */
-  --jux-text-3xl: 1.875rem;    /* 30px */
-  --jux-text-4xl: 2.25rem;     /* 36px */
-  --jux-text-5xl: 3rem;        /* 48px */
+  --jux-text-xs: 0.75rem;
+  --jux-text-sm: 0.875rem;
+  --jux-text-base: 1rem;
+  --jux-text-lg: 1.125rem;
+  --jux-text-xl: 1.25rem;
+  --jux-text-2xl: 1.5rem;
+  --jux-text-3xl: 1.875rem;
+  --jux-text-4xl: 2.25rem;
+  --jux-text-5xl: 3rem;
   
   /* Font Weights */
   --jux-weight-thin: 100;
@@ -112,13 +112,15 @@
   --jux-size-md: 1;
   --jux-size-lg: 1.25;
   --jux-size-xl: 1.5;
-  
-  /* ═════════════════════════════════════════════════════════════════
-   * 🤖 SYSTEM CONFIGURATION - AUTO-GENERATED
-   * These are computed from your brand colors above
-   * DO NOT MODIFY - Override brand colors instead
-   * ═════════════════════════════════════════════════════════════════ */
-  
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   🤖 SYSTEM CONFIGURATION - AUTO-GENERATED
+   These are computed from your brand colors above
+   ✅ MOVED TO html SCOPE - Re-computes on [data-swag] change
+   ══════════════════════════════════════════════════════════════════ */
+
+html {
   /* Generated Brand Colors */
   --jux-brand-color: var(--jux-brand-from);
   --jux-brand-bg: var(--jux-brand-from);
@@ -364,53 +366,160 @@
 }
 
 /* ══════════════════════════════════════════════════════════════════
-   BUTTON VARIANT CLASSES (Optional)
+   BUTTON VARIANTS
    ══════════════════════════════════════════════════════════════════ */
 
-.jux-button-success {
-  --jux-accent-bg: var(--jux-success-bg);
-  --jux-accent-to: var(--jux-success-to);
+.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 {
-  --jux-accent-bg: var(--jux-danger-bg);
-  --jux-accent-to: var(--jux-danger-to);
+  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 {
-  --jux-accent-bg: var(--jux-warning-bg);
-  --jux-accent-to: var(--jux-warning-to);
+  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 {
-  --jux-accent-bg: var(--jux-info-bg);
-  --jux-accent-to: var(--jux-info-to);
+  background: var(--jux-info-bg);
 }
 
-.jux-button-secondary {
-  --jux-accent-bg: var(--jux-brand-accent-bg);
-  --jux-accent-to: var(--jux-brand-accent-to);
+.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;
-  border-color: 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-outline {
+.jux-button-link {
   background: transparent;
   color: var(--jux-brand-color);
-  border-color: var(--jux-brand-color);
+  border: none;
+  text-decoration: underline;
 }
 
-/* Size classes */
+.jux-button-link:hover:not(:disabled) {
+  background: transparent;
+  opacity: 0.8;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   BUTTON SIZES
+   ══════════════════════════════════════════════════════════════════ */
+
 .jux-button-small {
-  --jux-pad: calc(0.375rem * var(--jux-size-xs)) calc(0.75rem * var(--jux-size-xs));
-  font-size: calc(var(--jux-base-font) * var(--jux-size-xs));
+  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 {
-  --jux-pad: calc(0.5rem * var(--jux-size-lg)) calc(1rem * var(--jux-size-lg));
-  font-size: calc(var(--jux-base-font) * var(--jux-size-lg));
+  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/package.json

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