@leavepulse/ui 0.78.2 → 0.78.3

package/dist/chunks/{LpAppShell-DkvU6IBB.js → LpAppShell-DRHoQtr-.js}

@@ -1,6 +1,7 @@
 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 { useResizeObserver } from "../composables/useResizeObserver.js";
 import { useScrollMemory } from "../composables/scrollMemory.js";
 import { useView, viewWindow } from "../composables/useView.js";
 import { _ as _sfc_main$6 } from "./AppShellContextNav-C6Ho2mof.js";
@@ -14,7 +15,7 @@ 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-CvRvVBTt.js";
 import { mergeClass, useMergedAttrs } from "../composables/useMergedClass.js";
-import { nodeWindow } from "../composables/realm.js";
+import { nodeWindow, isHTMLElement } from "../composables/realm.js";
 const _hoisted_1 = ["href"];
 const _hoisted_2 = { class: "truncate text-lg font-semibold" };
 const _hoisted_3 = ["data-lp-density"];
@@ -132,8 +133,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => 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
+      // The sticky header and sub-page row cover the top of the window; a region starts below them.
+      () => documentScroll && !bleeding.value ? (headerEl.value?.offsetHeight ?? 0) + contextRowHeight.value : 0
     );
     useScrollMemory(
       () => asideArea.value?.viewportEl,
@@ -180,14 +181,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     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());
+    useResizeObserver(
+      () => bottomBarEl.value?.$el?.nodeType === 1 ? bottomBarEl.value.$el : null,
+      (_, el) => bottomBarHeight.value = el.offsetHeight,
+      { immediate: true }
+    );
+    const contextRowEl = ref(null);
+    const contextRowHeight = ref(0);
     let releaseDocument;
     onMounted(() => {
       if (!documentScroll || !pageEl.value) return;
@@ -250,7 +250,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 } : {}
+      ...shellVars.value
     }));
     const spanClass = computed(() => hasAside.value ? "col-span-2" : void 0);
     const view = useView();
@@ -280,6 +280,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const contextVisible = computed(
       () => (navMode.value === "bottom" || navMode.value === "drawer") && (contextItems.value.length > 0 || !!slots["context-nav"] && !!props.adaptiveNav?.contextNav)
     );
+    watch(
+      [contextVisible, mounted],
+      () => {
+        const next = headerEl.value?.nextElementSibling;
+        contextRowEl.value = contextVisible.value && isHTMLElement(next) && next !== mainEl.value ? next : null;
+        if (!contextRowEl.value) contextRowHeight.value = 0;
+      },
+      { flush: "post" }
+    );
+    useResizeObserver(contextRowEl, (_, el) => contextRowHeight.value = el.offsetHeight, { immediate: true });
     function onSelect(item) {
       emit("select", item);
     }
@@ -315,7 +325,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     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 shellHeader = computed(() => headerHidden.value ? "0px" : headerHeight.value);
+    const shellVars = computed(
+      () => windowScrolls.value ? {
+        "--lp-shell-header": shellHeader.value,
+        "--lp-shell-top": `calc(${shellHeader.value} + ${contextRowHeight.value}px)`,
+        "--lp-shell-bottom": `${bottomBarHeight.value}px`
+      } : { "--lp-shell-header": "0px", "--lp-shell-top": "0px", "--lp-shell-bottom": "0px" }
+    );
     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))]",
@@ -478,7 +495,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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)]`]),
+              class: normalizeClass([spanClass.value, windowScrolls.value && `${STICKY} top-(--lp-shell-header) transition-[top] duration-[var(--duration-medium)] ease-[var(--ease-settle)]`]),
               items: contextItems.value,
               "is-active": activeTest.value,
               label: unref(text).contextNav,
@@ -575,8 +592,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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),
+            bottom: "var(--lp-shell-bottom)"
+          })) : createCommentVNode("", true),
           __props.bottomNav ? (openBlock(), createBlock(_sfc_main$9, {
             key: 3,
             ref_key: "bottomBarEl",

package/dist/components/LpAppShell.vue.d.ts

@@ -54,6 +54,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * `min-h-[calc(100dvh-4rem)]` or `fullBleed`. `"region"`: the shell is
      * the viewport and the page scrolls inside main. Read once: changing it
      * remounts the page.
+     *
+     * A page's own sticky parts keep clear of the shell's with two variables
+     * set inside it: `--lp-shell-top`, how much of the window's top the shell
+     * covers (the header, 0 while `headerCollapse` has it away, plus the
+     * sub-page row), and `--lp-shell-bottom`, how much of its foot (the bottom
+     * bar). Both change as those do, and are 0px in `"region"` and on a
+     * `fullBleed` page, where nothing of the shell's lies over the page:
+     * `position: sticky; top: var(--lp-shell-top)`. Keep the page's sticky
+     * layers under `--z-sticky`, the shell's.
      */
     scroll?: "document" | "region";
     /**
@@ -210,6 +219,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * `min-h-[calc(100dvh-4rem)]` or `fullBleed`. `"region"`: the shell is
      * the viewport and the page scrolls inside main. Read once: changing it
      * remounts the page.
+     *
+     * A page's own sticky parts keep clear of the shell's with two variables
+     * set inside it: `--lp-shell-top`, how much of the window's top the shell
+     * covers (the header, 0 while `headerCollapse` has it away, plus the
+     * sub-page row), and `--lp-shell-bottom`, how much of its foot (the bottom
+     * bar). Both change as those do, and are 0px in `"region"` and on a
+     * `fullBleed` page, where nothing of the shell's lies over the page:
+     * `position: sticky; top: var(--lp-shell-top)`. Keep the page's sticky
+     * layers under `--z-sticky`, the shell's.
      */
     scroll?: "document" | "region";
     /**

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-DkvU6IBB.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-DRHoQtr-.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-D5_YLLBC.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BGMk5KoG.js";
 import { _ as _5 } from "./chunks/LpAlert-CjvTZIKF.js";
-import { _ as _6 } from "./chunks/LpAppShell-DkvU6IBB.js";
+import { _ as _6 } from "./chunks/LpAppShell-DRHoQtr-.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-CrZbd0uv.js";
 import { _ as _8 } from "./chunks/LpAvatar-cQVsNk6F.js";
 import { _ as _9 } from "./chunks/LpBadge-D5QQdDQ_.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.78.2",
+  "version": "0.78.3",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpAppShell.vue

@@ -47,8 +47,9 @@ export default { inheritAttrs: false }
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, useSlots, watch } from "vue"
 import { easingToken, durationToken, prefersReducedMotion } from "../composables/easing"
 import { useLabels } from "../composables/useLpConfig"
+import { useResizeObserver } from "../composables/useResizeObserver"
 import { useScrollMemory } from "../composables/scrollMemory"
-import { nodeWindow, useView, viewWindow } from "../composables/useView"
+import { isHTMLElement, nodeWindow, useView, viewWindow } from "../composables/useView"
 import AppShellContextNav from "./AppShellContextNav.vue"
 import {
   contextNavItems,
@@ -129,6 +130,15 @@ const props = withDefaults(
      * `min-h-[calc(100dvh-4rem)]` or `fullBleed`. `"region"`: the shell is
      * the viewport and the page scrolls inside main. Read once: changing it
      * remounts the page.
+     *
+     * A page's own sticky parts keep clear of the shell's with two variables
+     * set inside it: `--lp-shell-top`, how much of the window's top the shell
+     * covers (the header, 0 while `headerCollapse` has it away, plus the
+     * sub-page row), and `--lp-shell-bottom`, how much of its foot (the bottom
+     * bar). Both change as those do, and are 0px in `"region"` and on a
+     * `fullBleed` page, where nothing of the shell's lies over the page:
+     * `position: sticky; top: var(--lp-shell-top)`. Keep the page's sticky
+     * layers under `--z-sticky`, the shell's.
      */
     scroll?: "document" | "region"
     /**
@@ -329,8 +339,8 @@ useScrollMemory(
   () => 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),
+  // The sticky header and sub-page row cover the top of the window; a region starts below them.
+  () => (documentScroll && !bleeding.value ? (headerEl.value?.offsetHeight ?? 0) + contextRowHeight.value : 0),
 )
 // The side region keeps its own place on the same address.
 useScrollMemory(
@@ -389,17 +399,19 @@ watch(bleeding, (bleed) => {
     void nextTick(() => view.scrollTo({ top, behavior: "instant" }))
   }
 })
-// The bottom bar's height, for the page's scrollbar to stop above it (0 where it is hidden).
+/*
+ * What the shell's sticky bars cover of the window, for the page: the sub-page
+ * row's height (it sits under the header) and the bottom bar's (0 where hidden).
+ */
 const bottomBarEl = ref<{ $el: HTMLElement } | null>(null)
 const bottomBarHeight = ref(0)
-let bottomBarSize: ResizeObserver | undefined
-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())
+useResizeObserver(
+  () => (bottomBarEl.value?.$el?.nodeType === 1 ? bottomBarEl.value.$el : null),
+  (_, el) => (bottomBarHeight.value = (el as HTMLElement).offsetHeight),
+  { immediate: true },
+)
+const contextRowEl = ref<HTMLElement | null>(null)
+const contextRowHeight = ref(0)
 
 let releaseDocument: (() => void) | undefined
 onMounted(() => {
@@ -480,7 +492,7 @@ const asideClasses = computed(() =>
 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 } : {}),
+  ...shellVars.value,
 }))
 const spanClass = computed(() => (hasAside.value ? "col-span-2" : undefined))
 
@@ -520,6 +532,17 @@ const contextItems = computed(() => (props.adaptiveNav?.contextNav ? contextNavI
 const contextVisible = computed(
   () => (navMode.value === "bottom" || navMode.value === "drawer") && (contextItems.value.length > 0 || (!!slots["context-nav"] && !!props.adaptiveNav?.contextNav)),
 )
+// The row is the app's own slot or the shell's, so it is found where it renders: right after the header.
+watch(
+  [contextVisible, mounted],
+  () => {
+    const next = headerEl.value?.nextElementSibling
+    contextRowEl.value = contextVisible.value && isHTMLElement(next) && next !== mainEl.value ? next : null
+    if (!contextRowEl.value) contextRowHeight.value = 0
+  },
+  { flush: "post" },
+)
+useResizeObserver(contextRowEl, (_, el) => (contextRowHeight.value = (el as HTMLElement).offsetHeight), { immediate: true })
 
 function onSelect(item: SidebarItem) {
   emit("select", item)
@@ -564,12 +587,27 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 
 /*
  * What stays in view while the window scrolls the page. The header sits on
- * top; the row of sub-pages and the aside sit under it, following it out
- * when it collapses (--lp-shell-top is how much of the header is showing).
+ * top; the row of sub-pages sits under it and follows it out when it
+ * collapses (--lp-shell-header is how much of the header is showing).
+ *
+ * Two variables are the page's to use (documented on `scroll`), and set in
+ * every mode, so `var(--lp-shell-top)` never needs a fallback:
+ * --lp-shell-top is how much of the window's top the shell covers (header
+ * plus sub-page row), --lp-shell-bottom how much of its foot (the bottom
+ * bar). Both are 0px where the page scrolls in its own region or is full bleed.
  */
 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 shellHeader = computed(() => (headerHidden.value ? "0px" : headerHeight.value))
+const shellVars = computed(() =>
+  windowScrolls.value
+    ? {
+        "--lp-shell-header": shellHeader.value,
+        "--lp-shell-top": `calc(${shellHeader.value} + ${contextRowHeight.value}px)`,
+        "--lp-shell-bottom": `${bottomBarHeight.value}px`,
+      }
+    : { "--lp-shell-header": "0px", "--lp-shell-top": "0px", "--lp-shell-bottom": "0px" },
+)
 const BACK_TO_TOP_ABOVE_BAR: Record<NavBreakpoint, string> = {
   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))]",
@@ -725,7 +763,7 @@ const backToTopClass = computed(() =>
       <template v-if="contextVisible">
         <slot name="context-nav" :items="contextItems" :mode="navMode">
           <AppShellContextNav
-            :class="[spanClass, windowScrolls && `${STICKY} top-(--lp-shell-top) transition-[top] duration-[var(--duration-medium)] ease-[var(--ease-settle)]`]"
+            :class="[spanClass, windowScrolls && `${STICKY} top-(--lp-shell-header) transition-[top] duration-[var(--duration-medium)] ease-[var(--ease-settle)]`]"
             :items="contextItems"
             :is-active="activeTest"
             :label="text.contextNav"
@@ -769,7 +807,7 @@ const backToTopClass = computed(() =>
           <slot name="aside" />
         </LpScrollArea>
       </aside>
-      <LpPageScrollbar v-if="windowScrolls && pageScrollbar" top="var(--lp-shell-top)" :bottom="`${bottomBarHeight}px`" />
+      <LpPageScrollbar v-if="windowScrolls && pageScrollbar" top="var(--lp-shell-top)" bottom="var(--lp-shell-bottom)" />
       <LpBottomNav
         v-if="bottomNav"
         ref="bottomBarEl"