@leavepulse/ui 0.14.6 → 0.14.8

package/dist/chunks/{LpAppShell-DBTsNQaM.js → LpAppShell-BLKZDLh8.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-K1x-azgY.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-BPQabjae.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-BtnZCCBT.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-tZ2z-PnM.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-KLtTtCiT.js → LpConfirmDialog-BA45MvRL.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-CWoOExzT.js";
+import { _ as _sfc_main$1 } from "./LpModal-B9CVVC5U.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-Ce6g9ZMr.js → LpDrawer-6n5Hd-iF.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-K1x-azgY.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-BtnZCCBT.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/{LpLogViewer-hC0OKkeE.js → LpLogViewer-BBgaY38i.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-K1x-azgY.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-BtnZCCBT.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,

package/dist/chunks/{LpModal-CWoOExzT.js → LpModal-B9CVVC5U.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, openBlock, createBlock, unref, wit
 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-K1x-azgY.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-BtnZCCBT.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
@@ -53,9 +53,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
+              createVNode(unref(DialogOverlay), { class: "fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
               createVNode(unref(DialogContent), {
-                class: normalizeClass(["fixed left-1/2 top-1/2 z-(--z-modal) flex max-h-[min(90vh,calc(100dvh-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]", widthClass.value]),
+                class: normalizeClass(["fixed left-1/2 top-1/2 z-(--z-modal) flex max-h-[min(90vh,calc(100dvh-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_120ms_cubic-bezier(0.4,0,1,1)]", widthClass.value]),
                 style: normalizeStyle(__props.width ? { width: __props.width } : void 0)
               }, {
                 default: withCtx(() => [

package/dist/chunks/{LpNotificationBell-BDy0tQwr.js → LpNotificationBell-B9VHks_D.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-K1x-azgY.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-BtnZCCBT.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-K1x-azgY.js → LpScrollArea-BtnZCCBT.js}

@@ -1,10 +1,11 @@
 import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementVNode, renderSlot } from "vue";
 import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
-const barFade = "data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=hidden]:animate-[fade-out_240ms_ease]";
+const barFade = "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpScrollArea",
   props: {
     fade: { type: Boolean },
+    smooth: { type: Boolean },
     contentClass: {},
     barInsetTop: {}
   },
@@ -24,6 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "vertical",
+            "force-mount": "",
             class: normalizeClass(["group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px", barFade]),
             style: normalizeStyle(__props.barInsetTop ? { marginTop: __props.barInsetTop } : void 0)
           }, {
@@ -44,7 +46,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ScrollAreaViewport), {
             ref_key: "viewportRef",
             ref: viewportRef,
-            class: normalizeClass(["size-full min-w-0 [&>div]:!block [&>div]:!min-w-0", __props.fade ? "[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]" : ""]),
+            class: normalizeClass(["size-full min-w-0 [&>div]:!block [&>div]:!min-w-0", [
+              __props.smooth ? "scroll-smooth motion-reduce:scroll-auto" : "",
+              __props.fade ? "[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]" : ""
+            ]]),
             onScrollPassive: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("scroll", $event))
           }, {
             default: withCtx(() => [

package/dist/chunks/{LpSidebar-BPQabjae.js → LpSidebar-tZ2z-PnM.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-Ce6g9ZMr.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-CpF7rZxx.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-6n5Hd-iF.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-D-YvtwsH.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-CpF7rZxx.js → LpSidebarNav-D-YvtwsH.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-K1x-azgY.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-BtnZCCBT.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-h-0 flex-1 flex-col gap-4"

package/dist/chunks/{LpTable-CJ4Zt1UH.js → LpTable-CzHVcr3v.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-K1x-azgY.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-BtnZCCBT.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 = {

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-DBTsNQaM.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-BLKZDLh8.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-K1x-azgY.js";
+import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-BtnZCCBT.js";
 import '../assets/LpCommandPalette-D315B47-.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-KLtTtCiT.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-BA45MvRL.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-Ce6g9ZMr.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-6n5Hd-iF.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

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

package/dist/components/LpModal.vue.js

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

package/dist/components/LpNotificationBell.vue.js

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

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     fade?: boolean;
+    smooth?: boolean;
     contentClass?: string;
     barInsetTop?: string;
 };

package/dist/components/LpScrollArea.vue.js

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

package/dist/components/LpSidebar.vue.js

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

package/dist/components/LpSidebarNav.vue.js

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

package/dist/components/LpTable.vue.js

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

package/dist/index.js

@@ -1,6 +1,6 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
 import { _ as _2 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _3 } from "./chunks/LpAppShell-DBTsNQaM.js";
+import { _ as _3 } from "./chunks/LpAppShell-BLKZDLh8.js";
 import { _ as _4 } from "./chunks/LpAutocomplete-B9uoCs4t.js";
 import { _ as _5 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _6 } from "./chunks/LpBadge-CXzBPnwO.js";
@@ -11,12 +11,12 @@ import { _ as _10 } from "./chunks/LpCard-1yvWT9fx.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";
-import { _ as _13 } from "./chunks/LpConfirmDialog-KLtTtCiT.js";
+import { _ as _13 } from "./chunks/LpConfirmDialog-BA45MvRL.js";
 import { _ as _14 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _15 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _16 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _17 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _18 } from "./chunks/LpDrawer-Ce6g9ZMr.js";
+import { _ as _18 } from "./chunks/LpDrawer-6n5Hd-iF.js";
 import { _ as _19 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _20 } from "./chunks/LpEmptyState-CrfyRJUG.js";
 import { _ as _21 } from "./chunks/LpFormField-Bn-ZwC6z.js";
@@ -24,9 +24,9 @@ import { _ as _22 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _23 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _24 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _25 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _26 } from "./chunks/LpLogViewer-hC0OKkeE.js";
-import { _ as _27 } from "./chunks/LpModal-CWoOExzT.js";
-import { _ as _28 } from "./chunks/LpNotificationBell-BDy0tQwr.js";
+import { _ as _26 } from "./chunks/LpLogViewer-BBgaY38i.js";
+import { _ as _27 } from "./chunks/LpModal-B9CVVC5U.js";
+import { _ as _28 } from "./chunks/LpNotificationBell-B9VHks_D.js";
 import { _ as _29 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _30 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _31 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -37,17 +37,17 @@ import { _ as _34 } from "./chunks/LpPopover-8268UmlC.js";
 import { _ as _35 } from "./chunks/LpProgress-BhI0IbjC.js";
 import { _ as _36 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _37 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _38 } from "./chunks/LpScrollArea-K1x-azgY.js";
+import { _ as _38 } from "./chunks/LpScrollArea-BtnZCCBT.js";
 import { _ as _39 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _40 } from "./chunks/LpSelect-DznhPEWX.js";
 import { _ as _41 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _42 } from "./chunks/LpSidebar-BPQabjae.js";
+import { _ as _42 } from "./chunks/LpSidebar-tZ2z-PnM.js";
 import { _ as _43 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _44 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _45 } from "./chunks/LpStat-CdbEFOvn.js";
 import { _ as _46 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _47 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _48 } from "./chunks/LpTable-CJ4Zt1UH.js";
+import { _ as _48 } from "./chunks/LpTable-CzHVcr3v.js";
 import { _ as _49 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _50 } from "./chunks/LpTabs-D7aTVPOb.js";
 import { _ as _51 } from "./chunks/LpTextarea-CRAkhemZ.js";

package/package.json

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

package/src/components/LpModal.vue

@@ -69,10 +69,10 @@ const bodyPad = computed(() =>
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        class="fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        class="fixed inset-0 z-(--z-overlay) bg-black/50 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
       />
       <DialogContent
-        class="fixed left-1/2 top-1/2 z-(--z-modal) flex max-h-[min(90vh,calc(100dvh-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
+        class="fixed left-1/2 top-1/2 z-(--z-modal) flex max-h-[min(90vh,calc(100dvh-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[pop-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_120ms_cubic-bezier(0.4,0,1,1)]"
         :class="widthClass"
         :style="width ? { width } : undefined"
       >

package/src/components/LpScrollArea.vue

@@ -20,8 +20,13 @@ import {
 // component root, since items live inside reka's viewport.
 // `barInsetTop` (any CSS length) pulls the vertical scrollbar down by that much,
 // so it doesn't run under a sticky header pinned at the top of the viewport.
+// `smooth` eases wheel and keyboard scrolling. Opt-in rather than default:
+// it also applies to `scrollTo({ behavior: "auto" })`, which consumers that
+// drive the scroll themselves (a log tail jumping to the newest line) rely on
+// being instant.
 const props = defineProps<{
   fade?: boolean
+  smooth?: boolean
   contentClass?: string
   barInsetTop?: string
 }>()
@@ -41,8 +46,11 @@ const viewportEl = computed<HTMLElement | null>(
 )
 defineExpose({ viewportEl })
 
+// `opacity-0` + the hidden-state fade is what keeps the bar invisible at rest:
+// with force-mount the element stays in the DOM, so a one-shot fade-out alone
+// would snap back to visible once the animation finished.
 const barFade =
-  "data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=hidden]:animate-[fade-out_240ms_ease]"
+  "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
 </script>
 
 <template>
@@ -52,8 +60,14 @@ const barFade =
          grabbable strip. A 4px-wide hit area is near-impossible to catch with a
          mouse. Padding (not width) carries the extra room so the thumb stays
          flush against the wall. -->
+    <!-- force-mount: reka only sets the viewport's `overflow-y: scroll` while a
+         vertical scrollbar is MOUNTED, and with type="hover" that happens on
+         first hover — so before the pointer ever entered, the region silently
+         refused to scroll (wheel included). Mounting it up front fixes that;
+         the bar still only becomes visible on hover, via `barFade` below. -->
     <ScrollAreaScrollbar
       orientation="vertical"
+      force-mount
       class="group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
       :class="barFade"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
@@ -76,7 +90,10 @@ const barFade =
     <ScrollAreaViewport
       ref="viewportRef"
       class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
-      :class="fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : ''"
+      :class="[
+        smooth ? 'scroll-smooth motion-reduce:scroll-auto' : '',
+        fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : '',
+      ]"
       @scroll.passive="$emit('scroll', $event)"
     >
       <div :class="contentClass">

package/src/tokens/tokens.css

@@ -125,16 +125,22 @@
     opacity: 0;
   }
 }
+/*
+ * Centred-dialog enter/exit. The scale alone read as a pop on the spot, so the
+ * panel also rises a few pixels into place — it arrives from somewhere instead
+ * of appearing. Exit drops back the same way but shorter and on an accelerating
+ * curve, since a dismissal shouldn't be savoured.
+ */
 @keyframes pop-in {
   from {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.96);
+    transform: translate(-50%, calc(-50% + 8px)) scale(0.97);
   }
 }
 @keyframes pop-out {
   to {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.96);
+    transform: translate(-50%, calc(-50% + 4px)) scale(0.985);
   }
 }
 /*