import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './klevu-typography2.js';

const klevuTabCss = ":host{display:inline-block;--color:var(--klevu-tab-color, var(--klevu-color-primary));--padding:var(--klevu-tab-padding, var(--klevu-spacing-04))}button{display:inline-block;position:relative;transition:transform 100ms;border:0;padding:0;margin:0;height:calc(var(--klevu-size-m) * 2);background:transparent;border-bottom:1px solid var(--klevu-color-neutral-5);padding-bottom:1px}button klevu-typography{border-radius:var(--klevu-border-radius-m);color:var(--klevu-color-neutral-7);display:block;padding:0 calc(var(--padding) * 2);height:calc(100% - 4px);display:flex;align-items:center}button:focus{outline:0}button.active{border-bottom:2px solid var(--color);padding-bottom:0}button.active klevu-typography{color:var(--klevu-color-neutral-8)}button:hover klevu-typography{background:var(--klevu-color-neutral-2)}button:disabled klevu-typography{color:var(--klevu-color-neutral-7)}button:focus klevu-typography{outline-offset:-2px;outline:2px solid var(--color)}";

const KlevuTab = /*@__PURE__*/ proxyCustomElement(class KlevuTab extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.caption = undefined;
    this.active = undefined;
    this.disabled = undefined;
  }
  render() {
    return (h(Host, null, h("button", { class: {
        active: Boolean(this.active),
      }, disabled: Boolean(this.disabled), part: "tab-base" }, h("klevu-typography", { part: "tab-caption", variant: "body-s" }, this.caption))));
  }
  static get style() { return klevuTabCss; }
}, [1, "klevu-tab", {
    "caption": [1],
    "active": [4],
    "disabled": [4]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-tab", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-tab":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuTab);
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuTab as K, defineCustomElement as d };

//# sourceMappingURL=klevu-tab2.js.map