mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/split-button/types.d.ts

@@ -0,0 +1,116 @@
+import type { MenuContent, MenuComponent } from "../menu/types.js";
+/** Visual style, the same set the button offers */
+export type SplitButtonVariant = "filled" | "tonal" | "outlined" | "elevated";
+/** Size, matching the button and icon button scale */
+export type SplitButtonSize = "xs" | "s" | "m" | "l" | "xl";
+/** Events the component emits */
+export type SplitButtonEventType = "click" | "expand" | "collapse" | "change" | "select";
+/** What an event handler receives */
+export interface SplitButtonEvent {
+    /** The component that emitted it */
+    splitButton: SplitButtonComponent;
+    /** Whether the trailing button is showing its menu */
+    expanded: boolean;
+    /** The DOM event behind it, when there was one */
+    originalEvent: Event | null;
+    /** The chosen item, on a `select` event */
+    item?: MenuContent;
+}
+/**
+ * Configuration for the split button
+ * @interface SplitButtonConfig
+ */
+export interface SplitButtonConfig {
+    /** Label of the leading button */
+    text?: string;
+    /** Icon of the leading button, as an HTML string */
+    icon?: string;
+    /** Visual style, shared by both buttons */
+    variant?: SplitButtonVariant;
+    /** Size of both buttons */
+    size?: SplitButtonSize;
+    /** Whether both buttons are disabled */
+    disabled?: boolean;
+    /**
+     * Accessible name of the trailing button. It should say that more choices
+     * are available and how they relate to the leading action, such as
+     * "More watch options" beside a "Watch later" button (M3 split button
+     * accessibility).
+     * @default 'More options'
+     */
+    trailingLabel?: string;
+    /** Accessible name of the leading button, when its label is not enough */
+    ariaLabel?: string;
+    /** Accessible name of the whole group */
+    groupLabel?: string;
+    /** What the leading button does */
+    onClick?: (event: SplitButtonEvent) => void;
+    /**
+     * Menu items for the trailing button to open. Without them the component
+     * only reports that the trailing button was activated, and the caller
+     * shows whatever it likes.
+     */
+    items?: MenuContent[];
+    /** Called with the chosen item when the component owns the menu */
+    onSelect?: (event: SplitButtonEvent) => void;
+    /** Additional CSS classes */
+    class?: string;
+    /** Component prefix for CSS class names */
+    prefix?: string;
+    /** Component name for CSS class names */
+    componentName?: string;
+    /** Event handlers */
+    on?: {
+        [key in SplitButtonEventType]?: (event: SplitButtonEvent) => void;
+    };
+}
+/**
+ * The split button's public API
+ * @interface SplitButtonComponent
+ */
+export interface SplitButtonComponent {
+    /** The element holding both buttons */
+    element: HTMLElement;
+    /** The leading button's element */
+    leadingElement: HTMLButtonElement;
+    /** The trailing button's element */
+    trailingElement: HTMLButtonElement;
+    /** The menu, when the component was given items */
+    menu?: MenuComponent;
+    /** Sets the leading button's label */
+    setText: (text: string) => SplitButtonComponent;
+    /** The leading button's label */
+    getText: () => string;
+    /** Sets the leading button's icon */
+    setIcon: (icon: string) => SplitButtonComponent;
+    /** Opens whatever the trailing button opens */
+    expand: () => SplitButtonComponent;
+    /** Closes it */
+    collapse: () => SplitButtonComponent;
+    /** Whether it is open */
+    isExpanded: () => boolean;
+    /** Disables both buttons */
+    disable: () => SplitButtonComponent;
+    /** Enables both buttons */
+    enable: () => SplitButtonComponent;
+    /** Whether both buttons are disabled */
+    isDisabled: () => boolean;
+    /** Adds an event listener */
+    on: (event: SplitButtonEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonComponent;
+    /** Removes an event listener */
+    off: (event: SplitButtonEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonComponent;
+    /** Takes the component off the page and releases what it holds */
+    destroy: () => void;
+}
+/** The component as it passes through the enhancers */
+export interface BaseComponent {
+    element: HTMLElement;
+    emit?: (event: string, data?: unknown) => void;
+    on?: (event: string, handler: (...args: unknown[]) => void) => unknown;
+    off?: (event: string, handler: (...args: unknown[]) => void) => unknown;
+    getClass?: (name: string) => string;
+    lifecycle?: {
+        destroy?: () => void;
+    };
+    [key: string]: unknown;
+}

package/dist/components/split-button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/switch/api.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent, SwitchComponent, ApiOptions } from "./types";
+import { BaseComponent, SwitchComponent, ApiOptions } from "./types.js";
 /**
  * Enhances switch component with API methods
  * @param {ApiOptions} options - API configuration

package/dist/components/switch/api.js

@@ -0,0 +1,91 @@
+export const withAPI = ({ disabled, lifecycle, checkable }) => (component) => ({
+    ...component,
+    element: component.element,
+    input: component.input,
+    getValue() {
+        return checkable.isChecked();
+    },
+    setValue(value) {
+        if (typeof value === "boolean") {
+            if (value) {
+                checkable.check();
+            }
+            else {
+                checkable.uncheck();
+            }
+        }
+        else if (typeof value === "string") {
+            const shouldCheck = value === "true" || value === "1";
+            if (shouldCheck) {
+                checkable.check();
+            }
+            else {
+                checkable.uncheck();
+            }
+        }
+        return this;
+    },
+    getValueAttribute() {
+        return component.input?.value || "";
+    },
+    setValueAttribute(value) {
+        if (component.input) {
+            component.input.value = value;
+        }
+        return this;
+    },
+    check() {
+        checkable.check();
+        return this;
+    },
+    uncheck() {
+        checkable.uncheck();
+        return this;
+    },
+    toggle() {
+        checkable.toggle();
+        return this;
+    },
+    isChecked() {
+        return checkable.isChecked();
+    },
+    setLabel(text) {
+        component.text?.setText(text);
+        return this;
+    },
+    getLabel() {
+        return component.text?.getText() || "";
+    },
+    supportingTextElement: component.supportingTextElement || null,
+    setSupportingText(text, isError) {
+        if (component.setSupportingText) {
+            component.setSupportingText(text, isError);
+        }
+        return this;
+    },
+    removeSupportingText() {
+        if (component.removeSupportingText) {
+            component.removeSupportingText();
+        }
+        return this;
+    },
+    on(event, handler) {
+        component.on?.(event, handler);
+        return this;
+    },
+    off(event, handler) {
+        component.off?.(event, handler);
+        return this;
+    },
+    enable() {
+        disabled.enable();
+        return this;
+    },
+    disable() {
+        disabled.disable();
+        return this;
+    },
+    destroy() {
+        lifecycle.destroy();
+    },
+});

package/dist/components/switch/config.d.ts

@@ -1,4 +1,4 @@
-import { SwitchConfig, BaseComponent, ApiOptions } from "./types";
+import { SwitchConfig, BaseComponent, ApiOptions } from "./types.js";
 /**
  * Default configuration for the Switch component
  */

package/dist/components/switch/config.js

@@ -0,0 +1,27 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+export const defaultConfig = {
+    prefix: "mtrl",
+    componentName: "switch",
+};
+export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "switch");
+export const getElementConfig = (config) => createElementConfig(config, {
+    tag: "div",
+    className: config.class,
+    interactive: true,
+});
+export const getApiConfig = (comp) => ({
+    disabled: {
+        enable: comp.disabled?.enable,
+        disable: comp.disabled?.disable,
+    },
+    lifecycle: {
+        destroy: comp.lifecycle?.destroy,
+    },
+    checkable: {
+        check: comp.checkable?.check,
+        uncheck: comp.checkable?.uncheck,
+        toggle: comp.checkable?.toggle,
+        isChecked: comp.checkable?.isChecked,
+    },
+});
+export default defaultConfig;

package/dist/components/switch/constants.js

@@ -0,0 +1,39 @@
+export const SWITCH_LABEL_POSITIONS = {
+    START: 'start',
+    END: 'end'
+};
+export const SWITCH_STATES = {
+    CHECKED: 'checked',
+    UNCHECKED: 'unchecked',
+    DISABLED: 'disabled',
+    ENABLED: 'enabled'
+};
+export const SWITCH_EVENTS = {
+    CHANGE: 'change',
+    FOCUS: 'focus',
+    BLUR: 'blur'
+};
+export const SWITCH_DEFAULTS = {
+    CHECKED: false,
+    DISABLED: false,
+    REQUIRED: false,
+    LABEL_POSITION: SWITCH_LABEL_POSITIONS.END,
+    VALUE: 'on'
+};
+export const SWITCH_CLASSES = {
+    ROOT: 'switch',
+    CONTAINER: 'switch-container',
+    CONTENT: 'switch-content',
+    LABEL: 'switch-label',
+    INPUT: 'switch-input',
+    TRACK: 'switch-track',
+    THUMB: 'switch-thumb',
+    LABEL_START: 'switch--label-start',
+    LABEL_END: 'switch--label-end',
+    CHECKED: 'switch--checked',
+    DISABLED: 'switch--disabled',
+    ERROR: 'switch--error',
+    HELPER: 'switch-helper',
+    HELPER_ERROR: 'switch-helper--error',
+    FOCUSED: 'switch--focused'
+};

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

@@ -1,6 +1,6 @@
-import { BaseComponent, ElementComponent } from "../../core/compose/component";
-import { TrackComponent } from "../../core/compose/features";
-import { SwitchConfig } from "./types";
+import { BaseComponent, ElementComponent } from "../../core/compose/component.js";
+import { TrackComponent } from "../../core/compose/features/index.js";
+import { SwitchConfig } from "./types.js";
 /**
  * Configuration for supporting text feature
  */

package/dist/components/switch/features.js

@@ -0,0 +1,101 @@
+import { withTrack as withTrackCore, } from "../../core/compose/features/index.js";
+const ensureSwitchStructure = (component, prefix, componentName) => {
+    const PREFIX = prefix || "mtrl";
+    const COMPONENT = componentName || "switch";
+    let container = component.element.querySelector(`.${PREFIX}-${COMPONENT}-container`);
+    if (!container) {
+        container = document.createElement("div");
+        container.className = `${PREFIX}-${COMPONENT}-container`;
+        const input = component.element.querySelector(`.${PREFIX}-${COMPONENT}-input`);
+        const track = component.element.querySelector(`.${PREFIX}-${COMPONENT}-track`);
+        const elementsToMove = [];
+        if (input)
+            elementsToMove.push(input);
+        if (track)
+            elementsToMove.push(track);
+        const contentWrapper = document.createElement("div");
+        contentWrapper.className = `${PREFIX}-${COMPONENT}-content`;
+        const label = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
+        if (label) {
+            contentWrapper.appendChild(label);
+        }
+        container.appendChild(contentWrapper);
+        elementsToMove.forEach((el) => container.appendChild(el));
+        component.element.appendChild(container);
+        return { container, contentWrapper };
+    }
+    let contentWrapper = component.element.querySelector(`.${PREFIX}-${COMPONENT}-content`);
+    if (!contentWrapper) {
+        contentWrapper = document.createElement("div");
+        contentWrapper.className = `${PREFIX}-${COMPONENT}-content`;
+        const label = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`);
+        if (label) {
+            contentWrapper.appendChild(label);
+        }
+        container.insertBefore(contentWrapper, container.firstChild);
+    }
+    return { container, contentWrapper };
+};
+export const withSupportingText = (config) => (component) => {
+    const PREFIX = config.prefix || "mtrl";
+    const COMPONENT = config.componentName || "switch";
+    const { contentWrapper } = ensureSwitchStructure(component, PREFIX, COMPONENT);
+    let supportingElement = null;
+    if (config.supportingText) {
+        supportingElement = document.createElement("div");
+        supportingElement.className = `${PREFIX}-${COMPONENT}-helper`;
+        supportingElement.textContent = config.supportingText;
+        if (config.error) {
+            supportingElement.classList.add(`${PREFIX}-${COMPONENT}-helper--error`);
+            component.element.classList.add(`${PREFIX}-${COMPONENT}--error`);
+        }
+        contentWrapper.appendChild(supportingElement);
+    }
+    if ("lifecycle" in component &&
+        component.lifecycle &&
+        typeof component.lifecycle === "object" &&
+        "destroy" in component.lifecycle &&
+        supportingElement) {
+        const originalDestroy = component.lifecycle.destroy;
+        component.lifecycle.destroy = () => {
+            if (supportingElement)
+                supportingElement.remove();
+            originalDestroy.call(component.lifecycle);
+        };
+    }
+    return {
+        ...component,
+        supportingTextElement: supportingElement,
+        setSupportingText(text, isError = false) {
+            const { contentWrapper } = ensureSwitchStructure(component, PREFIX, COMPONENT);
+            let supportingElement = this.supportingTextElement;
+            if (!supportingElement) {
+                supportingElement = document.createElement("div");
+                supportingElement.className = `${PREFIX}-${COMPONENT}-helper`;
+                contentWrapper.appendChild(supportingElement);
+                this.supportingTextElement = supportingElement;
+            }
+            supportingElement.textContent = text;
+            supportingElement.classList.toggle(`${PREFIX}-${COMPONENT}-helper--error`, isError);
+            component.element.classList.toggle(`${PREFIX}-${COMPONENT}--error`, isError);
+            return this;
+        },
+        removeSupportingText() {
+            if (this.supportingTextElement &&
+                this.supportingTextElement.parentNode) {
+                this.supportingTextElement.remove();
+                this.supportingTextElement = null;
+                component.element.classList.remove(`${PREFIX}-${COMPONENT}--error`);
+            }
+            return this;
+        },
+    };
+};
+export const withTrack = (config) => (component) => {
+    const trackConfig = {
+        ...config,
+        prefix: config.prefix || "mtrl",
+        componentName: config.componentName || "switch",
+    };
+    return withTrackCore(trackConfig)(component);
+};

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

@@ -1,4 +1,5 @@
-export { default } from './switch';
-export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from './constants';
-export { SwitchConfig, SwitchComponent } from './types';
-export { withSupportingText, SupportingTextComponent } from './features';
+export { default } from "./switch.js";
+export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./constants.js";
+export type { SwitchConfig, SwitchComponent } from "./types.js";
+export { withSupportingText } from "./features.js";
+export type { SupportingTextComponent } from "./features.js";

package/dist/components/switch/index.js

@@ -0,0 +1,3 @@
+export { default } from "./switch.js";
+export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./constants.js";
+export { withSupportingText } from "./features.js";

package/dist/components/switch/switch.d.ts

@@ -1,4 +1,4 @@
-import { SwitchConfig, SwitchComponent } from "./types";
+import { SwitchConfig, SwitchComponent } from "./types.js";
 /**
  * Creates a new Switch component
  * @param {SwitchConfig} config - Switch configuration

package/dist/components/switch/switch.js

@@ -0,0 +1,18 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withTextLabel, withDisabled, withLifecycle, withInput, withCheckable, } from "../../core/compose/features/index.js";
+import { withAPI } from "./api.js";
+import { withSupportingText, withTrack } from "./features.js";
+import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+const createSwitch = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    try {
+        const switchComponent = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withTextLabel(baseConfig), withInput(baseConfig), withTrack(baseConfig), withSupportingText(baseConfig), withCheckable(baseConfig), withDisabled(baseConfig), withLifecycle(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        return switchComponent;
+    }
+    catch (error) {
+        console.error("Switch creation error:", error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create switch: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};
+export default createSwitch;

package/dist/components/switch/types.js

@@ -0,0 +1,4 @@
+export const SWITCH_LABEL_POSITION = {
+    START: "start",
+    END: "end",
+};

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

@@ -1,4 +1,4 @@
-import { TabsComponent, TabComponent } from './types';
+import { TabsComponent, TabComponent } from "./types.js";
 /**
  * API options for a Tabs component
  */

package/dist/components/tabs/api.js

@@ -0,0 +1,98 @@
+import { createTab } from "./tab.js";
+export const withAPI = ({ lifecycle }) => (component) => ({
+    ...component,
+    element: component.element,
+    addTab(config) {
+        const mergedConfig = {
+            ...config,
+            prefix: component.config.prefix,
+            variant: config.variant || component.config.variant
+        };
+        if (mergedConfig.value === undefined) {
+            mergedConfig.value = '';
+        }
+        const tab = createTab(mergedConfig);
+        component.tabs.push(tab);
+        const targetContainer = component.tabsContainer;
+        targetContainer.appendChild(tab.element);
+        if (tab.on && typeof tab.on === 'function') {
+            tab.on('click', (event) => component.handleTabClick(event, tab));
+        }
+        tab.element.addEventListener('click', (event) => {
+            component.handleTabClick(event, tab);
+        });
+        return tab;
+    },
+    add(tab) {
+        component.tabs.push(tab);
+        const targetContainer = component.tabsContainer;
+        targetContainer.appendChild(tab.element);
+        if (tab.on && typeof tab.on === 'function') {
+            tab.on('click', (event) => component.handleTabClick(event, tab));
+        }
+        tab.element.addEventListener('click', (event) => {
+            component.handleTabClick(event, tab);
+        });
+        return this;
+    },
+    getTabs() {
+        return [...component.tabs];
+    },
+    getActiveTab() {
+        return component.tabs.find(tab => tab.isActive()) || null;
+    },
+    setActiveTab(tabOrValue) {
+        const targetTab = typeof tabOrValue === 'string'
+            ? component.tabs.find(tab => tab.getValue() === tabOrValue)
+            : tabOrValue;
+        if (!targetTab)
+            return this;
+        component.tabs.forEach(tab => tab.deactivate());
+        targetTab.activate();
+        if (component.emit) {
+            component.emit('change', {
+                tab: targetTab,
+                value: targetTab.getValue()
+            });
+        }
+        return this;
+    },
+    removeTab(tabOrValue) {
+        const targetTab = typeof tabOrValue === 'string'
+            ? component.tabs.find(tab => tab.getValue() === tabOrValue)
+            : tabOrValue;
+        if (!targetTab)
+            return this;
+        const index = component.tabs.indexOf(targetTab);
+        if (index !== -1) {
+            component.tabs.splice(index, 1);
+        }
+        if (targetTab.element.parentNode) {
+            targetTab.element.parentNode.removeChild(targetTab.element);
+        }
+        targetTab.destroy();
+        return this;
+    },
+    on(event, handler) {
+        if (component.on) {
+            component.on(event, handler);
+        }
+        return this;
+    },
+    off(event, handler) {
+        if (component.off) {
+            component.off(event, handler);
+        }
+        return this;
+    },
+    destroy() {
+        component.tabs.forEach(tab => tab.destroy());
+        component.tabs.length = 0;
+        lifecycle.destroy();
+    }
+});
+export const getApiConfig = (comp) => ({
+    lifecycle: {
+        destroy: () => comp.lifecycle.destroy()
+    }
+});

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

@@ -1,4 +1,4 @@
-import { TabConfig } from "./types";
+import { TabConfig } from "./types.js";
 /**
  * Default configuration for a Tab
  */
@@ -12,7 +12,7 @@ export declare const defaultTabsConfig: {
     showDivider: true;
     componentName: string;
 };
-export declare const createTabsConfig: (config?: {}) => import("../../core/config/component").BaseComponentConfig;
+export declare const createTabsConfig: (config?: {}) => import("../../core/config/component.js").BaseComponentConfig;
 /**
  * Creates the base configuration for a Tab
  * @param {TabConfig} config - User provided configuration

package/dist/components/tabs/config.js

@@ -0,0 +1,42 @@
+import { createComponentConfig } from "../../core/config/component.js";
+import { withElement } from "../../core/compose/component.js";
+import { TAB_STATES, TABS_DEFAULTS } from "./constants.js";
+export const defaultTabConfig = {
+    state: TAB_STATES.INACTIVE,
+    componentName: "tab",
+    ripple: TABS_DEFAULTS.RIPPLE,
+};
+export const defaultTabsConfig = {
+    variant: TABS_DEFAULTS.VARIANT,
+    scrollable: TABS_DEFAULTS.SCROLLABLE,
+    showDivider: TABS_DEFAULTS.SHOW_DIVIDER,
+    componentName: "tabs",
+};
+export const createTabsConfig = (config = {}) => createComponentConfig(defaultTabsConfig, config, "tabs");
+export const createTabConfig = (config = {}) => createComponentConfig(defaultTabConfig, config, "tab");
+export const getTabsElementConfig = (config) => {
+    const elementConfig = {
+        tag: "div",
+        attributes: {
+            role: "tablist",
+            "aria-orientation": "horizontal",
+        },
+        className: [
+            `${config.prefix}-tabs`,
+            `${config.prefix}-tabs--${config.variant || "primary"}`,
+            config.class,
+        ],
+    };
+    return (component) => withElement(elementConfig)(component);
+};
+export const getTabApiConfig = (comp) => ({
+    disabled: {
+        enable: () => comp.disabled.enable(),
+        disable: () => comp.disabled.disable(),
+        isDisabled: () => comp.disabled.isDisabled && comp.disabled.isDisabled(),
+    },
+    lifecycle: {
+        destroy: () => comp.lifecycle.destroy(),
+    },
+    button: comp.button,
+});

package/dist/components/tabs/constants.js

@@ -0,0 +1,62 @@
+export const TAB_VARIANTS = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary'
+};
+export const TAB_STATES = {
+    ACTIVE: 'active',
+    INACTIVE: 'inactive',
+    DISABLED: 'disabled'
+};
+export const TAB_INDICATOR_WIDTH_STRATEGIES = {
+    FIXED: 'fixed',
+    DYNAMIC: 'dynamic',
+    CONTENT: 'content',
+    AUTO: 'auto'
+};
+export const TAB_EVENTS = {
+    CLICK: 'click',
+    FOCUS: 'focus',
+    BLUR: 'blur'
+};
+export const TABS_EVENTS = {
+    CHANGE: 'change'
+};
+export const TABS_DEFAULTS = {
+    VARIANT: TAB_VARIANTS.PRIMARY,
+    SCROLLABLE: true,
+    SHOW_DIVIDER: true,
+    INDICATOR_HEIGHT: 3,
+    INDICATOR_WIDTH_STRATEGY: TAB_INDICATOR_WIDTH_STRATEGIES.AUTO,
+    INDICATOR_FIXED_WIDTH: 40,
+    INDICATOR_ANIMATION_DURATION: 250,
+    INDICATOR_ANIMATION_TIMING: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    ICON_SIZE: '24px',
+    RIPPLE: true
+};
+export const TAB_LAYOUT = {
+    ICON_ONLY: 'icon-only',
+    TEXT_ONLY: 'text-only',
+    ICON_AND_TEXT: 'icon-and-text'
+};
+export const TABS_CLASSES = {
+    ROOT: 'tabs',
+    PRIMARY: 'tabs--primary',
+    SECONDARY: 'tabs--secondary',
+    SCROLLABLE: 'tabs--scrollable',
+    SCROLL: 'tabs-scroll',
+    DIVIDER: 'tabs-divider',
+    INDICATOR: 'tabs-indicator'
+};
+export const TAB_CLASSES = {
+    ROOT: 'tab',
+    ACTIVE: 'tab--active',
+    INACTIVE: 'tab--inactive',
+    DISABLED: 'tab--disabled',
+    TEXT: 'tab-text',
+    ICON: 'tab-icon',
+    RIPPLE: 'tab-ripple',
+    PRIMARY: 'tab--primary',
+    SECONDARY: 'tab--secondary',
+    CONTAINER: 'tab-container',
+    BADGE: 'tab-badge'
+};