@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/tabs/controllers/popout.controller.js

@@ -0,0 +1,441 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { PanelMode } from '../../panel/panel.types.js';
+/**
+ * Controller for managing tab pop-out functionality
+ */
+export class TabsPopOutController {
+    constructor(host) {
+        this.poppedOutTabs = new Map();
+        this.popOutIdCounter = 0;
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        // Initialize pop-out states for existing tabs
+        this.initializeTabStates();
+    }
+    hostDisconnected() {
+        // Clean up any popped-out panels
+        this.cleanupPoppedOutTabs();
+    }
+    /**
+     * Initialize pop-out states for all tabs
+     */
+    initializeTabStates() {
+        this.host.tabs.forEach((tab) => {
+            if (!tab.popOutState) {
+                tab.popOutState = "normal" /* TabPopOutState.Normal */;
+            }
+        });
+    }
+    /**
+     * Check if pop-out functionality is enabled
+     */
+    isPopOutEnabled() {
+        var _a, _b;
+        return (_b = (_a = this.host.popOut) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Check if a specific tab can be popped out
+     */
+    canPopOut(tab) {
+        var _a, _b, _c, _d;
+        if (!this.isPopOutEnabled())
+            return false;
+        // Check global config
+        const globalCanPopOut = (_b = (_a = this.host.popOut) === null || _a === void 0 ? void 0 : _a.canPopOut) !== null && _b !== void 0 ? _b : true;
+        // Check tab-specific config
+        const tabCanPopOut = (_d = (_c = tab.popOut) === null || _c === void 0 ? void 0 : _c.canPopOut) !== null && _d !== void 0 ? _d : globalCanPopOut;
+        // Can't pop out if already popped out or disabled
+        return tabCanPopOut &&
+            tab.popOutState === "normal" /* TabPopOutState.Normal */ &&
+            !tab.disabled;
+    }
+    /**
+     * Check if a specific tab can be popped back in
+     */
+    canPopIn(tab) {
+        var _a, _b, _c, _d;
+        if (!this.isPopOutEnabled())
+            return false;
+        // Check global config
+        const globalCanPopIn = (_b = (_a = this.host.popOut) === null || _a === void 0 ? void 0 : _a.canPopIn) !== null && _b !== void 0 ? _b : true;
+        // Check tab-specific config
+        const tabCanPopIn = (_d = (_c = tab.popOut) === null || _c === void 0 ? void 0 : _c.canPopIn) !== null && _d !== void 0 ? _d : globalCanPopIn;
+        return tabCanPopIn && tab.popOutState === "popped-out" /* TabPopOutState.PoppedOut */;
+    }
+    /**
+     * Generate unique pop-out ID
+     */
+    generatePopOutId() {
+        return `popout-${Date.now()}-${++this.popOutIdCounter}`;
+    }
+    /**
+     * Pop out a tab to a window panel
+     */
+    popOutTab(tabIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const tab = this.host.tabs[tabIndex];
+            if (!this.canPopOut(tab)) {
+                console.warn('[TabsPopOutController] Cannot pop out tab:', tab.label);
+                return;
+            }
+            const popOutId = this.generatePopOutId();
+            // Store original content before any modifications
+            const originalContent = tab.content;
+            // Capture parent panel dimensions BEFORE popping out
+            let originalWidth;
+            let originalHeight;
+            console.log('[TabsPopOutController] === DIMENSION CAPTURE START ===');
+            const hostElement = this.host;
+            console.log('[TabsPopOutController] hostElement.tagName:', hostElement.tagName);
+            // First try to find a parent nr-panel
+            const parentPanel = (_a = hostElement.closest) === null || _a === void 0 ? void 0 : _a.call(hostElement, 'nr-panel');
+            console.log('[TabsPopOutController] parentPanel found:', !!parentPanel);
+            if (parentPanel) {
+                const panelRect = parentPanel.getBoundingClientRect();
+                console.log('[TabsPopOutController] Using parent panel dimensions');
+                console.log('[TabsPopOutController] panelRect:', panelRect.width, 'x', panelRect.height);
+                if (panelRect.width > 0 && panelRect.height > 0) {
+                    originalWidth = `${panelRect.width}px`;
+                    originalHeight = `${panelRect.height}px`;
+                    console.log('[TabsPopOutController] ✓ Captured parent panel dimensions:', originalWidth, 'x', originalHeight);
+                }
+            }
+            else {
+                // If no parent panel, use the tabs element's own dimensions
+                console.log('[TabsPopOutController] No parent panel found, using tabs element dimensions');
+                const tabsRect = hostElement.getBoundingClientRect();
+                console.log('[TabsPopOutController] tabsRect:', tabsRect.width, 'x', tabsRect.height);
+                if (tabsRect.width > 0 && tabsRect.height > 0) {
+                    originalWidth = `${tabsRect.width}px`;
+                    originalHeight = `${tabsRect.height}px`;
+                    console.log('[TabsPopOutController] ✓ Captured tabs element dimensions:', originalWidth, 'x', originalHeight);
+                }
+                else {
+                    console.warn('[TabsPopOutController] ✗ Tabs element has zero dimensions');
+                }
+            }
+            console.log('[TabsPopOutController] === DIMENSION CAPTURE END ===');
+            // Create popped-out tab tracking object with a copy of the tab
+            const poppedOutTab = {
+                tab: Object.assign({}, tab),
+                originalIndex: tabIndex,
+                state: "popped-out" /* TabPopOutState.PoppedOut */,
+                popOutId,
+                originalWidth,
+                originalHeight
+            };
+            // Set the popped-out tab state and restore original content
+            poppedOutTab.tab.popOutState = "popped-out" /* TabPopOutState.PoppedOut */;
+            poppedOutTab.tab.content = originalContent;
+            // Remove the tab from the tabs array (no placeholder)
+            this.host.tabs.splice(tabIndex, 1);
+            // Store popped-out tab
+            this.poppedOutTabs.set(popOutId, poppedOutTab);
+            // Create window panel
+            yield this.createWindowPanel(poppedOutTab);
+            // Dispatch event
+            this.host.dispatchEventWithMetadata("nr-tab-pop-out" /* TabEvent.TabPopOut */, {
+                index: tabIndex,
+                tab: poppedOutTab.tab,
+                popOutId
+            });
+            this.host.requestUpdate();
+        });
+    }
+    /**
+     * Pop a tab back into the tabs container
+     */
+    popInTab(popOutId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('[TabsPopOutController] popInTab called with ID:', popOutId);
+            const poppedOutTab = this.poppedOutTabs.get(popOutId);
+            if (!poppedOutTab) {
+                console.warn('[TabsPopOutController] Popped-out tab not found:', popOutId);
+                console.log('[TabsPopOutController] Available pop-out IDs:', Array.from(this.poppedOutTabs.keys()));
+                return;
+            }
+            console.log('[TabsPopOutController] Found popped-out tab:', poppedOutTab.tab.label);
+            if (!this.canPopIn(poppedOutTab.tab)) {
+                console.warn('[TabsPopOutController] Cannot pop in tab:', poppedOutTab.tab.label);
+                return;
+            }
+            // Find the placeholder tab in current tabs
+            const placeholderIndex = this.host.tabs.findIndex(tab => tab.popOutState === "placeholder" /* TabPopOutState.Placeholder */ &&
+                tab.id === poppedOutTab.tab.id);
+            console.log('[TabsPopOutController] Placeholder index:', placeholderIndex);
+            if (placeholderIndex !== -1) {
+                // Restore original tab with its original content
+                const originalTab = poppedOutTab.tab;
+                originalTab.popOutState = "normal" /* TabPopOutState.Normal */;
+                console.log('[TabsPopOutController] Restoring tab at placeholder index:', placeholderIndex);
+                console.log('[TabsPopOutController] Original tab content:', originalTab.content);
+                // Replace placeholder with original tab
+                this.host.tabs[placeholderIndex] = originalTab;
+            }
+            else {
+                // If placeholder not found, insert at original position
+                const insertIndex = Math.min(poppedOutTab.originalIndex, this.host.tabs.length);
+                poppedOutTab.tab.popOutState = "normal" /* TabPopOutState.Normal */;
+                console.log('[TabsPopOutController] Placeholder not found, inserting at:', insertIndex);
+                this.host.tabs.splice(insertIndex, 0, poppedOutTab.tab);
+            }
+            // Clean up window panel
+            console.log('[TabsPopOutController] Destroying window panel');
+            this.destroyWindowPanel(poppedOutTab);
+            // Remove from tracking
+            this.poppedOutTabs.delete(popOutId);
+            // Dispatch event
+            console.log('[TabsPopOutController] Dispatching TabPopIn event');
+            this.host.dispatchEventWithMetadata("nr-tab-pop-in" /* TabEvent.TabPopIn */, {
+                tab: poppedOutTab.tab,
+                originalIndex: poppedOutTab.originalIndex,
+                popOutId
+            });
+            console.log('[TabsPopOutController] Requesting host update');
+            this.host.requestUpdate();
+            console.log('[TabsPopOutController] popInTab completed');
+        });
+    }
+    /**
+     * Create window panel for popped-out tab
+     */
+    createWindowPanel(poppedOutTab) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (!this.host.isComponentAvailable('nr-panel')) {
+                console.warn('[TabsPopOutController] Panel component not available');
+                return;
+            }
+            // Check if required dependencies are available
+            if (!this.host.isComponentAvailable('nr-icon')) {
+                console.warn('[TabsPopOutController] Icon component not available - minimize button may not display correctly');
+            }
+            // Get panel config from global or tab-specific settings
+            const windowPanelConfig = ((_a = this.host.popOut) === null || _a === void 0 ? void 0 : _a.windowPanel) || {};
+            const tabPanelConfig = ((_b = poppedOutTab.tab.popOut) === null || _b === void 0 ? void 0 : _b.windowPanel) || {};
+            const config = Object.assign(Object.assign({}, windowPanelConfig), tabPanelConfig);
+            // Use stored dimensions from when we captured them, or fall back to config
+            const poppedTabData = poppedOutTab;
+            const originalWidth = poppedTabData.originalWidth || config.width || '600px';
+            const originalHeight = poppedTabData.originalHeight || config.height || '400px';
+            console.log('[TabsPopOutController] === DIMENSION FLOW START ===');
+            console.log('[TabsPopOutController] originalWidth from poppedTabData:', poppedTabData.originalWidth);
+            console.log('[TabsPopOutController] originalHeight from poppedTabData:', poppedTabData.originalHeight);
+            console.log('[TabsPopOutController] Final originalWidth:', originalWidth);
+            console.log('[TabsPopOutController] Final originalHeight:', originalHeight);
+            // Create panel element
+            const panel = document.createElement('nr-panel');
+            // Determine if the host tabs component is in embedded mode
+            const isHostEmbedded = ((_c = this.host.panelConfig) === null || _c === void 0 ? void 0 : _c.mode) === 'embedded';
+            console.log('[TabsPopOutController] isHostEmbedded:', isHostEmbedded);
+            // Add random offset for cascading effect (±80px for X, ±60px for Y)
+            const randomOffsetX = Math.floor(Math.random() * 560) - 80;
+            const randomOffsetY = Math.floor(Math.random() * 120) - 60;
+            console.log('[TabsPopOutController] Random offsets - X:', randomOffsetX, 'Y:', randomOffsetY);
+            // Set properties
+            // If host is embedded, start in embedded mode and maximize to window
+            panel.mode = isHostEmbedded ? 'embedded' : PanelMode.Window;
+            panel.title = ((_d = config.title) === null || _d === void 0 ? void 0 : _d.replace('{tabLabel}', poppedOutTab.tab.label)) || poppedOutTab.tab.label;
+            panel.icon = config.icon || poppedOutTab.tab.icon || '';
+            panel.width = originalWidth;
+            panel.height = originalHeight;
+            panel.isTabPopOut = true; // Mark this panel as a tab pop-out
+            // Apply random offset for non-embedded panels (direct window mode)
+            if (!isHostEmbedded) {
+                panel.offsetX = randomOffsetX;
+                // panel.offsetY = randomOffsetY;
+                console.log('[TabsPopOutController] Applied random offset to window panel');
+            }
+            console.log('[TabsPopOutController] Set panel.width:', panel.width);
+            console.log('[TabsPopOutController] Set panel.height:', panel.height);
+            // For embedded panels that will be maximized, set numeric dimensions BEFORE appending
+            if (isHostEmbedded) {
+                const widthNum = Number.parseInt(originalWidth);
+                const heightNum = Number.parseInt(originalHeight);
+                console.log('[TabsPopOutController] Parsed widthNum:', widthNum);
+                console.log('[TabsPopOutController] Parsed heightNum:', heightNum);
+                console.log('[TabsPopOutController] widthNum isNaN:', Number.isNaN(widthNum));
+                console.log('[TabsPopOutController] heightNum isNaN:', Number.isNaN(heightNum));
+                if (!Number.isNaN(widthNum) && !Number.isNaN(heightNum)) {
+                    panel.panelWidth = widthNum;
+                    panel.panelHeight = heightNum;
+                    console.log('[TabsPopOutController] ✓ Set panel.panelWidth:', panel.panelWidth);
+                    console.log('[TabsPopOutController] ✓ Set panel.panelHeight:', panel.panelHeight);
+                }
+                else {
+                    console.warn('[TabsPopOutController] ✗ Could not set numeric dimensions - NaN detected');
+                }
+            }
+            // Set boolean properties via both property and attribute to ensure they take effect
+            const resizable = (_e = config.resizable) !== null && _e !== void 0 ? _e : true;
+            const draggable = (_f = config.draggable) !== null && _f !== void 0 ? _f : true;
+            const closable = (_g = config.closable) !== null && _g !== void 0 ? _g : true;
+            const minimizable = (_h = config.minimizable) !== null && _h !== void 0 ? _h : true;
+            panel.resizable = resizable;
+            panel.draggable = draggable;
+            panel.closable = closable;
+            panel.minimizable = minimizable;
+            // Also set as attributes for boolean properties
+            if (resizable)
+                panel.setAttribute('resizable', '');
+            if (draggable)
+                panel.setAttribute('draggable', '');
+            if (closable)
+                panel.setAttribute('closable', '');
+            if (minimizable)
+                panel.setAttribute('minimizable', '');
+            // Set content - handle both HTML strings and template results
+            if (poppedOutTab.tab.content) {
+                if (typeof poppedOutTab.tab.content === 'string') {
+                    panel.innerHTML = poppedOutTab.tab.content;
+                }
+                else {
+                    // For Lit template results, create a container and render
+                    const container = document.createElement('div');
+                    container.style.height = '100%';
+                    container.style.width = '100%';
+                    panel.appendChild(container);
+                    // Import render from lit-html for template results
+                    try {
+                        const { render } = yield import('lit');
+                        render(poppedOutTab.tab.content, container);
+                    }
+                    catch (error) {
+                        console.warn('[TabsPopOutController] Could not render template content:', error);
+                        container.textContent = 'Content could not be rendered';
+                    }
+                }
+            }
+            // Add event listeners
+            panel.addEventListener('panel-close', () => {
+                this.popInTab(poppedOutTab.popOutId);
+            });
+            panel.addEventListener('panel-minimize', () => {
+                console.log('Pop-out panel minimized:', poppedOutTab.tab.label);
+                // For embedded panels that were maximized, minimize means restore to embedded
+                // which will pop the tab back in
+                if (isHostEmbedded) {
+                    this.popInTab(poppedOutTab.popOutId);
+                }
+            });
+            // Listen for restore events (when user clicks "Restore to tabs" button)
+            panel.addEventListener('panel-restore', (e) => {
+                console.log('[TabsPopOutController] panel-restore event received for:', poppedOutTab.tab.label);
+                console.log('[TabsPopOutController] Event details:', e);
+                console.log('[TabsPopOutController] Pop-out ID:', poppedOutTab.popOutId);
+                this.popInTab(poppedOutTab.popOutId);
+            });
+            // Append to body or designated container
+            console.log('[TabsPopOutController] Before appendChild - panel.panelWidth:', panel.panelWidth, 'panel.panelHeight:', panel.panelHeight);
+            document.body.appendChild(panel);
+            console.log('[TabsPopOutController] After appendChild - panel.panelWidth:', panel.panelWidth, 'panel.panelHeight:', panel.panelHeight);
+            // Store panel reference
+            poppedOutTab.panelElement = panel;
+            // If the host is embedded, maximize the panel to window mode after it's been added to DOM
+            if (isHostEmbedded) {
+                // Wait for the panel to be fully initialized, then maximize it
+                setTimeout(() => {
+                    console.log('[TabsPopOutController] Before maximizeEmbedded - panel.panelWidth:', panel.panelWidth, 'panel.panelHeight:', panel.panelHeight);
+                    if (panel.maximizeEmbedded && typeof panel.maximizeEmbedded === 'function') {
+                        panel.maximizeEmbedded();
+                        console.log('[TabsPopOutController] After maximizeEmbedded called');
+                    }
+                    else {
+                        console.warn('[TabsPopOutController] maximizeEmbedded not available');
+                    }
+                }, 100);
+            }
+            console.log('[TabsPopOutController] === DIMENSION FLOW END ===');
+            // Debug: Check panel properties after a short delay to ensure it's fully initialized
+            setTimeout(() => {
+                var _a;
+                console.log('Panel debug info:', {
+                    label: poppedOutTab.tab.label,
+                    mode: panel.mode,
+                    minimizable: panel.minimizable,
+                    isMaximizedFromEmbedded: panel.isMaximizedFromEmbedded,
+                    hasMinimizeButton: !!((_a = panel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button[title="Minimize"]')),
+                    panelElement: panel
+                });
+            }, 200);
+        });
+    }
+    /**
+     * Destroy window panel
+     */
+    destroyWindowPanel(poppedOutTab) {
+        if (poppedOutTab.panelElement) {
+            poppedOutTab.panelElement.remove();
+            poppedOutTab.panelElement = undefined;
+        }
+    }
+    /**
+     * Clean up all popped-out tabs
+     */
+    cleanupPoppedOutTabs() {
+        this.poppedOutTabs.forEach(poppedOutTab => {
+            this.destroyWindowPanel(poppedOutTab);
+        });
+        this.poppedOutTabs.clear();
+    }
+    /**
+     * Get all currently popped-out tabs
+     */
+    getPoppedOutTabs() {
+        return Array.from(this.poppedOutTabs.values());
+    }
+    /**
+     * Check if any tabs are currently popped out
+     */
+    hasPopppedOutTabs() {
+        return this.poppedOutTabs.size > 0;
+    }
+    /**
+     * Handle tab removal - clean up if tab is popped out
+     */
+    handleTabRemoval(tabIndex) {
+        const tab = this.host.tabs[tabIndex];
+        if ((tab === null || tab === void 0 ? void 0 : tab.popOutState) === "placeholder" /* TabPopOutState.Placeholder */) {
+            // Find and clean up corresponding popped-out tab
+            const poppedOutTab = Array.from(this.poppedOutTabs.values())
+                .find(pot => pot.tab.id === tab.id);
+            if (poppedOutTab) {
+                this.destroyWindowPanel(poppedOutTab);
+                this.poppedOutTabs.delete(poppedOutTab.popOutId);
+            }
+        }
+    }
+    /**
+     * Public method to be called from tab component
+     */
+    handlePopOutRequest(tabIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.popOutTab(tabIndex);
+        });
+    }
+    /**
+     * Public method to be called from panel or placeholder
+     */
+    handlePopInRequest(popOutId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.popInTab(popOutId);
+        });
+    }
+}
+//# sourceMappingURL=popout.controller.js.map

package/dist/src/components/tabs/tabs.component.d.ts

@@ -7,7 +7,7 @@ import { LitElement, PropertyValueMap } from 'lit';
 import { TabOrientation, TabsAlign, TabSize, TabType, TabEditable, TabsPanelConfig, TabPopOutConfig, TabItem } from './tabs.types.js';
 import '../panel/index.js';
 import { type TabsKeyboardHost, type TabsDragDropHost, type TabsEditableHost, type TabsEventHost, type TabsPopOutHost } from './controllers/index.js';
-declare const NrTabsElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrTabsElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Versatile tabs component with support for multiple orientations, editable tabs, drag & drop, and optional panel wrapper.
  *
@@ -40,8 +40,13 @@ declare const NrTabsElement_base: (new (...args: any[]) => import("@nuralyui/com
  * @fires nr-tabs-panel-resize - Panel resized (when pannable)
  *
  * @slot default - Tab content
+ *
+ * @csspart tab-list - The tab labels row/column container
+ * @csspart tab - An individual tab label element
+ * @csspart tab-panel - The active tab content panel
  */
 export declare class NrTabsElement extends NrTabsElement_base implements TabsKeyboardHost, TabsDragDropHost, TabsEditableHost, TabsEventHost, TabsPopOutHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     /** Currently active tab index */
     activeTab: number;

package/dist/src/components/tabs/tabs.component.js

@@ -61,6 +61,10 @@ import { TabsKeyboardController, TabsDragDropController, TabsEditableController,
  * @fires nr-tabs-panel-resize - Panel resized (when pannable)
  *
  * @slot default - Tab content
+ *
+ * @csspart tab-list - The tab labels row/column container
+ * @csspart tab - An individual tab label element
+ * @csspart tab-panel - The active tab content panel
  */
 let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -138,6 +142,7 @@ let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
         data-type="${this.variant}"
       >
         <div
+          part="tab-list"
           class="tab-labels"
           style="flex-direction: ${this.orientation === "vertical" /* TabOrientation.Vertical */ ? 'column' : 'row'}"
         >
@@ -145,7 +150,7 @@ let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
           ${this.renderTabs()}
           <div></div>
         </div>
-        <div class="tab-content" part="tab-content" role="tabpanel">
+        <div class="tab-content" part="tab-panel" role="tabpanel">
           ${this.renderActiveTab()}
         </div>
       </div>
@@ -273,6 +278,7 @@ let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
             const isMiddleTab = !isFirstTab && !isLastTab && !isSingleTab;
             const tabElement = html `
         <div
+          part="tab"
           data-index=${tabIndex}
           draggable=${this.dragDropController.getDraggableState() ? 'true' : 'false'}
           @dragenter=${(e) => this.dragDropController.handleDragEnter(e)}
@@ -417,6 +423,7 @@ let NrTabsElement = class NrTabsElement extends NuralyUIBaseMixin(LitElement) {
         });
     }
 };
+NrTabsElement.useShadowDom = true;
 NrTabsElement.styles = styles;
 __decorate([
     property({ type: Number })