juxscript 1.0.55 → 1.0.57

package/lib/components/dropdown.ts

@@ -176,109 +176,9 @@ export class Dropdown extends BaseComponent<DropdownState> {
 
         container.appendChild(wrapper);
         this._dropdown = wrapper;
-        this._injectDropdownStyles();
 
         return this;
     }
-
-    private _injectDropdownStyles(): void {
-        const styleId = 'jux-dropdown-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-dropdown {
-        position: relative;
-        display: inline-block;
-      }
-
-      .jux-dropdown-trigger {
-        padding: 8px 16px;
-        background: #3b82f6;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      .jux-dropdown-trigger:hover {
-        background: #2563eb;
-      }
-
-      .jux-dropdown-menu {
-        position: absolute;
-        background: white;
-        border: 1px solid #e5e7eb;
-        border-radius: 6px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        min-width: 200px;
-        z-index: 1000;
-        margin-top: 4px;
-      }
-
-      .jux-dropdown-bottom-left {
-        left: 0;
-        top: 100%;
-      }
-
-      .jux-dropdown-bottom-right {
-        right: 0;
-        top: 100%;
-      }
-
-      .jux-dropdown-top-left {
-        left: 0;
-        bottom: 100%;
-        margin-bottom: 4px;
-      }
-
-      .jux-dropdown-top-right {
-        right: 0;
-        bottom: 100%;
-        margin-bottom: 4px;
-      }
-
-      .jux-dropdown-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        width: 100%;
-        padding: 10px 16px;
-        border: none;
-        background: none;
-        text-align: left;
-        cursor: pointer;
-        transition: background 0.2s;
-        font-size: 14px;
-      }
-
-      .jux-dropdown-item:hover {
-        background: #f3f4f6;
-      }
-
-      .jux-dropdown-item:first-child {
-        border-radius: 6px 6px 0 0;
-      }
-
-      .jux-dropdown-item:last-child {
-        border-radius: 0 0 6px 6px;
-      }
-
-      .jux-dropdown-divider {
-        height: 1px;
-        background: #e5e7eb;
-        margin: 4px 0;
-      }
-
-      .jux-dropdown-icon {
-        font-size: 16px;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function dropdown(id: string, options: DropdownOptions = {}): Dropdown {

package/lib/components/element.ts

@@ -212,68 +212,8 @@ export class Element extends BaseComponent<ElementState> {
         container.appendChild(element);
         this._element = element;
 
-        // Inject base semantic styles if this is a semantic element
-        this._injectSemanticStyles();
-
         return this;
     }
-
-    private _injectSemanticStyles(): void {
-        const styleId = 'jux-semantic-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-            /* Jux Semantic Element Base Styles */
-            .jux-header {
-                display: block;
-                width: 100%;
-                background: var(--jux-header-bg, #ffffff);
-                border-bottom: 1px solid var(--jux-border-color, #e5e7eb);
-                padding: var(--jux-header-padding, 1rem 2rem);
-                position: sticky;
-                top: 0;
-                z-index: 1000;
-            }
-
-            .jux-footer {
-                display: block;
-                width: 100%;
-                background: var(--jux-footer-bg, #f9fafb);
-                border-top: 1px solid var(--jux-border-color, #e5e7eb);
-                padding: var(--jux-footer-padding, 2rem);
-                margin-top: auto;
-            }
-
-            .jux-main {
-                display: block;
-                flex: 1;
-                width: 100%;
-                padding: var(--jux-main-padding, 2rem);
-                min-height: calc(100vh - 200px);
-            }
-
-            .jux-aside {
-                display: block;
-                background: var(--jux-aside-bg, #f9fafb);
-                border-right: 1px solid var(--jux-border-color, #e5e7eb);
-                padding: var(--jux-aside-padding, 1.5rem);
-            }
-
-            .jux-section {
-                display: block;
-                margin-bottom: var(--jux-section-margin, 2rem);
-            }
-
-            .jux-article {
-                display: block;
-                max-width: var(--jux-article-max-width, 65ch);
-                margin: 0 auto;
-            }
-        `;
-        document.head.appendChild(style);
-    }
 }
 
 export function element(id: string, options: ElementOptions = {}): Element {

package/lib/components/fileupload.ts

@@ -276,15 +276,6 @@ export class FileUpload extends FormInput<FileUploadState> {
         }
 
         container.appendChild(wrapper);
-        this._injectFileUploadStyles();
-        this._injectFormStyles();
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
         return this;
     }
 
@@ -311,64 +302,6 @@ export class FileUpload extends FormInput<FileUploadState> {
         if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
         return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
     }
-
-    private _injectFileUploadStyles(): void {
-        const styleId = 'jux-fileupload-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-fileupload-input {
-        display: none;
-      }
-
-      .jux-fileupload-button-container {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .jux-fileupload-icon svg {
-        width: 18px;
-        height: 18px;
-      }
-
-      .jux-fileupload-button {
-        padding: 8px 16px;
-        background: #3b82f6;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      .jux-fileupload-button:hover:not(:disabled) {
-        background: #2563eb;
-      }
-
-      .jux-fileupload-button:disabled {
-        background: #9ca3af;
-        cursor: not-allowed;
-      }
-
-      .jux-fileupload-list {
-        margin-top: 12px;
-        font-size: 14px;
-        color: #6b7280;
-      }
-
-      .jux-fileupload-item {
-        padding: 8px;
-        background: #f3f4f6;
-        border-radius: 4px;
-        margin-bottom: 4px;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function fileupload(id: string, options: FileUploadOptions = {}): FileUpload {

package/lib/components/hero.ts

@@ -7,10 +7,13 @@ const CALLBACK_EVENTS = ['ctaClick'] as const;  // ✅ When CTA button is clicke
 export interface HeroOptions {
   title?: string;
   subtitle?: string;
-  cta?: string;
+  content?: string;          // ✅ ADD: Generates jux-hero-body div
+  cta?: string;              // ✅ KEEP: Generates jux-hero-cta anchor
   ctaLink?: string;
   backgroundImage?: string;
+  backgroundOverlay?: boolean; // ✅ ADD: Generates jux-hero-overlay div
   variant?: 'default' | 'centered' | 'split';
+  centered?: boolean;        // ✅ ADD: Affects container class
   style?: string;
   class?: string;
 }
@@ -18,13 +21,13 @@ export interface HeroOptions {
 type HeroState = {
   title: string;
   subtitle: string;
+  content: string;           // ✅ ADD: For jux-hero-body
   cta: string;
   ctaLink: string;
   backgroundImage: string;
+  backgroundOverlay: boolean; // ✅ ADD: For overlay div
   variant: string;
-  content: string;
-  backgroundOverlay: boolean;
-  centered: boolean;
+  centered: boolean;         // ✅ ADD: For layout variant
   style: string;
   class: string;
 };
@@ -34,13 +37,13 @@ export class Hero extends BaseComponent<HeroState> {
     super(id, {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
+      content: options.content ?? '',           // ✅ ADD
       cta: options.cta ?? '',
       ctaLink: options.ctaLink ?? '#',
       backgroundImage: options.backgroundImage ?? '',
+      backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
       variant: options.variant ?? 'default',
-      content: '',
-      backgroundOverlay: false,
-      centered: false,
+      centered: options.centered ?? false,     // ✅ ADD
       style: options.style ?? '',
       class: options.class ?? ''
     });
@@ -58,8 +61,6 @@ export class Hero extends BaseComponent<HeroState> {
    * FLUENT API
    * ═════════════════════════════════════════════════════════════════ */
 
-  // ✅ Inherited from BaseComponent
-
   title(value: string): this {
     this.state.title = value;
     return this;
@@ -70,6 +71,11 @@ export class Hero extends BaseComponent<HeroState> {
     return this;
   }
 
+  content(value: string): this {     // ✅ ADD: Fluent method for content
+    this.state.content = value;
+    return this;
+  }
+
   cta(value: string): this {
     this.state.cta = value;
     return this;
@@ -85,11 +91,21 @@ export class Hero extends BaseComponent<HeroState> {
     return this;
   }
 
+  backgroundOverlay(value: boolean): this { // ✅ ADD: Fluent method for overlay
+    this.state.backgroundOverlay = value;
+    return this;
+  }
+
   variant(value: string): this {
     this.state.variant = value;
     return this;
   }
 
+  centered(value: boolean): this {   // ✅ ADD: Fluent method for centered
+    this.state.centered = value;
+    return this;
+  }
+
   /* ═════════════════════════════════════════════════════════════════
    * RENDER
    * ═════════════════════════════════════════════════════════════════ */

package/lib/components/input.ts

@@ -341,7 +341,7 @@ export class Input extends FormInput<InputState> {
     }
 
     container.appendChild(wrapper);
-    this._injectFormStyles();
+    
 
     requestAnimationFrame(() => {
       if ((window as any).lucide) {

package/lib/components/list.ts

@@ -409,139 +409,9 @@ export class List extends BaseComponent<ListState> {
     });
 
     container.appendChild(wrapper);
-    this._injectListStyles();
-
-    requestAnimationFrame(() => {
-      if ((window as any).lucide) {
-        (window as any).lucide.createIcons();
-      }
-    });
 
     return this;
   }
-
-  private _injectListStyles(): void {
-    const styleId = 'jux-list-styles';
-    if (document.getElementById(styleId)) return;
-
-    const style = document.createElement('style');
-    style.id = styleId;
-    style.textContent = `
-      .jux-list-wrapper {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      }
-
-      .jux-list-header {
-        font-size: 18px;
-        font-weight: 600;
-        margin-bottom: 12px;
-        color: #1f2937;
-      }
-
-      .jux-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-      }
-
-      .jux-list-ordered {
-        list-style: decimal;
-        padding-left: 20px;
-      }
-
-      .jux-list-item {
-        position: relative;
-        padding: 12px 16px;
-        transition: all 0.2s;
-        cursor: default;
-      }
-
-      .jux-list-item-hoverable:not(.jux-list-item-disabled) {
-        cursor: pointer;
-      }
-
-      .jux-list-item-hoverable:not(.jux-list-item-disabled):hover {
-        background: #f3f4f6;
-      }
-
-      .jux-list-item-content {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-
-      .jux-list-item-icon {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-      }
-
-      .jux-list-item-icon svg {
-        width: 20px;
-        height: 20px;
-      }
-
-      .jux-list-item-text {
-        flex: 1;
-      }
-
-      .jux-list-item-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #1f2937;
-        margin-bottom: 2px;
-      }
-
-      .jux-list-item-body {
-        font-size: 13px;
-        color: #6b7280;
-        line-height: 1.4;
-      }
-
-      .jux-list-item-metadata {
-        flex-shrink: 0;
-        font-size: 12px;
-        color: #9ca3af;
-      }
-
-      .jux-list-item-selected {
-        background: #dbeafe !important;
-        border-left: 3px solid #3b82f6;
-      }
-
-      .jux-list-item-striped {
-        background: #f9fafb;
-      }
-
-      .jux-list-item-bordered {
-        border: 1px solid #e5e7eb;
-        border-radius: 6px;
-        margin-bottom: 4px;
-      }
-
-      .jux-list-item-disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .jux-list-item-success {
-        border-left: 3px solid #10b981;
-      }
-
-      .jux-list-item-warning {
-        border-left: 3px solid #f59e0b;
-      }
-
-      .jux-list-item-error {
-        border-left: 3px solid #ef4444;
-      }
-
-      .jux-list-item-info {
-        border-left: 3px solid #3b82f6;
-      }
-    `;
-    document.head.appendChild(style);
-  }
 }
 
 export function list(id: string, options: ListOptions = {}): List {

package/lib/components/loading.ts

@@ -90,103 +90,9 @@ export class Loading extends BaseComponent<LoadingState> {
         this._wireStandardEvents(loading);
 
         container.appendChild(loading);
-        this._injectLoadingStyles();
 
         return this;
     }
-
-    private _injectLoadingStyles(): void {
-        const styleId = 'jux-loading-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-loading {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-      }
-
-      .jux-loading-sm { width: 20px; height: 20px; }
-      .jux-loading-md { width: 40px; height: 40px; }
-      .jux-loading-lg { width: 60px; height: 60px; }
-
-      /* Spinner */
-      .jux-loading-spinner {
-        width: 30px;
-        height: 30px;
-        border: 2px solid #e5e7eb;
-        border-top-color: #3b82f6;
-        border-radius: 50%;
-        animation: jux-spin 0.8s linear infinite;
-      }
-
-      .jux-loading-sm .jux-loading-spinner {
-        border-width: 2px;
-      }
-
-      .jux-loading-md .jux-loading-spinner {
-        border-width: 3px;
-      }
-
-      .jux-loading-lg .jux-loading-spinner {
-        border-width: 4px;
-      }
-
-      @keyframes jux-spin {
-        to { transform: rotate(360deg); }
-      }
-
-      /* Dots */
-      .jux-loading-dot {
-        width: 8px;
-        height: 8px;
-        background: #3b82f6;
-        border-radius: 50%;
-        animation: jux-bounce 1.4s infinite ease-in-out both;
-      }
-
-      .jux-loading-sm .jux-loading-dot {
-        width: 5px;
-        height: 5px;
-      }
-
-      .jux-loading-md .jux-loading-dot {
-        width: 8px;
-        height: 8px;
-      }
-
-      .jux-loading-lg .jux-loading-dot {
-        width: 12px;
-        height: 12px;
-      }
-
-      .jux-loading-dot:nth-child(1) { animation-delay: -0.32s; }
-      .jux-loading-dot:nth-child(2) { animation-delay: -0.16s; }
-
-      @keyframes jux-bounce {
-        0%, 80%, 100% { transform: scale(0); }
-        40% { transform: scale(1); }
-      }
-
-      /* Pulse */
-      .jux-loading-pulse {
-        width: 100%;
-        height: 100%;
-        background: #3b82f6;
-        border-radius: 50%;
-        animation: jux-pulse 1.5s ease-in-out infinite;
-      }
-
-      @keyframes jux-pulse {
-        0%, 100% { opacity: 1; transform: scale(0.8); }
-        50% { opacity: 0.5; transform: scale(1.2); }
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function loading(id: string, options: LoadingOptions = {}): Loading {

package/lib/components/progress.ts

@@ -129,64 +129,9 @@ export class Progress extends BaseComponent<ProgressState> {
         });
 
         container.appendChild(wrapper);
-        this._injectProgressStyles();
 
         return this;
     }
-
-    private _injectProgressStyles(): void {
-        const styleId = 'jux-progress-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-progress {
-        width: 100%;
-        margin-bottom: 1rem;
-      }
-
-      .jux-progress-track {
-        width: 100%;
-        height: 1.5rem;
-        background-color: #e5e7eb;
-        border-radius: 0.5rem;
-        overflow: hidden;
-      }
-
-      .jux-progress-bar {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-size: 0.75rem;
-        font-weight: 600;
-        transition: width 0.3s ease;
-      }
-
-      .jux-progress-bar-default {
-        background-color: #3b82f6;
-      }
-
-      .jux-progress-bar-success {
-        background-color: #10b981;
-      }
-
-      .jux-progress-bar-warning {
-        background-color: #f59e0b;
-      }
-
-      .jux-progress-bar-error {
-        background-color: #ef4444;
-      }
-
-      .jux-progress-label {
-        padding: 0 0.5rem;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function progress(id: string, options: ProgressOptions = {}): Progress {