import { r as l, c as s, h as b, H as o, g as c } from "./index.61732cef.js";
import { c as n } from "./index-orsBiyT_.fc4357c3.js";
import { n as d } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const _ = () => '.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid       var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}', v = class {
  constructor(r) {
    l(this, r), this.activateNextTab = s(this, "activateNextTab", 7), this.activatePreviousTab = s(this, "activatePreviousTab", 7), this.activateTab = s(this, "activateTab", 7), this.justify = "start", this.tabs = [], this.variant = "default", this.onKeyDown = (t) => {
      t.code === "ArrowLeft" ? (t.preventDefault(), this.focusAdjacentTab(!0), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.focusAdjacentTab(!1), this.activateNextTab.emit());
    };
  }
  onTabFocus(r) {
    r.target.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center"
    });
  }
  focusAdjacentTab(r) {
    const t = this.getTabs(), a = t.findIndex((e) => e.ariaSelected === "true"), i = d(r ? a - 1 : a + 1, t.length);
    t[i].focus();
  }
  getTabs() {
    return Array.from(this.el.querySelectorAll('[role="tab"]'));
  }
  render() {
    const r = n("tab-bar", `tab-bar--justify-${this.justify}`, {
      "tab-bar--variant-pill": this.variant === "pill",
      "tab-bar--variant-default": this.variant === "default"
    }), t = {
      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0
    };
    return b(o, { key: "db2114ddb1acb2a25b954a96d798507ae133ad92" }, b("div", { key: "bd66a03fc35dd15dbb939edea8df71387299433b", "aria-label": this.label, class: r, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist", style: t }, this.tabs.map((a) => {
      const i = n("tab-bar__tab", {
        "tab-bar__tab--active": a.active,
        "tab-bar__tab--variant-pill": this.variant === "pill",
        "tab-bar__tab--variant-default": this.variant === "default"
      }), e = n("tab-bar__tab-label", {
        "tab-bar__tab-label--variant-pill": this.variant === "pill"
      });
      return b("button", {
        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
        class: i,
        id: `tab-${a.id}`,
        key: a.id,
        onClick: () => this.activateTab.emit(a.id),
        onFocus: this.onTabFocus,
        role: this.disableTabSemantics ? void 0 : "tab",
        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
        type: "button"
      }, a.icon && b("span", { class: "tab-bar__tab-icon", innerHTML: a.icon }), b("span", { class: e }, a.label, a.suffix && b("span", { class: "tab-bar__tab-suffix" }, a.suffix)));
    })));
  }
  get el() {
    return c(this);
  }
};
v.style = _();
export {
  v as swirl_tab_bar
};
