@leavepulse/ui 0.74.0 → 0.74.2

package/package.json

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

package/src/components/LpDropzone.vue

@@ -406,6 +406,7 @@ let mounted = false
 onMounted(() => {
   mounted = true
   listen(props.pasteTarget)
+  measureRadius()
 })
 watch(
   () => props.pasteTarget,
@@ -430,6 +431,22 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => [
   props.animate && !revealed.value ? "lp-dropzone--waiting" : "",
 ].join(" "))
 
+// The dashed frame is an SVG rect, which cannot inherit the box's
+// border-radius: a zone rounded by the consumer (`rounded-control`) kept the
+// card's curve on its dashes while the background clipped tighter. The kit's
+// own rounding stays a live token, so a theme that changes it still applies.
+const measuredRadius = ref("")
+const frameRadius = computed(() =>
+  rootClass.value.split(/\s+/).includes("rounded-card") || !measuredRadius.value
+    ? "var(--radius-card)"
+    : measuredRadius.value,
+)
+function measureRadius() {
+  const zone = revealAnchor.value as HTMLElement | null
+  if (zone) measuredRadius.value = getComputedStyle(zone).borderTopLeftRadius
+}
+watch(rootClass, () => nextTick(measureRadius))
+
 // Overlays open in the window this component renders in (an LpFrame's, inside one).
 const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
@@ -473,7 +490,7 @@ const guardOutside = useOutsideGuard()
         y="0.5"
         width="calc(100% - 1px)"
         height="calc(100% - 1px)"
-        rx="var(--radius-card)"
+        :rx="frameRadius"
         fill="none"
         stroke-width="1"
         stroke-dasharray="6 5"
@@ -526,7 +543,9 @@ const guardOutside = useOutsideGuard()
     <!-- A zone too narrow for the field (a thumbnail beside its controls)
          keeps its picture and opens the field under itself instead. -->
     <PopoverRoot :open="linking && floating" @update:open="(open: boolean) => !open && stopLink(false)">
-      <PopoverAnchor :reference="revealAnchor ?? undefined" />
+      <!-- Positioned by `reference`; its own empty element must not be a flex
+           item, or the zone's gap adds a strip under the content. -->
+      <PopoverAnchor :reference="revealAnchor ?? undefined" class="hidden" />
       <PopoverPortal :to="portalTo">
         <PopoverContent
           @interact-outside="guardOutside"

package/src/components/LpShift.vue

@@ -304,10 +304,8 @@ defineExpose({ resizing })
       resizing ? 'overflow-hidden' : '',
       // While the box holds a width its content has outgrown, a flex row would
       // squeeze its children to fit (a button's keys folding into a column)
-      // instead of letting the easing edge clip them. A single child that is
-      // itself a wrapping row is laid out at the width the box is heading for,
-      // or it would break onto a second line until the tween lands.
-      resizing && axis !== 'height' ? '[&>*]:shrink-0 [&>*:only-child]:min-w-(--lp-shift-to-w)' : '',
+      // instead of letting the easing edge clip them.
+      resizing && axis !== 'height' ? '[&>*]:shrink-0' : '',
       resizing && anchor === 'end' ? 'justify-end' : '',
     ]"
   >

package/src/composables/useShift.ts

@@ -62,9 +62,6 @@ export interface UseShift {
   retune: () => void
 }
 
-/** Set on the box while it eases its width: where that width will land. */
-export const TARGET_WIDTH = "--lp-shift-to-w"
-
 /** Kept in step with the `duration-fast` token the transition utilities use. */
 const TWEEN_MS = 160
 
@@ -191,14 +188,8 @@ export function useShift(
     // its bar re-animated some sixty times a second).
     if (wantsHeight()) node.style.height = ""
     if (wantsWidth()) node.style.width = ""
-    // The content's own width, not the one the last tween held it at: left in
-    // place, the rounded-up figure fed back into the next measurement and the
-    // box grew a pixel a frame for good.
-    node.style.removeProperty(TARGET_WIDTH)
     const toHeight = wantsHeight() ? node.offsetHeight : 0
     const toWidth = wantsWidth() ? node.offsetWidth : 0
-    // offsetWidth is rounded, and content that needs 406.4px wraps at 406.
-    const exactWidth = wantsWidth() ? Math.ceil(node.getBoundingClientRect().width) : 0
     restoreScroll(tops)
     lastHeight = toHeight
     lastWidth = toWidth
@@ -224,10 +215,6 @@ export function useShift(
     void node.offsetHeight
     if (movesHeight) node.style.height = `${toHeight}px`
     if (movesWidth) node.style.width = `${toWidth}px`
-    // The width the box is heading for, for content that would otherwise lay
-    // itself out at every in-between width: a wrapping row inside a widening
-    // box broke onto a second line for the length of the tween.
-    if (movesWidth) node.style.setProperty(TARGET_WIDTH, `${exactWidth}px`)
     restoreScroll(tops)
 
     inFlight = true
@@ -246,7 +233,6 @@ export function useShift(
       // clearing it let the box spread to the window's edges.
       if (wantsHeight()) node.style.height = ""
       if (wantsWidth()) node.style.width = ""
-      node.style.removeProperty(TARGET_WIDTH)
       // Re-read rather than trusting the target: the layout around may have
       // moved meanwhile, and the next tween has to start from where it sits.
       lastHeight = node.offsetHeight