juxscript 1.1.13 → 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

@@ -25,6 +25,10 @@ export declare class Alert extends BaseComponent<AlertState> {
     type(value: 'info' | 'success' | 'warning' | 'error'): this;
     dismissible(value: boolean): this;
     icon(value: string): this;
+    /**
+     * Reactive update hook
+     */
+    update(prop: string, value: any): void;
     render(targetId?: string): this;
 }
 export declare function alert(id: string, options?: AlertOptions): Alert;

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;IASzB,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

@@ -49,6 +49,25 @@ export class Alert extends BaseComponent {
         this.state.icon = value;
         return this;
     }
+    /**
+     * Reactive update hook
+     */
+    update(prop, value) {
+        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

@@ -80,6 +80,25 @@ export class Alert extends BaseComponent<AlertState> {
         return this;
     }
 
+    /**
+     * Reactive update hook
+     */
+    update(prop: string, value: any): void {
+
+
+        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/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,17 +6,16 @@ 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);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    update(prop: string, value: any): void;
     label(value: string): this;
     variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this;
     pill(value: boolean): this;

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;IAUhD,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

@@ -18,6 +18,26 @@ export class Badge extends BaseComponent {
     getCallbackEvents() {
         return CALLBACK_EVENTS;
     }
+    update(prop, value) {
+        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> {
@@ -39,6 +37,24 @@ export class Badge extends BaseComponent<BadgeState> {
         return CALLBACK_EVENTS;
     }
 
+    update(prop: string, value: any): void {
+
+        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/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;
@@ -30,11 +42,28 @@ export declare abstract class BaseComponent<TState extends Record<string, any>>
     protected abstract getCallbackEvents(): readonly string[];
     abstract render(targetId?: string): this;
     /**
-     * REACTIVE UPDATE HOOK
-     * Called automatically when this.state[prop] changes.
-     * Override this in components to update the DOM without full re-render.
-     */
-    protected update(prop: string, value: any): void;
+     * REACTIVE UPDATE HOOK (REQUIRED - PUBLIC)
+     * Called automatically when this.state[prop] changes via the Proxy.
+     * Every component MUST implement this to handle state changes.
+     *
+     * This is PUBLIC because:
+     * - Components may need to call it manually
+     * - Allows external updates without full re-render
+     * - Part of the component's public API
+     *
+     * @param prop - The state property that changed
+     * @param value - The new value
+     *
+     * @example
+     * update(prop: string, value: any): void {
+     *   const el = document.getElementById(this._id);
+     *   if (!el) return;
+     *
+     *   if (prop === 'label') el.textContent = value;
+     *   if (prop === 'visible') el.style.display = value ? '' : 'none';
+     * }
+     */
+    abstract update(prop: string, value: any): void;
     /**
      * Set component style
      */

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":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGlD;;;GAGG;AACH,MAAM,WAAW,SAAS;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED;;;;;;;;GAQG;AACH,8BAAsB,aAAa,CAAC,MAAM,SAAS,SAAS,GAAG,SAAS;IAEpE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,WAAW,GAAG,IAAI,CAAQ;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IAGX,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAM;IACtE,SAAS,CAAC,aAAa,EAAE,KAAK,CAAC;QAC3B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;QACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAC,CAAM;IACR,SAAS,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAa;IAC9D,SAAS,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAa;gBAEnD,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;IAgC5C,SAAS,CAAC,QAAQ,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IACxD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IACzD,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAExC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAM/C;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOhC;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK7B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,gBAAgB,IAAI,IAAI;IASxB;;OAEG;IACH,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAOvC;;OAEG;IACH,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAO/C;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAW9B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B;;OAEG;IACH,MAAM,IAAI,IAAI;IAId;;OAEG;IACH,OAAO,IAAI,IAAI;IAQf;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS7B;;OAEG;IACH,KAAK,IAAI,IAAI;IAQb;;OAEG;IACH,IAAI,IAAI,IAAI;IAYZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAYd,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI;IAW5C;;;;;;OAMG;IACH,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,QAAQ,GAAG,IAAI;IAkBzG,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIjD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlD,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI;IAcnE,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW;IAwBzD,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAMzD;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IA0B/B,QAAQ,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI;IAWjC;;OAEG;IACH,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,CAE5B;CACJ"}

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) {
@@ -30,15 +40,6 @@ export class BaseComponent {
             }
         });
     }
-    /**
-     * REACTIVE UPDATE HOOK
-     * Called automatically when this.state[prop] changes.
-     * Override this in components to update the DOM without full re-render.
-     */
-    update(prop, value) {
-        // Default no-op. Children implement granular DOM updates here.
-        // Example: if (prop === 'title') document.getElementById(...).textContent = value;
-    }
     /* ═════════════════════════════════════════════════════════════════
      * COMMON FLUENT API (Inherited by all components)
      * ═════════════════════════════════════════════════════════════════ */
@@ -46,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;
     }
     /* ═════════════════════════════════════════════════════════════════
@@ -64,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;
     }
     /**
@@ -79,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;
     }
     /**
@@ -99,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;
     }
     /**
@@ -167,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;
     }
     /**
@@ -196,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) {
@@ -54,14 +78,28 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
     abstract render(targetId?: string): this;
 
     /**
-     * REACTIVE UPDATE HOOK
-     * Called automatically when this.state[prop] changes.
-     * Override this in components to update the DOM without full re-render.
+     * REACTIVE UPDATE HOOK (REQUIRED - PUBLIC)
+     * Called automatically when this.state[prop] changes via the Proxy.
+     * Every component MUST implement this to handle state changes.
+     * 
+     * This is PUBLIC because:
+     * - Components may need to call it manually
+     * - Allows external updates without full re-render
+     * - Part of the component's public API
+     * 
+     * @param prop - The state property that changed
+     * @param value - The new value
+     * 
+     * @example
+     * update(prop: string, value: any): void {
+     *   const el = document.getElementById(this._id);
+     *   if (!el) return;
+     *   
+     *   if (prop === 'label') el.textContent = value;
+     *   if (prop === 'visible') el.style.display = value ? '' : 'none';
+     * }
      */
-    protected update(prop: string, value: any): void {
-        // Default no-op. Children implement granular DOM updates here.
-        // Example: if (prop === 'title') document.getElementById(...).textContent = value;
-    }
+    abstract update(prop: string, value: any): void;
 
     /* ═════════════════════════════════════════════════════════════════
      * COMMON FLUENT API (Inherited by all components)
@@ -71,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;
     }
 
@@ -79,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;
     }
 
@@ -91,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;
     }
 
@@ -105,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;
     }
 
@@ -116,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);
     }
@@ -129,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;
     }
 
@@ -204,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;
     }
 
@@ -237,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/base/FormInput.d.ts

@@ -65,6 +65,10 @@ export declare abstract class FormInput<TState extends FormInputState> extends B
      * Build error element
      */
     protected _renderError(): HTMLElement;
+    /**
+     * Default update implementation for form inputs
+     */
+    update(prop: string, value: any): void;
     /**
      * Wire up two-way sync for value property
      */

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

@@ -1 +1 @@
-{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["FormInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,8BAAsB,SAAS,CAAC,MAAM,SAAS,cAAc,CAAE,SAAQ,aAAa,CAAC,MAAM,CAAC;IACxF,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,aAAa,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACxD,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,CAAC;IACzD,SAAS,CAAC,iBAAiB,EAAE,OAAO,CAAS;IAM7C;;OAEG;IACH,QAAQ,CAAC,QAAQ,IAAI,GAAG;IAExB;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAEnC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,WAAW;IAEpD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,GAAG,MAAM;IAM/D,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI;IAS3D;;OAEG;IACH,QAAQ,IAAI,OAAO;IAcnB;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa3C;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAiB7B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,gBAAgB;IAmB1C;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,WAAW;IAUrC;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,YAAY,EAAE,WAAW,EAAE,SAAS,GAAE,MAAgB,GAAG,IAAI;CA8CxF"}
+{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["FormInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,8BAAsB,SAAS,CAAC,MAAM,SAAS,cAAc,CAAE,SAAQ,aAAa,CAAC,MAAM,CAAC;IACxF,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,aAAa,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACxD,SAAS,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnD,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,CAAC;IACzD,SAAS,CAAC,iBAAiB,EAAE,OAAO,CAAS;IAM7C;;OAEG;IACH,QAAQ,CAAC,QAAQ,IAAI,GAAG;IAExB;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAEnC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,WAAW;IAEpD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,GAAG,MAAM;IAM/D,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI;IAS3D;;OAEG;IACH,QAAQ,IAAI,OAAO;IAcnB;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa3C;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAiB7B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,gBAAgB;IAmB1C;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,WAAW;IAUrC;;OAEG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAItC;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,YAAY,EAAE,WAAW,EAAE,SAAS,GAAE,MAAgB,GAAG,IAAI;CA8CxF"}

package/lib/components/base/FormInput.js

@@ -117,6 +117,12 @@ export class FormInput extends BaseComponent {
         this._errorElement = errorEl;
         return errorEl;
     }
+    /**
+     * Default update implementation for form inputs
+     */
+    update(prop, value) {
+        // No reactive updates needed - form inputs handle their own state
+    }
     /**
      * Wire up two-way sync for value property
      */