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