@leavepulse/ui 0.37.0 → 0.37.2

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/modalDepth.js

@@ -1,5 +1,5 @@
 import { ref, computed } from "vue";
-const STEP = 10;
+const STEP = 20;
 const stack = ref([]);
 let nextId = 0;
 function useModalLayer() {

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.0",
+  "version": "0.37.2",
   "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/modalDepth.ts

@@ -26,8 +26,15 @@ import { computed, ref, type ComputedRef } from "vue"
  * is 100 and --z-modal 110, so a gap of 2 left the upper scrim under the lower
  * PANEL — it darkened that panel and could not blur it, a backdrop-filter
  * having nothing of it underneath to work on.
+ *
+ * Clearing it means strictly more than the 10 between the two rungs. A step of
+ * exactly 10 put the lower panel at 100, level with the upper scrim, and a tie
+ * in z-index is settled by DOM order. Siblings in one component happened to
+ * come out right, but a dialog mounted once at the app root — opened from a
+ * page dialog that teleported in later — lost the tie, and its scrim darkened
+ * the page behind the first dialog instead of the first dialog itself.
  */
-const STEP = 10
+const STEP = 20
 
 /** Levels currently claimed, oldest first. */
 const stack = ref<number[]>([])

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