juxscript 1.1.142 → 1.1.143

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;CAwDnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}

package/lib/components/button.js

@@ -120,50 +120,17 @@ export class Button extends BaseComponent {
     }
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
+        const { content, icon, iconPosition, style, class: className } = this.state;
         const button = document.createElement('button');
-        // ✅ ONLY set base class (no variant/size classes)
+        // ✅ ONLY set base class - NO variant/size classes
         button.className = 'jux-button';
         button.id = this._id;
-        // ✅ Add user classes
+        // ✅ Add user classes only
         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 style (NO variant/size logic - pure cascade)
+        if (style)
+            button.setAttribute('style', style);
         if (icon && iconPosition === 'left') {
             const iconEl = document.createElement('span');
             iconEl.className = 'jux-button-icon';
@@ -196,6 +163,7 @@ export class Button extends BaseComponent {
         });
         this._wireStandardEvents(button);
         container.appendChild(button);
+        this._buttonElement = button;
         return this;
     }
 }

package/lib/components/button.ts

@@ -173,49 +173,19 @@ export class Button extends BaseComponent<ButtonState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
+    const { content, icon, iconPosition, style, class: className } = this.state;
 
     const button = document.createElement('button');
 
-    // ✅ ONLY set base class (no variant/size classes)
+    // ✅ ONLY set base class - NO variant/size classes
     button.className = 'jux-button';
     button.id = this._id;
 
-    // ✅ Add user classes
+    // ✅ Add user classes only
     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 style (NO variant/size logic - pure cascade)
+    if (style) button.setAttribute('style', style);
 
     if (icon && iconPosition === 'left') {
       const iconEl = document.createElement('span');
@@ -253,6 +223,7 @@ export class Button extends BaseComponent<ButtonState> {
 
     this._wireStandardEvents(button);
     container.appendChild(button);
+    this._buttonElement = button;
     return this;
   }
 }

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);
@@ -361,56 +363,4 @@
 .jux-button:disabled {
   opacity: var(--jux-burn-strong);
   cursor: not-allowed;
-}
-
-/* ══════════════════════════════════════════════════════════════════
-   BUTTON VARIANT CLASSES (Optional)
-   ══════════════════════════════════════════════════════════════════ */
-
-.jux-button-success {
-  --jux-accent-bg: var(--jux-success-bg);
-  --jux-accent-to: var(--jux-success-to);
-}
-
-.jux-button-danger {
-  --jux-accent-bg: var(--jux-danger-bg);
-  --jux-accent-to: var(--jux-danger-to);
-}
-
-.jux-button-warning {
-  --jux-accent-bg: var(--jux-warning-bg);
-  --jux-accent-to: var(--jux-warning-to);
-}
-
-.jux-button-info {
-  --jux-accent-bg: var(--jux-info-bg);
-  --jux-accent-to: var(--jux-info-to);
-}
-
-.jux-button-secondary {
-  --jux-accent-bg: var(--jux-brand-accent-bg);
-  --jux-accent-to: var(--jux-brand-accent-to);
-}
-
-.jux-button-ghost {
-  background: transparent;
-  border-color: transparent;
-  color: var(--jux-brand-color);
-}
-
-.jux-button-outline {
-  background: transparent;
-  color: var(--jux-brand-color);
-  border-color: var(--jux-brand-color);
-}
-
-/* Size classes */
-.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));
-}
-
-.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));
 }

package/package.json

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