import { defineComponent as p, computed as d, createElementBlock as m, renderSlot as o, openBlock as f, createElementVNode as s, createVNode as b, unref as v, createTextVNode as y } from "vue";
import { scrollToId as h } from "@scalar/helpers/dom/scroll-to-id";
import { sleep as k } from "@scalar/helpers/testing/sleep";
import { ScalarIconLink as C } from "@scalar/icons";
import { useClipboard as B } from "@scalar/use-hooks/useClipboard";
import { useNavState as N } from "../../hooks/useNavState.js";
const S = ["id"], $ = { class: "sr-only" }, _ = /* @__PURE__ */ p({
  __name: "WithBreadcrumb",
  props: {
    breadcrumb: {}
  },
  setup(a) {
    const { copyToClipboard: c } = B(), { getHashedUrl: n, isIntersectionEnabled: r, replaceUrlState: i } = N(), t = d(() => {
      var e;
      return (e = a.breadcrumb) == null ? void 0 : e.join(".");
    }), u = async () => {
      t.value && (c(n(t.value)), r.value = !1, i(t.value), h(t.value, !0), await k(100), r.value = !0);
    };
    return (e, l) => e.breadcrumb ? (f(), m("div", {
      key: 0,
      class: "relative scroll-mt-24",
      id: t.value
    }, [
      o(e.$slots, "default"),
      s("button", {
        class: "text-c-3 hover:text-c-1 absolute -top-2 -left-4.5 flex h-[calc(100%+16px)] w-4.5 cursor-pointer items-center justify-center pr-1.5 opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
        type: "button",
        onClick: u
      }, [
        b(v(C), {
          class: "size-3",
          weight: "bold"
        }),
        s("span", $, [
          o(e.$slots, "sr-label", {}, () => [
            l[0] || (l[0] = y("Copy link to ")),
            o(e.$slots, "default")
          ])
        ])
      ])
    ], 8, S)) : o(e.$slots, "default", { key: 1 });
  }
});
export {
  _ as default
};
