juxscript 1.1.240 → 1.1.244

package/lib/components/tabs.d.ts

@@ -1,53 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface Tab {
-    id: string;
-    label: string;
-    content: string | BaseComponent<any>;
-    icon?: string;
-}
-export interface TabsOptions {
-    tabs?: Tab[];
-    activeTab?: string;
-    variant?: 'default' | 'pills' | 'underline';
-    style?: string;
-    class?: string;
-}
-type TabsState = BaseState & {
-    tabs: Tab[];
-    activeTab: string;
-    variant: string;
-};
-export declare class Tabs extends BaseComponent<TabsState> {
-    private _tabsWrapper;
-    constructor(id: string, options?: TabsOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    update(prop: string, value: any): void;
-    private _updateActiveTab;
-    private _rebuildTabs;
-    tabs(value: Tab[]): this;
-    addTab(tab: Tab): this;
-    removeTab(tabId: string): this;
-    activeTab(value: string): this;
-    variant(value: 'default' | 'pills' | 'underline'): this;
-    /**
-     * Update content of a specific tab by ID
-     */
-    updateTabContent(tabId: string, content: string | BaseComponent<any>): this;
-    /**
-     * Add content to a specific tab panel
-     */
-    addTabContent(tabId: string, content: (string | BaseComponent<any>)[]): this;
-    /**
-     * Get tab by ID
-     */
-    getTab(tabId: string): Tab | undefined;
-    /**
-     * Get current active tab
-     */
-    getCurrentTab(): Tab | undefined;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function tabs(id: string, options?: TabsOptions): Tabs;
-export {};
-//# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,YAAY,CAA4B;gBAEpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAuBtC,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,YAAY;IAqEpB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAqB3E;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI;IAuB5E;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS;IAItC;;OAEG;IACH,aAAa,IAAI,GAAG,GAAG,SAAS;IAQhC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA+EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/tabs.js

@@ -1,275 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['tabChange'];
-export class Tabs extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            tabs: options.tabs ?? [],
-            activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
-            variant: options.variant ?? 'default',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-        this._tabsWrapper = null;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * REACTIVE UPDATE
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        super.update(prop, value);
-        if (!this._tabsWrapper)
-            return;
-        switch (prop) {
-            case 'activeTab':
-                this._updateActiveTab(value);
-                break;
-            case 'tabs':
-                this._rebuildTabs();
-                break;
-            case 'variant':
-                this._tabsWrapper.className = `jux-tabs jux-tabs-${value}`;
-                if (this.state.class) {
-                    this._tabsWrapper.className += ` ${this.state.class}`;
-                }
-                break;
-        }
-    }
-    _updateActiveTab(tabId) {
-        if (!this._tabsWrapper)
-            return;
-        // Update button states
-        this.state.tabs.forEach(tab => {
-            const btn = document.getElementById(`${this._id}-${tab.id}-button`);
-            if (btn) {
-                btn.classList.toggle('jux-tabs-button-active', tab.id === tabId);
-            }
-        });
-        // Update panel visibility
-        this.state.tabs.forEach(tab => {
-            const panel = document.getElementById(`${this._id}-${tab.id}-panel`);
-            if (panel) {
-                const isActive = tab.id === tabId;
-                panel.classList.toggle('jux-tabs-panel-active', isActive);
-                panel.style.display = isActive ? 'block' : 'none';
-            }
-        });
-    }
-    _rebuildTabs() {
-        if (!this._tabsWrapper)
-            return;
-        const tabList = this._tabsWrapper.querySelector('.jux-tabs-list');
-        const tabPanels = this._tabsWrapper.querySelector('.jux-tabs-panels');
-        if (!tabList || !tabPanels)
-            return;
-        // Clear existing
-        tabList.innerHTML = '';
-        tabPanels.innerHTML = '';
-        // Rebuild
-        this.state.tabs.forEach(tab => {
-            // Button with unique ID
-            const tabButton = document.createElement('button');
-            tabButton.id = `${this._id}-${tab.id}-button`;
-            tabButton.className = 'jux-tabs-button';
-            tabButton.setAttribute('data-tab-id', tab.id);
-            if (tab.id === this.state.activeTab) {
-                tabButton.classList.add('jux-tabs-button-active');
-            }
-            if (tab.icon) {
-                const icon = document.createElement('span');
-                icon.className = 'jux-tabs-icon';
-                icon.textContent = tab.icon;
-                tabButton.appendChild(icon);
-            }
-            tabButton.appendChild(document.createTextNode(tab.label));
-            tabButton.addEventListener('click', (e) => {
-                this.state.activeTab = tab.id;
-                this._triggerCallback('tabChange', tab.id, e, this);
-            });
-            tabList.appendChild(tabButton);
-            // Panel with unique ID
-            const tabPanel = document.createElement('div');
-            tabPanel.id = `${this._id}-${tab.id}-panel`;
-            tabPanel.className = 'jux-tabs-panel';
-            tabPanel.setAttribute('data-tab-id', tab.id);
-            if (tab.id === this.state.activeTab) {
-                tabPanel.classList.add('jux-tabs-panel-active');
-            }
-            else {
-                tabPanel.style.display = 'none';
-            }
-            // ✅ Append panel to DOM FIRST
-            tabPanels.appendChild(tabPanel);
-            // THEN render content into it
-            if (typeof tab.content === 'string') {
-                tabPanel.innerHTML = tab.content;
-            }
-            else if (tab.content instanceof BaseComponent) {
-                // Now panel exists in DOM, so render() can find it
-                tab.content.render(`#${tabPanel.id}`);
-            }
-        });
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    tabs(value) {
-        this.state.tabs = value;
-        return this;
-    }
-    addTab(tab) {
-        this.state.tabs = [...this.state.tabs, tab];
-        return this;
-    }
-    removeTab(tabId) {
-        this.state.tabs = this.state.tabs.filter(t => t.id !== tabId);
-        // If removing active tab, switch to first tab
-        if (this.state.activeTab === tabId && this.state.tabs.length > 0) {
-            this.state.activeTab = this.state.tabs[0].id;
-        }
-        return this;
-    }
-    activeTab(value) {
-        this.state.activeTab = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    /**
-     * Update content of a specific tab by ID
-     */
-    updateTabContent(tabId, content) {
-        const tab = this.state.tabs.find(t => t.id === tabId);
-        if (!tab)
-            return this;
-        tab.content = content;
-        // Update DOM if rendered
-        const panel = document.getElementById(`${this._id}-${tabId}-panel`);
-        if (panel) {
-            panel.innerHTML = ''; // Clear existing content
-            if (typeof content === 'string') {
-                panel.innerHTML = content;
-            }
-            else if (content instanceof BaseComponent) {
-                content.render(`#${panel.id}`);
-            }
-        }
-        return this;
-    }
-    /**
-     * Add content to a specific tab panel
-     */
-    addTabContent(tabId, content) {
-        const panel = document.getElementById(`${this._id}-${tabId}-panel`);
-        if (!panel) {
-            console.warn(`[Tabs] Panel not found for tab: ${tabId}`);
-            return this;
-        }
-        content.forEach(item => {
-            if (typeof item === 'string') {
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = item;
-                while (tempDiv.firstChild) {
-                    panel.appendChild(tempDiv.firstChild);
-                }
-            }
-            else if (item && typeof item.render === 'function') {
-                // ✅ Render the component into the panel
-                item.render(panel);
-            }
-        });
-        return this;
-    }
-    /**
-     * Get tab by ID
-     */
-    getTab(tabId) {
-        return this.state.tabs.find(t => t.id === tabId);
-    }
-    /**
-     * Get current active tab
-     */
-    getCurrentTab() {
-        return this.state.tabs.find(t => t.id === this.state.activeTab);
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { tabs, activeTab, variant, style, class: className } = this.state;
-        const wrapper = document.createElement('div');
-        wrapper.className = `jux-tabs jux-tabs-${variant}`;
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        const tabList = document.createElement('div');
-        tabList.className = 'jux-tabs-list';
-        const tabPanels = document.createElement('div');
-        tabPanels.className = 'jux-tabs-panels';
-        // ✅ Append structure to DOM FIRST, then render content
-        wrapper.appendChild(tabList);
-        wrapper.appendChild(tabPanels);
-        container.appendChild(wrapper);
-        tabs.forEach(tab => {
-            // Tab button with unique ID
-            const tabButton = document.createElement('button');
-            tabButton.id = `${this._id}-${tab.id}-button`;
-            tabButton.className = 'jux-tabs-button';
-            tabButton.setAttribute('data-tab-id', tab.id);
-            if (tab.id === activeTab) {
-                tabButton.classList.add('jux-tabs-button-active');
-            }
-            if (tab.icon) {
-                const icon = document.createElement('span');
-                icon.className = 'jux-tabs-icon';
-                icon.textContent = tab.icon;
-                tabButton.appendChild(icon);
-            }
-            tabButton.appendChild(document.createTextNode(tab.label));
-            tabButton.addEventListener('click', (e) => {
-                this.state.activeTab = tab.id;
-                this._triggerCallback('tabChange', tab.id, e, this);
-            });
-            tabList.appendChild(tabButton);
-            // Tab panel with unique ID
-            const tabPanel = document.createElement('div');
-            tabPanel.id = `${this._id}-${tab.id}-panel`;
-            tabPanel.className = 'jux-tabs-panel';
-            tabPanel.setAttribute('data-tab-id', tab.id);
-            if (tab.id === activeTab) {
-                tabPanel.classList.add('jux-tabs-panel-active');
-            }
-            else {
-                tabPanel.style.display = 'none';
-            }
-            // ✅ Append panel to DOM FIRST
-            tabPanels.appendChild(tabPanel);
-            // ✅ THEN render content into it (panel is now in DOM)
-            if (typeof tab.content === 'string') {
-                tabPanel.innerHTML = tab.content;
-            }
-            else if (tab.content instanceof BaseComponent) {
-                // Now panel exists in DOM, so render() can find it
-                tab.content.render(`#${tabPanel.id}`);
-            }
-        });
-        this._wireStandardEvents(wrapper);
-        this._wireAllSyncs();
-        this._tabsWrapper = wrapper;
-        return this;
-    }
-}
-export function tabs(id, options = {}) {
-    return new Tabs(id, options);
-}

package/lib/components/tabs.ts

@@ -1,349 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['tabChange'] as const;
-
-export interface Tab {
-  id: string;
-  label: string;
-  content: string | BaseComponent<any>;
-  icon?: string;
-}
-
-export interface TabsOptions {
-  tabs?: Tab[];
-  activeTab?: string;
-  variant?: 'default' | 'pills' | 'underline';
-  style?: string;
-  class?: string;
-}
-
-type TabsState = BaseState & {
-  tabs: Tab[];
-  activeTab: string;
-  variant: string;
-};
-
-export class Tabs extends BaseComponent<TabsState> {
-  private _tabsWrapper: HTMLElement | null = null;
-
-  constructor(id: string, options: TabsOptions = {}) {
-    super(id, {
-      tabs: options.tabs ?? [],
-      activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
-      variant: options.variant ?? 'default',
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * REACTIVE UPDATE
-   * ═════════════════════════════════════════════════════════════════ */
-
-  update(prop: string, value: any): void {
-    super.update(prop, value);
-
-    if (!this._tabsWrapper) return;
-
-    switch (prop) {
-      case 'activeTab':
-        this._updateActiveTab(value);
-        break;
-
-      case 'tabs':
-        this._rebuildTabs();
-        break;
-
-      case 'variant':
-        this._tabsWrapper.className = `jux-tabs jux-tabs-${value}`;
-        if (this.state.class) {
-          this._tabsWrapper.className += ` ${this.state.class}`;
-        }
-        break;
-    }
-  }
-
-  private _updateActiveTab(tabId: string): void {
-    if (!this._tabsWrapper) return;
-
-    // Update button states
-    this.state.tabs.forEach(tab => {
-      const btn = document.getElementById(`${this._id}-${tab.id}-button`);
-      if (btn) {
-        btn.classList.toggle('jux-tabs-button-active', tab.id === tabId);
-      }
-    });
-
-    // Update panel visibility
-    this.state.tabs.forEach(tab => {
-      const panel = document.getElementById(`${this._id}-${tab.id}-panel`);
-      if (panel) {
-        const isActive = tab.id === tabId;
-        panel.classList.toggle('jux-tabs-panel-active', isActive);
-        panel.style.display = isActive ? 'block' : 'none';
-      }
-    });
-  }
-
-  private _rebuildTabs(): void {
-    if (!this._tabsWrapper) return;
-
-    const tabList = this._tabsWrapper.querySelector('.jux-tabs-list');
-    const tabPanels = this._tabsWrapper.querySelector('.jux-tabs-panels');
-
-    if (!tabList || !tabPanels) return;
-
-    // Clear existing
-    tabList.innerHTML = '';
-    tabPanels.innerHTML = '';
-
-    // Rebuild
-    this.state.tabs.forEach(tab => {
-      // Button with unique ID
-      const tabButton = document.createElement('button');
-      tabButton.id = `${this._id}-${tab.id}-button`;
-      tabButton.className = 'jux-tabs-button';
-      tabButton.setAttribute('data-tab-id', tab.id);
-
-      if (tab.id === this.state.activeTab) {
-        tabButton.classList.add('jux-tabs-button-active');
-      }
-
-      if (tab.icon) {
-        const icon = document.createElement('span');
-        icon.className = 'jux-tabs-icon';
-        icon.textContent = tab.icon;
-        tabButton.appendChild(icon);
-      }
-
-      tabButton.appendChild(document.createTextNode(tab.label));
-
-      tabButton.addEventListener('click', (e) => {
-        this.state.activeTab = tab.id;
-        this._triggerCallback('tabChange', tab.id, e, this);
-      });
-
-      tabList.appendChild(tabButton);
-
-      // Panel with unique ID
-      const tabPanel = document.createElement('div');
-      tabPanel.id = `${this._id}-${tab.id}-panel`;
-      tabPanel.className = 'jux-tabs-panel';
-      tabPanel.setAttribute('data-tab-id', tab.id);
-
-      if (tab.id === this.state.activeTab) {
-        tabPanel.classList.add('jux-tabs-panel-active');
-      } else {
-        tabPanel.style.display = 'none';
-      }
-
-      // ✅ Append panel to DOM FIRST
-      tabPanels.appendChild(tabPanel);
-
-      // THEN render content into it
-      if (typeof tab.content === 'string') {
-        tabPanel.innerHTML = tab.content;
-      } else if (tab.content instanceof BaseComponent) {
-        // Now panel exists in DOM, so render() can find it
-        tab.content.render(`#${tabPanel.id}`);
-      }
-    });
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  tabs(value: Tab[]): this {
-    this.state.tabs = value;
-    return this;
-  }
-
-  addTab(tab: Tab): this {
-    this.state.tabs = [...this.state.tabs, tab];
-    return this;
-  }
-
-  removeTab(tabId: string): this {
-    this.state.tabs = this.state.tabs.filter(t => t.id !== tabId);
-
-    // If removing active tab, switch to first tab
-    if (this.state.activeTab === tabId && this.state.tabs.length > 0) {
-      this.state.activeTab = this.state.tabs[0].id;
-    }
-
-    return this;
-  }
-
-  activeTab(value: string): this {
-    this.state.activeTab = value;
-    return this;
-  }
-
-  variant(value: 'default' | 'pills' | 'underline'): this {
-    this.state.variant = value;
-    return this;
-  }
-
-  /**
-   * Update content of a specific tab by ID
-   */
-  updateTabContent(tabId: string, content: string | BaseComponent<any>): this {
-    const tab = this.state.tabs.find(t => t.id === tabId);
-    if (!tab) return this;
-
-    tab.content = content;
-
-    // Update DOM if rendered
-    const panel = document.getElementById(`${this._id}-${tabId}-panel`);
-    if (panel) {
-      panel.innerHTML = ''; // Clear existing content
-
-      if (typeof content === 'string') {
-        panel.innerHTML = content;
-      } else if (content instanceof BaseComponent) {
-        content.render(`#${panel.id}`);
-      }
-    }
-
-    return this;
-  }
-
-  /**
-   * Add content to a specific tab panel
-   */
-  addTabContent(tabId: string, content: (string | BaseComponent<any>)[]): this {
-    const panel = document.getElementById(`${this._id}-${tabId}-panel`);
-    if (!panel) {
-      console.warn(`[Tabs] Panel not found for tab: ${tabId}`);
-      return this;
-    }
-
-    content.forEach(item => {
-      if (typeof item === 'string') {
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = item;
-        while (tempDiv.firstChild) {
-          panel.appendChild(tempDiv.firstChild);
-        }
-      } else if (item && typeof item.render === 'function') {
-        // ✅ Render the component into the panel
-        item.render(panel);
-      }
-    });
-
-    return this;
-  }
-
-  /**
-   * Get tab by ID
-   */
-  getTab(tabId: string): Tab | undefined {
-    return this.state.tabs.find(t => t.id === tabId);
-  }
-
-  /**
-   * Get current active tab
-   */
-  getCurrentTab(): Tab | undefined {
-    return this.state.tabs.find(t => t.id === this.state.activeTab);
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-    const { tabs, activeTab, variant, style, class: className } = this.state;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = `jux-tabs jux-tabs-${variant}`;
-    wrapper.id = this._id;
-    if (className) wrapper.className += ` ${className}`;
-    if (style) wrapper.setAttribute('style', style);
-
-    const tabList = document.createElement('div');
-    tabList.className = 'jux-tabs-list';
-
-    const tabPanels = document.createElement('div');
-    tabPanels.className = 'jux-tabs-panels';
-
-    // ✅ Append structure to DOM FIRST, then render content
-    wrapper.appendChild(tabList);
-    wrapper.appendChild(tabPanels);
-    container.appendChild(wrapper);
-
-    tabs.forEach(tab => {
-      // Tab button with unique ID
-      const tabButton = document.createElement('button');
-      tabButton.id = `${this._id}-${tab.id}-button`;
-      tabButton.className = 'jux-tabs-button';
-      tabButton.setAttribute('data-tab-id', tab.id);
-
-      if (tab.id === activeTab) {
-        tabButton.classList.add('jux-tabs-button-active');
-      }
-
-      if (tab.icon) {
-        const icon = document.createElement('span');
-        icon.className = 'jux-tabs-icon';
-        icon.textContent = tab.icon;
-        tabButton.appendChild(icon);
-      }
-
-      tabButton.appendChild(document.createTextNode(tab.label));
-
-      tabButton.addEventListener('click', (e) => {
-        this.state.activeTab = tab.id;
-        this._triggerCallback('tabChange', tab.id, e, this);
-      });
-
-      tabList.appendChild(tabButton);
-
-      // Tab panel with unique ID
-      const tabPanel = document.createElement('div');
-      tabPanel.id = `${this._id}-${tab.id}-panel`;
-      tabPanel.className = 'jux-tabs-panel';
-      tabPanel.setAttribute('data-tab-id', tab.id);
-
-      if (tab.id === activeTab) {
-        tabPanel.classList.add('jux-tabs-panel-active');
-      } else {
-        tabPanel.style.display = 'none';
-      }
-
-      // ✅ Append panel to DOM FIRST
-      tabPanels.appendChild(tabPanel);
-
-      // ✅ THEN render content into it (panel is now in DOM)
-      if (typeof tab.content === 'string') {
-        tabPanel.innerHTML = tab.content;
-      } else if (tab.content instanceof BaseComponent) {
-        // Now panel exists in DOM, so render() can find it
-        tab.content.render(`#${tabPanel.id}`);
-      }
-    });
-
-    this._wireStandardEvents(wrapper);
-    this._wireAllSyncs();
-
-    this._tabsWrapper = wrapper;
-
-    return this;
-  }
-}
-
-export function tabs(id: string, options: TabsOptions = {}): Tabs {
-  return new Tabs(id, options);
-}