import { defineComponent as m, ref as p, watch as f, nextTick as v, createElementBlock as b, openBlock as i, createElementVNode as h, createBlock as g, createCommentVNode as C, normalizeClass as r, createVNode as s, unref as t, withCtx as n, renderSlot as c } from "vue";
import { scrollToId as k } from "@scalar/helpers/dom/scroll-to-id";
import { ScalarIconCaretRight as S } from "@scalar/icons";
import { useNavState as _ } from "../../hooks/useNavState.js";
import w from "../Anchor/Anchor.vue.js";
import N from "./Section.vue.js";
const $ = { class: "collapsible-section" }, y = ["id", "aria-controls", "aria-expanded"], j = /* @__PURE__ */ m({
  __name: "CompactSection",
  props: {
    id: {},
    label: {}
  },
  setup(d) {
    const a = d, { hash: u } = _(), o = p(!1);
    return f(
      u,
      async (e) => {
        e === a.id && !o.value && (o.value = !0, await v(), k(a.id));
      },
      { immediate: !0 }
    ), (e, l) => (i(), b("div", $, [
      h("button", {
        id: e.id,
        "aria-controls": e.id,
        "aria-expanded": o.value,
        class: r(["collapsible-section-trigger", { "collapsible-section-trigger-open": o.value }]),
        type: "button",
        onClick: l[0] || (l[0] = (B) => o.value = !o.value)
      }, [
        s(t(S), {
          weight: "bold",
          class: r(["size-3 transition-transform duration-100", { "rotate-90": o.value }])
        }, null, 8, ["class"]),
        s(t(w), {
          id: e.id,
          class: "collapsible-section-header"
        }, {
          default: n(() => [
            c(e.$slots, "heading", {}, void 0, !0)
          ]),
          _: 3
        }, 8, ["id"])
      ], 10, y),
      o.value ? (i(), g(t(N), {
        key: 0,
        id: e.id,
        class: "collapsible-section-content",
        label: e.label
      }, {
        default: n(() => [
          c(e.$slots, "default", {}, void 0, !0)
        ]),
        _: 3
      }, 8, ["id", "label"])) : C("", !0)
    ]));
  }
});
export {
  j as default
};
