import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { u as uniqueId } from './uniqueId.js';

const teliaTabContentCss = ".telia-tab-content{display:none;position:relative}.telia-tab-content:focus{outline:0}.telia-tab-content:focus::before{border-radius:calc(99.9rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:\"\";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));border-radius:calc(0.2rem * var(--voca-rem-multiplier))}.telia-tab-content:focus:not(:focus-visible)::before{box-shadow:none}.telia-tab-content--selected{display:block}";

const TeliaTabContent$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.vocaTabContentNameChange = createEvent(this, "vocaTabContentNameChange", 7);
    /** Test id set for web component host */
    this.dataTestid = null;
    /** Use `tabId` prop on `telia-tab-content`, in order to set `id` attribute of the component. This *id* will, then be emitted with the `vocaTabChange` event, when the user switches tabs. */
    this.tabId = uniqueId('telia-tab');
  }
  updateName(e) {
    this.vocaTabContentNameChange.emit(e);
  }
  render() {
    const classes = {
      'telia-tab-content': true,
      'telia-tab-content--selected': this.active,
    };
    return (h(Host, { active: this.active, id: this.tabId }, h("div", { class: classes, role: "tabpanel", id: this.tabId + '-content', "aria-labelledby": this.tabId + '-header' }, h("slot", null))));
  }
  static get watchers() { return {
    "name": ["updateName"]
  }; }
  static get style() { return teliaTabContentCss; }
}, [1, "telia-tab-content", {
    "dataTestid": [1, "data-testid"],
    "tabId": [1, "tab-id"],
    "active": [4],
    "icon": [1],
    "name": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-tab-content"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-tab-content":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaTabContent$1);
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaTabContent = TeliaTabContent$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaTabContent, defineCustomElement };
