@leavepulse/ui 0.27.1 → 0.28.1

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/chunks/{LpNumberField-B3JuQFol.js → LpNumberField-NPE8Bumx.js}

@@ -1,6 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode } from "vue";
+import { defineComponent, useId, openBlock, createBlock, unref, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["id"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpNumberField",
   props: {
@@ -8,10 +9,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     min: {},
     max: {},
     step: {},
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    unit: {}
   },
   emits: ["update:modelValue"],
   setup(__props) {
+    const unitId = useId();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NumberFieldRoot), {
         "model-value": __props.modelValue ?? void 0,
@@ -34,7 +37,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(NumberFieldInput), { class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" }),
+          createVNode(unref(NumberFieldInput), {
+            "aria-describedby": __props.unit ? unref(unitId) : void 0,
+            class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+          }, null, 8, ["aria-describedby"]),
+          __props.unit ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: unref(unitId),
+            class: "shrink-0 pr-1 text-xs text-muted"
+          }, toDisplayString(__props.unit), 9, _hoisted_1)) : createCommentVNode("", true),
           createVNode(unref(NumberFieldIncrement), { class: "group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40" }, {
             default: withCtx(() => [
               createVNode(_sfc_main$1, {

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/components/LpNumberField.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     max?: number;
     step?: number;
     disabled?: boolean;
+    unit?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: number | null) => any;

package/dist/components/LpNumberField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNumberField-B3JuQFol.js";
+import { _ as _sfc_main } from "../chunks/LpNumberField-NPE8Bumx.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -32,11 +32,11 @@ 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";
-import { _ as _34 } from "./chunks/LpNumberField-B3JuQFol.js";
+import { _ as _34 } from "./chunks/LpNumberField-NPE8Bumx.js";
 import { _ as _35 } from "./chunks/LpNumberFlow-amWYaeuA.js";
 import { _ as _36 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _37 } from "./chunks/LpPagination-CeGuNe_q.js";

package/package.json

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

package/src/components/LpNumberField.vue

@@ -6,6 +6,7 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from "reka-ui"
+import { useId } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 defineProps<{
@@ -16,9 +17,19 @@ defineProps<{
   max?: number
   step?: number
   disabled?: boolean
+  // The unit the number is in ("mm", "W", "mA"). It sits inside the field
+  // rather than in the label, because a grid of bare boxes labelled "Width",
+  // "Depth", "Weight" tells the reader nothing about which one wants grams.
+  // Not part of the value: it is never typed, selected, or submitted.
+  unit?: string
 }>()
 
 defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
+
+// The unit is described to the input rather than merely placed beside it: on
+// screen the two read as one field, and without this a reader announces "380"
+// and leaves out the milliamps that make it mean anything.
+const unitId = useId()
 </script>
 
 <template>
@@ -42,8 +53,13 @@ defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
       />
     </NumberFieldDecrement>
     <NumberFieldInput
+      :aria-describedby="unit ? unitId : undefined"
       class="min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
     />
+    <!-- The unit sits between the value and the increment button, so a long one
+         narrows the field rather than covering the digits. Not focusable and
+         not part of the value: it is read, never typed. -->
+    <span v-if="unit" :id="unitId" class="shrink-0 pr-1 text-xs text-muted">{{ unit }}</span>
     <NumberFieldIncrement
       class="group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
     >