juxscript 1.1.80 → 1.1.82

package/lib/components/checkbox.js

@@ -1,20 +1,24 @@
-import { FormInput } from './base/FormInput.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['change'];
-export class Checkbox extends FormInput {
+export class Checkbox extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
-            checked: options.checked ?? false,
-            value: options.value ?? 'on',
-            label: options.label ?? '',
-            required: options.required ?? false,
+            visible: true,
             disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            style: options.style ?? '',
+            loading: false,
             class: options.class ?? '',
-            errorMessage: undefined
+            style: options.style ?? '',
+            attributes: {},
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            required: options.required ?? false,
+            name: options.name ?? id,
+            errorMessage: undefined,
+            checked: options.checked ?? false,
+            value: options.value ?? 'on'
         });
         if (options.onValidate) {
             this._onValidate = options.onValidate;
@@ -29,12 +33,6 @@ export class Checkbox extends FormInput {
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
     checked(value) {
         return this.setValue(value);
     }
@@ -55,6 +53,23 @@ export class Checkbox extends FormInput {
         }
         return this;
     }
+    validate() {
+        this._hasBeenValidated = true;
+        const value = this.getValue();
+        const result = this._validateValue(value);
+        if (result === true) {
+            this._clearError();
+            return true;
+        }
+        else {
+            this._showError(result);
+            return false;
+        }
+    }
+    isValid() {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
     _validateValue(checked) {
         const { required } = this.state;
         if (required && !checked) {
@@ -166,7 +181,9 @@ export class Checkbox extends FormInput {
         }
         // Always add blur validation
         inputEl.addEventListener('blur', () => {
-            this.validate();
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
         });
         // Sync label changes
         const labelSync = this._syncBindings.find(b => b.property === 'label');

package/lib/components/checkbox.ts

@@ -1,6 +1,6 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -18,23 +18,26 @@ export interface CheckboxOptions {
     onValidate?: (checked: boolean) => boolean | string;
 }
 
-interface CheckboxState extends FormInputState {
+interface CheckboxState extends BaseState {
     checked: boolean;
     value: string;
 }
 
-export class Checkbox extends FormInput<CheckboxState> {
+export class Checkbox extends BaseComponent<CheckboxState> {
     constructor(id: string, options: CheckboxOptions = {}) {
         super(id, {
-            checked: options.checked ?? false,
-            value: options.value ?? 'on',
-            label: options.label ?? '',
-            required: options.required ?? false,
+            visible: true,
             disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            style: options.style ?? '',
+            loading: false,
             class: options.class ?? '',
-            errorMessage: undefined
+            style: options.style ?? '',
+            attributes: {},
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            required: options.required ?? false,
+            name: options.name ?? id,
+            errorMessage: undefined,
+            checked: options.checked ?? false,
+            value: options.value ?? 'on'
         });
 
         if (options.onValidate) {
@@ -54,13 +57,6 @@ export class Checkbox extends FormInput<CheckboxState> {
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
 
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-
     checked(value: boolean): this {
         return this.setValue(value);
     }
@@ -86,6 +82,25 @@ export class Checkbox extends FormInput<CheckboxState> {
         return this;
     }
 
+    validate(): boolean {
+        this._hasBeenValidated = true;
+        const value = this.getValue();
+        const result = this._validateValue(value);
+
+        if (result === true) {
+            this._clearError();
+            return true;
+        } else {
+            this._showError(result as string);
+            return false;
+        }
+    }
+
+    isValid(): boolean {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
+
     protected _validateValue(checked: boolean): boolean | string {
         const { required } = this.state;
 
@@ -110,11 +125,11 @@ export class Checkbox extends FormInput<CheckboxState> {
         input.type = 'checkbox';
         input.className = 'jux-checkbox-input';
         input.id = `${this._id}-input`;
-        input.name = name;
+        input.name = name!;
         input.value = value;
         input.checked = checked;
-        input.required = required;
-        input.disabled = disabled;
+        input.required = required!;
+        input.disabled = disabled!;
 
         return input;
     }
@@ -221,7 +236,9 @@ export class Checkbox extends FormInput<CheckboxState> {
 
         // Always add blur validation
         inputEl.addEventListener('blur', () => {
-            this.validate();
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
         });
 
         // Sync label changes

package/lib/components/datepicker.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 DatePickerOptions {
     value?: string;
     label?: string;
@@ -13,13 +12,13 @@ export interface DatePickerOptions {
     class?: string;
     onValidate?: (value: string) => boolean | string;
 }
-interface DatePickerState extends FormInputState {
+interface DatePickerState extends BaseState {
     value: string;
     placeholder: string;
     min?: string;
     max?: string;
 }
-export declare class DatePicker extends FormInput<DatePickerState> {
+export declare class DatePicker extends BaseComponent<DatePickerState> {
     constructor(id: string, options?: DatePickerOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -30,6 +29,8 @@ export declare class DatePicker extends FormInput<DatePickerState> {
     getValue(): string;
     setValue(value: string): this;
     getDate(): Date | null;
+    validate(): boolean;
+    isValid(): boolean;
     protected _validateValue(value: string): boolean | string;
     protected _buildInputElement(): HTMLElement;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;gBAC1C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAoBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,IAAI,IAAI,GAAG,IAAI;IAMtB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAuCzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAuB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA0DrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAuBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,IAAI,IAAI,GAAG,IAAI;IAMtB,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAuCzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAuB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA0DrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}

package/lib/components/datepicker.js

@@ -1,22 +1,26 @@
-import { FormInput } from './base/FormInput.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['change'];
-export class DatePicker extends FormInput {
+export class DatePicker extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select a date',
-            label: options.label ?? '',
-            required: options.required ?? false,
+            visible: true,
             disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            required: options.required ?? false,
             name: options.name ?? id,
+            errorMessage: undefined,
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select a date',
             min: options.min,
-            max: options.max,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
+            max: options.max
         });
         if (options.onValidate) {
             this._onValidate = options.onValidate;
@@ -31,12 +35,6 @@ export class DatePicker extends FormInput {
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
     value(value) {
         return this.setValue(value);
     }
@@ -71,6 +69,23 @@ export class DatePicker extends FormInput {
         const date = new Date(this.state.value);
         return isNaN(date.getTime()) ? null : date;
     }
+    validate() {
+        this._hasBeenValidated = true;
+        const value = this.getValue();
+        const result = this._validateValue(value);
+        if (result === true) {
+            this._clearError();
+            return true;
+        }
+        else {
+            this._showError(result);
+            return false;
+        }
+    }
+    isValid() {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
     _validateValue(value) {
         const { required, min, max } = this.state;
         if (required && !value) {

package/lib/components/datepicker.ts

@@ -1,6 +1,6 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
-import { BaseComponent } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -20,27 +20,30 @@ export interface DatePickerOptions {
     onValidate?: (value: string) => boolean | string;
 }
 
-interface DatePickerState extends FormInputState {
+interface DatePickerState extends BaseState {
     value: string;
     placeholder: string;
     min?: string;
     max?: string;
 }
 
-export class DatePicker extends FormInput<DatePickerState> {
+export class DatePicker extends BaseComponent<DatePickerState> {
     constructor(id: string, options: DatePickerOptions = {}) {
         super(id, {
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select a date',
-            label: options.label ?? '',
-            required: options.required ?? false,
+            visible: true,
             disabled: options.disabled ?? false,
+            loading: false,
+            class: options.class ?? '',
+            style: options.style ?? '',
+            attributes: {},
+            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
+            required: options.required ?? false,
             name: options.name ?? id,
+            errorMessage: undefined,
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select a date',
             min: options.min,
-            max: options.max,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
+            max: options.max
         });
 
         if (options.onValidate) {
@@ -60,13 +63,6 @@ export class DatePicker extends FormInput<DatePickerState> {
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
 
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-
     value(value: string): this {
         return this.setValue(value);
     }
@@ -108,6 +104,25 @@ export class DatePicker extends FormInput<DatePickerState> {
         return isNaN(date.getTime()) ? null : date;
     }
 
+    validate(): boolean {
+        this._hasBeenValidated = true;
+        const value = this.getValue();
+        const result = this._validateValue(value);
+
+        if (result === true) {
+            this._clearError();
+            return true;
+        } else {
+            this._showError(result as string);
+            return false;
+        }
+    }
+
+    isValid(): boolean {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
+
     protected _validateValue(value: string): boolean | string {
         const { required, min, max } = this.state;
 
@@ -154,11 +169,11 @@ export class DatePicker extends FormInput<DatePickerState> {
         input.type = 'date';
         input.className = 'jux-input-element jux-datepicker-input';
         input.id = `${this._id}-input`;
-        input.name = name;
+        input.name = name!;
         input.value = value;
         input.placeholder = placeholder;
-        input.required = required;
-        input.disabled = disabled;
+        input.required = required!;
+        input.disabled = disabled!;
 
         if (min) input.min = min;
         if (max) input.max = max;

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,aAAa,GAAG;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;IACtD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,KAAK,CAA4B;gBAE7B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAWrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI;IAKlC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI;IAKhF,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,MAAM,IAAI,IAAI;IAQd,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAsFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,aAAa,GAAG;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,QAAS,SAAQ,aAAa,CAAC,aAAa,CAAC;IACtD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,KAAK,CAA4B;gBAE7B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAWrD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKjC,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI;IAKlC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI;IAKhF,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,MAAM,IAAI,IAAI;IAQd,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAsFlE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}

package/lib/components/dropdown.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 = ['select'];
 export class Dropdown extends BaseComponent {
     constructor(id, options = {}) {
         super(id, {
-            triggerLabel: options.triggerLabel ?? 'Menu',
+            triggerLabel: options.triggerLabel ?? formatIdAsLabel(id), // ✅ Auto-generate
             items: options.items ?? [],
             position: options.position ?? 'bottom-left',
             open: false,

package/lib/components/dropdown.ts

@@ -1,4 +1,5 @@
 import { BaseComponent } from './base/BaseComponent.js';
+import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -34,7 +35,7 @@ export class Dropdown extends BaseComponent<DropdownState> {
 
     constructor(id: string, options: DropdownOptions = {}) {
         super(id, {
-            triggerLabel: options.triggerLabel ?? 'Menu',
+            triggerLabel: options.triggerLabel ?? formatIdAsLabel(id), // ✅ Auto-generate
             items: options.items ?? [],
             position: options.position ?? 'bottom-left',
             open: false,

package/lib/components/fileupload.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 FileUploadOptions {
     label?: string;
     accept?: string;
@@ -12,13 +11,13 @@ export interface FileUploadOptions {
     class?: string;
     onValidate?: (files: File[]) => boolean | string;
 }
-interface FileUploadState extends FormInputState {
+interface FileUploadState extends BaseState {
     files: File[];
     accept: string;
     multiple: boolean;
     icon: string;
 }
-export declare class FileUpload extends FormInput<FileUploadState> {
+export declare class FileUpload extends BaseComponent<FileUploadState> {
     private _fileListElement;
     constructor(id: string, options?: FileUploadOptions);
     protected getTriggerEvents(): readonly string[];
@@ -29,12 +28,13 @@ export declare class FileUpload extends FormInput<FileUploadState> {
     clear(): this;
     getValue(): File[];
     setValue(files: File[]): this;
-    getFiles(): File[];
+    validate(): boolean;
+    isValid(): boolean;
     protected _validateValue(files: File[]): boolean | string;
     protected _buildInputElement(): HTMLElement;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
     private _updateFileList;
     private _formatFileSize;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }
 export declare function fileupload(id: string, options?: FileUploadOptions): FileUpload;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,cAAc;IAC5C,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IACtD,OAAO,CAAC,gBAAgB,CAA4B;gBAExC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAoBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,KAAK,IAAI,IAAI;IAiBb,QAAQ,IAAI,IAAI,EAAE;IAIlB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAQ7B,QAAQ,IAAI,IAAI,EAAE;IAIlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,MAAM;IAiBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAqB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IA8HlE,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;CAK1B;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}
+{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAA4B;gBAExC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAuBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,KAAK,IAAI,IAAI;IAgBb,QAAQ,IAAI,IAAI,EAAE;IAIlB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,MAAM;IAiBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAiB3C,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,eAAe;IAYvB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAsIrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}