juxscript 1.1.143 → 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;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

@@ -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/package.json

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