mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/tabs/features.d.ts

@@ -1,5 +1,5 @@
-import { TabConfig, TabComponent } from "./types";
-import { TabIndicator } from "./indicator";
+import { TabConfig, TabComponent } from "./types.js";
+import { TabIndicator } from "./indicator.js";
 interface ComponentBase {
     element: HTMLElement;
     getClass: (name: string) => string;

package/dist/components/tabs/features.js

@@ -0,0 +1,179 @@
+import { createTab } from "./tab.js";
+import { updateTabPanels } from "./utils.js";
+import { createTabIndicator } from "./indicator.js";
+export const withTabsManagement = (config) => (component) => {
+    const tabs = [];
+    const tabsContainer = component.scrollContainer || component.element;
+    if (Array.isArray(config.tabs)) {
+        config.tabs.forEach((tabConfig) => {
+            const mergedConfig = {
+                ...tabConfig,
+                prefix: config.prefix,
+                variant: tabConfig.variant || config.variant,
+            };
+            const tab = createTab(mergedConfig);
+            tabs.push(tab);
+            tabsContainer.appendChild(tab.element);
+        });
+    }
+    const getTabs = () => {
+        return [...tabs];
+    };
+    const getActiveTab = () => {
+        return tabs.find((tab) => tab.isActive()) || null;
+    };
+    const handleTabClick = (event, tab) => {
+        if (event && typeof event.preventDefault === "function") {
+            event.preventDefault();
+        }
+        if (tab.disabled &&
+            tab.disabled.isDisabled &&
+            tab.disabled.isDisabled()) {
+            return;
+        }
+        tabs.forEach((t) => t.deactivate());
+        tab.activate();
+        const value = tab.getValue();
+        updateTabPanels({
+            tabs,
+            getActiveTab: () => tabs.find((t) => t.isActive()) || null,
+        });
+        if (typeof component["emit"] === "function") {
+            component["emit"]("change", {
+                tab,
+                value,
+            });
+        }
+    };
+    tabs.forEach((tab) => {
+        if (tab.on && typeof tab.on === "function") {
+            tab.on("click", (event) => handleTabClick(event, tab));
+        }
+        tab.element.addEventListener("click", (event) => handleTabClick(event, tab));
+    });
+    return {
+        ...component,
+        tabs,
+        tabsContainer,
+        handleTabClick,
+        getTabs,
+        getActiveTab,
+    };
+};
+export const withScrollable = (config) => (component) => {
+    if (config.scrollable === false) {
+        return component;
+    }
+    component.element.classList.add(`${component.getClass("tabs")}--scrollable`);
+    const scrollContainer = document.createElement("div");
+    scrollContainer.className = `${component.getClass("tabs")}-scroll`;
+    while (component.element.firstChild) {
+        scrollContainer.appendChild(component.element.firstChild);
+    }
+    component.element.appendChild(scrollContainer);
+    return {
+        ...component,
+        scrollContainer,
+    };
+};
+export const withDivider = (config) => (component) => {
+    if (config.showDivider === false) {
+        return component;
+    }
+    const divider = document.createElement("div");
+    divider.className = `${component.getClass("tabs")}-divider`;
+    component.element.appendChild(divider);
+    return component;
+};
+export const withIndicator = (config) => (component) => {
+    const indicatorConfig = config.indicator || {};
+    const indicator = createTabIndicator({
+        prefix: config.prefix,
+        widthStrategy: indicatorConfig.widthStrategy ||
+            config.indicatorWidthStrategy ||
+            "auto",
+        height: indicatorConfig.height || config.indicatorHeight || 3,
+        fixedWidth: indicatorConfig.fixedWidth || 40,
+        animationDuration: indicatorConfig.animationDuration || 250,
+        animationTiming: indicatorConfig.animationTiming || "cubic-bezier(0.4, 0, 0.2, 1)",
+        color: indicatorConfig.color,
+        variant: config.variant ?? "primary",
+    });
+    const scrollContainer = component.scrollContainer || component.element;
+    if (!scrollContainer) {
+        console.error("No scroll container found - cannot add indicator");
+        throw new Error("Failed to create tabs: No scroll container found");
+    }
+    scrollContainer.appendChild(indicator.element);
+    const originalHandleTabClick = component.handleTabClick;
+    component.handleTabClick = function (event, tab) {
+        if (tab.disabled &&
+            tab.disabled.isDisabled &&
+            tab.disabled.isDisabled()) {
+            return;
+        }
+        originalHandleTabClick.call(this, event, tab);
+        setTimeout(() => {
+            indicator.moveToTab(tab);
+        }, 10);
+    };
+    setTimeout(() => {
+        const activeTab = component.tabs.find((tab) => tab.isActive());
+        if (activeTab) {
+            indicator.moveToTab(activeTab, true);
+        }
+    }, 50);
+    const scrollHandler = () => {
+        const activeTab = component.tabs.find((tab) => tab.isActive());
+        if (activeTab) {
+            indicator.moveToTab(activeTab, true);
+        }
+    };
+    if (scrollContainer) {
+        scrollContainer.addEventListener("scroll", scrollHandler);
+    }
+    const resizeObserver = new ResizeObserver(() => {
+        const activeTab = component.tabs.find((tab) => tab.isActive());
+        if (activeTab) {
+            indicator.moveToTab(activeTab, true);
+        }
+    });
+    resizeObserver.observe(scrollContainer);
+    const mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === "attributes" &&
+                mutation.attributeName === "class" &&
+                mutation.target.classList.contains(`${config.prefix}-tab--active`)) {
+                const tabElement = mutation.target;
+                const activeTab = component.tabs.find((tab) => tab.element === tabElement);
+                if (activeTab) {
+                    indicator.moveToTab(activeTab);
+                }
+            }
+        }
+    });
+    if (Array.isArray(component.tabs)) {
+        component.tabs.forEach((tab) => {
+            if (tab.element) {
+                mutationObserver.observe(tab.element, { attributes: true });
+            }
+        });
+    }
+    const originalDestroy = component.destroy || (() => { });
+    component.destroy = function () {
+        indicator.destroy();
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+        if (scrollContainer) {
+            scrollContainer.removeEventListener("scroll", scrollHandler);
+        }
+        if (typeof originalDestroy === "function") {
+            originalDestroy.call(this);
+        }
+    };
+    return {
+        ...component,
+        indicator,
+        getIndicator: () => indicator,
+    };
+};

package/dist/components/tabs/index.d.ts

@@ -1,11 +1,12 @@
-import createTabs from "./tabs";
-import { addScrollIndicators } from "./scroll-indicators";
-import { setupResponsiveBehavior } from "./responsive";
-import { createTabsState } from "./state";
-import { createTabIndicator } from "./indicator";
-import { updateTabPanels, setupKeyboardNavigation } from "./utils";
-export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants";
-export { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig, } from "./types";
+import createTabs from "./tabs.js";
+import { addScrollIndicators } from "./scroll-indicators.js";
+import { setupResponsiveBehavior } from "./responsive.js";
+import { createTabsState } from "./state.js";
+import { createTabIndicator } from "./indicator.js";
+import { updateTabPanels, setupKeyboardNavigation } from "./utils.js";
+export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants.js";
+export type { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig, } from "./types.js";
 export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation, };
-export { withTabsManagement, withScrollable, withDivider, withIndicator, TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent, } from "./features";
+export { withTabsManagement, withScrollable, withDivider, withIndicator } from "./features.js";
+export type { TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent } from "./features.js";
 export default createTabs;

package/dist/components/tabs/index.js

@@ -0,0 +1,10 @@
+import createTabs from "./tabs.js";
+import { addScrollIndicators } from "./scroll-indicators.js";
+import { setupResponsiveBehavior } from "./responsive.js";
+import { createTabsState } from "./state.js";
+import { createTabIndicator } from "./indicator.js";
+import { updateTabPanels, setupKeyboardNavigation } from "./utils.js";
+export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants.js";
+export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation, };
+export { withTabsManagement, withScrollable, withDivider, withIndicator } from "./features.js";
+export default createTabs;

package/dist/components/tabs/indicator.d.ts

@@ -1,4 +1,4 @@
-import { TabComponent } from './types';
+import { TabComponent } from "./types.js";
 /**
  * Configuration for tab indicator
  */

package/dist/components/tabs/indicator.js

@@ -0,0 +1,134 @@
+const DEFAULT_CONFIG = {
+    widthStrategy: 'auto',
+    fixedWidth: 40,
+    animationDuration: 250,
+    animationTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    visible: true,
+    prefix: 'mtrl',
+    variant: 'primary'
+};
+export const createTabIndicator = (config = {}) => {
+    const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+    const prefix = mergedConfig.prefix || 'mtrl';
+    const element = document.createElement('div');
+    element.className = `${prefix}-tabs-indicator`;
+    element.style.transition = `transform ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}, 
+                             width ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}`;
+    element.style.width = `${mergedConfig.fixedWidth}px`;
+    if (!mergedConfig.visible) {
+        element.style.opacity = '0';
+    }
+    let currentTab = null;
+    const calculateWidth = (tab) => {
+        if (mergedConfig.widthStrategy === 'auto') {
+            if (mergedConfig.variant === 'secondary') {
+                return tab.element.offsetWidth;
+            }
+            const textElement = tab.element.querySelector(`.${prefix}-tab-text`) ||
+                tab.element.querySelector(`.${prefix}-button-text`);
+            if (textElement) {
+                return textElement.clientWidth;
+            }
+            return Math.max(tab.element.offsetWidth / 2, 30);
+        }
+        switch (mergedConfig.widthStrategy) {
+            case 'dynamic':
+                return Math.max(tab.element.offsetWidth / 2, 30);
+            case 'content':
+                const text = tab.element.querySelector(`.${prefix}-button-text`) ||
+                    tab.element.querySelector(`.${prefix}-tab-text`);
+                if (text) {
+                    return Math.max(text.clientWidth, 30);
+                }
+                return mergedConfig.fixedWidth || 40;
+            case 'fixed':
+            default:
+                return mergedConfig.fixedWidth || 40;
+        }
+    };
+    const getTabPosition = (tabElement) => {
+        const scrollContainer = tabElement.parentElement;
+        if (!scrollContainer) {
+            console.error('Tab has no parent element, cannot position indicator');
+            return { left: 0, width: tabElement.offsetWidth };
+        }
+        const tabRect = tabElement.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
+        return {
+            left: tabRect.left - containerRect.left,
+            width: tabRect.width
+        };
+    };
+    const calculatePosition = (tab, indicatorWidth) => {
+        const { left, width: tabWidth } = getTabPosition(tab.element);
+        if (mergedConfig.variant !== 'secondary' &&
+            (mergedConfig.widthStrategy === 'auto' || mergedConfig.widthStrategy === 'content')) {
+            const textElement = tab.element.querySelector(`.${prefix}-tab-text`) ||
+                tab.element.querySelector(`.${prefix}-button-text`);
+            if (textElement) {
+                const textRect = textElement.getBoundingClientRect();
+                const tabRect = tab.element.getBoundingClientRect();
+                const textLeft = textRect.left - tabRect.left;
+                return {
+                    left: left + textLeft
+                };
+            }
+        }
+        if (indicatorWidth < tabWidth) {
+            return {
+                left: left + ((tabWidth - indicatorWidth) / 2)
+            };
+        }
+        return { left };
+    };
+    const moveToTab = (tab, immediate = false) => {
+        if (!tab || !tab.element) {
+            console.error('Invalid tab or tab has no element');
+            return;
+        }
+        currentTab = tab;
+        const width = calculateWidth(tab);
+        const { left } = calculatePosition(tab, width);
+        if (immediate) {
+            element.style.transition = 'none';
+            element.offsetHeight;
+        }
+        element.style.width = `${width}px`;
+        element.style.transform = `translateX(${left}px)`;
+        if (immediate) {
+            setTimeout(() => {
+                element.style.transition = `transform ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}, 
+                                   width ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}`;
+            }, 10);
+        }
+    };
+    const update = () => {
+        if (currentTab) {
+            moveToTab(currentTab, true);
+        }
+    };
+    const show = () => {
+        element.style.opacity = '1';
+    };
+    const hide = () => {
+        element.style.opacity = '0';
+    };
+    const setColor = (color) => {
+        element.style.backgroundColor = color;
+    };
+    const destroy = () => {
+        if (element.parentNode) {
+            element.parentNode.removeChild(element);
+        }
+        currentTab = null;
+    };
+    return {
+        element,
+        moveToTab,
+        show,
+        hide,
+        setColor,
+        update,
+        destroy
+    };
+};

package/dist/components/tabs/responsive.d.ts

@@ -1,4 +1,4 @@
-import { TabsComponent } from './types';
+import { TabsComponent } from "./types.js";
 /**
  * Breakpoints for responsive behavior
  */

package/dist/components/tabs/responsive.js

@@ -0,0 +1,72 @@
+export const RESPONSIVE_BREAKPOINTS = {
+    SMALL: 600,
+    MEDIUM: 904,
+    LARGE: 1240
+};
+export const setupResponsiveBehavior = (tabs, config = {}) => {
+    if (config.responsive === false)
+        return;
+    const breakpoints = {
+        small: config.breakpoints?.small || RESPONSIVE_BREAKPOINTS.SMALL,
+        medium: config.breakpoints?.medium || RESPONSIVE_BREAKPOINTS.MEDIUM,
+        large: config.breakpoints?.large || RESPONSIVE_BREAKPOINTS.LARGE
+    };
+    const smallScreen = {
+        layout: config.smallScreen?.layout || 'icon-only',
+        maxVisibleTabs: config.smallScreen?.maxVisibleTabs || 4
+    };
+    const originalLayouts = new Map();
+    const allTabs = tabs.getTabs();
+    allTabs.forEach(tab => {
+        let layout = 'text-only';
+        if (tab.getIcon() && tab.getText()) {
+            layout = 'icon-and-text';
+        }
+        else if (tab.getIcon()) {
+            layout = 'icon-only';
+        }
+        originalLayouts.set(tab, layout);
+    });
+    const updateLayout = () => {
+        const width = window.innerWidth;
+        if (width < breakpoints.small) {
+            allTabs.forEach(tab => {
+                if (smallScreen.layout === 'icon-only' && !tab.getIcon()) {
+                    return;
+                }
+                if (smallScreen.layout === 'icon-only' && tab.getIcon()) {
+                    tab.element.classList.remove(`${tab.getClass('tab')}--icon-and-text`);
+                    tab.element.classList.remove(`${tab.getClass('tab')}--text-only`);
+                    tab.element.classList.add(`${tab.getClass('tab')}--icon-only`);
+                }
+                else if (smallScreen.layout === 'text-only') {
+                    tab.element.classList.remove(`${tab.getClass('tab')}--icon-and-text`);
+                    tab.element.classList.remove(`${tab.getClass('tab')}--icon-only`);
+                    tab.element.classList.add(`${tab.getClass('tab')}--text-only`);
+                }
+            });
+            tabs.element.classList.add(`${tabs.getClass('tabs')}--responsive-small`);
+        }
+        else {
+            allTabs.forEach(tab => {
+                const originalLayout = originalLayouts.get(tab) || 'text-only';
+                tab.element.classList.remove(`${tab.getClass('tab')}--icon-only`);
+                tab.element.classList.remove(`${tab.getClass('tab')}--text-only`);
+                tab.element.classList.remove(`${tab.getClass('tab')}--icon-and-text`);
+                tab.element.classList.add(`${tab.getClass('tab')}--${originalLayout}`);
+            });
+            tabs.element.classList.remove(`${tabs.getClass('tabs')}--responsive-small`);
+        }
+    };
+    updateLayout();
+    const resizeObserver = new ResizeObserver(updateLayout);
+    resizeObserver.observe(document.body);
+    tabs._resizeObserver = resizeObserver;
+    const originalDestroy = tabs.destroy;
+    tabs.destroy = function () {
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+        originalDestroy.call(this);
+    };
+};

package/dist/components/tabs/scroll-indicators.d.ts

@@ -1,4 +1,4 @@
-import { TabsComponent } from './types';
+import { TabsComponent } from "./types.js";
 /**
  * Configuration for scroll indicators
  */

package/dist/components/tabs/scroll-indicators.js

@@ -0,0 +1,83 @@
+export const addScrollIndicators = (tabs, config = {}) => {
+    const { enabled = true, showButtons = false, appearance = 'fade' } = config;
+    if (!enabled)
+        return;
+    const scrollContainer = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll`);
+    if (!scrollContainer)
+        return;
+    const leftIndicator = document.createElement('div');
+    leftIndicator.className = `${tabs.getClass('tabs')}-scroll-indicator ${tabs.getClass('tabs')}-scroll-indicator--left`;
+    leftIndicator.classList.add(`${tabs.getClass('tabs')}-scroll-indicator--${appearance}`);
+    const rightIndicator = document.createElement('div');
+    rightIndicator.className = `${tabs.getClass('tabs')}-scroll-indicator ${tabs.getClass('tabs')}-scroll-indicator--right`;
+    rightIndicator.classList.add(`${tabs.getClass('tabs')}-scroll-indicator--${appearance}`);
+    tabs.element.appendChild(leftIndicator);
+    tabs.element.appendChild(rightIndicator);
+    if (showButtons) {
+        const leftButton = document.createElement('button');
+        leftButton.className = `${tabs.getClass('tabs')}-scroll-button ${tabs.getClass('tabs')}-scroll-button--left`;
+        leftButton.setAttribute('aria-label', 'Scroll tabs left');
+        leftButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>';
+        const rightButton = document.createElement('button');
+        rightButton.className = `${tabs.getClass('tabs')}-scroll-button ${tabs.getClass('tabs')}-scroll-button--right`;
+        rightButton.setAttribute('aria-label', 'Scroll tabs right');
+        rightButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>';
+        tabs.element.appendChild(leftButton);
+        tabs.element.appendChild(rightButton);
+        leftButton.addEventListener('click', () => {
+            scrollContainer.scrollBy({
+                left: -100,
+                behavior: 'smooth'
+            });
+        });
+        rightButton.addEventListener('click', () => {
+            scrollContainer.scrollBy({
+                left: 100,
+                behavior: 'smooth'
+            });
+        });
+    }
+    const updateIndicators = () => {
+        const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+        leftIndicator.classList.toggle('visible', scrollLeft > 0);
+        rightIndicator.classList.toggle('visible', scrollLeft + clientWidth < scrollWidth - 1);
+        if (showButtons) {
+            const leftButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--left`);
+            const rightButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--right`);
+            if (leftButton) {
+                leftButton.disabled = scrollLeft <= 0;
+            }
+            if (rightButton) {
+                rightButton.disabled = scrollLeft + clientWidth >= scrollWidth - 1;
+            }
+        }
+    };
+    updateIndicators();
+    scrollContainer.addEventListener('scroll', updateIndicators);
+    const resizeObserver = new ResizeObserver(updateIndicators);
+    resizeObserver.observe(scrollContainer);
+    const originalDestroy = tabs.destroy;
+    tabs.destroy = function () {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+        scrollContainer.removeEventListener('scroll', updateIndicators);
+        if (leftIndicator.parentNode) {
+            leftIndicator.parentNode.removeChild(leftIndicator);
+        }
+        if (rightIndicator.parentNode) {
+            rightIndicator.parentNode.removeChild(rightIndicator);
+        }
+        if (showButtons) {
+            const leftButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--left`);
+            const rightButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--right`);
+            if (leftButton && leftButton.parentNode) {
+                leftButton.parentNode.removeChild(leftButton);
+            }
+            if (rightButton && rightButton.parentNode) {
+                rightButton.parentNode.removeChild(rightButton);
+            }
+        }
+        originalDestroy.call(this);
+    };
+};

package/dist/components/tabs/state.d.ts

@@ -1,5 +1,5 @@
-import { TabComponent } from './types';
-import { TabIndicator } from './indicator';
+import { TabComponent } from "./types.js";
+import { TabIndicator } from "./indicator.js";
 /**
  * State manager for MD3 tab states
  * Handles proper state transitions between tabs

package/dist/components/tabs/state.js

@@ -0,0 +1,84 @@
+export const createTabsState = (options) => {
+    const { tabs = [], onChange, indicator } = options;
+    let activeTab = null;
+    const initialActiveTab = tabs.find(tab => tab.isActive());
+    if (initialActiveTab) {
+        activeTab = initialActiveTab;
+        if (indicator) {
+            setTimeout(() => {
+                indicator.moveToTab(initialActiveTab, true);
+            }, 50);
+        }
+    }
+    const addRippleEffect = (tab) => {
+        if (!tab.element)
+            return;
+        const ripple = tab.element.querySelector(`.${tab.getClass('tab')}-ripple`);
+        if (!ripple)
+            return;
+        const rippleElement = document.createElement('span');
+        rippleElement.className = 'ripple';
+        rippleElement.style.width = '100%';
+        rippleElement.style.height = '100%';
+        rippleElement.style.left = '0';
+        rippleElement.style.top = '0';
+        rippleElement.style.animation = 'ripple-effect 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
+        ripple.appendChild(rippleElement);
+        setTimeout(() => {
+            rippleElement.remove();
+        }, 400);
+    };
+    const activateTab = (tab, immediate = false) => {
+        if (!tab || (activeTab === tab))
+            return;
+        if (activeTab) {
+            activeTab.deactivate();
+        }
+        tab.activate();
+        activeTab = tab;
+        if (indicator) {
+            setTimeout(() => {
+                indicator.moveToTab(tab, immediate);
+            }, 10);
+        }
+        if (!immediate) {
+            addRippleEffect(tab);
+        }
+        if (onChange) {
+            onChange({
+                tab,
+                value: tab.getValue()
+            });
+        }
+    };
+    const getActiveTab = () => {
+        return activeTab;
+    };
+    const destroy = () => {
+        activeTab = null;
+    };
+    return {
+        activateTab,
+        getActiveTab,
+        destroy
+    };
+};
+export const addTabStateStyles = () => {
+    if (document.getElementById('tab-state-styles'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'tab-state-styles';
+    style.textContent = `
+    @keyframes ripple-effect {
+      0% {
+        transform: scale(0);
+        opacity: 0.2;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+    document.head.appendChild(style);
+};

package/dist/components/tabs/tab-api.d.ts

@@ -1,5 +1,5 @@
-import { TabComponent } from './types';
-import type { BadgeComponent } from '../badge';
+import { TabComponent } from "./types.js";
+import type { BadgeComponent } from "../badge/index.js";
 /**
  * API options for a Tab component
  */