import { defineComponent as S, computed as u, provide as B, useTemplateRef as x, onMounted as $, onUpdated as D, watch as H, onBeforeUnmount as O, openBlock as m, createElementBlock as y, createBlock as j, unref as C, normalizeClass as f, withCtx as v, renderSlot as b, createElementVNode as A, createTextVNode as q, toDisplayString as z, createVNode as J } from "vue";
import { t as g } from "./locale.js";
import { t as w } from "./templateRefNarrowing-CeANDylX.js";
import U from "./Icon.js";
import V from "./MoreActions.js";
const K = Object.freeze({
  key: Symbol("TABS_INJECTION_KEY")
});
var M = /* @__PURE__ */ ((e) => (e.Line = "line", e.Enclosed = "enclosed", e))(M || {});
const Y = ["aria-expanded", "onClick"], X = /* @__PURE__ */ S({
  __name: "Tabs",
  props: {
    activeTab: {},
    variant: { default: M.Line }
  },
  emits: ["update:activeTab"],
  setup(e, { emit: I }) {
    const L = I, s = e, o = u({
      get() {
        return s.activeTab;
      },
      set(t) {
        L("update:activeTab", t);
      }
    });
    function N(t) {
      o.value = t;
    }
    B(K.key, {
      activeTab: u(() => o.value),
      variant: u(() => s.variant),
      setActiveTab: N
    });
    const p = x("moreDropdownMenuRef"), h = x("tabsContainerRef"), r = /* @__PURE__ */ new Map();
    function k() {
      r.forEach((t, c) => {
        c.removeEventListener("click", t);
      }), r.clear();
    }
    function i() {
      const t = w(p.value);
      if (!t) return;
      k(), t.querySelectorAll("[data-action-id]").forEach((a) => {
        const n = a.getAttribute("data-action-id");
        if (!n) return;
        const R = o.value === n;
        a.setAttribute("aria-selected", R ? "true" : "false");
        const T = () => {
          const E = w(h.value);
          if (E) {
            const l = E.querySelector(`[role="tab"][data-action-id="${n}"]`), d = l == null ? void 0 : l.firstChild;
            d && d instanceof HTMLElement && d.click();
          }
        };
        a.addEventListener("click", T), r.set(a, T);
      });
    }
    return $(() => {
      i();
    }), D(() => {
      i();
    }), H(o, () => {
      i();
    }), O(() => {
      k();
    }), (t, c) => (m(), y("div", {
      ref_key: "tabsContainerRef",
      ref: h,
      class: "stash-tabs relative",
      role: "tabList",
      "data-test": "stash-tabs"
    }, [
      t.$slots["more-actions"] ? (m(), j(V, {
        key: 0,
        class: f(["stash-tabs-list flex items-end", {
          "stash-tabs-list--line": e.variant === "line",
          "stash-tabs-list--enclosed": e.variant === "enclosed",
          "gap-6": e.variant === "line"
        }]),
        "more-button-text": C(g)("ll.more"),
        "dropdown-mode": "custom",
        "actions-container-class": {
          "gap-0": e.variant === "enclosed",
          "gap-6": e.variant === "line"
        },
        "actions-container-tag": "ul"
      }, {
        "more-actions": v(() => [
          A("div", {
            ref_key: "moreDropdownMenuRef",
            ref: p
          }, [
            b(t.$slots, "more-actions")
          ], 512)
        ]),
        toggle: v(({ toggle: a, isOpen: n }) => [
          A("button", {
            "aria-haspopup": "menu",
            "aria-expanded": n,
            class: f(["flex cursor-pointer items-center justify-center border-solid px-6 pt-1.5 pb-1 text-sm font-medium text-blue-500 hover:text-blue-700", { "border-t-4 border-transparent": s.variant === "enclosed" }]),
            type: "button",
            onClick: a
          }, [
            q(z(C(g)("ll.more")) + " ", 1),
            J(U, { name: "caret-down" })
          ], 10, Y)
        ]),
        default: v(() => [
          b(t.$slots, "default")
        ]),
        _: 3
      }, 8, ["class", "more-button-text", "actions-container-class"])) : (m(), y("ul", {
        key: 1,
        class: f(["stash-tabs-list flex items-end overflow-x-scroll", {
          "stash-tabs-list--line": e.variant === "line",
          "stash-tabs-list--enclosed": e.variant === "enclosed",
          "gap-0": e.variant === "enclosed",
          "gap-6": e.variant === "line"
        }])
      }, [
        b(t.$slots, "default")
      ], 2))
    ], 512));
  }
});
export {
  K as T,
  X as _,
  M as a
};
//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-Swgl9-sG.js.map
