import { r as a, h as o, H as l, g as d } from "./reactcomponent-44b70bf6.mjs";
import "react";
import "react-dom";
const b = ':host{font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";flex-shrink:0;flex-grow:1}:host .nav{border:none;border-bottom:solid;border-color:#d1d5db;border-width:1px;padding-left:24px}:host .nav--borderless-bottom{border-bottom:0}:host .nav ul{display:flex;flex-direction:row;padding:0;margin:0;margin-bottom:-1px}:host .nav ul li{list-style:none;text-align:center;cursor:pointer;padding:16px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, 0)}:host .nav ul li.active{background-color:#f9fafb;border-color:#d1d5db;border-width:1px;border-style:solid;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;font-weight:600}:host .content{display:block;padding:16px;background-color:#f9fafb}:host .content--bordered{border-width:1px;border-color:#d1d5db;border-style:solid;border-radius:4px}', c = class {
  constructor(e) {
    a(this, e), this.active = 0, this.bordered = !1, this.tabs = void 0;
  }
  connectedCallback() {
    new MutationObserver(this.componentWillRender.bind(this)).observe(this.el, { childList: !0 });
  }
  componentWillRender() {
    const e = this.el.querySelectorAll("mi-tab");
    this.tabs = Array.from(e).reduce((t, r, s) => {
      const i = Array.from(this.el.getElementsByTagName("mi-tab-panel")).find((n) => n.id === r.tabFor);
      return i && t.push({ label: r.label, content: i }), t;
    }, []);
  }
  componentDidRender() {
    this.selectTab(this.active);
  }
  async selectTab(e) {
    await this.tabs[e].content.active() || (this.active = e, this.tabs.forEach((r, s) => r.content.active(s === e)));
  }
  render() {
    return o(l, null, o("nav", { class: `nav ${this.bordered === !0 ? "nav--borderless-bottom" : ""}` }, o("ul", null, this.tabs.map((e, t) => o("li", { class: this.active === t ? "active" : "", onClick: () => {
      this.selectTab(t);
    } }, " ", e.label, " ")))), o("section", { class: `content ${this.bordered === !0 ? "content--bordered" : ""}` }, o("slot", null)));
  }
  get el() {
    return d(this);
  }
};
c.style = b;
export {
  c as mi_tabs
};
//# sourceMappingURL=mi-tabs.entry-c3066658.mjs.map
