@leavepulse/ui 0.20.4 → 0.20.5

package/dist/chunks/{LpAddressInput-BV9M0aec.js → LpAddressInput-CK6y3xZm.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-YaFleOpp.js";
+import { _ as _sfc_main$7 } from "./LpModal-BQvb6ekk.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAppShell-oYlB1C9T.js → LpAppShell-JWrWjNdC.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, watch, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, createBlock } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$4 } from "./LpScrollArea-BjImFflN.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-DlvoM3h6.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-ZnycmmEI.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-CC5759Mh.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpConfirmDialog-BgaP-GJZ.js → LpConfirmDialog-ClefCHIT.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-YaFleOpp.js";
+import { _ as _sfc_main$1 } from "./LpModal-BQvb6ekk.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-D1ubjU11.js → LpDrawer-Dr1USsND.js}

@@ -3,7 +3,7 @@ import { usePointerSwipe } from "@vueuse/core";
 import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = { class: "text-base font-semibold text-ink" };
 const _hoisted_2 = { class: "flex flex-col gap-1" };
 const _hoisted_3 = ["data-vaul-no-drag"];

package/dist/chunks/{LpFileTree-CmKJxz4K.js → LpFileTree-DcoePIZq.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, watch, computed, openBlock, createElementBlock, F
 import { formatSize, sortNodes, computeStats, subtreeIds, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$3 } from "./LpFileTreeNode-DFg4PhOK.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden"

package/dist/chunks/{LpLogViewer-CFckvccr.js → LpLogViewer-BDPbnCOU.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, createVNode, normalizeStyle, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, normalizeClass, createTextVNode, Transition } from "vue";
 import { _ as _sfc_main$3 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = { class: "relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed" };
 const _hoisted_2 = {
   key: 0,
@@ -353,7 +353,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$1, {
           ref_key: "scrollRef",
           ref: scrollRef,
-          fade: "",
           instant: "",
           "content-class": __props.wrap ? "" : "min-w-max",
           style: normalizeStyle({ height: __props.height }),

package/dist/chunks/{LpModal-YaFleOpp.js → LpModal-BQvb6ekk.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, ref, watch, onBeforeUnmount, openB
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = { class: "fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none" };
 const _hoisted_2 = {
   key: 0,
@@ -185,7 +185,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "default")
                     ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
                       key: 2,
-                      fade: "",
                       class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", resizing.value ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
                       "content-class": bodyPad.value
                     }, {

package/dist/chunks/{LpNotificationBell-B1QTe4mK.js → LpNotificationBell-DDzQY0YA.js}

@@ -5,7 +5,7 @@ import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$5 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
-import { _ as _sfc_main$3 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = { class: "flex items-center justify-between gap-2 px-3 py-2.5" };
 const _hoisted_2 = { class: "text-sm font-semibold" };
 const _hoisted_3 = {

package/dist/chunks/{LpScrollArea-BjImFflN.js → LpScrollArea-ZnycmmEI.js}

@@ -5,7 +5,7 @@ const FADE_PX = 14;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpScrollArea",
   props: {
-    fade: { type: Boolean },
+    fade: { type: Boolean, default: true },
     instant: { type: Boolean, default: false },
     contentClass: {},
     barInsetTop: {}

package/dist/chunks/{LpSidebar-DlvoM3h6.js → LpSidebar-CC5759Mh.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
-import { _ as _sfc_main$2 } from "./LpDrawer-D1ubjU11.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-Ds95Sp9b.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-Dr1USsND.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-C0LjLp0O.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-Ds95Sp9b.js → LpSidebarNav-C0LjLp0O.js}

@@ -4,7 +4,7 @@ import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$4 } from "./LpBadge-CXzBPnwO.js";
 import { _ as _sfc_main$2 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-h-0 flex-1 flex-col gap-4"

package/dist/chunks/{LpTable-i2AEwiPd.js → LpTable-CWS2V4JO.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, crea
 import { _ as _sfc_main$2 } from "./LpCheckbox-BO0zuuPh.js";
 import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-ZnycmmEI.js";
 const _hoisted_1 = { class: "w-full border-collapse text-sm" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {
@@ -116,6 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
+        fade: false,
         class: "rounded-card border border-line",
         "bar-inset-top": barInsetTop.value
       }, {

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-BV9M0aec.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-CK6y3xZm.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-oYlB1C9T.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-JWrWjNdC.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCommandPalette.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, createTextVNode, createElementVNode, withDirectives, withKeys, vModelText, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
 import { _ as _sfc_main$1 } from "../chunks/LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-ZnycmmEI.js";
 import '../assets/LpCommandPalette-Cp6Y-j7g.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["placeholder", "onKeydown"];
 const _hoisted_3 = {

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-BgaP-GJZ.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-ClefCHIT.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-D1ubjU11.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-Dr1USsND.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-CmKJxz4K.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-DcoePIZq.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLogViewer-CFckvccr.js";
+import { _ as _sfc_main } from "../chunks/LpLogViewer-BDPbnCOU.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-YaFleOpp.js";
+import { _ as _sfc_main } from "../chunks/LpModal-BQvb6ekk.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-B1QTe4mK.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-DDzQY0YA.js";
 export {
   _sfc_main as default
 };

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

@@ -15,6 +15,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onScroll?: ((event: Event) => any) | undefined;
 }>, {
+    fade: boolean;
     instant: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/LpScrollArea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main } from "../chunks/LpScrollArea-ZnycmmEI.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-DlvoM3h6.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-CC5759Mh.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-Ds95Sp9b.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-C0LjLp0O.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTable-i2AEwiPd.js";
+import { _ as _sfc_main } from "../chunks/LpTable-CWS2V4JO.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BV9M0aec.js";
+import { _ as _2 } from "./chunks/LpAddressInput-CK6y3xZm.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-oYlB1C9T.js";
+import { _ as _5 } from "./chunks/LpAppShell-JWrWjNdC.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-CXzBPnwO.js";
@@ -14,15 +14,15 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-BgaP-GJZ.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-ClefCHIT.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _20 } from "./chunks/LpDrawer-D1ubjU11.js";
+import { _ as _20 } from "./chunks/LpDrawer-Dr1USsND.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-CmKJxz4K.js";
+import { _ as _23 } from "./chunks/LpFileTree-DcoePIZq.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
@@ -31,9 +31,9 @@ import { _ as _27 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _28 } from "./chunks/LpLightbox-CzhFe9wZ.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _30 } from "./chunks/LpLogViewer-CFckvccr.js";
-import { _ as _31 } from "./chunks/LpModal-YaFleOpp.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-B1QTe4mK.js";
+import { _ as _30 } from "./chunks/LpLogViewer-BDPbnCOU.js";
+import { _ as _31 } from "./chunks/LpModal-BQvb6ekk.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-DDzQY0YA.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -44,17 +44,17 @@ import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";
 import { _ as _39 } from "./chunks/LpProgress-BhI0IbjC.js";
 import { _ as _40 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _41 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _42 } from "./chunks/LpScrollArea-BjImFflN.js";
+import { _ as _42 } from "./chunks/LpScrollArea-ZnycmmEI.js";
 import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-D5mU4cZO.js";
 import { _ as _45 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _46 } from "./chunks/LpSidebar-DlvoM3h6.js";
+import { _ as _46 } from "./chunks/LpSidebar-CC5759Mh.js";
 import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.js";
 import { _ as _50 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _51 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _52 } from "./chunks/LpTable-i2AEwiPd.js";
+import { _ as _52 } from "./chunks/LpTable-CWS2V4JO.js";
 import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _54 } from "./chunks/LpTabs-D7aTVPOb.js";
 import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.js";

package/package.json

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

package/src/components/LpLogViewer.vue

@@ -556,7 +556,6 @@ const transitionProps = {
          lines. A CSS smooth scroll would override both. -->
     <LpScrollArea
       ref="scrollRef"
-      fade
       instant
       :content-class="wrap ? '' : 'min-w-max'"
       :style="{ height }"

package/src/components/LpModal.vue

@@ -283,11 +283,8 @@ onBeforeUnmount(() => {
              it already holds, so the scroll area raises a bar for an overflow
              that resolves itself as the transition lands. Hiding just the bar
              for the length of the tween leaves scrolling itself untouched. -->
-        <!-- Faded because a capped panel cuts its body mid-row, and a hard edge
-             at the crop reads as the content ending there. -->
         <LpScrollArea
           v-else
-          fade
           class="min-h-0 flex-1 text-sm text-ink/90"
           :class="resizing ? '[&_[data-scrollbarimpl]]:invisible' : ''"
           :content-class="bodyPad"

package/src/components/LpScrollArea.vue

@@ -15,7 +15,10 @@ import {
 } from "reka-ui"
 
 // `fade` softens whichever of the top/bottom edges currently has content beyond
-// it, so a clipped list reads as continuing rather than as cut off.
+// it, so a clipped list reads as continuing rather than as cut off. On by
+// default: a hard crop through a row looks like damage wherever it happens, and
+// every consumer wanted it. Pass `:fade="false"` where the edge must stay
+// crisp — content that has to be read to its last pixel.
 // `contentClass` styles the scrollable CONTENT container (the viewport's inner
 // wrapper) — put list layout here (display:grid / gap / padding), not on the
 // component root, since items live inside reka's viewport.
@@ -34,7 +37,7 @@ const props = withDefaults(
     contentClass?: string
     barInsetTop?: string
   }>(),
-  { instant: false },
+  { fade: true, instant: false },
 )
 
 // Re-emit the native scroll event of the underlying viewport so consumers that

package/src/components/LpTable.vue

@@ -164,7 +164,13 @@ const barInsetTop = computed(() =>
 </script>
 
 <template>
-  <LpScrollArea class="rounded-card border border-line" :bar-inset-top="barInsetTop">
+  <!-- No top fade: a sticky header sits in the masked band and would be dimmed
+       by it. The bottom edge is left crisp with it for symmetry. -->
+  <LpScrollArea
+    :fade="false"
+    class="rounded-card border border-line"
+    :bar-inset-top="barInsetTop"
+  >
     <table class="w-full border-collapse text-sm">
       <thead ref="headEl" :class="stickyHeader ? 'sticky top-0 z-10' : ''">
         <tr class="border-b border-line bg-surface-soft">