juxscript 1.1.14 → 1.1.15

package/index.d.ts

@@ -15,7 +15,6 @@ import { dropdown } from './lib/components/dropdown.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
-import { guard } from './lib/components/guard.js';
 import { heading } from './lib/components/heading.js';
 import { getOrCreateContainer } from './lib/components/helpers.js';
 import { hero } from './lib/components/hero.js';
@@ -60,7 +59,6 @@ export declare const jux: {
     element: typeof element;
     fileupload: typeof fileupload;
     grid: typeof grid;
-    guard: typeof guard;
     heading: typeof heading;
     hero: typeof hero;
     icon: typeof icon;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEpE,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDf,CAAC"}

package/index.js

@@ -15,7 +15,6 @@ import { dropdown } from './lib/components/dropdown.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
-import { guard } from './lib/components/guard.js';
 import { heading } from './lib/components/heading.js';
 import { getOrCreateContainer } from './lib/components/helpers.js';
 import { hero } from './lib/components/hero.js';
@@ -62,7 +61,6 @@ export const jux = {
     element,
     fileupload,
     grid,
-    guard,
     heading,
     hero,
     icon,

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAChD,OAAO,CAAC,MAAM,CAA4B;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAYlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK3D,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA6GlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAChD,OAAO,CAAC,MAAM,CAA4B;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAYlD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI;IAK3D,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAoBtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA6GlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/alert.js

@@ -53,7 +53,20 @@ export class Alert extends BaseComponent {
      * Reactive update hook
      */
     update(prop, value) {
-        // No reactive updates needed - Alert is rendered once
+        const el = document.getElementById(this._id);
+        if (!el)
+            return;
+        if (prop === 'content') {
+            const contentEl = el.querySelector('.jux-alert-content');
+            if (contentEl)
+                contentEl.textContent = value;
+        }
+        else if (prop === 'type') {
+            // Update alert type class
+            el.className = `jux-alert jux-alert-${value}`;
+            if (this.state.class)
+                el.className += ` ${this.state.class}`;
+        }
     }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER

package/lib/components/alert.ts

@@ -84,7 +84,19 @@ export class Alert extends BaseComponent<AlertState> {
      * Reactive update hook
      */
     update(prop: string, value: any): void {
-        // No reactive updates needed - Alert is rendered once
+
+
+        const el = document.getElementById(this._id);
+        if (!el) return;
+
+        if (prop === 'content') {
+            const contentEl = el.querySelector('.jux-alert-content');
+            if (contentEl) contentEl.textContent = value;
+        } else if (prop === 'type') {
+            // Update alert type class
+            el.className = `jux-alert jux-alert-${value}`;
+            if (this.state.class) el.className += ` ${this.state.class}`;
+        }
     }
 
     /* ═════════════════════════════════════════════════════════════════

package/lib/components/badge.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface BadgeOptions {
     label?: string;
     variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
@@ -6,12 +6,10 @@ export interface BadgeOptions {
     style?: string;
     class?: string;
 }
-type BadgeState = {
+type BadgeState = BaseState & {
     label: string;
     variant: string;
     pill: boolean;
-    style: string;
-    class: string;
 };
 export declare class Badge extends BaseComponent<BadgeState> {
     constructor(id: string, options?: BadgeOptions);

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAUlD,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;IAUtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI;IAK1E,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA8BlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,UAAU,GAAG,SAAS,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAUlD,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;IAwBtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI;IAK1E,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA8BlC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/badge.js

@@ -19,7 +19,24 @@ export class Badge extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     update(prop, value) {
-        // No reactive updates needed
+        const el = document.getElementById(this._id);
+        if (!el)
+            return;
+        // ✅ Component-specific updates
+        if (prop === 'label') {
+            el.textContent = value;
+        }
+        else if (prop === 'variant') {
+            const baseClass = 'jux-badge';
+            el.className = `${baseClass} ${baseClass}-${value}`;
+            if (this.state.pill)
+                el.classList.add('jux-badge-pill');
+            if (this.state.class)
+                el.className += ` ${this.state.class}`;
+        }
+        else if (prop === 'pill') {
+            el.classList.toggle('jux-badge-pill', value);
+        }
     }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API

package/lib/components/badge.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -12,12 +12,10 @@ export interface BadgeOptions {
     class?: string;
 }
 
-type BadgeState = {
+type BadgeState = BaseState & {
     label: string;
     variant: string;
     pill: boolean;
-    style: string;
-    class: string;
 };
 
 export class Badge extends BaseComponent<BadgeState> {
@@ -40,7 +38,21 @@ export class Badge extends BaseComponent<BadgeState> {
     }
 
     update(prop: string, value: any): void {
-        // No reactive updates needed
+
+        const el = document.getElementById(this._id);
+        if (!el) return;
+
+        // ✅ Component-specific updates
+        if (prop === 'label') {
+            el.textContent = value;
+        } else if (prop === 'variant') {
+            const baseClass = 'jux-badge';
+            el.className = `${baseClass} ${baseClass}-${value}`;
+            if (this.state.pill) el.classList.add('jux-badge-pill');
+            if (this.state.class) el.className += ` ${this.state.class}`;
+        } else if (prop === 'pill') {
+            el.classList.toggle('jux-badge-pill', value);
+        }
     }
 
     /* ═════════════════════════════════════════════════════════════════

package/lib/components/base/BaseComponent.d.ts

@@ -1,4 +1,16 @@
 import { State } from '../../reactivity/state.js';
+/**
+ * Base state interface that ALL component states must extend
+ * Contains properties managed by BaseComponent
+ */
+export interface BaseState {
+    visible?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    class?: string;
+    style?: string;
+    attributes?: Record<string, string>;
+}
 /**
  * Abstract base class for all JUX components
  * Provides common storage, event routing, and lifecycle methods
@@ -8,7 +20,7 @@ import { State } from '../../reactivity/state.js';
  * - CALLBACK_EVENTS constant (readonly string[])
  * - render() implementation
  */
-export declare abstract class BaseComponent<TState extends Record<string, any>> {
+export declare abstract class BaseComponent<TState extends BaseState = BaseState> {
     state: TState;
     container: HTMLElement | null;
     _id: string;

package/lib/components/base/BaseComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}

package/lib/components/base/BaseComponent.js

@@ -18,8 +18,18 @@ export class BaseComponent {
         this._callbackHandlers = new Map();
         this._id = id;
         this.id = id;
+        // ✨ Ensure base properties exist with defaults
+        const stateWithDefaults = {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: '',
+            style: '',
+            attributes: {},
+            ...initialState
+        };
         // ✨ REACTIVE PROXY: Intercept state changes to trigger view updates automatically
-        this.state = new Proxy(initialState, {
+        this.state = new Proxy(stateWithDefaults, {
             set: (target, prop, value) => {
                 const key = prop;
                 if (target[key] !== value) {
@@ -37,14 +47,14 @@ export class BaseComponent {
      * Set component style
      */
     style(value) {
-        this.state.style = value;
+        this.state.style = value; // ✅ Triggers update()
         return this;
     }
     /**
      * Set component class
      */
     class(value) {
-        this.state.class = value;
+        this.state.class = value; // ✅ Triggers update()
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════
@@ -55,13 +65,9 @@ export class BaseComponent {
      */
     addClass(value) {
         const current = this.state.class || '';
-        const classes = current.split(' ').filter((c) => c);
-        if (!classes.includes(value)) {
-            classes.push(value);
-            this.state.class = classes.join(' ');
-            if (this.container)
-                this.container.classList.add(value);
-        }
+        const classes = current.split(' ').filter((c) => c && c !== value);
+        classes.push(value);
+        this.state.class = classes.join(' '); // ✅ Triggers update()
         return this;
     }
     /**
@@ -70,9 +76,7 @@ export class BaseComponent {
     removeClass(value) {
         const current = this.state.class || '';
         const classes = current.split(' ').filter((c) => c && c !== value);
-        this.state.class = classes.join(' ');
-        if (this.container)
-            this.container.classList.remove(value);
+        this.state.class = classes.join(' '); // ✅ Triggers update()
         return this;
     }
     /**
@@ -90,14 +94,7 @@ export class BaseComponent {
      * Set component visibility
      */
     visible(value) {
-        this.state.visible = value;
-        if (this.container) {
-            // Find the actual component wrapper, not the parent container
-            const wrapper = this.container.querySelector(`#${this._id}`);
-            if (wrapper) {
-                wrapper.style.display = value ? '' : 'none';
-            }
-        }
+        this.state.visible = value; // ✅ Triggers update()
         return this;
     }
     /**
@@ -158,14 +155,7 @@ export class BaseComponent {
      * Set disabled state for interactive elements
      */
     disabled(value) {
-        this.state.disabled = value;
-        if (this.container) {
-            const inputs = this.container.querySelectorAll('input, button, select, textarea');
-            inputs.forEach(el => {
-                el.disabled = value;
-            });
-            this.container.setAttribute('aria-disabled', String(value));
-        }
+        this.state.disabled = value; // ✅ Triggers update()
         return this;
     }
     /**
@@ -187,17 +177,7 @@ export class BaseComponent {
      * Set loading state
      */
     loading(value) {
-        this.state.loading = value;
-        if (this.container) {
-            if (value) {
-                this.container.classList.add('jux-loading');
-                this.container.setAttribute('aria-busy', 'true');
-            }
-            else {
-                this.container.classList.remove('jux-loading');
-                this.container.removeAttribute('aria-busy');
-            }
-        }
+        this.state.loading = value; // ✅ Triggers update()
         return this;
     }
     /* ═════════════════════════════════════════════════════════════════

package/lib/components/base/BaseComponent.ts

@@ -1,6 +1,19 @@
 import { State } from '../../reactivity/state.js';
 import { getOrCreateContainer } from '../helpers.js';
 
+/**
+ * Base state interface that ALL component states must extend
+ * Contains properties managed by BaseComponent
+ */
+export interface BaseState {
+    visible?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    class?: string;
+    style?: string;
+    attributes?: Record<string, string>;
+}
+
 /**
  * Abstract base class for all JUX components
  * Provides common storage, event routing, and lifecycle methods
@@ -10,7 +23,7 @@ import { getOrCreateContainer } from '../helpers.js';
  * - CALLBACK_EVENTS constant (readonly string[])
  * - render() implementation
  */
-export abstract class BaseComponent<TState extends Record<string, any>> {
+export abstract class BaseComponent<TState extends BaseState = BaseState> {
     // Common properties (all components have these)
     state: TState;
     container: HTMLElement | null = null;
@@ -32,8 +45,19 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
         this._id = id;
         this.id = id;
 
+        // ✨ Ensure base properties exist with defaults
+        const stateWithDefaults: TState = {
+            visible: true,
+            disabled: false,
+            loading: false,
+            class: '',
+            style: '',
+            attributes: {},
+            ...initialState
+        };
+
         // ✨ REACTIVE PROXY: Intercept state changes to trigger view updates automatically
-        this.state = new Proxy(initialState, {
+        this.state = new Proxy(stateWithDefaults, {
             set: (target, prop, value) => {
                 const key = prop as keyof TState;
                 if (target[key] !== value) {
@@ -85,7 +109,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Set component style
      */
     style(value: string): this {
-        (this.state as any).style = value;
+        this.state.style = value; // ✅ Triggers update()
         return this;
     }
 
@@ -93,7 +117,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Set component class
      */
     class(value: string): this {
-        (this.state as any).class = value;
+        this.state.class = value; // ✅ Triggers update()
         return this;
     }
 
@@ -105,13 +129,10 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Add a CSS class to the component
      */
     addClass(value: string): this {
-        const current = (this.state as any).class || '';
-        const classes = current.split(' ').filter((c: string) => c);
-        if (!classes.includes(value)) {
-            classes.push(value);
-            (this.state as any).class = classes.join(' ');
-            if (this.container) this.container.classList.add(value);
-        }
+        const current = this.state.class || '';
+        const classes = current.split(' ').filter((c: string) => c && c !== value);
+        classes.push(value);
+        this.state.class = classes.join(' '); // ✅ Triggers update()
         return this;
     }
 
@@ -119,10 +140,9 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Remove a CSS class from the component
      */
     removeClass(value: string): this {
-        const current = (this.state as any).class || '';
+        const current = this.state.class || '';
         const classes = current.split(' ').filter((c: string) => c && c !== value);
-        (this.state as any).class = classes.join(' ');
-        if (this.container) this.container.classList.remove(value);
+        this.state.class = classes.join(' '); // ✅ Triggers update()
         return this;
     }
 
@@ -130,7 +150,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Toggle a CSS class on the component
      */
     toggleClass(value: string): this {
-        const current = (this.state as any).class || '';
+        const current = this.state.class || '';
         const hasClass = current.split(' ').includes(value);
         return hasClass ? this.removeClass(value) : this.addClass(value);
     }
@@ -143,14 +163,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Set component visibility
      */
     visible(value: boolean): this {
-        (this.state as any).visible = value;
-        if (this.container) {
-            // Find the actual component wrapper, not the parent container
-            const wrapper = this.container.querySelector(`#${this._id}`) as HTMLElement;
-            if (wrapper) {
-                wrapper.style.display = value ? '' : 'none';
-            }
-        }
+        this.state.visible = value; // ✅ Triggers update()
         return this;
     }
 
@@ -218,14 +231,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Set disabled state for interactive elements
      */
     disabled(value: boolean): this {
-        (this.state as any).disabled = value;
-        if (this.container) {
-            const inputs = this.container.querySelectorAll('input, button, select, textarea');
-            inputs.forEach(el => {
-                (el as HTMLInputElement).disabled = value;
-            });
-            this.container.setAttribute('aria-disabled', String(value));
-        }
+        this.state.disabled = value; // ✅ Triggers update()
         return this;
     }
 
@@ -251,16 +257,7 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
      * Set loading state
      */
     loading(value: boolean): this {
-        (this.state as any).loading = value;
-        if (this.container) {
-            if (value) {
-                this.container.classList.add('jux-loading');
-                this.container.setAttribute('aria-busy', 'true');
-            } else {
-                this.container.classList.remove('jux-loading');
-                this.container.removeAttribute('aria-busy');
-            }
-        }
+        this.state.loading = value; // ✅ Triggers update()
         return this;
     }
 

package/lib/components/hero.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface HeroOptions {
     title?: string;
     subtitle?: string;
@@ -16,7 +16,7 @@ export interface HeroOptions {
     style?: string;
     class?: string;
 }
-type HeroState = {
+type HeroState = BaseState & {
     title: string;
     subtitle: string;
     content: string;
@@ -30,8 +30,6 @@ type HeroState = {
     backgroundOverlay: boolean;
     variant: string;
     centered: boolean;
-    style: string;
-    class: string;
 };
 export declare class Hero extends BaseComponent<HeroState> {
     constructor(id: string, options?: HeroOptions);

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA+CtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAuEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IA+CtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAuEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/hero.js

@@ -37,7 +37,7 @@ export class Hero extends BaseComponent {
     update(prop, value) {
         const hero = document.getElementById(this._id);
         if (!hero)
-            return; // Component not mounted/rendered yet
+            return;
         switch (prop) {
             case 'title':
                 const titleEl = document.getElementById(`${this._id}-title`);

package/lib/components/hero.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 
 // Event definitions - Hero is display-only, but CTA button can trigger actions
 const TRIGGER_EVENTS = [] as const;
@@ -18,7 +18,7 @@ export interface HeroOptions {
   class?: string;
 }
 
-type HeroState = {
+type HeroState = BaseState & {
   title: string;
   subtitle: string;
   content: string;
@@ -28,8 +28,6 @@ type HeroState = {
   backgroundOverlay: boolean;
   variant: string;
   centered: boolean;
-  style: string;
-  class: string;
 };
 
 export class Hero extends BaseComponent<HeroState> {
@@ -71,7 +69,7 @@ export class Hero extends BaseComponent<HeroState> {
    */
   update(prop: string, value: any): void {
     const hero = document.getElementById(this._id);
-    if (!hero) return; // Component not mounted/rendered yet
+    if (!hero) return;
 
     switch (prop) {
       case 'title':

package/lib/components/sidebar.d.ts

@@ -1,5 +1,13 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { MenuOptions } from './menu.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface SidebarItem {
+    label: string;
+    href?: string;
+    click?: () => void;
+    icon?: string;
+    items?: SidebarItem[];
+    active?: boolean;
+    itemClass?: string;
+}
 export interface SidebarOptions {
     position?: 'left' | 'right';
     width?: string;
@@ -7,42 +15,44 @@ export interface SidebarOptions {
     showToggle?: boolean;
     expandOnHover?: boolean;
     collapsed?: boolean;
-    menu?: MenuOptions;
+    items?: SidebarItem[];
+    header?: string;
+    footer?: string;
     style?: string;
     class?: string;
 }
-type SidebarState = {
+type SidebarState = BaseState & {
     position: 'left' | 'right';
     width: string;
     collapsible: boolean;
     showToggle: boolean;
     expandOnHover: boolean;
     collapsed: boolean;
-    menu: MenuOptions | null;
-    style: string;
-    class: string;
+    items: SidebarItem[];
+    header: string;
+    footer: string;
 };
 export declare class Sidebar extends BaseComponent<SidebarState> {
     private _sidebar;
-    private _menu;
     constructor(id: string, options?: SidebarOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    private _setActiveStates;
+    private _renderItem;
+    update(prop: string, value: any): void;
     width(value: string): this;
     position(value: 'left' | 'right'): this;
     collapsible(value: boolean): this;
     showToggle(value: boolean): this;
     expandOnHover(value: boolean): this;
     collapsed(value: boolean): this;
-    menu(value: MenuOptions): this;
+    items(value: SidebarItem[]): this;
+    addItem(item: SidebarItem): this;
+    header(value: string): this;
+    footer(value: string): this;
     toggle(): void;
-    /**
-     * Refresh menu active states (called automatically on URL changes)
-     */
-    refreshMenu(): this;
-    private _updateCollapsedState;
+    refreshActiveStates(): this;
     render(targetId?: string): this;
-    update(prop: string, value: any): void;
 }
 export declare function sidebar(id: string, options?: SidebarOptions): Sidebar;
 export {};