@leavepulse/ui 0.37.1 → 0.37.3

package/dist/assets/{LpTable-BbOFmZfc.css → LpTable-BgPLJOXa.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-63738e53],
-.lp-row-leave-active[data-v-63738e53] {
+.lp-row-enter-active[data-v-e0bb036b],
+.lp-row-leave-active[data-v-e0bb036b] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-63738e53] {
+.lp-row-move[data-v-e0bb036b] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-63738e53],
-.lp-row-leave-to[data-v-63738e53] {
+.lp-row-enter-from[data-v-e0bb036b],
+.lp-row-leave-to[data-v-e0bb036b] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-63738e53] {
+.lp-row-empty.lp-row-leave-active[data-v-e0bb036b] {
   display: none;
 }
 
@@ -50,9 +50,9 @@
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-63738e53],
-  .lp-row-leave-active[data-v-63738e53],
-  .lp-row-move[data-v-63738e53] {
+.lp-row-enter-active[data-v-e0bb036b],
+  .lp-row-leave-active[data-v-e0bb036b],
+  .lp-row-move[data-v-e0bb036b] {
     transition: none;
 }
 }

package/dist/chunks/{LpAppShell-lVvpENMH.js → LpAppShell-Cs9jDoqJ.js}

@@ -3,7 +3,7 @@ import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-D8xyKXcF.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-DcYavim2.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-DvGfofv6.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_2 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpDatePicker-6JFXllj5.js → LpDatePicker-BPbvu3cZ.js}

@@ -5,6 +5,11 @@ import { _ as _sfc_main$2 } from "./LpCalendar-B7Ko5RdR.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = ["onKeydown"];
+const _hoisted_3 = {
+  key: 0,
+  class: "flex items-center gap-2 border-t border-line px-3 py-2"
+};
+const _hoisted_4 = ["value", "disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpDatePicker",
   props: {
@@ -17,18 +22,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     invalid: { type: Boolean },
     size: { default: "md" },
-    format: { default: () => ({ year: "numeric", month: "short", day: "numeric" }) }
+    format: { default: () => ({ year: "numeric", month: "short", day: "numeric" }) },
+    time: { type: Boolean },
+    defaultTime: { default: "00:00" },
+    doneLabel: { default: "Done" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const open = ref(false);
+    const day = computed(() => (props.modelValue || "").slice(0, 10));
+    const minute = computed(() => {
+      const at = (props.modelValue || "").slice(11, 16);
+      return /^\d{2}:\d{2}$/.test(at) ? at : "";
+    });
     const display = computed(() => {
       if (!props.modelValue) return "";
-      const [y, m, d] = props.modelValue.split("-").map(Number);
+      const [y, m, d] = day.value.split("-").map(Number);
       if (!y || !m || !d) return props.modelValue;
-      return new Intl.DateTimeFormat(void 0, props.format).format(new Date(y, m - 1, d));
+      const shown = new Intl.DateTimeFormat(void 0, props.format).format(new Date(y, m - 1, d));
+      return props.time && minute.value ? `${shown}, ${minute.value}` : shown;
     });
     const shellSize = {
       sm: "h-(--size-control-sm) text-xs",
@@ -36,8 +50,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       lg: "h-(--size-control-lg) text-sm"
     };
     function onPick(v) {
-      emit("update:modelValue", v);
-      open.value = false;
+      if (!props.time) {
+        emit("update:modelValue", v);
+        open.value = false;
+        return;
+      }
+      emit("update:modelValue", v ? `${v}T${minute.value || props.defaultTime}` : void 0);
+    }
+    function onTime(at) {
+      if (!day.value) return;
+      emit("update:modelValue", `${day.value}T${at || props.defaultTime}`);
     }
     function clear() {
       emit("update:modelValue", void 0);
@@ -45,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverRoot), {
         open: open.value,
-        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+        "onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event)
       }, {
         default: withCtx(() => [
           createVNode(unref(PopoverTrigger), { "as-child": "" }, {
@@ -98,13 +120,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$2, {
-                    "model-value": __props.modelValue,
+                    "model-value": day.value,
                     min: __props.min,
                     max: __props.max,
                     "is-disabled": __props.isDisabled,
                     class: "border-0 bg-transparent",
                     "onUpdate:modelValue": onPick
-                  }, null, 8, ["model-value", "min", "max", "is-disabled"])
+                  }, null, 8, ["model-value", "min", "max", "is-disabled"]),
+                  __props.time ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    createVNode(_sfc_main$1, {
+                      name: "lucide:clock",
+                      size: 15,
+                      class: "shrink-0 text-muted"
+                    }),
+                    createElementVNode("input", {
+                      type: "time",
+                      value: minute.value,
+                      disabled: !day.value,
+                      class: "h-(--size-control-sm) flex-1 rounded-control border border-line bg-surface-soft px-2 text-sm text-ink outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
+                      onInput: _cache[0] || (_cache[0] = ($event) => onTime($event.target.value))
+                    }, null, 40, _hoisted_4),
+                    createElementVNode("button", {
+                      type: "button",
+                      class: "shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink",
+                      onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
+                    }, toDisplayString(__props.doneLabel), 1)
+                  ])) : createCommentVNode("", true)
                 ]),
                 _: 1
               }, 8, ["class"])

package/dist/chunks/{LpDrawer-DAJN5rGK.js → LpDrawer-CslZtgUm.js}

@@ -1,9 +1,10 @@
-import { defineComponent, computed, ref, useSlots, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, normalizeClass, withDirectives, vShow, toDisplayString, createCommentVNode, createVNode, unref, withCtx, createBlock, renderSlot, createTextVNode } from "vue";
+import { defineComponent, computed, watch, onBeforeUnmount, ref, useSlots, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, normalizeClass, withDirectives, vShow, toDisplayString, createCommentVNode, createVNode, unref, withCtx, createBlock, renderSlot, createTextVNode } from "vue";
 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-D8xyKXcF.js";
+import { useModalLayer } from "../components/modalDepth.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"];
@@ -47,6 +48,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isSheet = computed(() => dir.value === "top" || dir.value === "bottom");
     const showHandle = computed(() => props.handle ?? isSheet.value);
     const SIZES = { sm: 22, md: 28, lg: 36, xl: 48 };
+    const { claim, release, layer } = useModalLayer();
+    watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
+    onBeforeUnmount(release);
     const contentClass = computed(() => {
       const base = "fixed z-(--z-modal) flex flex-col border-line bg-surface-raised shadow-panel outline-none";
       const map = {
@@ -215,10 +219,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createVNode(unref(DrawerPortal), null, {
               default: withCtx(() => [
-                createVNode(unref(DrawerOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]" }),
+                createVNode(unref(DrawerOverlay), {
+                  style: normalizeStyle({ zIndex: unref(layer).scrim }),
+                  class: "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+                }, null, 8, ["style"]),
                 createVNode(unref(DrawerContent), {
                   class: normalizeClass(contentClass.value),
-                  style: normalizeStyle(sizeStyle.value),
+                  style: normalizeStyle([sizeStyle.value, { zIndex: unref(layer).panel }]),
                   "data-vaul-animate": handingOff.value ? "false" : void 0
                 }, {
                   default: withCtx(() => [

package/dist/chunks/{LpModalNav-K6N5YpQk.js → LpModalNav-Dkogc3O_.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, openBlock, createBlock, createSlots, wi
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpModal-D3QxgWaT.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-DcYavim2.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-DvGfofv6.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/{LpSidebar-DcYavim2.js → LpSidebar-DvGfofv6.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$3 } from "./LpDrawer-DAJN5rGK.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-CslZtgUm.js";
 import { _ as _sfc_main$1 } from "./LpInput-9EXWUM9B.js";
 import { _ as _sfc_main$2 } from "./LpSidebarNav-CqwvT4H8.js";
 const _hoisted_1 = {

package/dist/components/LpAppShell.vue.js

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

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

@@ -11,6 +11,12 @@ type __VLS_Props = {
     size?: "sm" | "md" | "lg";
     /** Intl format for the displayed date. */
     format?: Intl.DateTimeFormatOptions;
+    /** Also pick a minute; the model becomes "YYYY-MM-DDTHH:mm". */
+    time?: boolean;
+    /** Time a freshly picked day starts at, "HH:mm". */
+    defaultTime?: string;
+    /** Label of the button that closes the popover in `time` mode. */
+    doneLabel?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | undefined) => any;
@@ -20,6 +26,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     size: "sm" | "md" | "lg";
     format: Intl.DateTimeFormatOptions;
     placeholder: string;
+    defaultTime: string;
+    doneLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpDatePicker.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDatePicker-6JFXllj5.js";
+import { _ as _sfc_main } from "../chunks/LpDatePicker-BPbvu3cZ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

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

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-K6N5YpQk.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-Dkogc3O_.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

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

package/dist/components/LpTable.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, shallowRef, watch, onBeforeUnmount, openBlock, createElementBlock, createVNode, mergeProps, withCtx, createElementVNode, normalizeClass, createCommentVNode, Fragment, renderList, normalizeStyle, createBlock, createTextVNode, toDisplayString, TransitionGroup, unref, withModifiers, renderSlot, nextTick } from "vue";
+import { defineComponent, useAttrs, computed, ref, shallowRef, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, withCtx, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createBlock, createTextVNode, toDisplayString, TransitionGroup, unref, withModifiers, renderSlot, nextTick } from "vue";
 import { _ as _sfc_main$3 } from "../chunks/LpCheckbox-CVccKYaH.js";
 import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _sfc_main$4 } from "../chunks/LpIcon-CCnX5_2j.js";
@@ -7,20 +7,19 @@ import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-BbOFmZfc.css';const _hoisted_1 = { class: "flex flex-col gap-3" };
-const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
-const _hoisted_3 = {
+import '../assets/LpTable-BgPLJOXa.css';const _hoisted_1 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_2 = {
   key: 0,
   class: "w-px px-4 py-3"
 };
-const _hoisted_4 = ["aria-sort"];
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = {
+const _hoisted_3 = ["aria-sort"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
   key: "lp-table-empty",
   class: "lp-row-empty"
 };
-const _hoisted_7 = ["colspan"];
-const _hoisted_8 = ["onContextmenu", "onClick"];
+const _hoisted_6 = ["colspan"];
+const _hoisted_7 = ["onContextmenu", "onClick"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -51,6 +50,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:selected", "update:sort", "rowClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const attrs = useAttrs();
+    const rootClass = computed(() => attrs.class);
+    const scrollAttrs = computed(() => {
+      const { class: _class, ...rest } = attrs;
+      return rest;
+    });
     const emit = __emit;
     function keyFor(row, index) {
       if (typeof props.rowKey === "function") return props.rowKey(row);
@@ -351,10 +356,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.stickyHeader && headHeight.value ? `${headHeight.value}px` : void 0
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$1, mergeProps(_ctx.$attrs, {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["flex flex-col gap-3", rootClass.value])
+      }, [
+        createVNode(_sfc_main$1, mergeProps(scrollAttrs.value, {
           fade: false,
-          class: "rounded-card border border-line",
+          class: "min-h-0 flex-1 rounded-card border border-line",
           style: __props.load && floor.value ? { minHeight: `${floor.value + 2}px` } : void 0,
           "bar-inset-top": barInsetTop.value
         }), {
@@ -374,8 +381,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref: headEl,
                     class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                   }, [
-                    createElementVNode("tr", _hoisted_2, [
-                      __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
+                    createElementVNode("tr", _hoisted_1, [
+                      __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_2, [
                         createVNode(_sfc_main$3, {
                           "model-value": allChecked.value,
                           indeterminate: someChecked.value,
@@ -417,13 +424,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
                                   ])
                                 }, null, 8, ["name", "class"]))
-                              ], 10, _hoisted_5)
+                              ], 10, _hoisted_4)
                             ]),
                             _: 2
                           }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                             createTextVNode(toDisplayString(col.label), 1)
                           ], 64))
-                        ], 14, _hoisted_4);
+                        ], 14, _hoisted_3);
                       }), 128))
                     ])
                   ], 2),
@@ -435,7 +442,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref: (el) => unref(roving).setContainer(el?.$el ?? null)
                   }, {
                     default: withCtx(() => [
-                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
+                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_5, [
                         createElementVNode("td", {
                           colspan: colSpan.value,
                           class: "px-4 py-10 text-center text-muted"
@@ -446,7 +453,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: normalizeClass(["mx-auto mb-2 opacity-60", unref(loading) ? "animate-spin" : ""])
                           }, null, 8, ["name", "class"]),
                           createElementVNode("div", null, toDisplayString(unref(loading) ? __props.loadingLabel : failed.value ? __props.errorLabel : __props.emptyLabel), 1)
-                        ], 8, _hoisted_7)
+                        ], 8, _hoisted_6)
                       ])) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
                         return openBlock(), createElementBlock("tr", mergeProps({
@@ -481,7 +488,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ], true)
                             ], 2);
                           }), 128))
-                        ], 16, _hoisted_8);
+                        ], 16, _hoisted_7);
                       }), 128))
                     ]),
                     _: 3
@@ -501,11 +508,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "page-size": __props.pageSize,
           disabled: unref(loading)
         }, null, 8, ["page", "total", "page-size", "disabled"])) : createCommentVNode("", true)
-      ]);
+      ], 2);
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63738e53"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0bb036b"]]);
 export {
   LpTable as default
 };

package/dist/composables/useShift.js

@@ -14,6 +14,17 @@ function useShift(options = {}) {
   let lastWidth = 0;
   let inFlight = false;
   let tweenStart = 0;
+  const scrolled = /* @__PURE__ */ new Map();
+  const rememberScroll = (event) => {
+    const target = event.target;
+    if (target instanceof Element) scrolled.set(target, target.scrollTop);
+  };
+  function restoreScroll() {
+    for (const [node, top] of scrolled) {
+      if (!node.isConnected) scrolled.delete(node);
+      else if (node.scrollTop !== top) node.scrollTop = top;
+    }
+  }
   const axisOf = () => toValue(options.axis) ?? "height";
   const wantsHeight = () => axisOf() !== "width";
   const wantsWidth = () => axisOf() !== "height";
@@ -40,6 +51,7 @@ function useShift(options = {}) {
     const toWidth = wantsWidth() ? node.offsetWidth : 0;
     if (wantsHeight()) node.style.maxHeight = "";
     if (wantsWidth()) node.style.maxWidth = "";
+    restoreScroll();
     lastHeight = toHeight;
     lastWidth = toWidth;
     const movesHeight = wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight;
@@ -50,6 +62,7 @@ function useShift(options = {}) {
     void node.offsetHeight;
     if (movesHeight) node.style.height = `${toHeight}px`;
     if (movesWidth) node.style.width = `${toWidth}px`;
+    restoreScroll();
     inFlight = true;
     tweenStart = performance.now();
     resizing.value = true;
@@ -64,7 +77,11 @@ function useShift(options = {}) {
       lastWidth = node.offsetWidth;
     }, wait);
   }
+  let scrollHost = null;
   function teardown() {
+    scrollHost?.removeEventListener("scroll", rememberScroll, true);
+    scrollHost = null;
+    scrolled.clear();
     ro?.disconnect();
     mo?.disconnect();
     ro = void 0;
@@ -84,6 +101,8 @@ function useShift(options = {}) {
       if (!enabled || !node) return;
       lastHeight = node.offsetHeight;
       lastWidth = node.offsetWidth;
+      scrollHost = node;
+      node.addEventListener("scroll", rememberScroll, { capture: true, passive: true });
       if (wantsHeight()) node.style.height = `${lastHeight}px`;
       if (wantsWidth()) node.style.width = `${lastWidth}px`;
       raf = requestAnimationFrame(() => {

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-lVvpENMH.js";
+import { _ as _6 } from "./chunks/LpAppShell-Cs9jDoqJ.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-D3l4nabg.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
@@ -21,10 +21,10 @@ import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, n
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { _ as _17 } from "./chunks/LpConfirmDialog-B6RAvDES.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
-import { _ as _19 } from "./chunks/LpDatePicker-6JFXllj5.js";
+import { _ as _19 } from "./chunks/LpDatePicker-BPbvu3cZ.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _22 } from "./chunks/LpDrawer-DAJN5rGK.js";
+import { _ as _22 } from "./chunks/LpDrawer-CslZtgUm.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
 import { _ as _24 } from "./chunks/LpEmptyState-Dsdqz1Wj.js";
@@ -41,7 +41,7 @@ import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
 import { _ as _34 } from "./chunks/LpModal-D3QxgWaT.js";
-import { _ as _35 } from "./chunks/LpModalNav-K6N5YpQk.js";
+import { _ as _35 } from "./chunks/LpModalNav-Dkogc3O_.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-lHePf89W.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _38 } from "./chunks/LpNumberFlow-amWYaeuA.js";
@@ -63,7 +63,7 @@ import { _ as _52 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _53 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _54 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _55 } from "./chunks/LpSidebar-DcYavim2.js";
+import { _ as _55 } from "./chunks/LpSidebar-DvGfofv6.js";
 import { _ as _56 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _57 } from "./chunks/LpSlider-BwNIBkAK.js";
 import { _ as _58 } from "./chunks/LpSparkline-C6xQ2dwv.js";

package/package.json

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

package/src/components/LpDatePicker.vue

@@ -4,6 +4,14 @@
  * v-model), same as LpCalendar (which it embeds). The trigger shows a formatted
  * date; picking a day fills the field and closes the popover. Clearable, with
  * min/max + isDisabled forwarded to the calendar. Themed like the other inputs.
+ *
+ * With `time`, the model carries a minute too ("YYYY-MM-DDTHH:mm") and the
+ * popover grows a time row under the calendar. Anything that needs a moment
+ * rather than a day — an expiry, a scheduled start — would otherwise fall back
+ * to a native `datetime-local`, which the browser paints in its own locale and
+ * chrome, breaking the form it sits in. Picking a day keeps the time already
+ * chosen (default `defaultTime`), so the popover closes on the first click for
+ * the common case.
  */
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
 import { computed, ref } from "vue"
@@ -25,11 +33,19 @@ const props = withDefaults(
     size?: "sm" | "md" | "lg"
     /** Intl format for the displayed date. */
     format?: Intl.DateTimeFormatOptions
+    /** Also pick a minute; the model becomes "YYYY-MM-DDTHH:mm". */
+    time?: boolean
+    /** Time a freshly picked day starts at, "HH:mm". */
+    defaultTime?: string
+    /** Label of the button that closes the popover in `time` mode. */
+    doneLabel?: string
   }>(),
   {
     placeholder: "Pick a date",
     size: "md",
     format: () => ({ year: "numeric", month: "short", day: "numeric" }),
+    defaultTime: "00:00",
+    doneLabel: "Done",
   },
 )
 
@@ -39,12 +55,22 @@ const emit = defineEmits<{
 
 const open = ref(false)
 
+/** Day half of the model; the calendar never sees the time. */
+const day = computed(() => (props.modelValue || "").slice(0, 10))
+
+/** Minute half, "HH:mm" — empty when the model carries a date only. */
+const minute = computed(() => {
+  const at = (props.modelValue || "").slice(11, 16)
+  return /^\d{2}:\d{2}$/.test(at) ? at : ""
+})
+
 const display = computed(() => {
   if (!props.modelValue) return ""
   // Parse as local midnight so the formatted day can't drift across a timezone.
-  const [y, m, d] = props.modelValue.split("-").map(Number)
+  const [y, m, d] = day.value.split("-").map(Number)
   if (!y || !m || !d) return props.modelValue
-  return new Intl.DateTimeFormat(undefined, props.format).format(new Date(y, m - 1, d))
+  const shown = new Intl.DateTimeFormat(undefined, props.format).format(new Date(y, m - 1, d))
+  return props.time && minute.value ? `${shown}, ${minute.value}` : shown
 })
 
 const shellSize = {
@@ -54,8 +80,21 @@ const shellSize = {
 }
 
 function onPick(v: string | undefined) {
-  emit("update:modelValue", v)
-  open.value = false
+  if (!props.time) {
+    emit("update:modelValue", v)
+    open.value = false
+    return
+  }
+  // The popover stays open: the time row below is part of the same choice, and
+  // closing on the day would hide it right as it becomes reachable.
+  emit("update:modelValue", v ? `${v}T${minute.value || props.defaultTime}` : undefined)
+}
+
+function onTime(at: string) {
+  // A time without a day would be a model no consumer can use; until a day is
+  // picked the row is disabled, so this only guards a stray event.
+  if (!day.value) return
+  emit("update:modelValue", `${day.value}T${at || props.defaultTime}`)
 }
 
 function clear() {
@@ -104,13 +143,30 @@ function clear() {
         :class="[POPOVER_PANEL, 'z-(--z-popover) rounded-card p-0 outline-none']"
       >
         <LpCalendar
-          :model-value="modelValue"
+          :model-value="day"
           :min="min"
           :max="max"
           :is-disabled="isDisabled"
           class="border-0 bg-transparent"
           @update:model-value="onPick"
         />
+        <div v-if="time" class="flex items-center gap-2 border-t border-line px-3 py-2">
+          <LpIcon name="lucide:clock" :size="15" class="shrink-0 text-muted" />
+          <input
+            type="time"
+            :value="minute"
+            :disabled="!day"
+            class="h-(--size-control-sm) flex-1 rounded-control border border-line bg-surface-soft px-2 text-sm text-ink outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
+            @input="onTime(($event.target as HTMLInputElement).value)"
+          />
+          <button
+            type="button"
+            class="shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink"
+            @click="open = false"
+          >
+            {{ doneLabel }}
+          </button>
+        </div>
       </PopoverContent>
     </PopoverPortal>
   </PopoverRoot>

package/src/components/LpDrawer.vue

@@ -23,10 +23,11 @@ import {
   DrawerRoot,
   DrawerTitle,
 } from "vaul-vue"
-import { computed, ref, useSlots } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import { useModalLayer } from "./modalDepth"
 
 type Direction = "top" | "bottom" | "left" | "right"
 
@@ -125,6 +126,16 @@ const SIZES = { sm: 22, md: 28, lg: 36, xl: 48 } // rem along the main axis
 // Geometry per edge. The cross-axis is pinned to the viewport; the main axis
 // takes the size preset. vaul drives the open/close transform itself, so we
 // don't add slide keyframes — only the resting box + rounding toward the centre.
+/*
+ * The drawer joins the same stack as LpModal. It painted at the fixed
+ * --z-overlay/--z-modal rungs, so a dialog opened from it (a picker inside a
+ * settings drawer) claimed those same rungs and the tie went to DOM order —
+ * the drawer, portalled later on reopen, covered the dialog it had opened.
+ */
+const { claim, release, layer } = useModalLayer()
+watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
+onBeforeUnmount(release)
+
 const contentClass = computed(() => {
   const base = "fixed z-(--z-modal) flex flex-col border-line bg-surface-raised shadow-panel outline-none"
   const map: Record<Direction, string> = {
@@ -345,11 +356,12 @@ const edgeStripClass = computed(() =>
   >
     <DrawerPortal>
       <DrawerOverlay
+        :style="{ zIndex: layer.scrim }"
         class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
       />
       <DrawerContent
         :class="contentClass"
-        :style="sizeStyle"
+        :style="[sizeStyle, { zIndex: layer.panel }]"
         :data-vaul-animate="handingOff ? 'false' : undefined"
       >
         <!-- Resize grip on the inner edge (horizontal drawers). data-vaul-no-drag

package/src/components/LpTable.vue

@@ -5,7 +5,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, useAttrs, watch } from "vue"
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
@@ -132,6 +132,21 @@ const props = withDefaults(
   },
 )
 
+/*
+ * Layout classes belong on the root, not on the scroll area. Since the pager
+ * wrapper became the root, a caller's `min-h-0 flex-1` landed on the inner
+ * scroll area while the wrapper kept sizing to its content — in a flex column
+ * the table grew past its container and its bottom edge was clipped away.
+ * Everything else (style, aria, listeners) still goes to the scroll area, so a
+ * `max-height` keeps capping the scrolling part.
+ */
+const attrs = useAttrs()
+const rootClass = computed(() => attrs.class)
+const scrollAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 const emit = defineEmits<{
   (e: "update:selected", value: RowKey[]): void
   (e: "update:sort", value: SortState | null): void
@@ -577,11 +592,11 @@ const barInsetTop = computed(() =>
 <template>
   <!-- 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. -->
-  <div class="flex flex-col gap-3">
+  <div class="flex flex-col gap-3" :class="rootClass">
   <LpScrollArea
-    v-bind="$attrs"
+    v-bind="scrollAttrs"
     :fade="false"
-    class="rounded-card border border-line"
+    class="min-h-0 flex-1 rounded-card border border-line"
     :style="load && floor ? { minHeight: `${floor + 2}px` } : undefined"
     :bar-inset-top="barInsetTop"
   >

package/src/composables/useShift.ts

@@ -91,6 +91,25 @@ export function useShift(
   let inFlight = false
   /** When the in-flight tween started, to tell a duplicate from a follow-up. */
   let tweenStart = 0
+  /**
+   * Scroll positions inside the box, kept from the scroll events themselves.
+   * Measuring lifts the height cap, and for that one reflow a scrolling list
+   * inside (a picker, a span tree) is as tall as its content: it no longer
+   * overflows, the browser clamps its scrollTop to 0, and putting the cap back
+   * does not bring the position back. Every click that changed the content —
+   * ticking an item, picking a span — threw the list back to the top.
+   */
+  const scrolled = new Map<Element, number>()
+  const rememberScroll = (event: Event) => {
+    const target = event.target
+    if (target instanceof Element) scrolled.set(target, target.scrollTop)
+  }
+  function restoreScroll() {
+    for (const [node, top] of scrolled) {
+      if (!node.isConnected) scrolled.delete(node)
+      else if (node.scrollTop !== top) node.scrollTop = top
+    }
+  }
 
   const axisOf = () => toValue(options.axis) ?? "height"
   const wantsHeight = () => axisOf() !== "width"
@@ -151,6 +170,7 @@ export function useShift(
     const toWidth = wantsWidth() ? node.offsetWidth : 0
     if (wantsHeight()) node.style.maxHeight = ""
     if (wantsWidth()) node.style.maxWidth = ""
+    restoreScroll()
     lastHeight = toHeight
     lastWidth = toWidth
 
@@ -173,6 +193,7 @@ export function useShift(
     void node.offsetHeight
     if (movesHeight) node.style.height = `${toHeight}px`
     if (movesWidth) node.style.width = `${toWidth}px`
+    restoreScroll()
 
     inFlight = true
     tweenStart = performance.now()
@@ -194,7 +215,12 @@ export function useShift(
     }, wait)
   }
 
+  let scrollHost: HTMLElement | null = null
+
   function teardown() {
+    scrollHost?.removeEventListener("scroll", rememberScroll, true)
+    scrollHost = null
+    scrolled.clear()
     ro?.disconnect()
     mo?.disconnect()
     ro = undefined
@@ -218,6 +244,8 @@ export function useShift(
 
       lastHeight = node.offsetHeight
       lastWidth = node.offsetWidth
+      scrollHost = node
+      node.addEventListener("scroll", rememberScroll, { capture: true, passive: true })
       if (wantsHeight()) node.style.height = `${lastHeight}px`
       if (wantsWidth()) node.style.width = `${lastWidth}px`
       // A box must not animate in from its pre-content size, so the transition