@leavepulse/ui 0.14.8 → 0.14.9

package/dist/chunks/{LpCard-1yvWT9fx.js → LpCard-BmrTvWOe.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, withCtx, createElementVNode, mergeProps, renderSlot, createElementBlock } from "vue";
+import { defineComponent, computed, openBlock, createBlock, withCtx, resolveDynamicComponent, mergeProps, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
 import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
 const __default__ = { inheritAttrs: false };
@@ -9,7 +9,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     variant: { default: "raised" },
     padded: { type: Boolean, default: true },
     interactive: { type: Boolean, default: false },
-    menuItems: {}
+    menuItems: {},
+    as: { default: "div" }
   },
   setup(__props) {
     const card = tv({
@@ -32,6 +33,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         // NOTE: in Tailwind v4 `translate-*` writes the native `translate` property
         // (not `transform`), so the transition list MUST name `translate` explicitly
         // or the lift snaps while the rest eases.
+        //
+        // The glow reaches past the card, so a clipping ancestor (scroll area,
+        // dialog body) will slice it unless the list reserves room — see the
+        // `.lp-glow-room` helper in tokens.css, whose spread tokens describe exactly
+        // the distance this shadow travels.
         interactive: {
           true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-medium ease-[var(--ease-emphasized)] hover:-translate-y-0.5 hover:border-brand/40 hover:shadow-[var(--lp-card-glow)] hover:[--surface-panel-shadow:var(--lp-card-glow)] [--lp-card-glow:0_8px_24px_-6px_color-mix(in_srgb,var(--color-brand)_38%,transparent)] motion-reduce:transition-none motion-reduce:hover:translate-y-0"
         }
@@ -47,17 +53,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         items: __props.menuItems
       }, {
         default: withCtx(() => [
-          createElementVNode("div", mergeProps({ class: classes.value }, _ctx.$attrs), [
-            renderSlot(_ctx.$slots, "default")
-          ], 16)
+          (openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({ class: classes.value }, _ctx.$attrs), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["class"]))
         ]),
         _: 3
-      }, 8, ["items"])) : (openBlock(), createElementBlock("div", mergeProps({
+      }, 8, ["items"])) : (openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
         key: 1,
         class: classes.value
-      }, _ctx.$attrs), [
-        renderSlot(_ctx.$slots, "default")
-      ], 16));
+      }, _ctx.$attrs), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]));
     };
   }
 });

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

@@ -7,13 +7,18 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     interactive?: boolean;
     /** Right-click menu for the card. Omit (or pass []) to keep the native one. */
     menuItems?: ContextMenuItemDef[];
+    /** Element to render as. A card inside a <ul> has to be an `li` to be valid. */
+    as?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     variant?: "flat" | "ghost" | "raised" | undefined;
     padded?: boolean;
     interactive?: boolean;
     /** Right-click menu for the card. Omit (or pass []) to keep the native one. */
     menuItems?: ContextMenuItemDef[];
+    /** Element to render as. A card inside a <ul> has to be an `li` to be valid. */
+    as?: string;
 }> & Readonly<{}>, {
+    as: string;
     variant: "flat" | "ghost" | "raised";
     padded: boolean;
     interactive: boolean;

package/dist/components/LpCard.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpCard-1yvWT9fx.js";
+import { _ as _sfc_main } from "../chunks/LpCard-BmrTvWOe.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -7,7 +7,7 @@ import { _ as _6 } from "./chunks/LpBadge-CXzBPnwO.js";
 import { _ as _7 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
 import { _ as _8 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _9 } from "./chunks/LpCalendar-B7ZL0ty3.js";
-import { _ as _10 } from "./chunks/LpCard-1yvWT9fx.js";
+import { _ as _10 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _11 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _12 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -31,7 +31,7 @@
     "./dist/*": "./dist/*"
   },
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
+    "registry": "https://registry.npmjs.org"
   },
   "sideEffects": [
     "**/*.css",

package/src/components/LpCard.vue

@@ -30,6 +30,11 @@ const card = tv({
     // NOTE: in Tailwind v4 `translate-*` writes the native `translate` property
     // (not `transform`), so the transition list MUST name `translate` explicitly
     // or the lift snaps while the rest eases.
+    //
+    // The glow reaches past the card, so a clipping ancestor (scroll area,
+    // dialog body) will slice it unless the list reserves room — see the
+    // `.lp-glow-room` helper in tokens.css, whose spread tokens describe exactly
+    // the distance this shadow travels.
     interactive: {
       true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-medium ease-[var(--ease-emphasized)] hover:-translate-y-0.5 hover:border-brand/40 hover:shadow-[var(--lp-card-glow)] hover:[--surface-panel-shadow:var(--lp-card-glow)] [--lp-card-glow:0_8px_24px_-6px_color-mix(in_srgb,var(--color-brand)_38%,transparent)] motion-reduce:transition-none motion-reduce:hover:translate-y-0",
     },
@@ -47,8 +52,10 @@ const props = withDefaults(
     interactive?: boolean
     /** Right-click menu for the card. Omit (or pass []) to keep the native one. */
     menuItems?: ContextMenuItemDef[]
+    /** Element to render as. A card inside a <ul> has to be an `li` to be valid. */
+    as?: string
   }>(),
-  { variant: "raised", padded: true, interactive: false },
+  { variant: "raised", padded: true, interactive: false, as: "div" },
 )
 
 const classes = computed(() =>
@@ -61,11 +68,11 @@ const classes = computed(() =>
        (inheritAttrs:false above), so the card surface looks identical whether or
        not it's wrapped in a context menu. -->
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <div :class="classes" v-bind="$attrs">
+    <component :is="as" :class="classes" v-bind="$attrs">
       <slot />
-    </div>
+    </component>
   </LpContextMenu>
-  <div v-else :class="classes" v-bind="$attrs">
+  <component :is="as" v-else :class="classes" v-bind="$attrs">
     <slot />
-  </div>
+  </component>
 </template>

package/src/tokens/tokens.css

@@ -60,6 +60,16 @@
   /* ── depth ───────────────────────────────────── */
   --shadow-panel: 0 16px 48px rgba(0, 0, 0, 0.32);
 
+  /* How far an interactive card's hover glow spreads past its own box, and how
+     far the card lifts. A scroll area or any `overflow: hidden` parent clips
+     whatever crosses its edge, so a list of cards has to reserve this much room
+     around itself or the glow gets sliced off — see the `.lp-glow-room` helper.
+     Derived from LpCard's glow (0 8px 24px -6px): blur 24 minus spread 6 = 18
+     sideways and up, plus the 8px downward offset below. */
+  --lp-glow-spread: 18px;
+  --lp-glow-spread-bottom: 26px;
+  --lp-card-lift: 2px;
+
   /* ── surface / skin ──────────────────────────────
      The skin axis (flat default). applyTheme() overrides these at runtime per
      TokenSet.surface; components paint panels via .lp-skin-panel which reads
@@ -131,16 +141,22 @@
  * of appearing. Exit drops back the same way but shorter and on an accelerating
  * curve, since a dismissal shouldn't be savoured.
  */
+/*
+ * Centred-dialog enter/exit. Deliberately translate + fade with NO scale: the
+ * panel is a flex column with a max-height and its own scroll regions, and
+ * scaling it re-runs that layout every frame — the content visibly squashed and
+ * the animation stuttered. A short rise reads as arriving just as well.
+ */
 @keyframes pop-in {
   from {
     opacity: 0;
-    transform: translate(-50%, calc(-50% + 8px)) scale(0.97);
+    transform: translate(-50%, calc(-50% + 10px));
   }
 }
 @keyframes pop-out {
   to {
     opacity: 0;
-    transform: translate(-50%, calc(-50% + 4px)) scale(0.985);
+    transform: translate(-50%, calc(-50% + 5px));
   }
 }
 /*
@@ -294,6 +310,30 @@
   z-index: 1;
 }
 
+/*
+ * Room for a hover glow. An interactive card's glow spreads past the card's own
+ * box, so inside anything that clips — a scroll area, a dialog body, a panel
+ * with `overflow: hidden` — the glow gets sliced off flat against the edge, and
+ * a card sitting at the very top or bottom of a list loses it entirely. The
+ * same clip takes the focus ring, which is likewise drawn outside the border;
+ * the glow is the wider of the two, so reserving for it covers both.
+ *
+ * Put this on the element that LAYS OUT the cards (the <ul>, the grid), not on
+ * the clipping parent: it pads the content inward by exactly the distance the
+ * glow travels, so the glow lands on padding instead of on the clip boundary.
+ * Negative margins pull that padding back out, so the cards stay where they
+ * were and nothing shifts — only the overflow gets somewhere to go.
+ *
+ * Bottom gets more room than the top because the glow is offset downward, and
+ * the top gets the lift added back, since a hovered card rises into it.
+ */
+.lp-glow-room {
+  padding: calc(var(--lp-glow-spread) + var(--lp-card-lift)) var(--lp-glow-spread)
+    var(--lp-glow-spread-bottom);
+  margin: calc(-1 * (var(--lp-glow-spread) + var(--lp-card-lift))) calc(-1 * var(--lp-glow-spread))
+    calc(-1 * var(--lp-glow-spread-bottom));
+}
+
 /* ── circular theme reveal (View Transitions) ────
    applyThemeWithTransition() snapshots the page, swaps the theme tokens, then
    shrinks a clip-path circle in the OLD snapshot from the toggle's position,