@leavepulse/ui 0.74.1 → 0.74.2

package/dist/assets/{LpDropzone-Bb1vBTeU.css → LpDropzone-B_qRq1-R.css}

@@ -1,9 +1,9 @@
 
-.lp-dropzone__frame rect[data-v-46c9a55a] {
+.lp-dropzone__frame rect[data-v-afb08dd3] {
   stroke: var(--color-line);
   transition: stroke var(--duration-fast) linear;
 }
-.lp-dropzone:hover .lp-dropzone__frame rect[data-v-46c9a55a] {
+.lp-dropzone:hover .lp-dropzone__frame rect[data-v-afb08dd3] {
   stroke: var(--color-line-strong);
 }
 
@@ -12,28 +12,28 @@
    with every other thing on it; under a drag it is the answer to "can I let go
    here". One dash period per cycle, so the travel is continuous rather than
    jumping back at the seam. */
-.lp-dropzone--over .lp-dropzone__frame rect[data-v-46c9a55a] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-afb08dd3] {
   stroke: var(--color-brand);
-  animation: lp-dropzone-ants-46c9a55a 500ms linear infinite;
+  animation: lp-dropzone-ants-afb08dd3 500ms linear infinite;
 }
-@keyframes lp-dropzone-ants-46c9a55a {
+@keyframes lp-dropzone-ants-afb08dd3 {
 to {
     stroke-dashoffset: -11;
 }
 }
 
 /* The dashes fade in and the block settles up a few pixels. */
-.lp-dropzone[data-v-46c9a55a] {
+.lp-dropzone[data-v-afb08dd3] {
   --rise: 6px;
   animation: rise-in var(--duration-slow) var(--ease-settle) both;
 }
-.lp-dropzone--waiting[data-v-46c9a55a] {
+.lp-dropzone--waiting[data-v-afb08dd3] {
   opacity: 0;
   animation: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-dropzone[data-v-46c9a55a],
-  .lp-dropzone--waiting[data-v-46c9a55a] {
+.lp-dropzone[data-v-afb08dd3],
+  .lp-dropzone--waiting[data-v-afb08dd3] {
     opacity: 1;
     transform: none;
     animation: none;
@@ -41,7 +41,7 @@ to {
 
   /* The ants stop, the colour stays: the brand stroke is what says "drop
      here", and it says it standing still. */
-.lp-dropzone--over .lp-dropzone__frame rect[data-v-46c9a55a] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-afb08dd3] {
     animation: none;
 }
 }

package/dist/components/LpDropzone.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, useModel, watch, useId, onMounted, onBeforeUnmount, openBlock, createElementBlock, withModifiers, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, createVNode, Transition, withCtx, renderSlot, toDisplayString, createCommentVNode, createTextVNode, Fragment, mergeModels, nextTick } from "vue";
+import { defineComponent, ref, computed, useModel, watch, useId, onMounted, onBeforeUnmount, nextTick, openBlock, createElementBlock, withModifiers, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, createVNode, Transition, withCtx, renderSlot, toDisplayString, createCommentVNode, createTextVNode, Fragment, mergeModels } from "vue";
 import { HINT_SIGNALS, noteDropzone } from "../composables/useHintSystem.js";
 import { hints } from "../composables/useHints.js";
 import { useLabels } from "../composables/useLpConfig.js";
@@ -10,19 +10,24 @@ import { POPOVER_PANEL } from "./dropdown.js";
 import { _ as _sfc_main$2 } from "../chunks/LpIcon--5WSb3jJ.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpDropzone-Bb1vBTeU.css';const _hoisted_1 = ["aria-disabled"];
+import '../assets/LpDropzone-B_qRq1-R.css';const _hoisted_1 = ["aria-disabled"];
 const _hoisted_2 = ["disabled", "aria-labelledby"];
-const _hoisted_3 = ["id"];
-const _hoisted_4 = {
+const _hoisted_3 = {
+  "aria-hidden": "true",
+  class: "lp-dropzone__frame pointer-events-none absolute inset-0 size-full"
+};
+const _hoisted_4 = ["rx"];
+const _hoisted_5 = ["id"];
+const _hoisted_6 = {
   key: 0,
   class: "text-sm font-medium text-ink"
 };
-const _hoisted_5 = {
+const _hoisted_7 = {
   key: 1,
   class: "text-xs text-muted"
 };
-const _hoisted_6 = ["disabled"];
-const _hoisted_7 = ["accept", "multiple", "disabled"];
+const _hoisted_8 = ["disabled"];
+const _hoisted_9 = ["accept", "multiple", "disabled"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -260,6 +265,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       mounted = true;
       listen(props.pasteTarget);
+      measureRadius();
     });
     watch(
       () => props.pasteTarget,
@@ -277,6 +283,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       over.value ? "lp-dropzone--over" : "",
       props.animate && !revealed.value ? "lp-dropzone--waiting" : ""
     ].join(" "));
+    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;
+      if (zone) measuredRadius.value = getComputedStyle(zone).borderTopLeftRadius;
+    }
+    watch(rootClass, () => nextTick(measureRadius));
     const portalTo = usePortalTarget();
     const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
@@ -302,21 +317,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onClick: press,
           onPaste
         }), null, 16, _hoisted_2),
-        _cache[5] || (_cache[5] = createElementVNode("svg", {
-          "aria-hidden": "true",
-          class: "lp-dropzone__frame pointer-events-none absolute inset-0 size-full"
-        }, [
+        (openBlock(), createElementBlock("svg", _hoisted_3, [
           createElementVNode("rect", {
             x: "0.5",
             y: "0.5",
             width: "calc(100% - 1px)",
             height: "calc(100% - 1px)",
-            rx: "var(--radius-card)",
+            rx: frameRadius.value,
             fill: "none",
             "stroke-width": "1",
             "stroke-dasharray": "6 5"
-          })
-        ], -1)),
+          }, null, 8, _hoisted_4)
+        ])),
         createVNode(Transition, {
           mode: "out-in",
           "enter-active-class": "transition-[opacity,translate] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
@@ -355,8 +367,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 22,
                   class: normalizeClass(["text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", over.value ? "scale-110 text-brand" : ""])
                 }, null, 8, ["name", "class"]),
-                __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-                __props.hint || __props.links ? (openBlock(), createElementBlock("span", _hoisted_5, [
+                __props.title ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+                __props.hint || __props.links ? (openBlock(), createElementBlock("span", _hoisted_7, [
                   createTextVNode(toDisplayString(__props.hint), 1),
                   __props.hint && __props.links ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createTextVNode(" · ")
@@ -367,10 +379,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     class: "pointer-events-auto rounded-inner font-medium text-brand underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none",
                     disabled: __props.disabled,
                     onClick: withModifiers(startLink, ["stop"])
-                  }, toDisplayString(unref(labels).orLink), 9, _hoisted_6)) : createCommentVNode("", true)
+                  }, toDisplayString(unref(labels).orLink), 9, _hoisted_8)) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true)
               ], true)
-            ], 8, _hoisted_3))
+            ], 8, _hoisted_5))
           ]),
           _: 3
         }),
@@ -380,7 +392,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createVNode(unref(PopoverAnchor), {
-              reference: unref(revealAnchor) ?? void 0
+              reference: unref(revealAnchor) ?? void 0,
+              class: "hidden"
             }, null, 8, ["reference"]),
             createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
               default: withCtx(() => [
@@ -426,12 +439,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onChange: onPicked,
           onClick: _cache[4] || (_cache[4] = withModifiers(() => {
           }, ["stop"]))
-        }, null, 40, _hoisted_7)
+        }, null, 40, _hoisted_9)
       ], 46, _hoisted_1);
     };
   }
 });
-const LpDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-46c9a55a"]]);
+const LpDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-afb08dd3"]]);
 export {
   LpDropzone as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.74.1",
+  "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"