juxscript 1.1.4 → 1.1.6

package/lib/components/dialog.js

@@ -0,0 +1,126 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['confirm', 'cancel'];
+export class Dialog extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            title: options.title ?? 'Confirm',
+            message: options.message ?? 'Are you sure?',
+            confirmText: options.confirmText ?? 'Confirm',
+            cancelText: options.cancelText ?? 'Cancel',
+            variant: options.variant ?? 'default',
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._dialog = null;
+        this._overlay = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    title(value) {
+        this.state.title = value;
+        return this;
+    }
+    message(value) {
+        this.state.message = value;
+        return this;
+    }
+    confirmText(value) {
+        this.state.confirmText = value;
+        return this;
+    }
+    cancelText(value) {
+        this.state.cancelText = value;
+        return this;
+    }
+    variant(value) {
+        this.state.variant = value;
+        return this;
+    }
+    open() {
+        this.state.open = true;
+        if (this._overlay) {
+            this._overlay.style.display = 'flex';
+        }
+        return this;
+    }
+    close() {
+        this.state.open = false;
+        if (this._overlay) {
+            this._overlay.style.display = 'none';
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const { title, message, confirmText, cancelText, variant, style, class: className } = this.state;
+        // Overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'jux-dialog-overlay';
+        overlay.style.display = 'none';
+        this._overlay = overlay;
+        // Dialog
+        const dialog = document.createElement('div');
+        dialog.className = `jux-dialog jux-dialog-${variant}`;
+        dialog.id = this._id;
+        if (className)
+            dialog.className += ` ${className}`;
+        if (style)
+            dialog.setAttribute('style', style);
+        this._dialog = dialog;
+        // Title
+        const titleEl = document.createElement('div');
+        titleEl.className = 'jux-dialog-title';
+        titleEl.textContent = title;
+        dialog.appendChild(titleEl);
+        // Message
+        const messageEl = document.createElement('div');
+        messageEl.className = 'jux-dialog-message';
+        messageEl.textContent = message;
+        dialog.appendChild(messageEl);
+        // Actions
+        const actions = document.createElement('div');
+        actions.className = 'jux-dialog-actions';
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'jux-dialog-button jux-dialog-button-cancel';
+        cancelBtn.textContent = cancelText;
+        cancelBtn.addEventListener('click', () => {
+            this._triggerCallback('cancel');
+            this.close();
+        });
+        const confirmBtn = document.createElement('button');
+        confirmBtn.className = `jux-dialog-button jux-dialog-button-confirm jux-dialog-button-${variant}`;
+        confirmBtn.textContent = confirmText;
+        confirmBtn.addEventListener('click', () => {
+            this._triggerCallback('confirm');
+            this.close();
+        });
+        actions.appendChild(cancelBtn);
+        actions.appendChild(confirmBtn);
+        dialog.appendChild(actions);
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this._triggerCallback('cancel');
+                this.close();
+            }
+        });
+        overlay.appendChild(dialog);
+        document.body.appendChild(overlay);
+        return this;
+    }
+}
+export function dialog(id, options = {}) {
+    return new Dialog(id, options);
+}

package/lib/components/dialog.ts

@@ -0,0 +1,172 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['confirm', 'cancel'] as const;
+
+export interface DialogOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'default' | 'danger' | 'warning';
+    style?: string;
+    class?: string;
+}
+
+type DialogState = {
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText: string;
+    variant: string;
+    open: boolean;
+    style: string;
+    class: string;
+};
+
+export class Dialog extends BaseComponent<DialogState> {
+    private _dialog: HTMLElement | null = null;
+    private _overlay: HTMLElement | null = null;
+
+    constructor(id: string, options: DialogOptions = {}) {
+        super(id, {
+            title: options.title ?? 'Confirm',
+            message: options.message ?? 'Are you sure?',
+            confirmText: options.confirmText ?? 'Confirm',
+            cancelText: options.cancelText ?? 'Cancel',
+            variant: options.variant ?? 'default',
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    title(value: string): this {
+        this.state.title = value;
+        return this;
+    }
+
+    message(value: string): this {
+        this.state.message = value;
+        return this;
+    }
+
+    confirmText(value: string): this {
+        this.state.confirmText = value;
+        return this;
+    }
+
+    cancelText(value: string): this {
+        this.state.cancelText = value;
+        return this;
+    }
+
+    variant(value: 'default' | 'danger' | 'warning'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    open(): this {
+        this.state.open = true;
+        if (this._overlay) {
+            this._overlay.style.display = 'flex';
+        }
+        return this;
+    }
+
+    close(): this {
+        this.state.open = false;
+        if (this._overlay) {
+            this._overlay.style.display = 'none';
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const { title, message, confirmText, cancelText, variant, style, class: className } = this.state;
+
+        // Overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'jux-dialog-overlay';
+        overlay.style.display = 'none';
+        this._overlay = overlay;
+
+        // Dialog
+        const dialog = document.createElement('div');
+        dialog.className = `jux-dialog jux-dialog-${variant}`;
+        dialog.id = this._id;
+        if (className) dialog.className += ` ${className}`;
+        if (style) dialog.setAttribute('style', style);
+        this._dialog = dialog;
+
+        // Title
+        const titleEl = document.createElement('div');
+        titleEl.className = 'jux-dialog-title';
+        titleEl.textContent = title;
+        dialog.appendChild(titleEl);
+
+        // Message
+        const messageEl = document.createElement('div');
+        messageEl.className = 'jux-dialog-message';
+        messageEl.textContent = message;
+        dialog.appendChild(messageEl);
+
+        // Actions
+        const actions = document.createElement('div');
+        actions.className = 'jux-dialog-actions';
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'jux-dialog-button jux-dialog-button-cancel';
+        cancelBtn.textContent = cancelText;
+        cancelBtn.addEventListener('click', () => {
+            this._triggerCallback('cancel');
+            this.close();
+        });
+
+        const confirmBtn = document.createElement('button');
+        confirmBtn.className = `jux-dialog-button jux-dialog-button-confirm jux-dialog-button-${variant}`;
+        confirmBtn.textContent = confirmText;
+        confirmBtn.addEventListener('click', () => {
+            this._triggerCallback('confirm');
+            this.close();
+        });
+
+        actions.appendChild(cancelBtn);
+        actions.appendChild(confirmBtn);
+        dialog.appendChild(actions);
+
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this._triggerCallback('cancel');
+                this.close();
+            }
+        });
+
+        overlay.appendChild(dialog);
+        document.body.appendChild(overlay);
+
+        return this;
+    }
+}
+
+export function dialog(id: string, options: DialogOptions = {}): Dialog {
+    return new Dialog(id, options);
+}

package/lib/components/divider.d.ts

@@ -0,0 +1,30 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface DividerOptions {
+    text?: string;
+    variant?: 'default' | 'dashed' | 'dotted';
+    margin?: string;
+    style?: string;
+    class?: string;
+}
+type DividerState = {
+    text: string;
+    variant: string;
+    margin: string;
+    style: string;
+    class: string;
+    orientation: string;
+};
+export declare class Divider extends BaseComponent<DividerState> {
+    constructor(id?: string, options?: DividerOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    text(value: string): this;
+    orientation(value: 'horizontal' | 'vertical'): this;
+    style(value: string): this;
+    class(value: string): this;
+    render(targetId?: string): this;
+    renderTo(juxComponent: any): this;
+}
+export declare function divider(options?: DividerOptions): Divider;
+export {};
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,YAAY,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;gBACxC,EAAE,GAAE,MAA2E,EAAE,OAAO,GAAE,cAAmB;IAWzH,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI;IAKnD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAyB/B,QAAQ,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI;CAMpC;AAGD,wBAAgB,OAAO,CAAC,OAAO,GAAE,cAAmB,GAAG,OAAO,CAE7D"}

package/lib/components/divider.js

@@ -0,0 +1,69 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+export class Divider extends BaseComponent {
+    constructor(id = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, options = {}) {
+        super(id, {
+            text: options.text ?? '',
+            variant: options.variant ?? 'default',
+            margin: options.margin ?? '1rem 0',
+            style: options.style ?? '',
+            class: options.class ?? '',
+            orientation: 'horizontal'
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    text(value) {
+        this.state.text = value;
+        return this;
+    }
+    orientation(value) {
+        this.state.orientation = value;
+        return this;
+    }
+    style(value) {
+        this.state.style = value;
+        return this;
+    }
+    class(value) {
+        this.state.class = value;
+        return this;
+    }
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { text, variant, margin, style, class: className } = this.state;
+        const divider = document.createElement('div');
+        divider.className = `jux-divider jux-divider-${variant}`;
+        divider.id = this._id;
+        divider.style.margin = margin;
+        if (className)
+            divider.className += ` ${className}`;
+        if (style)
+            divider.setAttribute('style', `${divider.getAttribute('style')}; ${style}`);
+        if (text) {
+            const textEl = document.createElement('span');
+            textEl.className = 'jux-divider-text';
+            textEl.textContent = text;
+            divider.appendChild(textEl);
+        }
+        this._wireStandardEvents(divider);
+        container.appendChild(divider);
+        return this;
+    }
+    renderTo(juxComponent) {
+        if (!juxComponent?._id) {
+            throw new Error('Divider.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+// ✅ ID is now optional - auto-generated if not provided
+export function divider(options = {}) {
+    return new Divider(undefined, options);
+}

package/lib/components/divider.ts

@@ -0,0 +1,100 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface DividerOptions {
+    text?: string;
+    variant?: 'default' | 'dashed' | 'dotted';
+    margin?: string;
+    style?: string;
+    class?: string;
+}
+
+type DividerState = {
+    text: string;
+    variant: string;
+    margin: string;
+    style: string;
+    class: string;
+    orientation: string;
+};
+
+export class Divider extends BaseComponent<DividerState> {
+    constructor(id: string = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, options: DividerOptions = {}) {
+        super(id, {
+            text: options.text ?? '',
+            variant: options.variant ?? 'default',
+            margin: options.margin ?? '1rem 0',
+            style: options.style ?? '',
+            class: options.class ?? '',
+            orientation: 'horizontal'
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    orientation(value: 'horizontal' | 'vertical'): this {
+        this.state.orientation = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { text, variant, margin, style, class: className } = this.state;
+
+        const divider = document.createElement('div');
+        divider.className = `jux-divider jux-divider-${variant}`;
+        divider.id = this._id;
+        divider.style.margin = margin;
+        if (className) divider.className += ` ${className}`;
+        if (style) divider.setAttribute('style', `${divider.getAttribute('style')}; ${style}`);
+
+        if (text) {
+            const textEl = document.createElement('span');
+            textEl.className = 'jux-divider-text';
+            textEl.textContent = text;
+            divider.appendChild(textEl);
+        }
+
+        this._wireStandardEvents(divider);
+        container.appendChild(divider);
+
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Divider.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+// ✅ ID is now optional - auto-generated if not provided
+export function divider(options: DividerOptions = {}): Divider {
+    return new Divider(undefined, options);
+}

package/lib/components/dropdown.d.ts

@@ -0,0 +1,39 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface DropdownItem {
+    label?: string;
+    icon?: string;
+    divider?: boolean;
+    click?: () => void;
+}
+export interface DropdownOptions {
+    triggerLabel?: string;
+    items?: DropdownItem[];
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    style?: string;
+    class?: string;
+}
+type DropdownState = {
+    triggerLabel: string;
+    items: DropdownItem[];
+    position: string;
+    open: boolean;
+    style: string;
+    class: string;
+};
+export declare class Dropdown extends BaseComponent<DropdownState> {
+    private _dropdown;
+    private _menu;
+    constructor(id: string, options?: DropdownOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    triggerLabel(value: string): this;
+    items(value: DropdownItem[]): this;
+    position(value: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'): this;
+    open(): this;
+    close(): this;
+    toggle(): this;
+    render(targetId?: string): this;
+}
+export declare function dropdown(id: string, options?: DropdownOptions): Dropdown;
+export {};
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +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,IAAI;CAqFlC;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAE5E"}

package/lib/components/dropdown.js

@@ -0,0 +1,133 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['select'];
+export class Dropdown extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            triggerLabel: options.triggerLabel ?? 'Menu',
+            items: options.items ?? [],
+            position: options.position ?? 'bottom-left',
+            open: false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._dropdown = null;
+        this._menu = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    triggerLabel(value) {
+        this.state.triggerLabel = value;
+        return this;
+    }
+    items(value) {
+        this.state.items = value;
+        return this;
+    }
+    position(value) {
+        this.state.position = value;
+        return this;
+    }
+    open() {
+        this.state.open = true;
+        if (this._menu) {
+            this._menu.style.display = 'block';
+        }
+        return this;
+    }
+    close() {
+        this.state.open = false;
+        if (this._menu) {
+            this._menu.style.display = 'none';
+        }
+        return this;
+    }
+    toggle() {
+        return this.state.open ? this.close() : this.open();
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { triggerLabel, items, position, style, class: className } = this.state;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dropdown';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Trigger button
+        const triggerBtn = document.createElement('button');
+        triggerBtn.className = 'jux-dropdown-trigger';
+        triggerBtn.textContent = triggerLabel;
+        triggerBtn.type = 'button';
+        // Dropdown menu
+        const menu = document.createElement('div');
+        menu.className = `jux-dropdown-menu jux-dropdown-${position}`;
+        menu.style.display = 'none';
+        this._menu = menu;
+        items.forEach(item => {
+            if (item.divider) {
+                const divider = document.createElement('div');
+                divider.className = 'jux-dropdown-divider';
+                menu.appendChild(divider);
+            }
+            else {
+                const menuItem = document.createElement('button');
+                menuItem.className = 'jux-dropdown-item';
+                menuItem.type = 'button';
+                if (item.icon) {
+                    const icon = document.createElement('span');
+                    icon.className = 'jux-dropdown-icon';
+                    icon.textContent = item.icon;
+                    menuItem.appendChild(icon);
+                }
+                if (item.label) {
+                    const label = document.createElement('span');
+                    label.textContent = item.label;
+                    menuItem.appendChild(label);
+                }
+                menuItem.addEventListener('click', () => {
+                    // 🎯 Fire the select callback event
+                    this._triggerCallback('select', item);
+                    // Then fire item-specific click handler
+                    if (item.click) {
+                        item.click();
+                    }
+                    this.close();
+                });
+                menu.appendChild(menuItem);
+            }
+        });
+        // Toggle on trigger click
+        triggerBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (this._dropdown && !this._dropdown.contains(e.target)) {
+                this.close();
+            }
+        });
+        wrapper.appendChild(triggerBtn);
+        wrapper.appendChild(menu);
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        this._dropdown = wrapper;
+        return this;
+    }
+}
+export function dropdown(id, options = {}) {
+    return new Dropdown(id, options);
+}