@leavepulse/ui 0.20.0 → 0.20.2

package/dist/composables/useSettled.d.ts

@@ -4,8 +4,8 @@ export interface UseSettledOptions {
     delay?: MaybeRefOrGetter<number>;
 }
 /**
- * Returns a ref that flips true once `open` has been true for the length of the
- * overlay's opening animation. Gate expensive content on it:
+ * Returns a ref that flips true once `open` has been truthy for the length of
+ * the overlay's opening animation. Gate expensive content on it:
  *
  * ```ts
  * const settled = useSettled(() => isOpen.value)
@@ -15,7 +15,12 @@ export interface UseSettledOptions {
  * <RowSkeletons v-else />
  * ```
  *
+ * Anything truthy counts as open, so an id can be passed instead of a boolean.
+ * That is the useful form when the same panel is reused for different subjects:
+ * the wait restarts when the id changes, because the panel is mounting a whole
+ * new body without ever having closed.
+ *
  * With reduced motion there is no animation to protect, so it resolves on the
  * next tick rather than making the user wait for a delay that buys nothing.
  */
-export declare function useSettled(open: MaybeRefOrGetter<boolean>, options?: UseSettledOptions): import('vue').Ref<boolean, boolean>;
+export declare function useSettled(open: MaybeRefOrGetter<unknown>, options?: UseSettledOptions): import('vue').Ref<boolean, boolean>;

package/dist/composables/useSettled.js

@@ -11,12 +11,13 @@ function useSettled(open, options = {}) {
   }
   watch(
     () => toValue(open),
-    (isOpen) => {
+    (value) => {
       clear();
-      if (!isOpen) {
+      if (!value) {
         settled.value = false;
         return;
       }
+      settled.value = false;
       const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
       const wait = reduced ? 0 : toValue(options.delay) ?? SETTLE_MS;
       timer = setTimeout(() => {

package/package.json

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

package/src/composables/useSettled.ts

@@ -28,8 +28,8 @@ export interface UseSettledOptions {
 }
 
 /**
- * Returns a ref that flips true once `open` has been true for the length of the
- * overlay's opening animation. Gate expensive content on it:
+ * Returns a ref that flips true once `open` has been truthy for the length of
+ * the overlay's opening animation. Gate expensive content on it:
  *
  * ```ts
  * const settled = useSettled(() => isOpen.value)
@@ -39,11 +39,16 @@ export interface UseSettledOptions {
  * <RowSkeletons v-else />
  * ```
  *
+ * Anything truthy counts as open, so an id can be passed instead of a boolean.
+ * That is the useful form when the same panel is reused for different subjects:
+ * the wait restarts when the id changes, because the panel is mounting a whole
+ * new body without ever having closed.
+ *
  * With reduced motion there is no animation to protect, so it resolves on the
  * next tick rather than making the user wait for a delay that buys nothing.
  */
 export function useSettled(
-  open: MaybeRefOrGetter<boolean>,
+  open: MaybeRefOrGetter<unknown>,
   options: UseSettledOptions = {},
 ) {
   const settled = ref(false)
@@ -58,12 +63,16 @@ export function useSettled(
 
   watch(
     () => toValue(open),
-    (isOpen) => {
+    (value) => {
       clear()
-      if (!isOpen) {
+      if (!value) {
         settled.value = false
         return
       }
+      // Restarted on the value, not on open/closed: a panel handed a different
+      // id stays open while its whole body is replaced, and that second mount
+      // is as expensive as the first.
+      settled.value = false
       const reduced =
         typeof window !== "undefined" &&
         window.matchMedia?.("(prefers-reduced-motion: reduce)").matches

package/src/tokens/tokens.css

@@ -320,6 +320,23 @@
   }
 }
 
+/*
+ * Mirror of tree-row-in, for rows that arrive from the trailing edge: a list
+ * swapping placeholders for loaded content reads as the real rows sliding in
+ * over them rather than blinking into place. Stagger it per row the way
+ * OPTION_ITEM does, capping the delay so a long list still lands promptly.
+ */
+@keyframes row-in-trailing {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 /*
  * Lightbox. The image grows in from slightly under full size so opening reads as
  * the picture coming toward you rather than a panel appearing; the exit is