@leavepulse/ui 0.77.3 → 0.78.1

package/dist/chunks/LpAppShell-BKbYCHkx.js

@@ -0,0 +1,601 @@
+import { defineComponent, computed, useModel, ref, useId, onMounted, watch, nextTick, onBeforeUnmount, useSlots, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, normalizeClass, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeStyle, createCommentVNode, withDirectives, vShow, createBlock, Teleport, mergeModels } from "vue";
+import { prefersReducedMotion, easingToken, durationToken } from "../composables/easing.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useScrollMemory } from "../composables/scrollMemory.js";
+import { useView, viewWindow } from "../composables/useView.js";
+import { _ as _sfc_main$6 } from "./AppShellContextNav-C6Ho2mof.js";
+import { DENSITY_CLASS, resolveNavMode, NAV_BREAKPOINT_PX, contextNavItems, headerCollapsedAfter } from "../components/appShell.js";
+import { _ as _sfc_main$9 } from "./LpBottomNav-zxLGGbjm.js";
+import { _ as _sfc_main$2 } from "./LpContextSwitcher-1C1tExdl.js";
+import { _ as _sfc_main$3 } from "./LpButton-DSHioIfD.js";
+import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$8 } from "./LpPageScrollbar-D2O0xhJw.js";
+import { _ as _sfc_main$7 } from "./LpScrollArea-CqvwfZs2.js";
+import { _ as _sfc_main$5 } from "./LpShift-DAgS_d2x.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-DDNJzb69.js";
+import { mergeClass, useMergedAttrs } from "../composables/useMergedClass.js";
+import { nodeWindow } from "../composables/realm.js";
+const _hoisted_1 = ["href"];
+const _hoisted_2 = { class: "truncate text-lg font-semibold" };
+const _hoisted_3 = ["data-lp-density"];
+const _hoisted_4 = ["aria-label"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpAppShell",
+  props: /* @__PURE__ */ mergeModels({
+    items: {},
+    sections: {},
+    collapsed: {},
+    autoCollapseAfter: {},
+    modelValue: {},
+    path: {},
+    hash: {},
+    isActive: {},
+    title: {},
+    mobileBreakpoint: { default: "lg" },
+    divider: { type: Boolean, default: true },
+    contentClass: { default: "mx-auto w-full max-w-6xl" },
+    fullBleed: { type: Boolean },
+    scroll: { default: "document" },
+    pageScrollbar: { type: Boolean, default: true },
+    loading: { type: Boolean },
+    labels: {},
+    compact: { type: Boolean, default: void 0 },
+    resizable: { type: Boolean },
+    pinnable: { type: Boolean },
+    pinned: {},
+    persist: {},
+    previewDelay: {},
+    compactHotkey: { type: [String, Boolean] },
+    contexts: {},
+    context: {},
+    environment: {},
+    hints: {},
+    bottomNav: { type: [Boolean, Number, Array] },
+    headerCollapse: { type: Boolean },
+    backToTop: { type: [Boolean, Number] },
+    density: {},
+    pageTransition: { type: Boolean },
+    safeArea: { type: Boolean },
+    asideBreakpoint: {},
+    asideClass: {},
+    adaptiveNav: {}
+  }, {
+    "open": { type: Boolean, ...{ default: false } },
+    "openModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:collapsed", "select", "update:compact", "update:pinned", "update:context", "nav-mode"], ["update:open"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const BACK_TO_TOP_AFTER_PX = 600;
+    const props = __props;
+    const emit = __emit;
+    const switching = computed(() => (props.contexts?.length ?? 0) > 1);
+    const flatItems = computed(
+      () => (props.sections ? props.sections.flatMap((s) => s.items) : props.items ?? []).flatMap((i) => [i, ...i.children ?? []])
+    );
+    const SLASH_RUN = /\/{2,}/g;
+    const TRAILING_SLASH = new RegExp("(?<=.)\\/$");
+    const cleanPath = computed(() => props.path?.replace(SLASH_RUN, "/").replace(TRAILING_SLASH, ""));
+    function matchesPath(item) {
+      if (item.id === "/") return cleanPath.value === "/";
+      return cleanPath.value === item.id || cleanPath.value.startsWith(`${item.id}/`);
+    }
+    function defaultActive(item) {
+      if (props.path == null) return item.id === props.modelValue;
+      if (!matchesPath(item)) return false;
+      return !flatItems.value.some(
+        (other) => other.id !== item.id && other.id.length > item.id.length && matchesPath(other)
+      );
+    }
+    const activeTest = computed(() => props.isActive ?? defaultActive);
+    const pageTitle = computed(() => {
+      if (props.title != null) return props.title;
+      const test = activeTest.value;
+      const match = [...flatItems.value].sort((a, b) => b.id.length - a.id.length).find((item) => test(item));
+      return match?.label ?? "";
+    });
+    const drawerOpen = useModel(__props, "open");
+    const text = useLabels(
+      "appShell",
+      { openMenu: "Open menu", skipToContent: "Skip to content", backToTop: "Back to top", aside: "Details", contextNav: "In this section" },
+      () => props.labels
+    );
+    const scrollArea = ref(null);
+    const asideArea = ref(null);
+    const pageEl = ref(null);
+    const bleedId = `lp-shell-bleed-${useId()}`;
+    const mounted = ref(false);
+    onMounted(() => mounted.value = true);
+    const bleeding = computed(() => props.fullBleed && mounted.value);
+    const documentScroll = props.scroll !== "region";
+    const windowScrolls = computed(() => documentScroll && !props.fullBleed);
+    const mainId = `lp-main-${useId()}`;
+    const mainEl = ref(null);
+    function skipToMain() {
+      mainEl.value?.focus();
+    }
+    watch(
+      () => props.path,
+      () => {
+        if (drawerOpen.value) drawerOpen.value = false;
+        headerCollapsed.value = false;
+      }
+    );
+    function pageScroller() {
+      if (bleeding.value) return null;
+      if (!documentScroll) return scrollArea.value?.viewportEl;
+      return pageEl.value?.ownerDocument.scrollingElement ?? null;
+    }
+    useScrollMemory(
+      pageScroller,
+      () => props.path,
+      () => props.hash,
+      "",
+      // The sticky header covers the top of the window; a region starts below it.
+      () => documentScroll && !bleeding.value ? headerEl.value?.offsetHeight ?? 0 : 0
+    );
+    useScrollMemory(
+      () => asideArea.value?.viewportEl,
+      () => props.path,
+      () => void 0,
+      "aside:"
+    );
+    const headerCollapsed = ref(false);
+    const scrolledFar = ref(false);
+    const backToTopAfter = computed(() => typeof props.backToTop === "number" ? props.backToTop : BACK_TO_TOP_AFTER_PX);
+    let lastTop = 0;
+    function onScrolled(top, max) {
+      if (!props.headerCollapse && !props.backToTop) return;
+      if (props.headerCollapse) headerCollapsed.value = headerCollapsedAfter(headerCollapsed.value, lastTop, top, max);
+      scrolledFar.value = top > backToTopAfter.value;
+      lastTop = top;
+    }
+    function onMainScroll(event) {
+      const view2 = event.target;
+      onScrolled(view2.scrollTop, view2.scrollHeight - view2.clientHeight);
+    }
+    function onWindowScroll() {
+      const view2 = pageScroller();
+      if (view2) onScrolled(view2.scrollTop, view2.scrollHeight - view2.clientHeight);
+    }
+    const headerHidden = computed(() => headerCollapsed.value && !bleeding.value);
+    const HEADER_HEIGHT = "4rem";
+    const headerHeight = computed(() => props.safeArea ? `calc(${HEADER_HEIGHT} + env(safe-area-inset-top))` : HEADER_HEIGHT);
+    let bleedTop;
+    watch(
+      () => props.path,
+      () => bleedTop = void 0
+    );
+    watch(bleeding, (bleed) => {
+      if (!documentScroll) return;
+      const view2 = pageEl.value?.ownerDocument.scrollingElement;
+      if (!view2) return;
+      if (bleed) bleedTop = view2.scrollTop;
+      else if (bleedTop !== void 0) {
+        const top = bleedTop;
+        bleedTop = void 0;
+        void nextTick(() => view2.scrollTo({ top, behavior: "instant" }));
+      }
+    });
+    const bottomBarEl = ref(null);
+    const bottomBarHeight = ref(0);
+    let bottomBarSize;
+    onMounted(() => {
+      const el = bottomBarEl.value?.$el;
+      if (!el || el.nodeType !== 1) return;
+      bottomBarSize = new (nodeWindow(el)).ResizeObserver(() => bottomBarHeight.value = el.offsetHeight);
+      bottomBarSize.observe(el);
+    });
+    onBeforeUnmount(() => bottomBarSize?.disconnect());
+    let releaseDocument;
+    onMounted(() => {
+      if (!documentScroll || !pageEl.value) return;
+      const win = nodeWindow(pageEl.value);
+      win.addEventListener("scroll", onWindowScroll, { passive: true });
+      releaseDocument = () => win.removeEventListener("scroll", onWindowScroll);
+    });
+    onBeforeUnmount(() => releaseDocument?.());
+    function scrollToTop() {
+      const view2 = pageScroller();
+      if (!view2) return;
+      view2.scrollTo({ top: 0, behavior: prefersReducedMotion(nodeWindow(view2)) ? "instant" : "smooth" });
+      mainEl.value?.focus();
+    }
+    const headerClass = computed(
+      () => mergeClass(
+        "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6",
+        windowScrolls.value && `${STICKY} top-0`,
+        props.headerCollapse && (windowScrolls.value ? "transition-transform" : "transition-[margin-top]") + " duration-[var(--duration-medium)] ease-[var(--ease-settle)]",
+        props.safeArea && "h-[calc(4rem+env(safe-area-inset-top))] pt-[env(safe-area-inset-top)] pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] md:pl-[max(1.5rem,env(safe-area-inset-left))] md:pr-[max(1.5rem,env(safe-area-inset-right))]"
+      )
+    );
+    const pageClass = computed(
+      () => mergeClass(
+        DENSITY_CLASS[props.density ?? "comfortable"],
+        props.contentClass,
+        props.safeArea && !props.bottomNav && "pb-[calc(1.5rem+env(safe-area-inset-bottom))]"
+      )
+    );
+    const headerEl = ref(null);
+    const bleedEl = ref(null);
+    watch(
+      () => props.path,
+      () => {
+        const content = bleeding.value ? bleedEl.value : documentScroll ? pageEl.value : scrollArea.value?.viewportEl;
+        if (!props.pageTransition || !content || prefersReducedMotion(nodeWindow(content))) return;
+        const timing = { duration: durationToken("duration-medium", void 0, content), easing: easingToken("ease-settle", void 0, content) };
+        const header = headerEl.value?.querySelectorAll(":scope > :not(button)") ?? [];
+        for (const el of [content, ...header]) el.animate({ opacity: [0, 1] }, timing);
+      },
+      { flush: "post" }
+    );
+    const slots = useSlots();
+    const hasAside = computed(() => !!slots.aside);
+    const ASIDE_VISIBLE = {
+      sm: "hidden sm:flex",
+      md: "hidden md:flex",
+      lg: "hidden lg:flex",
+      xl: "hidden xl:flex",
+      "2xl": "hidden 2xl:flex"
+    };
+    const asideClasses = computed(
+      () => mergeClass(
+        "min-h-0 w-80 flex-col border-l border-line bg-surface",
+        windowScrolls.value && "sticky top-(--lp-shell-top) h-[calc(100dvh-var(--lp-shell-top))] self-start transition-[top,height] duration-[var(--duration-medium)] ease-[var(--ease-settle)]",
+        ASIDE_VISIBLE[props.asideBreakpoint ?? props.mobileBreakpoint],
+        props.asideClass
+      )
+    );
+    const columnClass = computed(() => hasAside.value ? "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto]" : "flex min-w-0 flex-1 flex-col");
+    const columnStyle = computed(() => ({
+      ...hasAside.value ? { gridTemplateRows: `auto ${contextVisible.value ? "auto " : ""}minmax(0,1fr) auto` } : {},
+      ...windowScrolls.value ? { "--lp-shell-top": shellTop.value } : {}
+    }));
+    const spanClass = computed(() => hasAside.value ? "col-span-2" : void 0);
+    const view = useView();
+    const width = ref(0);
+    const measureWidth = () => width.value = viewWindow(view.value).innerWidth;
+    onMounted(() => {
+      measureWidth();
+      viewWindow(view.value).addEventListener("resize", measureWidth);
+    });
+    onBeforeUnmount(() => viewWindow(view.value).removeEventListener("resize", measureWidth));
+    const navMode = computed(
+      () => mounted.value ? resolveNavMode((breakpoint) => width.value >= NAV_BREAKPOINT_PX[breakpoint], {
+        mobileBreakpoint: props.mobileBreakpoint,
+        bottomNav: !!props.bottomNav,
+        compactBelow: props.adaptiveNav?.compactBelow
+      }) : "rail"
+    );
+    watch(navMode, (mode) => emit("nav-mode", mode));
+    const handCompact = ref();
+    watch(navMode, () => handCompact.value = void 0);
+    const railCompact = computed(() => props.compact ?? handCompact.value ?? (navMode.value === "compact" ? true : void 0));
+    function onCompact(value) {
+      if (props.adaptiveNav) handCompact.value = value;
+      emit("update:compact", value);
+    }
+    const contextItems = computed(() => props.adaptiveNav?.contextNav ? contextNavItems(topItems.value, activeTest.value) : []);
+    const contextVisible = computed(
+      () => (navMode.value === "bottom" || navMode.value === "drawer") && (contextItems.value.length > 0 || !!slots["context-nav"] && !!props.adaptiveNav?.contextNav)
+    );
+    function onSelect(item) {
+      emit("select", item);
+    }
+    function onModel(id) {
+      emit("update:modelValue", id);
+    }
+    const burgerHidden = {
+      sm: "sm:hidden",
+      md: "md:hidden",
+      lg: "lg:hidden",
+      xl: "xl:hidden"
+    };
+    const burgerClass = computed(() => props.bottomNav ? "hidden" : burgerHidden[props.mobileBreakpoint]);
+    const topItems = computed(() => props.sections ? props.sections.flatMap((s) => s.items) : props.items ?? []);
+    const bottomItems = computed(() => {
+      const want = props.bottomNav;
+      if (!want) return [];
+      if (Array.isArray(want)) return want.map((id) => topItems.value.find((i) => i.id === id)).filter((i) => !!i);
+      return topItems.value.slice(0, want === true ? 4 : want);
+    });
+    const moreActive = computed(() => {
+      const shown = new Set(bottomItems.value.map((i) => i.id));
+      return flatItems.value.some((i) => !shown.has(i.id) && activeTest.value(i)) && !bottomItems.value.some((i) => activeTest.value(i));
+    });
+    function onBottom(item) {
+      onModel(item.id);
+      onSelect(item);
+    }
+    const _openDrawer = () => drawerOpen.value = true;
+    __expose({ openDrawer: _openDrawer, navMode });
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => windowScrolls.value ? "flex min-h-dvh overflow-x-clip bg-surface text-ink" : "flex h-dvh overflow-hidden bg-surface text-ink"
+    );
+    const STICKY = "sticky z-(--z-sticky)";
+    const railClass = computed(() => windowScrolls.value ? "sticky top-0 flex h-dvh shrink-0 self-start" : "contents");
+    const shellTop = computed(() => headerHidden.value ? "0px" : headerHeight.value);
+    const BACK_TO_TOP_ABOVE_BAR = {
+      sm: "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
+      md: "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] md:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
+      lg: "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] lg:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
+      xl: "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] xl:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
+      "2xl": "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] 2xl:bottom-[calc(1rem+env(safe-area-inset-bottom))]"
+    };
+    const backToTopClass = computed(
+      () => windowScrolls.value ? ["fixed right-6 z-(--z-sticky)", props.bottomNav ? BACK_TO_TOP_ABOVE_BAR[props.mobileBreakpoint] : "bottom-[calc(1rem+env(safe-area-inset-bottom))]"] : "absolute bottom-[calc(1rem+env(safe-area-inset-bottom))] right-6"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+        createElementVNode("a", {
+          href: `#${mainId}`,
+          onClick: withModifiers(skipToMain, ["prevent"]),
+          class: "sr-only z-(--z-toast) rounded-control bg-surface-raised px-3 py-2 text-sm font-medium text-ink focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:outline-none focus:ring-2 focus:ring-ring"
+        }, toDisplayString(unref(text).skipToContent), 9, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass(railClass.value)
+        }, [
+          createVNode(_sfc_main$1, {
+            "model-value": __props.modelValue,
+            items: __props.items,
+            sections: __props.sections,
+            "is-active": activeTest.value,
+            open: drawerOpen.value,
+            responsive: "",
+            "edge-open": "",
+            "mobile-breakpoint": __props.mobileBreakpoint,
+            divider: __props.divider,
+            loading: __props.loading,
+            collapsed: __props.collapsed,
+            "auto-collapse-after": __props.autoCollapseAfter,
+            compact: railCompact.value,
+            resizable: __props.resizable,
+            pinnable: __props.pinnable,
+            pinned: __props.pinned,
+            persist: __props.persist,
+            "preview-delay": __props.previewDelay,
+            "compact-hotkey": __props.compactHotkey,
+            environment: __props.environment,
+            hints: __props.hints,
+            class: "shrink-0",
+            "onUpdate:modelValue": onModel,
+            "onUpdate:compact": onCompact,
+            "onUpdate:pinned": _cache[1] || (_cache[1] = (v) => emit("update:pinned", v)),
+            "onUpdate:open": _cache[2] || (_cache[2] = (v) => drawerOpen.value = v),
+            "onUpdate:collapsed": _cache[3] || (_cache[3] = (v) => emit("update:collapsed", v)),
+            onSelect
+          }, createSlots({ _: 2 }, [
+            switching.value ? {
+              name: "header",
+              fn: withCtx(({ compact: folded }) => [
+                createVNode(_sfc_main$2, {
+                  contexts: __props.contexts,
+                  "model-value": __props.context,
+                  compact: folded,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = (id) => emit("update:context", id))
+                }, createSlots({ _: 2 }, [
+                  _ctx.$slots.logo ? {
+                    name: "default",
+                    fn: withCtx(({ context: shown }) => [
+                      renderSlot(_ctx.$slots, "logo", {
+                        compact: folded,
+                        context: shown
+                      })
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["contexts", "model-value", "compact"])
+              ]),
+              key: "0"
+            } : _ctx.$slots.logo ? {
+              name: "header",
+              fn: withCtx(({ compact: folded }) => [
+                renderSlot(_ctx.$slots, "logo", {
+                  compact: folded,
+                  context: __props.contexts?.[0]
+                })
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots["sidebar-actions"] ? {
+              name: "actions",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "sidebar-actions")
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots["sidebar-footer"] ? {
+              name: "footer",
+              fn: withCtx(({ compact: folded }) => [
+                renderSlot(_ctx.$slots, "sidebar-footer", { compact: folded })
+              ]),
+              key: "3"
+            } : void 0,
+            _ctx.$slots["sidebar-item"] ? {
+              name: "item",
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "sidebar-item", normalizeProps(guardReactiveProps(slotProps)))
+              ]),
+              key: "4"
+            } : void 0
+          ]), 1032, ["model-value", "items", "sections", "is-active", "open", "mobile-breakpoint", "divider", "loading", "collapsed", "auto-collapse-after", "compact", "resizable", "pinnable", "pinned", "persist", "preview-delay", "compact-hotkey", "environment", "hints"])
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(columnClass.value),
+          style: normalizeStyle(columnStyle.value)
+        }, [
+          createElementVNode("header", {
+            ref_key: "headerEl",
+            ref: headerEl,
+            class: normalizeClass([headerClass.value, spanClass.value]),
+            style: normalizeStyle(headerHidden.value ? windowScrolls.value ? { transform: "translateY(-100%)" } : { marginTop: `calc(-1 * ${headerHeight.value})` } : void 0),
+            onFocusin: _cache[5] || (_cache[5] = ($event) => headerCollapsed.value = false)
+          }, [
+            createVNode(_sfc_main$3, {
+              class: normalizeClass(burgerClass.value),
+              variant: "ghost",
+              size: "sm",
+              square: "",
+              "aria-label": unref(text).openMenu,
+              onClick: _cache[4] || (_cache[4] = ($event) => drawerOpen.value = true)
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  name: "lucide:menu",
+                  size: 18
+                })
+              ]),
+              _: 1
+            }, 8, ["class", "aria-label"]),
+            createVNode(_sfc_main$5, {
+              axis: "height",
+              presence: "",
+              class: "flex min-w-0 flex-1 items-center"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "header-title", {}, () => [
+                  createElementVNode("h1", _hoisted_2, toDisplayString(pageTitle.value), 1)
+                ])
+              ]),
+              _: 3
+            }),
+            createVNode(_sfc_main$5, {
+              axis: "width",
+              anchor: "end",
+              presence: "",
+              class: "ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "header-actions")
+              ]),
+              _: 3
+            })
+          ], 38),
+          contextVisible.value ? renderSlot(_ctx.$slots, "context-nav", {
+            key: 0,
+            items: contextItems.value,
+            mode: navMode.value
+          }, () => [
+            createVNode(_sfc_main$6, {
+              class: normalizeClass([spanClass.value, windowScrolls.value && `${STICKY} top-(--lp-shell-top) transition-[top] duration-[var(--duration-medium)] ease-[var(--ease-settle)]`]),
+              items: contextItems.value,
+              "is-active": activeTest.value,
+              label: unref(text).contextNav,
+              onSelect: onBottom
+            }, null, 8, ["class", "items", "is-active", "label"])
+          ]) : createCommentVNode("", true),
+          createElementVNode("main", {
+            ref_key: "mainEl",
+            ref: mainEl,
+            id: mainId,
+            tabindex: "-1",
+            "data-lp-density": __props.density,
+            class: normalizeClass(["flex min-h-0 flex-1 flex-col outline-none", __props.backToTop && "relative"])
+          }, [
+            withDirectives(createElementVNode("div", {
+              ref_key: "bleedEl",
+              ref: bleedEl,
+              id: bleedId,
+              class: "min-h-0 flex-1 overflow-hidden"
+            }, null, 512), [
+              [vShow, bleeding.value]
+            ]),
+            documentScroll ? withDirectives((openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "pageEl",
+              ref: pageEl,
+              class: normalizeClass(["flex-1", pageClass.value])
+            }, [
+              (openBlock(), createBlock(Teleport, {
+                to: `#${bleedId}`,
+                disabled: !bleeding.value,
+                defer: ""
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 8, ["to", "disabled"]))
+            ], 2)), [
+              [vShow, !bleeding.value]
+            ]) : withDirectives((openBlock(), createBlock(_sfc_main$7, {
+              key: 1,
+              ref_key: "scrollArea",
+              ref: scrollArea,
+              class: "min-h-0 flex-1",
+              "content-class": pageClass.value,
+              onScroll: onMainScroll
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(Teleport, {
+                  to: `#${bleedId}`,
+                  disabled: !bleeding.value,
+                  defer: ""
+                }, [
+                  renderSlot(_ctx.$slots, "default")
+                ], 8, ["to", "disabled"]))
+              ]),
+              _: 3
+            }, 8, ["content-class"])), [
+              [vShow, !bleeding.value]
+            ]),
+            __props.backToTop && scrolledFar.value && !bleeding.value ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 2,
+              class: normalizeClass(backToTopClass.value),
+              variant: "outline",
+              size: "sm",
+              square: "",
+              "aria-label": unref(text).backToTop,
+              onClick: scrollToTop
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  name: "lucide:arrow-up",
+                  size: 16
+                })
+              ]),
+              _: 1
+            }, 8, ["class", "aria-label"])) : createCommentVNode("", true)
+          ], 10, _hoisted_3),
+          hasAside.value ? (openBlock(), createElementBlock("aside", {
+            key: 1,
+            "aria-label": unref(text).aside,
+            class: normalizeClass(asideClasses.value)
+          }, [
+            createVNode(_sfc_main$7, {
+              ref_key: "asideArea",
+              ref: asideArea,
+              class: "min-h-0 flex-1",
+              "content-class": "p-4"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "aside")
+              ]),
+              _: 3
+            }, 512)
+          ], 10, _hoisted_4)) : createCommentVNode("", true),
+          windowScrolls.value && __props.pageScrollbar ? (openBlock(), createBlock(_sfc_main$8, {
+            key: 2,
+            top: "var(--lp-shell-top)",
+            bottom: `${bottomBarHeight.value}px`
+          }, null, 8, ["bottom"])) : createCommentVNode("", true),
+          __props.bottomNav ? (openBlock(), createBlock(_sfc_main$9, {
+            key: 3,
+            ref_key: "bottomBarEl",
+            ref: bottomBarEl,
+            class: normalizeClass([burgerHidden[__props.mobileBreakpoint], spanClass.value, windowScrolls.value && `${STICKY} bottom-0`]),
+            items: bottomItems.value,
+            "is-active": activeTest.value,
+            more: "",
+            "more-active": moreActive.value,
+            "more-expanded": drawerOpen.value,
+            onSelect: onBottom,
+            onMore: _cache[6] || (_cache[6] = ($event) => drawerOpen.value = true)
+          }, null, 8, ["class", "items", "is-active", "more-active", "more-expanded"])) : createCommentVNode("", true)
+        ], 6),
+        renderSlot(_ctx.$slots, "overlays")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};