import { r as t, h as a, H as e } from "./index.61732cef.js";
import { c as i } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const b = () => ":host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}", r = class {
  constructor(s) {
    t(this, s), this.padding = "8";
  }
  render() {
    const s = i("tab", { "tab--active": this.active });
    return a(e, { key: "f4d0cb346611e07cb2ef60ae2b7b8031bfc0a826", "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: s, style: { padding: `var(--s-space-${this.padding})` } }, a("slot", { key: "4182744d410bd7e6a549d83fa61c2b7bcb3d7203" }));
  }
};
r.style = b();
export {
  r as swirl_tab
};
