@sme.up/ketchup 11.0.0-SNAPSHOT-20241030162740 → 11.0.0-SNAPSHOT-20241031094059

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"kup-tab-bar.js","sourceRoot":"","sources":["../../../src/components/kup-tab-bar/kup-tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    VNode,\n    Watch,\n} from '@stencil/core';\nimport { MDCRipple } from '@material/ripple';\nimport {\n    KupTabBarNode,\n    KupTabBarEventPayload,\n    KupTabBarProps,\n} from './kup-tab-bar-declarations';\nimport {\n    KupManager,\n    kupManagerInstance,\n} from '../../managers/kup-manager/kup-manager';\nimport { GenericObject, KupComponent } from '../../types/GenericTypes';\nimport { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';\nimport { FImage } from '../../f-components/f-image/f-image';\nimport { KupScrollOnHoverElement } from '../../managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations';\nimport { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';\nimport { getProps, setProps } from '../../utils/utils';\nimport { componentWrapperId } from '../../variables/GenericVariables';\nimport {\n    KupDynamicPositionAnchor,\n    KupDynamicPositionElement,\n    KupDynamicPositionPlacement,\n} from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';\nimport { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations';\nimport { KupDataNode } from '../../managers/kup-data/kup-data-declarations';\nimport { KupToolbarItemClickEventPayload } from '../../components/kup-toolbar/kup-toolbar-declarations';\n\n@Component({\n    tag: 'kup-tab-bar',\n    styleUrl: 'kup-tab-bar.scss',\n    shadow: true,\n})\nexport class KupTabBar {\n    /**\n     * References the root HTML element of the component (<kup-tab-bar>).\n     */\n    @Element() rootElement: HTMLElement;\n\n    /*-------------------------------------------------*/\n    /*                   S t a t e s                   */\n    /*-------------------------------------------------*/\n\n    @State() value: string = '';\n\n    /*-------------------------------------------------*/\n    /*                    P r o p s                    */\n    /*-------------------------------------------------*/\n\n    /**\n     * Custom style of the component.\n     * @default \"\"\n     * @see https://smeup.github.io/ketchup/#/customization\n     */\n    @Prop() customStyle: string = '';\n    /**\n     * List of elements.\n     * @default null\n     */\n    @Prop() data: KupTabBarNode[] = null;\n    /**\n     * Defaults at false. When set to true, the component is dense.\n     * @default false\n     */\n    @Prop() dense: boolean = false;\n    /**\n     * When enabled displays Material's ripple effect on item headers.\n     * @default true\n     */\n    @Prop() ripple: boolean = false;\n    /**\n     * When enabled displays toolbar item inside each single tab.\n     * @default true\n     */\n    @Prop() toolbar: boolean = true;\n    /**\n     * Display DataNode Toolbar.\n     * @default null\n     */\n    @Prop() toolbarData: KupDataNode[];\n\n    /*-------------------------------------------------*/\n    /*       I n t e r n a l   V a r i a b l e s       */\n    /*-------------------------------------------------*/\n\n    /**\n     * Instance of the KupManager class.\n     */\n    private kupManager: KupManager = kupManagerInstance();\n    #clickCbDropCard: KupManagerClickCb = null;\n    /**\n     * Element scrollable on mouse hover.\n     */\n    private scrollArea: KupScrollOnHoverElement = null;\n    /**\n     * Toolbar List.\n     */\n    private toolbarList: KupDynamicPositionElement;\n\n    /*-------------------------------------------------*/\n    /*                   E v e n t s                   */\n    /*-------------------------------------------------*/\n    /**\n     * Triggered when the tab loses focus.\n     */\n    @Event({\n        eventName: 'kup-tabbar-blur',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupBlur: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when the tab is clicked.\n     */\n    @Event({\n        eventName: 'kup-tabbar-click',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupClick: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when the icon inside tab is clicked.\n     */\n    @Event({\n        eventName: 'kup-tabbar-iconclick',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupIconClick: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when the tab is focused.\n     */\n    @Event({\n        eventName: 'kup-tabbar-focus',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupFocus: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when a list item is clicked.\n     */\n    @Event({\n        eventName: 'kup-tabbar-itemclick',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupItemClick: EventEmitter<KupToolbarItemClickEventPayload>;\n\n    #dropDownActionCardAnchor: HTMLElement = null;\n\n    onKupBlur(i: number, node: KupTabBarNode) {\n        this.kupBlur.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n    }\n\n    onKupClick(i: number, node: KupTabBarNode) {\n        for (let i = 0; i < this.data.length; i++) {\n            this.data[i].active = false;\n        }\n        this.data[i].active = true;\n        this.value = node.id;\n\n        this.kupClick.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n    }\n\n    onKupIconClick(i: number, node: KupTabBarNode, el: HTMLElement) {\n        this.#dropDownActionCardAnchor = el;\n        this.kupIconClick.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n        this.createDropDownToolbarList();\n    }\n\n    onKupFocus(i: number, node: KupTabBarNode) {\n        this.kupFocus.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n    }\n\n    onKupToolbarItemClick(e: CustomEvent) {\n        this.kupItemClick.emit({\n            comp: this,\n            id: this.rootElement.id,\n            value: this.value,\n            node: e.detail.selected,\n        });\n    }\n\n    /*-------------------------------------------------*/\n    /*                  W a t c h e r s                */\n    /*-------------------------------------------------*/\n\n    @Watch('ripple')\n    applyRipple() {\n        const root = this.rootElement.shadowRoot;\n        if (root && this.ripple) {\n            const rippleCells = root.querySelectorAll(\n                '.mdc-ripple-surface:not(.mdc-ripple-upgraded)'\n            );\n            if (rippleCells) {\n                for (let i = 0; i < rippleCells.length; i++) {\n                    MDCRipple.attachTo(rippleCells[i]);\n                }\n            }\n        }\n    }\n\n    /*-------------------------------------------------*/\n    /*           P u b l i c   M e t h o d s           */\n    /*-------------------------------------------------*/\n\n    /**\n     * Used to retrieve component's props values.\n     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.\n     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.\n     */\n    @Method()\n    async getProps(descriptions?: boolean): Promise<GenericObject> {\n        return getProps(this, KupTabBarProps, descriptions);\n    }\n    /**\n     * Returns the selected node.\n     * @returns {Promise<KupTabBarNode>} Selected node.\n     */\n    @Method()\n    async getSelectedNode(): Promise<KupTabBarNode> {\n        let res: KupTabBarNode = null;\n        this.data.forEach((node) => {\n            if (node.id === this.value) {\n                res = node;\n            }\n        });\n        return res;\n    }\n    /**\n     * This method is used to trigger a new render of the component.\n     */\n    @Method()\n    async refresh(): Promise<void> {\n        forceUpdate(this);\n    }\n    /**\n     * Sets the props to the component.\n     * @param {GenericObject} props - Object containing props that will be set to the component.\n     */\n    @Method()\n    async setProps(props: GenericObject): Promise<void> {\n        setProps(this, KupTabBarProps, props);\n    }\n\n    /*-------------------------------------------------*/\n    /*           P r i v a t e   M e t h o d s         */\n    /*-------------------------------------------------*/\n\n    closeRowToolbarList() {\n        if (this.toolbarList) {\n            this.kupManager.dynamicPosition.stop(\n                this.toolbarList as KupDynamicPositionElement\n            );\n            this.kupManager.removeClickCallback(this.#clickCbDropCard);\n            this.toolbarList.remove();\n            this.toolbarList = null;\n        }\n    }\n\n    createDropDownToolbarList() {\n        if (this.toolbarList) {\n            this.closeRowToolbarList();\n        }\n        const listEl = document.createElement('kup-toolbar');\n        listEl.data = this.toolbarData;\n        listEl.addEventListener('kup-toolbar-click', (e: CustomEvent) => {\n            this.onKupToolbarItemClick(e);\n            setTimeout(() => {\n                this.closeRowToolbarList();\n            }, 0);\n        });\n        this.toolbarList = listEl;\n        this.#clickCbDropCard = {\n            cb: () => {\n                this.closeRowToolbarList();\n            },\n            el: this.toolbarList,\n        };\n\n        this.kupManager.addClickCallback(this.#clickCbDropCard, true);\n        this.rootElement.shadowRoot.appendChild(this.toolbarList);\n        requestAnimationFrame(() => {\n            this.kupManager.dynamicPosition.register(\n                this.toolbarList as unknown as KupDynamicPositionElement,\n                this.#dropDownActionCardAnchor as KupDynamicPositionAnchor,\n                0,\n                KupDynamicPositionPlacement.AUTO,\n                true\n            );\n            this.kupManager.dynamicPosition.start(\n                this.toolbarList as unknown as KupDynamicPositionElement\n            );\n        });\n    }\n\n    private consistencyCheck() {\n        let activeTabs: number = 0;\n        let lastActiveOccurrence: number = 0;\n        if (this.data && this.data.length > 0) {\n            for (let i = 0; i < this.data.length; i++) {\n                if (this.data[i].active) {\n                    activeTabs++;\n                    lastActiveOccurrence = i;\n                }\n                this.data[i].active = false;\n            }\n            if (activeTabs > 1) {\n                this.data[lastActiveOccurrence].active = true;\n                this.value = this.data[lastActiveOccurrence].id;\n                this.kupManager.debug.logMessage(\n                    this,\n                    'Too many active tabs, forcing last one.',\n                    KupDebugCategory.WARNING\n                );\n            } else if (activeTabs === 0) {\n                this.data[0].active = true;\n                this.value = this.data[0].id;\n                this.kupManager.debug.logMessage(\n                    this,\n                    'No active tabs detected, forcing first one.'\n                );\n            } else {\n                this.data[lastActiveOccurrence].active = true;\n                this.value = this.data[lastActiveOccurrence].id;\n            }\n        }\n    }\n\n    /*-------------------------------------------------*/\n    /*          L i f e c y c l e   H o o k s          */\n    /*-------------------------------------------------*/\n\n    componentWillLoad() {\n        this.kupManager.debug.logLoad(this, false);\n        this.kupManager.theme.register(this);\n        this.consistencyCheck();\n    }\n\n    componentDidLoad() {\n        this.kupManager.scrollOnHover.register(this.scrollArea);\n        this.applyRipple();\n        this.kupManager.debug.logLoad(this, true);\n    }\n\n    componentWillRender() {\n        this.kupManager.debug.logRender(this, false);\n    }\n\n    componentDidRender() {\n        this.kupManager.debug.logRender(this, true);\n    }\n\n    render() {\n        if (!this.data || this.data.length === 0) {\n            return;\n        }\n\n        const tabBar: Array<VNode> = [];\n\n        for (let i = 0; i < this.data.length; i++) {\n            const node: KupTabBarNode = this.data[i];\n            const tabClass: Record<string, boolean> = {\n                tab: true,\n                'tab--active': node.active ? true : false,\n                'mdc-ripple-surface': this.ripple ? true : false,\n                'kup-dense': this.dense,\n                'kup-danger': node.danger,\n            };\n\n            const tabEl: VNode = (\n                <f-button\n                    class={tabClass}\n                    role=\"tab\"\n                    aria-selected={this.data[i].active ? true : false}\n                    tabIndex={i}\n                    title={node.title ? node.title : null}\n                    onBlur={() => this.onKupBlur(i, node)}\n                    onClick={() => this.onKupClick(i, node)}\n                    onFocus={() => this.onKupFocus(i, node)}\n                >\n                    <span class=\"tab__content\">\n                        {node.icon ? (\n                            <FImage\n                                color={`var(${KupThemeColorValues.PRIMARY})`}\n                                resource={node.icon}\n                                placeholderResource={node.placeholderIcon}\n                                sizeX=\"24px\"\n                                sizeY=\"24px\"\n                                wrapperClass=\"tab__icon\"\n                            />\n                        ) : null}\n                        {node.value ? (\n                            <span class=\"tab__text-label\">\n                                {this.data[i].value}\n                            </span>\n                        ) : null}\n                    </span>\n                    {this.toolbar && (\n                        <FImage\n                            resource=\"more_vert\"\n                            sizeX=\"16px\"\n                            sizeY=\"16px\"\n                            onClick={(event: MouseEvent) => {\n                                event.stopPropagation();\n                                this.onKupIconClick(\n                                    i,\n                                    node,\n                                    event.currentTarget as HTMLElement\n                                );\n                            }}\n                            wrapperClass=\"tab__iconToolbar\"\n                        ></FImage>\n                    )}\n                    <span\n                        class={`tab-indicator ${\n                            node.active ? ' tab-indicator--active' : ''\n                        }`}\n                    >\n                        <span class=\"tab-indicator__content tab-indicator__content--underline\"></span>\n                    </span>\n                </f-button>\n            );\n            tabBar.push(tabEl);\n        }\n\n        return (\n            <Host>\n                <style>\n                    {this.kupManager.theme.setKupStyle(\n                        this.rootElement as KupComponent\n                    )}\n                </style>\n                <div id={componentWrapperId}>\n                    <div class=\"tab-bar\" role=\"tablist\">\n                        <div class=\"tab-scroller\">\n                            <div\n                                class=\"tab-scroller__scroll-area\"\n                                ref={(el: HTMLElement) =>\n                                    (this.scrollArea =\n                                        el as KupScrollOnHoverElement)\n                                }\n                            >\n                                <div class=\"tab-scroller__scroll-content\">\n                                    {tabBar}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.kupManager.scrollOnHover.unregister(this.scrollArea);\n        this.kupManager.theme.unregister(this);\n    }\n}\n"]}
+{"version":3,"file":"kup-tab-bar.js","sourceRoot":"","sources":["../../../src/components/kup-tab-bar/kup-tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    VNode,\n    Watch,\n} from '@stencil/core';\nimport { MDCRipple } from '@material/ripple';\nimport {\n    KupTabBarNode,\n    KupTabBarEventPayload,\n    KupTabBarProps,\n    KupTabbarStyling,\n} from './kup-tab-bar-declarations';\nimport {\n    KupManager,\n    kupManagerInstance,\n} from '../../managers/kup-manager/kup-manager';\nimport { GenericObject, KupComponent } from '../../types/GenericTypes';\nimport { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';\nimport { FImage } from '../../f-components/f-image/f-image';\nimport { KupScrollOnHoverElement } from '../../managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations';\nimport { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';\nimport { getProps, setProps } from '../../utils/utils';\nimport { componentWrapperId } from '../../variables/GenericVariables';\nimport {\n    KupDynamicPositionAnchor,\n    KupDynamicPositionElement,\n    KupDynamicPositionPlacement,\n} from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';\nimport { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations';\nimport { KupDataNode } from '../../managers/kup-data/kup-data-declarations';\nimport { KupToolbarItemClickEventPayload } from '../../components/kup-toolbar/kup-toolbar-declarations';\n\n@Component({\n    tag: 'kup-tab-bar',\n    styleUrl: 'kup-tab-bar.scss',\n    shadow: true,\n})\nexport class KupTabBar {\n    /**\n     * References the root HTML element of the component (<kup-tab-bar>).\n     */\n    @Element() rootElement: HTMLElement;\n\n    /*-------------------------------------------------*/\n    /*                   S t a t e s                   */\n    /*-------------------------------------------------*/\n\n    @State() value: string = '';\n\n    /*-------------------------------------------------*/\n    /*                    P r o p s                    */\n    /*-------------------------------------------------*/\n\n    /**\n     * Custom style of the component.\n     * @default \"\"\n     * @see https://smeup.github.io/ketchup/#/customization\n     */\n    @Prop() customStyle: string = '';\n    /**\n     * List of elements.\n     * @default null\n     */\n    @Prop() data: KupTabBarNode[] = null;\n    /**\n     * List of elements.\n     * @default KupTabbarStyling.FLAT\n     */\n    @Prop() variant: KupTabbarStyling = KupTabbarStyling.FLAT;\n    /**\n     * Defaults at false. When set to true, the component is dense.\n     * @default false\n     */\n    @Prop() dense: boolean = false;\n    /**\n     * When enabled displays Material's ripple effect on item headers.\n     * @default true\n     */\n    @Prop() ripple: boolean = false;\n    /**\n     * When enabled displays toolbar item inside each single tab.\n     * @default true\n     */\n    @Prop() toolbar: boolean = true;\n    /**\n     * Display DataNode Toolbar.\n     * @default null\n     */\n    @Prop() toolbarData: KupDataNode[];\n\n    /*-------------------------------------------------*/\n    /*       I n t e r n a l   V a r i a b l e s       */\n    /*-------------------------------------------------*/\n\n    /**\n     * Instance of the KupManager class.\n     */\n    private kupManager: KupManager = kupManagerInstance();\n    #clickCbDropCard: KupManagerClickCb = null;\n    /**\n     * Element scrollable on mouse hover.\n     */\n    private scrollArea: KupScrollOnHoverElement = null;\n    /**\n     * Toolbar List.\n     */\n    private toolbarList: KupDynamicPositionElement;\n\n    /*-------------------------------------------------*/\n    /*                   E v e n t s                   */\n    /*-------------------------------------------------*/\n    /**\n     * Triggered when the tab loses focus.\n     */\n    @Event({\n        eventName: 'kup-tabbar-blur',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupBlur: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when the tab is clicked.\n     */\n    @Event({\n        eventName: 'kup-tabbar-click',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupClick: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when the icon inside tab is clicked.\n     */\n    @Event({\n        eventName: 'kup-tabbar-iconclick',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupIconClick: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when the tab is focused.\n     */\n    @Event({\n        eventName: 'kup-tabbar-focus',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupFocus: EventEmitter<KupTabBarEventPayload>;\n\n    /**\n     * Triggered when a list item is clicked.\n     */\n    @Event({\n        eventName: 'kup-tabbar-itemclick',\n        composed: true,\n        cancelable: false,\n        bubbles: true,\n    })\n    kupItemClick: EventEmitter<KupToolbarItemClickEventPayload>;\n\n    #dropDownActionCardAnchor: HTMLElement = null;\n\n    onKupBlur(i: number, node: KupTabBarNode) {\n        this.kupBlur.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n    }\n\n    onKupClick(i: number, node: KupTabBarNode) {\n        for (let i = 0; i < this.data.length; i++) {\n            this.data[i].active = false;\n        }\n        this.data[i].active = true;\n        this.value = node.id;\n\n        this.kupClick.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n    }\n\n    onKupIconClick(i: number, node: KupTabBarNode, el: HTMLElement) {\n        this.#dropDownActionCardAnchor = el;\n        this.kupIconClick.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n        this.createDropDownToolbarList();\n    }\n\n    onKupFocus(i: number, node: KupTabBarNode) {\n        this.kupFocus.emit({\n            comp: this,\n            id: this.rootElement.id,\n            index: i,\n            node: node,\n        });\n    }\n\n    onKupToolbarItemClick(e: CustomEvent) {\n        this.kupItemClick.emit({\n            comp: this,\n            id: this.rootElement.id,\n            value: this.value,\n            node: e.detail.selected,\n        });\n    }\n\n    /*-------------------------------------------------*/\n    /*                  W a t c h e r s                */\n    /*-------------------------------------------------*/\n\n    @Watch('ripple')\n    applyRipple() {\n        const root = this.rootElement.shadowRoot;\n        if (root && this.ripple) {\n            const rippleCells = root.querySelectorAll(\n                '.mdc-ripple-surface:not(.mdc-ripple-upgraded)'\n            );\n            if (rippleCells) {\n                for (let i = 0; i < rippleCells.length; i++) {\n                    MDCRipple.attachTo(rippleCells[i]);\n                }\n            }\n        }\n    }\n\n    /*-------------------------------------------------*/\n    /*           P u b l i c   M e t h o d s           */\n    /*-------------------------------------------------*/\n\n    /**\n     * Used to retrieve component's props values.\n     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.\n     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.\n     */\n    @Method()\n    async getProps(descriptions?: boolean): Promise<GenericObject> {\n        return getProps(this, KupTabBarProps, descriptions);\n    }\n    /**\n     * Returns the selected node.\n     * @returns {Promise<KupTabBarNode>} Selected node.\n     */\n    @Method()\n    async getSelectedNode(): Promise<KupTabBarNode> {\n        let res: KupTabBarNode = null;\n        this.data.forEach((node) => {\n            if (node.id === this.value) {\n                res = node;\n            }\n        });\n        return res;\n    }\n    /**\n     * This method is used to trigger a new render of the component.\n     */\n    @Method()\n    async refresh(): Promise<void> {\n        forceUpdate(this);\n    }\n    /**\n     * Sets the props to the component.\n     * @param {GenericObject} props - Object containing props that will be set to the component.\n     */\n    @Method()\n    async setProps(props: GenericObject): Promise<void> {\n        setProps(this, KupTabBarProps, props);\n    }\n\n    /*-------------------------------------------------*/\n    /*           P r i v a t e   M e t h o d s         */\n    /*-------------------------------------------------*/\n\n    closeRowToolbarList() {\n        if (this.toolbarList) {\n            this.kupManager.dynamicPosition.stop(\n                this.toolbarList as KupDynamicPositionElement\n            );\n            this.kupManager.removeClickCallback(this.#clickCbDropCard);\n            this.toolbarList.remove();\n            this.toolbarList = null;\n        }\n    }\n\n    createDropDownToolbarList() {\n        if (this.toolbarList) {\n            this.closeRowToolbarList();\n        }\n        const listEl = document.createElement('kup-toolbar');\n        listEl.data = this.toolbarData;\n        listEl.addEventListener('kup-toolbar-click', (e: CustomEvent) => {\n            this.onKupToolbarItemClick(e);\n            setTimeout(() => {\n                this.closeRowToolbarList();\n            }, 0);\n        });\n        this.toolbarList = listEl;\n        this.#clickCbDropCard = {\n            cb: () => {\n                this.closeRowToolbarList();\n            },\n            el: this.toolbarList,\n        };\n\n        this.kupManager.addClickCallback(this.#clickCbDropCard, true);\n        this.rootElement.shadowRoot.appendChild(this.toolbarList);\n        requestAnimationFrame(() => {\n            this.kupManager.dynamicPosition.register(\n                this.toolbarList as unknown as KupDynamicPositionElement,\n                this.#dropDownActionCardAnchor as KupDynamicPositionAnchor,\n                0,\n                KupDynamicPositionPlacement.AUTO,\n                true\n            );\n            this.kupManager.dynamicPosition.start(\n                this.toolbarList as unknown as KupDynamicPositionElement\n            );\n        });\n    }\n\n    private consistencyCheck() {\n        let activeTabs: number = 0;\n        let lastActiveOccurrence: number = 0;\n        if (this.data && this.data.length > 0) {\n            for (let i = 0; i < this.data.length; i++) {\n                if (this.data[i].active) {\n                    activeTabs++;\n                    lastActiveOccurrence = i;\n                }\n                this.data[i].active = false;\n            }\n            if (activeTabs > 1) {\n                this.data[lastActiveOccurrence].active = true;\n                this.value = this.data[lastActiveOccurrence].id;\n                this.kupManager.debug.logMessage(\n                    this,\n                    'Too many active tabs, forcing last one.',\n                    KupDebugCategory.WARNING\n                );\n            } else if (activeTabs === 0) {\n                this.data[0].active = true;\n                this.value = this.data[0].id;\n                this.kupManager.debug.logMessage(\n                    this,\n                    'No active tabs detected, forcing first one.'\n                );\n            } else {\n                this.data[lastActiveOccurrence].active = true;\n                this.value = this.data[lastActiveOccurrence].id;\n            }\n        }\n    }\n\n    /*-------------------------------------------------*/\n    /*          L i f e c y c l e   H o o k s          */\n    /*-------------------------------------------------*/\n\n    componentWillLoad() {\n        this.kupManager.debug.logLoad(this, false);\n        this.kupManager.theme.register(this);\n        this.consistencyCheck();\n    }\n\n    componentDidLoad() {\n        this.kupManager.scrollOnHover.register(this.scrollArea);\n        this.applyRipple();\n        this.kupManager.debug.logLoad(this, true);\n    }\n\n    componentWillRender() {\n        this.kupManager.debug.logRender(this, false);\n    }\n\n    componentDidRender() {\n        this.kupManager.debug.logRender(this, true);\n    }\n\n    render() {\n        if (!this.data || this.data.length === 0) {\n            return;\n        }\n\n        const tabBar: Array<VNode> = [];\n\n        for (let i = 0; i < this.data.length; i++) {\n            const node: KupTabBarNode = this.data[i];\n            const tabClass: Record<string, boolean> = {\n                tab: true,\n                'tab--active': node.active ? true : false,\n                'mdc-ripple-surface': this.ripple ? true : false,\n                'kup-dense': this.dense,\n                'kup-danger': node.danger,\n            };\n\n            const tabEl: VNode = (\n                <f-button\n                    class={tabClass}\n                    role=\"tab\"\n                    aria-selected={this.data[i].active ? true : false}\n                    tabIndex={i}\n                    title={node.title ? node.title : null}\n                    onBlur={() => this.onKupBlur(i, node)}\n                    onClick={() => this.onKupClick(i, node)}\n                    onFocus={() => this.onKupFocus(i, node)}\n                >\n                    <span class=\"tab__content\">\n                        {node.icon ? (\n                            <FImage\n                                color={`var(${KupThemeColorValues.PRIMARY})`}\n                                resource={node.icon}\n                                placeholderResource={node.placeholderIcon}\n                                sizeX=\"24px\"\n                                sizeY=\"24px\"\n                                wrapperClass=\"tab__icon\"\n                            />\n                        ) : null}\n                        {node.value ? (\n                            <span class=\"tab__text-label\">\n                                {this.data[i].value}\n                            </span>\n                        ) : null}\n                    </span>\n                    {this.toolbar && (\n                        <FImage\n                            resource=\"more_vert\"\n                            sizeX=\"16px\"\n                            sizeY=\"16px\"\n                            onClick={(event: MouseEvent) => {\n                                event.stopPropagation();\n                                this.onKupIconClick(\n                                    i,\n                                    node,\n                                    event.currentTarget as HTMLElement\n                                );\n                            }}\n                            wrapperClass=\"tab__iconToolbar\"\n                        ></FImage>\n                    )}\n                    <span\n                        class={`tab-indicator ${\n                            node.active ? ' tab-indicator--active' : ''\n                        }`}\n                    >\n                        <span class=\"tab-indicator__content tab-indicator__content--underline\"></span>\n                    </span>\n                </f-button>\n            );\n            tabBar.push(tabEl);\n        }\n\n        const tabbarRole: Record<string, boolean> = {\n            'tab-bar': true,\n            [`tab-bar--${this.variant}`]: this.variant ? true : false,\n        };\n\n        return (\n            <Host>\n                <style>\n                    {this.kupManager.theme.setKupStyle(\n                        this.rootElement as KupComponent\n                    )}\n                </style>\n                <div id={componentWrapperId}>\n                    <div class={tabbarRole} role=\"tablist\">\n                        <div class=\"tab-scroller\">\n                            <div\n                                class=\"tab-scroller__scroll-area\"\n                                ref={(el: HTMLElement) =>\n                                    (this.scrollArea =\n                                        el as KupScrollOnHoverElement)\n                                }\n                            >\n                                <div class=\"tab-scroller__scroll-content\">\n                                    {tabBar}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.kupManager.scrollOnHover.unregister(this.scrollArea);\n        this.kupManager.theme.unregister(this);\n    }\n}\n"]}

package/dist/components/kup-autocomplete2.js

@@ -13793,7 +13793,20 @@ var KupTabBarProps;
     KupTabBarProps["data"] = "List of elements.";
     KupTabBarProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
     KupTabBarProps["toolbar"] = "when true, it will show the toolbar activation icon";
+    KupTabBarProps["variant"] = "Variant of the component. It is either flat or contained";
 })(KupTabBarProps || (KupTabBarProps = {}));
+/**
+ * Styling options for the f-button component.
+ * @enum {string}
+ * @property {string} FLAT - Flat style: no background nor borders.
+ * @property {string} CONTAINED - Background and active field as background.
+
+ */
+var KupTabbarStyling;
+(function (KupTabbarStyling) {
+    KupTabbarStyling["FLAT"] = "flat";
+    KupTabbarStyling["CONTAINED"] = "contained";
+})(KupTabbarStyling || (KupTabbarStyling = {}));
 
 /**
  * Props of the kup-radio component.
@@ -17269,7 +17282,7 @@ function defineCustomElement$n() {
     } });
 }
 
-const kupTabBarCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_tabindicator_border_bottom_color:var(\n    --kup-tab-indicator-border-bottom-color,\n    var(--kup-layer-2)\n  );--kup_tabindicator_border_bottom_color_active:var(\n    --kup-tabindicator-border-bottom-color-active,\n    var(--kup-border-interactive)\n  );--kup_tabbar_text_color:var(\n    --kup-tabbar-text-color,\n    var(--kup-text-secondary)\n  );--kup_tabbar_text_color_active:var(\n    --kup-tabbar-text-color-active,\n    var(--kup-text-primary)\n  );--kup_tabbar_border_color_dense:var(\n    --kup-tabbar-border-color-dense,\n    var(--kup-border-strong)\n  );--kup_tabbar_font_size:var(--kup-tabbar-font-size, var(--kup-font-size));--kup_tabbar_font_weight:var(--kup-tabbar-font-weight, 500);--kup_tabbar_height:var(--kup-tabbar-height, 36px);--kup_tabbar_tab_padding:var(\n    --kup-tabbar-tab-padding,\n    0 var(--kup-space-05)\n  );display:block;font-size:var(--kup_tabbar_font_size)}.tab-bar{width:100%}.tab-bar .tab-scroller{height:var(--kup_tabbar_height);overflow-y:hidden}.tab-bar .tab-scroller .tab-scroller__scroll-area{display:flex;overflow-x:hidden;overflow:auto}.tab-bar .tab-scroller .tab-scroller__scroll-area .tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;gap:2px}.tab-bar .tab-scroller .tab{-webkit-font-smoothing:antialiased;padding:var(--kup_tabbar_tab_padding);position:relative;display:flex;box-sizing:border-box;gap:8px;margin:0px;border:none;flex:1 0;outline:2px solid transparent;outline-offset:-2px;background:none;text-align:left;white-space:nowrap;cursor:pointer;appearance:none;z-index:1;height:var(--kup_tabbar_height)}.tab-bar .tab-scroller .tab:focus{outline:2px solid var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab .tab__icon+.tab__text-label{padding-left:8px;padding-right:0px;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.tab-bar .tab-scroller .tab .tab__icon .f-image__icon{background:var(--kup_tabbar_text_color) !important}.tab-bar .tab-scroller .tab.kup-danger{--kup_tabbar_text_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color_active:var(\n    --kup-danger-color-60\n  )}.tab-bar .tab-scroller .tab.kup-danger:focus{outline:2px solid var(--kup-danger-color-60)}.tab-bar .tab-scroller .tab:hover{background-color:rgba(var(--kup_tabbar_primary_color_rgb), 0.075)}.tab-bar .tab-scroller .tab:hover .tab-indicator .tab-indicator__content--underline{--kup_tabindicator_border_bottom_color:var(--kup-border-strong)}.tab-bar .tab-scroller .tab.tab--active .tab__iconToolbar{opacity:0.3}.tab-bar .tab-scroller .tab.tab--active:hover .tab__iconToolbar:hover{opacity:1;background-color:var(--kup-gray-color-20-hover)}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__icon{transition-delay:100ms}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__text-label{transition-delay:100ms;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.tab-bar .tab-scroller .tab[disabled]{--kup_tabindicator_border_bottom_color:var(--kup-border-disabled);--kup_tabbar_text_color:var(--kup-text-disabled);pointer-events:none}.tab-bar .tab-scroller .tab.kup-dense{background:var(--kup-layer-2);border-right:1px solid var(--kup_tabbar_border_color_dense)}.tab-bar .tab-scroller .tab.kup-dense.tab--active{background:var(--kup-layer-2-selected)}.tab-bar .tab-scroller .tab.kup-dense:hover{background:var(--kup-layer-2-hover)}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator{height:2px;border-color:transparent}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator--active .tab-indicator__content{border-color:var(--kup_tabindicator_border_bottom_color_active)}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab{flex:none}}.tab-bar .tab-scroller .tab__content{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;height:inherit;pointer-events:none;gap:var(--kup-space-03)}.tab-bar .tab-scroller .tab__content .tab__icon{transition:color 150ms linear 0s;width:16px;height:16px;font-size:16px;z-index:2;margin:0}.tab-bar .tab-scroller .tab__content .tab__icon.kup-icon{height:16px;width:16px}.tab-bar .tab-scroller .tab__content .tab__text-label{transition:color 150ms linear 0s;display:inline-block;line-height:1;z-index:2;color:var(--kup_tabbar_text_color);min-width:auto}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab__content .tab__text-label{min-width:150px}}.tab-bar .tab-scroller .tab__iconToolbar{opacity:0}.tab-bar .tab-scroller .tab-indicator{display:flex;position:absolute;top:0px;left:0px;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.tab-bar .tab-scroller .tab-indicator.tab-indicator--active .tab-indicator__content{opacity:1;border-color:var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content{transform-origin:left center}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content.tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid;border-top-width:2px;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;color:var(--kup_tabindicator_border_bottom_color)}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_tabbar_primary_color)}";
+const kupTabBarCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_tabindicator_border_bottom_color:var(\n    --kup-tab-indicator-border-bottom-color,\n    var(--kup-layer-2)\n  );--kup_tabindicator_border_bottom_color_active:var(\n    --kup-tabindicator-border-bottom-color-active,\n    var(--kup-border-interactive)\n  );--kup_tabbar_text_color:var(\n    --kup-tabbar-text-color,\n    var(--kup-text-secondary)\n  );--kup_tabbar_text_color_active:var(\n    --kup-tabbar-text-color-active,\n    var(--kup-text-primary)\n  );--kup_tabbar_border_color_dense:var(\n    --kup-tabbar-border-color-dense,\n    var(--kup-border-strong)\n  );--kup_tabbar_font_size:var(--kup-tabbar-font-size, var(--kup-font-size));--kup_tabbar_font_weight:var(--kup-tabbar-font-weight, 500);--kup_tabbar_height:var(--kup-tabbar-height, 36px);--kup_tabbar_tab_padding:var(\n    --kup-tabbar-tab-padding,\n    0 var(--kup-space-05)\n  );display:block;font-size:var(--kup_tabbar_font_size)}.tab-bar{width:100%}.tab-bar .tab-scroller{height:var(--kup_tabbar_height);overflow-y:hidden}.tab-bar .tab-scroller .tab-scroller__scroll-area{display:flex;overflow-x:hidden;overflow:auto}.tab-bar .tab-scroller .tab-scroller__scroll-area .tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;gap:2px}.tab-bar .tab-scroller .tab{-webkit-font-smoothing:antialiased;padding:var(--kup_tabbar_tab_padding);position:relative;display:flex;box-sizing:border-box;gap:8px;margin:0px;border:none;flex:1 0;outline:2px solid transparent;outline-offset:-2px;background:none;text-align:left;white-space:nowrap;cursor:pointer;appearance:none;z-index:1;height:var(--kup_tabbar_height)}.tab-bar .tab-scroller .tab:focus{outline:2px solid var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab .tab__icon+.tab__text-label{padding-left:8px;padding-right:0px;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.tab-bar .tab-scroller .tab .tab__icon .f-image__icon{background:var(--kup_tabbar_text_color) !important}.tab-bar .tab-scroller .tab.kup-danger{--kup_tabbar_text_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color_active:var(\n    --kup-danger-color-60\n  )}.tab-bar .tab-scroller .tab.kup-danger:focus{outline:2px solid var(--kup-danger-color-60)}.tab-bar .tab-scroller .tab:hover{background-color:rgba(var(--kup_tabbar_primary_color_rgb), 0.075)}.tab-bar .tab-scroller .tab:hover .tab-indicator .tab-indicator__content--underline{--kup_tabindicator_border_bottom_color:var(--kup-border-strong)}.tab-bar .tab-scroller .tab.tab--active .tab__iconToolbar{opacity:0.3;min-width:16px}.tab-bar .tab-scroller .tab.tab--active:hover .tab__iconToolbar:hover{opacity:1;background-color:var(--kup-gray-color-20-hover)}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__icon{transition-delay:100ms}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__text-label{transition-delay:100ms;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.tab-bar .tab-scroller .tab[disabled]{--kup_tabindicator_border_bottom_color:var(--kup-border-disabled);--kup_tabbar_text_color:var(--kup-text-disabled);pointer-events:none}.tab-bar .tab-scroller .tab.kup-dense{background:var(--kup-layer-2);border-right:1px solid var(--kup_tabbar_border_color_dense)}.tab-bar .tab-scroller .tab.kup-dense.tab--active{background:var(--kup-layer-2-selected)}.tab-bar .tab-scroller .tab.kup-dense:hover{background:var(--kup-layer-2-hover)}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator{height:2px;border-color:transparent}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator--active .tab-indicator__content{border-color:var(--kup_tabindicator_border_bottom_color_active)}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab{flex:none}}.tab-bar .tab-scroller .tab__content{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;height:inherit;pointer-events:none;gap:var(--kup-space-03)}.tab-bar .tab-scroller .tab__content .tab__icon{transition:color 150ms linear 0s;width:16px;height:16px;font-size:16px;z-index:2;margin:0}.tab-bar .tab-scroller .tab__content .tab__icon.kup-icon{height:16px;width:16px}.tab-bar .tab-scroller .tab__content .tab__text-label{transition:color 150ms linear 0s;display:inline-block;line-height:1;z-index:2;color:var(--kup_tabbar_text_color);min-width:auto}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab__content .tab__text-label{min-width:150px}}.tab-bar .tab-scroller .tab__iconToolbar{opacity:0}.tab-bar .tab-scroller .tab-indicator{display:flex;position:absolute;top:0px;left:0px;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.tab-bar .tab-scroller .tab-indicator.tab-indicator--active .tab-indicator__content{opacity:1;border-color:var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content{transform-origin:left center}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content.tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid;border-top-width:2px;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;color:var(--kup_tabindicator_border_bottom_color)}.tab-bar.tab-bar--contained .tab-scroller .tab-scroller__scroll-content{gap:0px}.tab-bar.tab-bar--contained .tab{background-color:var(--kup-gray-color-10);border-right:1px solid var(--kup-gray-color-20)}.tab-bar.tab-bar--contained .tab:nth-last-child(1){border-right:none}.tab-bar.tab-bar--contained .tab:hover{background-color:var(--kup-gray-color-10-hover)}.tab-bar.tab-bar--contained .tab .tab-indicator{height:auto}.tab-bar.tab-bar--contained .tab--active{background-color:var(--kup-gray-color-0);border:none}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_tabbar_primary_color)}";
 const KupTabBarStyle0 = kupTabBarCss;
 
 var __classPrivateFieldSet$5 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
@@ -17315,6 +17328,7 @@ const KupTabBar = /*@__PURE__*/ proxyCustomElement(class KupTabBar extends HTMLE
         this.value = '';
         this.customStyle = '';
         this.data = null;
+        this.variant = KupTabbarStyling.FLAT;
         this.dense = false;
         this.ripple = false;
         this.toolbar = true;
@@ -17521,7 +17535,11 @@ const KupTabBar = /*@__PURE__*/ proxyCustomElement(class KupTabBar extends HTMLE
                 }, wrapperClass: "tab__iconToolbar" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);
         }
-        return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "tab-bar", role: "tablist" }, h("div", { class: "tab-scroller" }, h("div", { class: "tab-scroller__scroll-area", ref: (el) => (this.scrollArea =
+        const tabbarRole = {
+            'tab-bar': true,
+            [`tab-bar--${this.variant}`]: this.variant ? true : false,
+        };
+        return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: tabbarRole, role: "tablist" }, h("div", { class: "tab-scroller" }, h("div", { class: "tab-scroller__scroll-area", ref: (el) => (this.scrollArea =
                 el) }, h("div", { class: "tab-scroller__scroll-content" }, tabBar)))))));
     }
     disconnectedCallback() {
@@ -17536,6 +17554,7 @@ const KupTabBar = /*@__PURE__*/ proxyCustomElement(class KupTabBar extends HTMLE
 }, [1, "kup-tab-bar", {
         "customStyle": [1, "custom-style"],
         "data": [16],
+        "variant": [1],
         "dense": [4],
         "ripple": [4],
         "toolbar": [4],