@leavepulse/ui 0.37.8 → 0.37.10

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

@@ -15,8 +15,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onScroll?: ((event: Event) => any) | undefined;
 }>, {
-    fade: boolean;
     instant: boolean;
+    fade: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/composables/useShift.js

@@ -14,15 +14,24 @@ function useShift(options = {}) {
   let lastWidth = 0;
   let inFlight = false;
   let tweenStart = 0;
-  const scrolled = /* @__PURE__ */ new Map();
+  const scrolled = /* @__PURE__ */ new Set();
   const rememberScroll = (event) => {
     const target = event.target;
-    if (target instanceof Element) scrolled.set(target, target.scrollTop);
+    if (target instanceof Element) scrolled.add(target);
   };
-  function restoreScroll() {
-    for (const [node, top] of scrolled) {
+  function readScroll() {
+    const tops = /* @__PURE__ */ new Map();
+    for (const node of scrolled) {
       if (!node.isConnected) scrolled.delete(node);
-      else if (node.scrollTop !== top) node.scrollTop = top;
+      else tops.set(node, node.scrollTop);
+    }
+    return tops;
+  }
+  function restoreScroll(tops) {
+    for (const [node, top] of tops) {
+      if (node.isConnected && node.scrollTop !== top) {
+        node.scrollTo({ top, behavior: "instant" });
+      }
     }
   }
   const axisOf = () => toValue(options.axis) ?? "height";
@@ -39,6 +48,7 @@ function useShift(options = {}) {
     }
     const fromHeight = lastHeight;
     const fromWidth = lastWidth;
+    const tops = readScroll();
     if (wantsHeight()) {
       node.style.height = "";
       node.style.maxHeight = "none";
@@ -51,7 +61,7 @@ function useShift(options = {}) {
     const toWidth = wantsWidth() ? node.offsetWidth : 0;
     if (wantsHeight()) node.style.maxHeight = "";
     if (wantsWidth()) node.style.maxWidth = "";
-    restoreScroll();
+    restoreScroll(tops);
     lastHeight = toHeight;
     lastWidth = toWidth;
     const movesHeight = wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight;
@@ -62,7 +72,7 @@ function useShift(options = {}) {
     void node.offsetHeight;
     if (movesHeight) node.style.height = `${toHeight}px`;
     if (movesWidth) node.style.width = `${toWidth}px`;
-    restoreScroll();
+    restoreScroll(tops);
     inFlight = true;
     tweenStart = performance.now();
     resizing.value = true;

package/package.json

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

package/src/composables/useShift.ts

@@ -92,22 +92,40 @@ export function useShift(
   /** When the in-flight tween started, to tell a duplicate from a follow-up. */
   let tweenStart = 0
   /**
-   * Scroll positions inside the box, kept from the scroll events themselves.
+   * Scrolling lists inside the box, found through their scroll events.
    * Measuring lifts the height cap, and for that one reflow a scrolling list
    * inside (a picker, a span tree) is as tall as its content: it no longer
    * overflows, the browser clamps its scrollTop to 0, and putting the cap back
    * does not bring the position back. Every click that changed the content —
    * ticking an item, picking a span — threw the list back to the top.
+   *
+   * The position to put back is read live just before measuring, and only a
+   * list the measurement actually moved is touched, with an instant write. An
+   * earlier version replayed the last scroll event's figure through
+   * `scrollTop` on every retune. Inside a `scroll-smooth` area that write is
+   * itself animated, its in-between frames were recorded as new positions,
+   * and any mutation while the user scrolled — a row re-rendering on hover —
+   * replayed a stale one: a long dialog crept back to the top and could not
+   * be scrolled at all.
    */
-  const scrolled = new Map<Element, number>()
+  const scrolled = new Set<Element>()
   const rememberScroll = (event: Event) => {
     const target = event.target
-    if (target instanceof Element) scrolled.set(target, target.scrollTop)
+    if (target instanceof Element) scrolled.add(target)
   }
-  function restoreScroll() {
-    for (const [node, top] of scrolled) {
+  function readScroll(): Map<Element, number> {
+    const tops = new Map<Element, number>()
+    for (const node of scrolled) {
       if (!node.isConnected) scrolled.delete(node)
-      else if (node.scrollTop !== top) node.scrollTop = top
+      else tops.set(node, node.scrollTop)
+    }
+    return tops
+  }
+  function restoreScroll(tops: Map<Element, number>) {
+    for (const [node, top] of tops) {
+      if (node.isConnected && node.scrollTop !== top) {
+        node.scrollTo({ top, behavior: "instant" })
+      }
     }
   }
 
@@ -153,6 +171,7 @@ export function useShift(
     // already reflowed, so the element can only report where it is going.
     const fromHeight = lastHeight
     const fromWidth = lastWidth
+    const tops = readScroll()
 
     // Measured with any cap lifted, then the clamp is left to CSS. A `max-*`
     // from a class makes the element report the clipped figure once the cap
@@ -170,7 +189,7 @@ export function useShift(
     const toWidth = wantsWidth() ? node.offsetWidth : 0
     if (wantsHeight()) node.style.maxHeight = ""
     if (wantsWidth()) node.style.maxWidth = ""
-    restoreScroll()
+    restoreScroll(tops)
     lastHeight = toHeight
     lastWidth = toWidth
 
@@ -193,7 +212,7 @@ export function useShift(
     void node.offsetHeight
     if (movesHeight) node.style.height = `${toHeight}px`
     if (movesWidth) node.style.width = `${toWidth}px`
-    restoreScroll()
+    restoreScroll(tops)
 
     inFlight = true
     tweenStart = performance.now()

package/src/tokens/tokens.css

@@ -451,8 +451,8 @@
   position: relative;
   border-width: var(--surface-border-width);
   box-shadow: var(--surface-panel-inset), var(--surface-panel-shadow);
-  backdrop-filter: blur(var(--surface-panel-blur)) saturate(var(--surface-panel-saturate));
   -webkit-backdrop-filter: blur(var(--surface-panel-blur)) saturate(var(--surface-panel-saturate));
+  backdrop-filter: blur(var(--surface-panel-blur)) saturate(var(--surface-panel-saturate));
 }
 
 /*
@@ -470,8 +470,8 @@
 }
 
 :root[data-lp-no-backdrop] .lp-skin-panel {
-  backdrop-filter: none;
   -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 /*
@@ -486,8 +486,8 @@
  */
 .lp-scrim {
   background-color: rgb(0 0 0 / var(--scrim-opacity, 0.5));
-  backdrop-filter: blur(var(--scrim-blur, 4px));
   -webkit-backdrop-filter: blur(var(--scrim-blur, 4px));
+  backdrop-filter: blur(var(--scrim-blur, 4px));
 }
 
 /*
@@ -497,9 +497,17 @@
  * while the engines that do paint it disagreed with the token. One owner for
  * both halves keeps the two cases in step.
  */
+/*
+ * The prefixed declaration comes FIRST, everywhere in this file. Lightning CSS
+ * (Tailwind v4's minifier) folds the pair into one property and keeps the
+ * last spelling it sees: with `-webkit-` last, a consumer's production build
+ * shipped only `-webkit-backdrop-filter`, which Chromium and Firefox ignore —
+ * the scrim tinted but never blurred, while the unminified dev server and
+ * this preview looked fine.
+ */
 :root[data-lp-no-backdrop] .lp-scrim {
-  backdrop-filter: none;
   -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   --scrim-opacity: 0.62;
 }