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