juxscript 1.1.80 → 1.1.81

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T02:42:54.671Z",
+  "generatedAt": "2026-02-12T04:07:13.437Z",
   "components": [
     {
       "file": "alert.js",

package/index.d.ts

@@ -44,7 +44,7 @@ import { renderIcon, renderEmoji } from './lib/components/icons.js';
 import { state } from './lib/reactivity/state.js';
 import { registry } from './lib/components/registry.js';
 import { stateHistory } from './lib/components/history/StateHistory.js';
-import { eventChain } from './lib/components/event-chain.js';
+import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory };
 export declare const jux: {
     alert: typeof alert;
@@ -199,6 +199,6 @@ export declare const jux: {
     renderIcon: typeof renderIcon;
     renderEmoji: typeof renderEmoji;
     getOrCreateContainer: typeof getOrCreateContainer;
-    eventChain: typeof eventChain;
+    watcher: typeof watcher;
 };
 //# sourceMappingURL=index.d.ts.map

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":"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"}

package/index.js

@@ -46,7 +46,7 @@ import { renderIcon, renderEmoji } from './lib/components/icons.js';
 import { state } from './lib/reactivity/state.js';
 import { registry } from './lib/components/registry.js'; // ✅ Import registry
 import { stateHistory } from './lib/components/history/StateHistory.js'; // ✅ Import history
-import { eventChain } from './lib/components/event-chain.js';
+import { watcher } from './lib/components/watcher.js';
 export { state, registry, stateHistory }; // ✅ Export history
 // Utilities
 export const jux = {
@@ -97,5 +97,5 @@ export const jux = {
     renderIcon,
     renderEmoji,
     getOrCreateContainer,
-    eventChain
+    watcher
 };

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,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,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8BrE;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;AAOnE,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,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA8BrE;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}

package/lib/components/badge.js

@@ -1,11 +1,12 @@
 import { BaseComponent } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = [];
 export class Badge extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
-            label: options.label ?? '',
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate from ID
             variant: options.variant ?? 'default',
             pill: options.pill ?? false,
             style: options.style ?? '',

package/lib/components/badge.ts

@@ -1,4 +1,5 @@
 import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -21,7 +22,7 @@ type BadgeState = BaseState & {
 export class Badge extends BaseComponent<BadgeState> {
     constructor(id: string, options: BadgeOptions = {}) {
         super(id, {
-            label: options.label ?? '',
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate from ID
             variant: options.variant ?? 'default',
             pill: options.pill ?? false,
             style: options.style ?? '',

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

@@ -1,7 +1,6 @@
 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;
@@ -10,6 +9,10 @@ export interface BaseState {
     class?: string;
     style?: string;
     attributes?: Record<string, string>;
+    label?: string;
+    required?: boolean;
+    name?: string;
+    errorMessage?: string;
 }
 /**
  * Abstract base class for all JUX components
@@ -38,6 +41,11 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
     protected _triggerHandlers: Map<string, Function>;
     protected _callbackHandlers: Map<string, Function>;
     protected _isUpdatingSync: boolean;
+    protected _inputElement: HTMLElement | null;
+    protected _labelElement: HTMLLabelElement | null;
+    protected _errorElement: HTMLElement | null;
+    protected _onValidate?: (value: any) => boolean | string;
+    protected _hasBeenValidated: boolean;
     constructor(id: string, initialState: TState);
     protected abstract getTriggerEvents(): readonly string[];
     protected abstract getCallbackEvents(): readonly string[];
@@ -169,5 +177,51 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
      *   const myState = component.props(); // ❌ Error: props is not a function
      */
     get props(): Readonly<TState>;
+    /**
+     * Set label for form inputs
+     */
+    label(value: string): this;
+    /**
+     * Set required state for form inputs
+     */
+    required(value: boolean): this;
+    /**
+     * Set name attribute for form inputs
+     */
+    name(value: string): this;
+    /**
+     * Set custom validation handler
+     */
+    onValidate(handler: (value: any) => boolean | string): this;
+    /**
+     * Validate form input (override in form components)
+     */
+    validate(): boolean;
+    /**
+     * Check if form input is valid (override in form components)
+     */
+    isValid(): boolean;
+    /**
+     * Get current value (override in form components)
+     */
+    getValue(): any;
+    /**
+     * Set current value (override in form components)
+     */
+    setValue(value: any): this;
+    protected _showError(message: string): void;
+    protected _clearError(): void;
+    /**
+     * Build label element for form inputs
+     */
+    protected _renderLabel(): HTMLLabelElement;
+    /**
+     * Build error element for form inputs
+     */
+    protected _renderError(): HTMLElement;
+    /**
+     * Wire up two-way sync for form inputs
+     */
+    protected _wireFormSync(inputElement: HTMLElement, eventName?: string): void;
 }
 //# sourceMappingURL=BaseComponent.d.ts.map

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

@@ -1,6 +1,7 @@
 import { getOrCreateContainer } from '../helpers.js';
 import { registry } from '../registry.js';
-import { stateHistory } from '../history/StateHistory.js'; // ✅ Import history
+import { stateHistory } from '../history/StateHistory.js';
+import { formatIdAsLabel } from '../../utils/formatId.js'; // ✅ Import utility
 /**
  * Abstract base class for all JUX components
  * Provides common storage, event routing, and lifecycle methods
@@ -18,7 +19,12 @@ export class BaseComponent {
         this._syncBindings = [];
         this._triggerHandlers = new Map();
         this._callbackHandlers = new Map();
-        this._isUpdatingSync = false; // ✅ Guard flag
+        this._isUpdatingSync = false;
+        // Form-specific protected properties (only used by form components)
+        this._inputElement = null;
+        this._labelElement = null;
+        this._errorElement = null;
+        this._hasBeenValidated = false;
         this._id = id;
         this.id = id;
         const stateWithDefaults = {
@@ -467,4 +473,164 @@ export class BaseComponent {
     get props() {
         return this.state;
     }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT API (Optional - only used by form components)
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Set label for form inputs
+     */
+    label(value) {
+        this.state.label = value;
+        if (this._labelElement) {
+            const requiredSpan = this._labelElement.querySelector('.jux-input-required');
+            this._labelElement.textContent = value;
+            if (requiredSpan)
+                this._labelElement.appendChild(requiredSpan);
+        }
+        return this;
+    }
+    /**
+     * Set required state for form inputs
+     */
+    required(value) {
+        this.state.required = value;
+        return this;
+    }
+    /**
+     * Set name attribute for form inputs
+     */
+    name(value) {
+        this.state.name = value;
+        return this;
+    }
+    /**
+     * Set custom validation handler
+     */
+    onValidate(handler) {
+        this._onValidate = handler;
+        return this;
+    }
+    /**
+     * Validate form input (override in form components)
+     */
+    validate() {
+        console.warn(`${this.constructor.name}.validate() not implemented`);
+        return true;
+    }
+    /**
+     * Check if form input is valid (override in form components)
+     */
+    isValid() {
+        console.warn(`${this.constructor.name}.isValid() not implemented`);
+        return true;
+    }
+    /**
+     * Get current value (override in form components)
+     */
+    getValue() {
+        console.warn(`${this.constructor.name}.getValue() not implemented`);
+        return undefined;
+    }
+    /**
+     * Set current value (override in form components)
+     */
+    setValue(value) {
+        console.warn(`${this.constructor.name}.setValue() not implemented`);
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM VALIDATION HELPERS (Protected - for form components)
+     * ═════════════════════════════════════════════════════════════════ */
+    _showError(message) {
+        if (this._errorElement) {
+            this._errorElement.textContent = message;
+            this._errorElement.style.display = 'block';
+        }
+        if (this._inputElement) {
+            this._inputElement.classList.add('jux-input-invalid');
+        }
+        this.state.errorMessage = message;
+    }
+    _clearError() {
+        if (this._errorElement) {
+            this._errorElement.textContent = '';
+            this._errorElement.style.display = 'none';
+        }
+        if (this._inputElement) {
+            this._inputElement.classList.remove('jux-input-invalid');
+        }
+        this.state.errorMessage = undefined;
+    }
+    /**
+     * Build label element for form inputs
+     */
+    _renderLabel() {
+        const label = this.state.label || formatIdAsLabel(this._id);
+        const required = this.state.required || false;
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-input-label';
+        labelEl.htmlFor = `${this._id}-input`;
+        labelEl.textContent = label;
+        if (required) {
+            const requiredSpan = document.createElement('span');
+            requiredSpan.className = 'jux-input-required';
+            requiredSpan.textContent = ' *';
+            labelEl.appendChild(requiredSpan);
+        }
+        this._labelElement = labelEl;
+        return labelEl;
+    }
+    /**
+     * Build error element for form inputs
+     */
+    _renderError() {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'jux-input-error';
+        errorEl.id = `${this._id}-error`;
+        errorEl.style.display = 'none';
+        this._errorElement = errorEl;
+        return errorEl;
+    }
+    /**
+     * Wire up two-way sync for form inputs
+     */
+    _wireFormSync(inputElement, eventName = 'input') {
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+            const transformToState = toState || ((v) => v);
+            const transformToComponent = toComponent || ((v) => v);
+            let isUpdating = false;
+            // State → Component
+            stateObj.subscribe((val) => {
+                if (isUpdating)
+                    return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+            // Component → State
+            inputElement.addEventListener(eventName, () => {
+                if (isUpdating)
+                    return;
+                isUpdating = true;
+                const value = this.getValue();
+                const transformed = transformToState(value);
+                this._clearError();
+                stateObj.set(transformed);
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        }
+        else {
+            // Default behavior without sync
+            inputElement.addEventListener(eventName, () => {
+                this._clearError();
+            });
+        }
+        // Only validate on blur IF the field has been validated before
+        inputElement.addEventListener('blur', () => {
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
+        });
+    }
 }

package/lib/components/base/BaseComponent.ts

@@ -1,11 +1,11 @@
 import { State } from '../../reactivity/state.js';
 import { getOrCreateContainer } from '../helpers.js';
 import { registry } from '../registry.js';
-import { stateHistory } from '../history/StateHistory.js'; // ✅ Import history
+import { stateHistory } from '../history/StateHistory.js';
+import { formatIdAsLabel } from '../../utils/formatId.js';  // ✅ Import utility
 
 /**
  * Base state interface that ALL component states must extend
- * Contains properties managed by BaseComponent
  */
 export interface BaseState {
     visible?: boolean;
@@ -14,6 +14,11 @@ export interface BaseState {
     class?: string;
     style?: string;
     attributes?: Record<string, string>;
+    // ✅ Form-specific properties (optional for all components)
+    label?: string;
+    required?: boolean;
+    name?: string;
+    errorMessage?: string;
 }
 
 /**
@@ -42,7 +47,14 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
     }> = [];
     protected _triggerHandlers: Map<string, Function> = new Map();
     protected _callbackHandlers: Map<string, Function> = new Map();
-    protected _isUpdatingSync: boolean = false; // ✅ Guard flag
+    protected _isUpdatingSync: boolean = false;
+
+    // Form-specific protected properties (only used by form components)
+    protected _inputElement: HTMLElement | null = null;
+    protected _labelElement: HTMLLabelElement | null = null;
+    protected _errorElement: HTMLElement | null = null;
+    protected _onValidate?: (value: any) => boolean | string;
+    protected _hasBeenValidated: boolean = false;
 
     constructor(id: string, initialState: TState) {
         this._id = id;
@@ -563,4 +575,192 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
     get props(): Readonly<TState> {
         return this.state as Readonly<TState>;
     }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT API (Optional - only used by form components)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set label for form inputs
+     */
+    label(value: string): this {
+        (this.state as any).label = value;
+        if (this._labelElement) {
+            const requiredSpan = this._labelElement.querySelector('.jux-input-required');
+            this._labelElement.textContent = value;
+            if (requiredSpan) this._labelElement.appendChild(requiredSpan);
+        }
+        return this;
+    }
+
+    /**
+     * Set required state for form inputs
+     */
+    required(value: boolean): this {
+        (this.state as any).required = value;
+        return this;
+    }
+
+    /**
+     * Set name attribute for form inputs
+     */
+    name(value: string): this {
+        (this.state as any).name = value;
+        return this;
+    }
+
+    /**
+     * Set custom validation handler
+     */
+    onValidate(handler: (value: any) => boolean | string): this {
+        this._onValidate = handler;
+        return this;
+    }
+
+    /**
+     * Validate form input (override in form components)
+     */
+    validate(): boolean {
+        console.warn(`${this.constructor.name}.validate() not implemented`);
+        return true;
+    }
+
+    /**
+     * Check if form input is valid (override in form components)
+     */
+    isValid(): boolean {
+        console.warn(`${this.constructor.name}.isValid() not implemented`);
+        return true;
+    }
+
+    /**
+     * Get current value (override in form components)
+     */
+    getValue(): any {
+        console.warn(`${this.constructor.name}.getValue() not implemented`);
+        return undefined;
+    }
+
+    /**
+     * Set current value (override in form components)
+     */
+    setValue(value: any): this {
+        console.warn(`${this.constructor.name}.setValue() not implemented`);
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM VALIDATION HELPERS (Protected - for form components)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    protected _showError(message: string): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = message;
+            this._errorElement.style.display = 'block';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.add('jux-input-invalid');
+        }
+
+        (this.state as any).errorMessage = message;
+    }
+
+    protected _clearError(): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = '';
+            this._errorElement.style.display = 'none';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.remove('jux-input-invalid');
+        }
+
+        (this.state as any).errorMessage = undefined;
+    }
+
+    /**
+     * Build label element for form inputs
+     */
+    protected _renderLabel(): HTMLLabelElement {
+        const label = (this.state as any).label || formatIdAsLabel(this._id);
+        const required = (this.state as any).required || false;
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-input-label';
+        labelEl.htmlFor = `${this._id}-input`;
+        labelEl.textContent = label;
+
+        if (required) {
+            const requiredSpan = document.createElement('span');
+            requiredSpan.className = 'jux-input-required';
+            requiredSpan.textContent = ' *';
+            labelEl.appendChild(requiredSpan);
+        }
+
+        this._labelElement = labelEl;
+        return labelEl;
+    }
+
+    /**
+     * Build error element for form inputs
+     */
+    protected _renderError(): HTMLElement {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'jux-input-error';
+        errorEl.id = `${this._id}-error`;
+        errorEl.style.display = 'none';
+
+        this._errorElement = errorEl;
+        return errorEl;
+    }
+
+    /**
+     * Wire up two-way sync for form inputs
+     */
+    protected _wireFormSync(inputElement: HTMLElement, eventName: string = 'input'): void {
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            const transformToState = toState || ((v: any) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            inputElement.addEventListener(eventName, () => {
+                if (isUpdating) return;
+                isUpdating = true;
+
+                const value = this.getValue();
+                const transformed = transformToState(value);
+                this._clearError();
+
+                stateObj.set(transformed);
+
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputElement.addEventListener(eventName, () => {
+                this._clearError();
+            });
+        }
+
+        // Only validate on blur IF the field has been validated before
+        inputElement.addEventListener('blur', () => {
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
+        });
+    }
 }

package/lib/components/checkbox.d.ts

@@ -1,5 +1,4 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface CheckboxOptions {
     checked?: boolean;
     label?: string;
@@ -11,11 +10,11 @@ export interface CheckboxOptions {
     class?: string;
     onValidate?: (checked: boolean) => boolean | string;
 }
-interface CheckboxState extends FormInputState {
+interface CheckboxState extends BaseState {
     checked: boolean;
     value: string;
 }
-export declare class Checkbox extends FormInput<CheckboxState> {
+export declare class Checkbox extends BaseComponent<CheckboxState> {
     constructor(id: string, options?: CheckboxOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -23,6 +22,8 @@ export declare class Checkbox extends FormInput<CheckboxState> {
     value(value: string): this;
     getValue(): boolean;
     setValue(value: boolean): this;
+    validate(): boolean;
+    isValid(): boolean;
     protected _validateValue(checked: boolean): boolean | string;
     protected _buildInputElement(): HTMLElement;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,eAAe;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,CAAC;CACvD;AAED,UAAU,aAAc,SAAQ,cAAc;IAC1C,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;gBACtC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAkBrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B,QAAQ,IAAI,OAAO;IAInB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAQ9B,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM;IAiB5D,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAoB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAiHrE;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,eAAe;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,CAAC;CACvD;AAED,UAAU,aAAc,SAAQ,SAAS;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;gBAC1C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAqBrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B,QAAQ,IAAI,OAAO;IAInB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAQ9B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM;IAiB5D,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAoB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAmHrE;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}