import { h } from "@stencil/core";
import { BEM } from "../../../utils/bem";
export const TabLabel = ({ item, inverted, hasBubble, isExpanded, isVertical, context, }) => {
    const bemEl = BEM.block('tabs').element('nav').element('item').element('label');
    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" }, item.label, item.subLabel && h("span", { class: bemEl.element('sub-label').class() }, item.subLabel), hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
};
