@leavepulse/ui 0.27.1 → 0.28.0

package/dist/chunks/{LpLink-Bu01SZzB.js → LpLink-BHZ1CLlF.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
-const revealClass = "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100";
+const REVEAL_BASE = "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] after:ease-[var(--ease-emphasized)] motion-reduce:after:transition-none";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLink",
   props: {
@@ -8,7 +8,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     muted: { type: Boolean },
     tone: {},
     as: { default: "a" },
-    variant: { default: "default" }
+    variant: { default: "default" },
+    revealOn: { default: "self" }
   },
   setup(__props) {
     const props = __props;
@@ -28,6 +29,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return "text-brand hover:text-brand-hover";
       }
     });
+    const REVEAL_TRIGGER = {
+      self: "hover:after:scale-x-100 focus-visible:after:scale-x-100",
+      group: "group-hover:after:scale-x-100 group-focus-visible:after:scale-x-100 focus-visible:after:scale-x-100"
+    };
+    const revealClass = computed(
+      () => `${REVEAL_BASE} ${REVEAL_TRIGGER[props.revealOn]}`
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
         href: isAnchor.value ? __props.href : void 0,
@@ -35,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rel: rel.value,
         class: normalizeClass(["inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", [
           colorClass.value,
-          __props.variant === "reveal" ? revealClass : __props.variant === "underline" ? "underline decoration-current/40 hover:decoration-current" : "hover:underline"
+          __props.variant === "reveal" ? revealClass.value : __props.variant === "underline" ? "underline decoration-current/40 hover:decoration-current" : "hover:underline"
         ]])
       }, {
         default: withCtx(() => [

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

@@ -28,6 +28,16 @@ type __VLS_Props = {
      *   good for inline prose links and nav items that want a bit of motion.
      */
     variant?: "default" | "underline" | "reveal";
+    /**
+     * Which hover draws the `reveal` bar.
+     *
+     * "self"  — the link's own hover (default), for an inline prose link.
+     * "group" — the hover of an ancestor marked `group`, for a link inside a
+     *   row or card that is itself the click target. The row lights up and the
+     *   name sweeps with it, instead of the bar waiting for the pointer to
+     *   cross the text exactly.
+     */
+    revealOn?: "self" | "group";
 };
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -36,6 +46,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     as: string | Component;
     variant: "default" | "underline" | "reveal";
+    revealOn: "self" | "group";
 }, {}, {}, {}, 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/components/LpLink.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLink-Bu01SZzB.js";
+import { _ as _sfc_main } from "../chunks/LpLink-BHZ1CLlF.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -32,7 +32,7 @@ import { _ as _27 } from "./chunks/LpInfraNode-qIL3l7IO.js";
 import { _ as _28 } from "./chunks/LpInput-jwqXlAy0.js";
 import { _ as _29 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _30 } from "./chunks/LpLink-Bu01SZzB.js";
+import { _ as _30 } from "./chunks/LpLink-BHZ1CLlF.js";
 import { _ as _31 } from "./chunks/LpLogViewer-CcQ3s3Fp.js";
 import { _ as _32 } from "./chunks/LpModal-D_o-56To.js";
 import { _ as _33 } from "./chunks/LpNotificationBell-Dvu-b6Vn.js";

package/package.json

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

package/src/components/LpLink.vue

@@ -31,8 +31,18 @@ const props = withDefaults(
      *   good for inline prose links and nav items that want a bit of motion.
      */
     variant?: "default" | "underline" | "reveal"
+    /**
+     * Which hover draws the `reveal` bar.
+     *
+     * "self"  — the link's own hover (default), for an inline prose link.
+     * "group" — the hover of an ancestor marked `group`, for a link inside a
+     *   row or card that is itself the click target. The row lights up and the
+     *   name sweeps with it, instead of the bar waiting for the pointer to
+     *   cross the text exactly.
+     */
+    revealOn?: "self" | "group"
   }>(),
-  { variant: "default", as: "a" },
+  { variant: "default", as: "a", revealOn: "self" },
 )
 
 // A router link component owns its destination through its own prop (`to`),
@@ -61,8 +71,29 @@ const colorClass = computed(() => {
 // but scaled to 0 on the x-axis from the left, growing to 1 on hover/focus. The
 // bar colour follows the link colour (brand, or ink when muted) so it re-skins
 // with the theme.
-const revealClass =
-  "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100"
+//
+// motion-reduce drops the travel rather than the feedback: the bar still
+// appears, it just stops sweeping. A link that gave no hover response at all
+// would be worse for the people that setting is for, not better.
+const REVEAL_BASE =
+  "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] after:ease-[var(--ease-emphasized)] motion-reduce:after:transition-none"
+
+// Whose hover draws the bar. `self` is the ordinary inline link. `group` is for
+// a link inside a row, card or tile that is ITSELF the click target: the whole
+// row highlights, and the name in it should sweep with that rather than only
+// when the pointer happens to cross the few characters of text. Tailwind needs
+// the `group` class on that ancestor.
+//
+// Both spelled out as whole literals: the consuming app scans this file as
+// TEXT, so a class assembled at runtime is one it never emits.
+const REVEAL_TRIGGER = {
+  self: "hover:after:scale-x-100 focus-visible:after:scale-x-100",
+  group: "group-hover:after:scale-x-100 group-focus-visible:after:scale-x-100 focus-visible:after:scale-x-100",
+} as const
+
+const revealClass = computed(
+  () => `${REVEAL_BASE} ${REVEAL_TRIGGER[props.revealOn]}`,
+)
 </script>
 
 <template>