@leavepulse/ui 0.69.0 → 0.70.1

package/dist/chunks/{LpTour-BUp3Jt2e.js → LpTour-CY2bFXge.js}

@@ -1,13 +1,14 @@
-import { defineComponent, useModel, ref, computed, shallowRef, watch, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, withModifiers, createElementVNode, normalizeStyle, normalizeClass, Fragment, renderList, createCommentVNode, unref, renderSlot, mergeModels, nextTick } from "vue";
+import { defineComponent, useModel, ref, computed, shallowRef, watch, onBeforeUnmount, openBlock, createBlock, Teleport, unref, createVNode, Transition, withCtx, createElementBlock, withModifiers, createElementVNode, normalizeStyle, normalizeClass, Fragment, renderList, createCommentVNode, renderSlot, mergeModels, nextTick } from "vue";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { durationToken, prefersReducedMotion } from "../composables/easing.js";
 import { hints } from "../composables/useHints.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMediaQuery } from "../composables/useMediaQuery.js";
+import { useView, usePortalTarget, viewDocument, viewWindow } from "../composables/useView.js";
 import { scrollToElement } from "../composables/scroll.js";
 import { PANEL_SURFACE } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./TourCard-BKI7X9-r.js";
+import { _ as _sfc_main$1 } from "./TourCard-BJ8i7dk0.js";
 import { holeOf, panelsAround, holeClip } from "../components/tour.js";
 const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -44,6 +45,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const SETTLE_MS = 1e3;
     const CARD_ROOM = 200;
     const wide = useMediaQuery("(min-width: 640px)");
+    const view = useView();
+    const win = () => viewWindow(view.value);
+    const doc = () => viewDocument(view.value);
     const sampled = ref(false);
     const step = computed(() => {
       const raw = props.steps[index.value];
@@ -86,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       try {
         if (typeof raw === "function") return raw();
         if (typeof raw !== "string") return raw.isConnected ? raw : null;
-        return hints.element(raw) ?? document.querySelector(raw);
+        return hints.element(raw) ?? doc().querySelector(raw);
       } catch {
         return null;
       }
@@ -105,9 +109,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     function controlRadius() {
-      const probe = document.createElement("div");
+      const probe = doc().createElement("div");
       probe.style.cssText = "position:absolute;visibility:hidden;border-top-left-radius:var(--radius-control)";
-      document.body.append(probe);
+      doc().body.append(probe);
       const px = parseFloat(getComputedStyle(probe).borderTopLeftRadius);
       probe.remove();
       return Number.isFinite(px) ? px : 8;
@@ -115,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const pause = (ms) => new Promise((done) => setTimeout(done, ms));
     async function settled(el) {
       await new Promise(requestAnimationFrame);
-      const moving = document.getAnimations().filter((animation) => {
+      const moving = doc().getAnimations().filter((animation) => {
         const node = animation.effect instanceof KeyframeEffect ? animation.effect.target : null;
         const end2 = Number(animation.effect?.getComputedTiming().endTime);
         return !!node && (node.contains(el) || el.contains(node)) && Number.isFinite(end2);
@@ -145,7 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       glide = window.setTimeout(() => gliding.value = false, durationToken("duration-medium") + 40);
     }
     function measure() {
-      viewport.value = { width: window.innerWidth, height: window.innerHeight };
+      viewport.value = { width: win().innerWidth, height: win().innerHeight };
       const el = target.value;
       if (!el) {
         box.value = null;
@@ -263,13 +267,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           direction = 1;
           box.value = null;
           radius.value = controlRadius();
-          document.addEventListener("click", onTargetClick, true);
-          document.addEventListener("contextmenu", onTargetClick, true);
+          doc().addEventListener("click", onTargetClick, true);
+          doc().addEventListener("contextmenu", onTargetClick, true);
           frame ||= requestAnimationFrame(track);
           void show();
         } else {
-          document.removeEventListener("click", onTargetClick, true);
-          document.removeEventListener("contextmenu", onTargetClick, true);
+          doc().removeEventListener("click", onTargetClick, true);
+          doc().removeEventListener("contextmenu", onTargetClick, true);
           end();
         }
       },
@@ -279,8 +283,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (open.value) void show();
     });
     onBeforeUnmount(() => {
-      document.removeEventListener("click", onTargetClick, true);
-      document.removeEventListener("contextmenu", onTargetClick, true);
+      doc().removeEventListener("click", onTargetClick, true);
+      doc().removeEventListener("contextmenu", onTargetClick, true);
       if (open.value) end();
     });
     useHotkeys(
@@ -293,8 +297,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { enabled: open, priority: 100 }
     );
     const CARD = `${PANEL_SURFACE} pointer-events-auto! rounded-card w-80 max-w-[calc(100vw-24px)] p-4 text-sm text-ink outline-none`;
+    const portalTo = usePortalTarget();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Teleport, { to: "body" }, [
+      return openBlock(), createBlock(Teleport, { to: unref(portalTo) }, [
         createVNode(Transition, {
           "enter-active-class": "transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
           "leave-active-class": "lp-tour-gone transition-opacity duration-[var(--duration-medium)] ease-out motion-reduce:transition-none",
@@ -337,7 +342,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createVNode(unref(PopoverAnchor), { reference }),
-            createVNode(unref(PopoverPortal), null, {
+            createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
               default: withCtx(() => [
                 createVNode(unref(PopoverContent), {
                   side: side.value,
@@ -346,6 +351,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "update-position-strategy": "always",
                   "trap-focus": false,
                   class: normalizeClass([CARD, "z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_var(--duration-fast)_ease-out] motion-reduce:animate-none"]),
+                  "data-lp-glide-position": gliding.value || void 0,
                   role: "dialog",
                   "aria-label": step.value?.title,
                   onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
@@ -379,10 +385,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   _: 3
-                }, 8, ["side", "class", "aria-label"])
+                }, 8, ["side", "class", "data-lp-glide-position", "aria-label"])
               ]),
               _: 3
-            })
+            }, 8, ["to"])
           ]),
           _: 3
         }, 8, ["open"])) : createCommentVNode("", true),
@@ -419,7 +425,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         })
-      ]);
+      ], 8, ["to"]);
     };
   }
 });

package/dist/chunks/LpTruncate-D_5Pfv5B.js

@@ -0,0 +1,112 @@
+import { defineComponent, ref, onMounted, watch, nextTick, computed, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, normalizeStyle, normalizeClass, Fragment, toDisplayString, createTextVNode, createBlock, createCommentVNode } from "vue";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-DzHjnFs0.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-Cz8SQwRt.js";
+import { middleTruncate } from "../components/fieldText.js";
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = { "aria-hidden": "true" };
+const _hoisted_3 = {
+  "aria-hidden": "true",
+  class: "invisible block h-0"
+};
+const _hoisted_4 = { class: "sr-only" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpTruncate",
+  props: {
+    text: {},
+    lines: { default: 1 },
+    middle: { type: Boolean },
+    tail: {},
+    copyable: { type: Boolean },
+    side: { default: "top" },
+    noTooltip: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const box = ref(null);
+    const truncated = ref(false);
+    const drawn = ref(props.text);
+    let canvas = null;
+    function measurer(el) {
+      canvas ??= document.createElement("canvas").getContext("2d");
+      const style = getComputedStyle(el);
+      if (canvas) canvas.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+      const spacing = Number.parseFloat(style.letterSpacing) || 0;
+      return (s) => canvas ? canvas.measureText(s).width + spacing * Array.from(s).length : 0;
+    }
+    function measure() {
+      const el = box.value;
+      if (!el) return;
+      if (props.middle) {
+        const width = el.clientWidth;
+        if (!width) return;
+        const widthOf = measurer(el);
+        const fit = middleTruncate(props.text, (s) => widthOf(s) <= width - 0.5, { tail: props.tail });
+        drawn.value = fit;
+        truncated.value = fit !== props.text;
+        return;
+      }
+      truncated.value = props.lines > 1 ? el.scrollHeight > el.clientHeight + 1 : el.scrollWidth > el.clientWidth + 0.5;
+    }
+    useResizeObserver(box, () => measure());
+    onMounted(() => {
+      measure();
+      void document.fonts?.ready.then(() => measure());
+    });
+    watch(
+      () => [props.text, props.lines, props.middle, props.tail],
+      async () => {
+        drawn.value = props.text;
+        await nextTick();
+        measure();
+      }
+    );
+    const clampStyle = computed(
+      () => !props.middle && props.lines > 1 ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: props.lines, overflow: "hidden" } : void 0
+    );
+    const boxClass = computed(
+      () => props.middle ? "block overflow-hidden whitespace-pre" : props.lines > 1 ? "break-words" : "block truncate"
+    );
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => "inline-flex min-w-0 max-w-full items-center gap-1 align-bottom");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+        createVNode(_sfc_main$1, {
+          content: __props.text,
+          side: __props.side,
+          disabled: __props.noTooltip || !truncated.value
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", {
+              ref_key: "box",
+              ref: box,
+              class: normalizeClass(["min-w-0 flex-1 rounded-[2px] outline-none focus-visible:ring-2 focus-visible:ring-ring", boxClass.value]),
+              style: normalizeStyle(clampStyle.value),
+              tabindex: truncated.value && !__props.noTooltip ? 0 : void 0
+            }, [
+              __props.middle ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createElementVNode("span", _hoisted_2, toDisplayString(drawn.value), 1),
+                createElementVNode("span", _hoisted_3, toDisplayString(__props.text), 1),
+                createElementVNode("span", _hoisted_4, toDisplayString(__props.text), 1)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(__props.text), 1)
+              ], 64))
+            ], 14, _hoisted_1)
+          ]),
+          _: 1
+        }, 8, ["content", "side", "disabled"]),
+        __props.copyable ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          value: __props.text,
+          size: "xs",
+          class: "-my-1 size-6 shrink-0 text-muted"
+        }, null, 8, ["value"])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpTypewriter-BCL_a6wE.js

@@ -0,0 +1,159 @@
+import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, toDisplayString, createTextVNode, createElementBlock, normalizeClass, createCommentVNode, Fragment, renderList } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useInView } from "../composables/useInView.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useReveal } from "../composables/useReveal.js";
+import { graphemes } from "../components/scramble.js";
+import { typewriterStart, typewriterNext } from "../components/typewriter.js";
+import '../assets/LpTypewriter-CXAm9Nca.css';const _hoisted_1 = {
+  class: "sr-only",
+  "aria-live": "polite"
+};
+const _hoisted_2 = {
+  "aria-hidden": "true",
+  class: "[grid-area:1/1]"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "lp-typewriter__caret"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpTypewriter",
+  props: {
+    text: {},
+    speed: { default: 55 },
+    eraseSpeed: { default: 28 },
+    hold: { default: 1800 },
+    startDelay: { default: 0 },
+    loop: { type: Boolean, default: false },
+    caret: { type: Boolean, default: true },
+    reserve: { type: Boolean, default: true },
+    play: { type: Boolean, default: void 0 },
+    as: { default: "span" }
+  },
+  emits: ["typed", "finished"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => "lp-typewriter relative inline-grid whitespace-pre-wrap align-bottom"
+    );
+    const strings = computed(() => Array.isArray(props.text) ? props.text : [props.text]);
+    const split = computed(() => strings.value.map((s) => graphemes(s)));
+    const state = ref(typewriterStart());
+    const visible = computed(() => (split.value[state.value.index] ?? []).slice(0, state.value.length).join(""));
+    const announced = ref(strings.value[0] ?? "");
+    const idle = computed(() => state.value.phase === "holding" || state.value.phase === "done");
+    const { el: revealEl, revealed } = useReveal({ immediate: () => props.play !== void 0 });
+    const { el: viewEl, inView } = useInView();
+    const setRoot = (node) => {
+      const element = node instanceof Element ? node : null;
+      revealEl.value = element;
+      viewEl.value = element;
+    };
+    const running = computed(() => (props.play ?? revealed.value) && inView.value);
+    let timer;
+    let pendingWait = null;
+    let dueAt = 0;
+    let started = false;
+    function schedule(wait) {
+      clearTimeout(timer);
+      timer = void 0;
+      if (!Number.isFinite(wait)) return;
+      pendingWait = wait;
+      if (!running.value) return;
+      dueAt = performance.now() + wait;
+      timer = setTimeout(tick, wait);
+    }
+    function tick() {
+      timer = void 0;
+      pendingWait = null;
+      const options = { speed: props.speed, eraseSpeed: props.eraseSpeed, hold: props.hold, loop: props.loop };
+      let step = typewriterNext(state.value, split.value, options);
+      if (prefersReducedMotion()) {
+        let guard = 0;
+        while (step.typed === void 0 && Number.isFinite(step.wait) && guard++ < 1e4) {
+          step = typewriterNext(step.state, split.value, options);
+        }
+      }
+      state.value = step.state;
+      if (step.typed !== void 0) {
+        const text = strings.value[step.typed] ?? "";
+        announced.value = text;
+        emit("typed", step.typed, text);
+        if (step.state.phase === "done") emit("finished");
+      }
+      if (step.wait === 0) return tick();
+      schedule(step.wait);
+    }
+    watch(
+      running,
+      (now) => {
+        if (!now) {
+          if (timer) pendingWait = Math.max(0, dueAt - performance.now());
+          clearTimeout(timer);
+          timer = void 0;
+          return;
+        }
+        if (!started) {
+          started = true;
+          return schedule(prefersReducedMotion() ? 0 : props.startDelay);
+        }
+        if (pendingWait !== null) schedule(pendingWait);
+      },
+      { immediate: true }
+    );
+    watch(
+      () => strings.value.join("\0"),
+      () => {
+        if (!started) return;
+        const index = Math.min(state.value.index, split.value.length - 1);
+        state.value = { index: Math.max(0, index), length: Math.min(state.value.length, split.value[index]?.length ?? 0), phase: "erasing", to: 0 };
+        schedule(props.eraseSpeed);
+      }
+    );
+    watch(
+      () => props.loop,
+      (loop) => {
+        if (loop && state.value.phase === "done") {
+          state.value = { ...state.value, phase: "holding" };
+          schedule(props.hold);
+        }
+      }
+    );
+    onBeforeUnmount(() => clearTimeout(timer));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref: setRoot,
+        class: unref(rootClass)
+      }, unref(rest)), {
+        default: withCtx(() => [
+          createElementVNode("span", _hoisted_1, toDisplayString(announced.value), 1),
+          createElementVNode("span", _hoisted_2, [
+            createTextVNode("​" + toDisplayString(visible.value), 1),
+            __props.caret ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(["lp-typewriter__caret", idle.value ? "lp-typewriter__caret--blink" : ""])
+            }, null, 2)) : createCommentVNode("", true)
+          ]),
+          __props.reserve ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(strings.value, (s, i) => {
+            return openBlock(), createElementBlock("span", {
+              key: i,
+              "aria-hidden": "true",
+              class: "invisible [grid-area:1/1]"
+            }, [
+              createTextVNode(toDisplayString(s), 1),
+              __props.caret ? (openBlock(), createElementBlock("span", _hoisted_3)) : createCommentVNode("", true)
+            ]);
+          }), 128)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpUptimeBar-B6kHw4Cj.js → LpUptimeBar-Tew1Ykx4.js}

@@ -1,9 +1,10 @@
 import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, withCtx, createBlock, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
-import { _ as _sfc_main$5 } from "./LpNumberFlow-z4WPZcZu.js";
-import { _ as _sfc_main$4 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$5 } from "./LpNumberFlow-Cfyh033Q.js";
+import { _ as _sfc_main$4 } from "./LpRollingText-DiL717LK.js";
 import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpSwap-D82jiecV.js";
-import { _ as _sfc_main$3 } from "./LpTooltip-suFCM34F.js";
+import { _ as _sfc_main$1 } from "./LpSwap-DzE6M3Mg.js";
+import { _ as _sfc_main$3 } from "./LpTooltip-Cz8SQwRt.js";
+import { TONES } from "../components/tone.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import '../assets/LpUptimeBar-B98o9krI.css';const _hoisted_1 = ["aria-busy"];
@@ -49,11 +50,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const defaultColor = {
-      operational: "var(--color-action)",
-      degraded: "var(--color-accent)",
-      down: "var(--color-danger)",
-      maintenance: "var(--color-brand)",
-      empty: "var(--color-surface-soft)"
+      operational: TONES.success.color,
+      degraded: TONES.warning.color,
+      down: TONES.danger.color,
+      maintenance: TONES.brand.color,
+      empty: TONES.neutral.soft
     };
     const opacityFor = (status) => status === "empty" ? 0.4 : 1;
     const colorFor = (status) => props.colors?.[status] ?? defaultColor[status];

package/dist/chunks/{LpVideoBackdrop-qWRYBOTQ.js → LpVideoBackdrop-DS1wGv-X.js}

@@ -1,5 +1,6 @@
 import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, normalizeStyle, createCommentVNode, createElementVNode, normalizeClass } from "vue";
 import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
+import { useInView } from "../composables/useInView.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { planLoop, isNativeLoop, seamReached, seamProgress } from "../components/videoBackdrop.js";
 const _hoisted_1 = ["src"];
@@ -37,14 +38,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const throttle = ref(1);
     const SLOWEST_RATE = 1 / 16;
     const reducedMotion = ref(prefersReducedMotion());
-    const pageHidden = ref(typeof document !== "undefined" && document.hidden);
+    const { el: root, inView } = useInView();
+    const unseen = computed(() => !inView.value);
     const plan = computed(
       () => planLoop(duration.value, { start: props.start, end: props.end, crossfade: props.crossfade })
     );
     const native = computed(() => isNativeLoop(plan.value, duration.value));
     const blended = computed(() => plan.value.fade > 0);
     const still = computed(() => reducedMotion.value && !props.playWithReducedMotion);
-    const playing = computed(() => ready.value && !props.paused && !pageHidden.value && !still.value);
+    const playing = computed(() => ready.value && !props.paused && !unseen.value && !still.value);
     function element(index) {
       return index === 0 ? first.value : second.value;
     }
@@ -172,7 +174,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rampTo(1, easing);
         return;
       }
-      if (!running.value || pageHidden.value || still.value || !easing) {
+      if (!running.value || unseen.value || still.value || !easing) {
         rampTo(throttle.value, 0);
         stopElements();
         return;
@@ -213,21 +215,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onMotionChange(event) {
       reducedMotion.value = event.matches;
     }
-    function onVisibility() {
-      pageHidden.value = document.hidden;
-    }
     let motionQuery = null;
     onMounted(() => {
       applyRate();
       motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
       motionQuery.addEventListener("change", onMotionChange);
-      document.addEventListener("visibilitychange", onVisibility);
     });
     onBeforeUnmount(() => {
       if (frame) cancelAnimationFrame(frame);
       if (ramp) cancelAnimationFrame(ramp);
       motionQuery?.removeEventListener("change", onMotionChange);
-      document.removeEventListener("visibilitychange", onVisibility);
     });
     function layerStyle(index) {
       const fading = incoming.value === index;
@@ -242,6 +239,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
         class: unref(rootClass),
         "aria-hidden": "true"
       }, unref(rest)), [

package/dist/chunks/{MenuTitle-obgek0B7.js → MenuTitle-BjQZX8tQ.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, createCommentVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 const _hoisted_1 = {
   class: "flex max-w-72 min-w-0 items-center gap-2 px-2.5 pt-1.5 pb-2",
   "aria-hidden": "true"

package/dist/chunks/OptionContent-CmYUUeWj.js

@@ -0,0 +1,40 @@
+import { defineComponent, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+const _hoisted_1 = { class: "flex min-w-0 items-center gap-2.5" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = { class: "flex min-w-0 flex-col" };
+const _hoisted_4 = { class: "truncate" };
+const _hoisted_5 = {
+  key: 0,
+  class: "truncate text-xs text-muted"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OptionContent",
+  props: {
+    option: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1, [
+        __props.option.image ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          src: __props.option.image,
+          alt: "",
+          class: "size-6 shrink-0 rounded-full object-cover"
+        }, null, 8, _hoisted_2)) : __props.option.icon ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 1,
+          name: __props.option.icon,
+          size: 16,
+          class: "shrink-0 text-muted"
+        }, null, 8, ["name"])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_3, [
+          createElementVNode("span", _hoisted_4, toDisplayString(__props.option.label ?? __props.option.value), 1),
+          __props.option.description ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.option.description), 1)) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};