@leavepulse/ui 0.69.0 → 0.70.0

package/dist/chunks/LpStepper-DRFfdJaq.js

@@ -0,0 +1,76 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createElementVNode, createVNode, normalizeClass, createTextVNode, toDisplayString, createBlock, createCommentVNode } from "vue";
+import { _ as _sfc_main$1 } from "./LpStepMark-DK-5BKAt.js";
+import { _ as _sfc_main$2 } from "./StepConnector-37OgEOXA.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = ["aria-current"];
+const _hoisted_2 = { class: "flex min-w-0 items-center" };
+const _hoisted_3 = { class: "min-w-0 overflow-hidden" };
+const _hoisted_4 = { class: "sr-only" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpStepper",
+  props: {
+    steps: {},
+    current: {},
+    completed: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const currentIndex = computed(() => {
+      if (typeof props.current === "number") return props.current;
+      return props.steps.findIndex((s) => s.key === props.current);
+    });
+    function isCompleted(step, i) {
+      if (!props.completed) return i < currentIndex.value;
+      return props.completed.includes(i) || !!step.key && props.completed.includes(step.key);
+    }
+    function isCurrent(i) {
+      return i === currentIndex.value;
+    }
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "@container flex w-full min-w-0 items-center gap-2"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ol", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, i) => {
+          return openBlock(), createElementBlock("li", {
+            key: step.key ?? i,
+            class: "flex min-w-0 flex-1 items-center gap-2 last:flex-none",
+            "aria-current": isCurrent(i) ? "step" : void 0
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_sfc_main$1, {
+                variant: "step",
+                status: isCompleted(step, i) ? "success" : isCurrent(i) ? "current" : "pending",
+                number: i + 1,
+                icon: step.icon,
+                class: "size-7 text-xs"
+              }, null, 8, ["status", "number", "icon"]),
+              createElementVNode("span", {
+                class: normalizeClass(["grid min-w-0 grid-cols-[1fr] transition-[grid-template-columns,opacity] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none", !isCurrent(i) && "@max-md:grid-cols-[0fr] @max-md:opacity-0"])
+              }, [
+                createElementVNode("span", _hoisted_3, [
+                  createElementVNode("span", {
+                    class: normalizeClass(["block truncate pl-2 text-sm transition-colors duration-[var(--duration-medium)]", isCompleted(step, i) || isCurrent(i) ? "text-ink" : "text-muted"])
+                  }, [
+                    createTextVNode(toDisplayString(step.label) + " ", 1),
+                    createElementVNode("span", _hoisted_4, toDisplayString(isCompleted(step, i) ? "(completed)" : isCurrent(i) ? "(current step)" : ""), 1)
+                  ], 2)
+                ])
+              ], 2)
+            ]),
+            i < __props.steps.length - 1 ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              filled: isCompleted(step, i),
+              class: "h-px"
+            }, null, 8, ["filled"])) : createCommentVNode("", true)
+          ], 8, _hoisted_1);
+        }), 128))
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpSwap-D82jiecV.js → LpSwap-DzE6M3Mg.js}

@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(Transition, {
             mode: "out-in",
             css: !__props.disabled,
-            "enter-active-class": "animate-[tab-in_220ms_var(--ease-emphasized)] motion-reduce:animate-none",
+            "enter-active-class": "animate-[rise-in_220ms_var(--ease-emphasized)] [--rise:6px] motion-reduce:animate-none",
             "leave-active-class": "transition-opacity duration-[var(--duration-fast)] ease-out motion-reduce:transition-none",
             "leave-to-class": "opacity-0"
           }, {

package/dist/chunks/LpSwitch-DrzKrZZV.js

@@ -0,0 +1,112 @@
+import { defineComponent, useSlots, computed, useId, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, mergeProps } from "vue";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
+import { _ as _sfc_main$1 } from "./LpLoader-DjJEX8hL.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex min-w-0 flex-col"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "flex min-w-0 flex-col"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSwitch",
+  props: {
+    modelValue: { type: Boolean },
+    disabled: { type: Boolean },
+    label: {},
+    description: {},
+    labelPosition: { default: "end" },
+    action: {}
+  },
+  emits: ["update:modelValue", "done", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { pending, set } = useOptimisticToggle(() => props.action, emit);
+    const slots = useSlots();
+    const labelled = computed(() => Boolean(props.label || props.description || slots.default));
+    const TRACK = "group/switch inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55";
+    const THUMB = "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active/switch:w-5 group-data-[state=checked]/switch:translate-x-4 group-data-[state=checked]/switch:bg-ink-inverse group-data-[state=checked]/switch:group-active/switch:translate-x-2.5 motion-reduce:group-active/switch:w-3.5";
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
+      if (!labelled.value) return TRACK;
+      return props.labelPosition === "start" ? "flex w-full cursor-pointer items-center justify-between gap-3 text-sm text-ink" : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink";
+    });
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: typeof rest.value.id === "string" ? rest.value.id : void 0,
+      disabled: props.disabled
+    }));
+    const descriptionId = `${useId()}-description`;
+    const describedBy = computed(
+      () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || void 0
+    );
+    function onUpdate(value) {
+      void set(value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(labelled.value ? "label" : "span"), {
+        class: normalizeClass(labelled.value ? [unref(rootClass), unref(field).disabled && "cursor-not-allowed"] : "contents")
+      }, {
+        default: withCtx(() => [
+          labelled.value && __props.labelPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_1, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ]),
+            __props.description ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              id: descriptionId,
+              class: "text-xs text-muted"
+            }, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          createVNode(unref(SwitchRoot), mergeProps(unref(rest), {
+            id: unref(field).id,
+            "model-value": __props.modelValue,
+            disabled: unref(field).disabled,
+            required: unref(field).required,
+            "aria-describedby": describedBy.value,
+            "aria-busy": unref(pending) || void 0,
+            class: labelled.value ? TRACK : unref(rootClass),
+            "onUpdate:modelValue": onUpdate
+          }), {
+            default: withCtx(() => [
+              createVNode(unref(SwitchThumb), {
+                class: normalizeClass([THUMB, "grid place-items-center"])
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    active: unref(pending),
+                    size: "inline",
+                    "aria-hidden": "true",
+                    class: "text-[10px] text-ink-inverse group-data-[state=checked]/switch:text-ink"
+                  }, null, 8, ["active"])
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            _: 1
+          }, 16, ["id", "model-value", "disabled", "required", "aria-describedby", "aria-busy", "class"]),
+          labelled.value && __props.labelPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_2, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ]),
+            __props.description ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              id: descriptionId,
+              class: "text-xs text-muted"
+            }, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTableFilter-CuIbgdW0.js → LpTableFilter-DyvHGbOk.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, Fragment, unref, normalizeClass, toDisplayString, createVNode, withCtx, renderList } from "vue";
-import { _ as _sfc_main$3 } from "./LpCheckbox-Da5oZPHo.js";
-import { _ as _sfc_main$1 } from "./LpInput-CUyr6PIE.js";
+import { _ as _sfc_main$3 } from "./LpCheckbox-DHc2bHDe.js";
+import { _ as _sfc_main$1 } from "./LpInput-CDuwODJG.js";
 import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
 import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { matchesQuery, onlyValues, unhideValues, hideAllValues, invertHidden } from "../components/tableFilter.js";
@@ -74,6 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
           size: "sm",
           icon: "lucide:search",
+          clearable: "",
           placeholder: __props.labels.search,
           "aria-label": __props.labels.search
         }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),

package/dist/chunks/{LpTableOfContents-C_4VBktT.js → LpTableOfContents-rYvo8z5T.js}

@@ -31,32 +31,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function flatIds(links) {
       return links.flatMap((l) => [l.id, ...l.children ? flatIds(l.children) : []]);
     }
-    let observer = null;
+    let stopSpy = null;
     let spySuppressed = false;
     let rafId = null;
     let safetyTimer = null;
     function setup() {
-      observer?.disconnect();
+      stopSpy?.();
+      stopSpy = null;
       const ids = flatIds(props.links);
       if (!ids.length) return;
-      const visible = /* @__PURE__ */ new Set();
-      observer = new IntersectionObserver(
-        (entries) => {
-          for (const e of entries) {
-            if (e.isIntersecting) visible.add(e.target.id);
-            else visible.delete(e.target.id);
-          }
-          if (spySuppressed) return;
-          const firstVisible = ids.find((id) => visible.has(id));
-          if (firstVisible) activeId.value = firstVisible;
-        },
-        { rootMargin: `-${props.offset}px 0px -70% 0px`, threshold: 0 }
-      );
-      for (const id of ids) {
-        const el = document.getElementById(id);
-        if (el) observer.observe(el);
-      }
-      if (!activeId.value) activeId.value = ids[0] ?? "";
+      const first = document.getElementById(ids[0]);
+      const scroller = first ? scrollParent(first) : null;
+      let frame = 0;
+      const measure = () => {
+        frame = 0;
+        if (spySuppressed) return;
+        const top = scroller ? scroller.getBoundingClientRect().top : 0;
+        const headings = ids.map((id) => document.getElementById(id)).filter((el) => !!el);
+        if (!headings.length) return;
+        let current = headings[0].id;
+        const view = scroller ? scroller.clientHeight : window.innerHeight;
+        const line = Math.max(props.offset, view / 4);
+        for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id;
+        const scrolled = scroller ? scroller.scrollTop : window.scrollY;
+        const end = scroller ? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2 : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
+        if (scrolled > 0 && end) current = headings[headings.length - 1].id;
+        activeId.value = current;
+      };
+      const onScroll = () => {
+        if (!frame) frame = requestAnimationFrame(measure);
+      };
+      const target = scroller ?? window;
+      target.addEventListener("scroll", onScroll, { passive: true });
+      window.addEventListener("resize", onScroll);
+      measure();
+      stopSpy = () => {
+        target.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onScroll);
+        if (frame) cancelAnimationFrame(frame);
+      };
     }
     function unfreeze() {
       spySuppressed = false;
@@ -96,7 +109,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(setup);
     watch(() => props.links, setup, { deep: true });
     onBeforeUnmount(() => {
-      observer?.disconnect();
+      stopSpy?.();
       unfreeze();
     });
     return (_ctx, _cache) => {

package/dist/chunks/{LpTagsInput-DiXrpYeE.js → LpTagsInput-DgpBFRV2.js}

@@ -1,4 +1,4 @@
-import { defineComponent, useAttrs, computed, ref, useId, watch, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createVNode, mergeProps, TransitionGroup, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withModifiers } from "vue";
+import { defineComponent, useAttrs, computed, ref, useId, watch, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createVNode, mergeProps, TransitionGroup, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withModifiers } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { useField, useFieldControl } from "../composables/useField.js";
 import { prefersReducedMotion } from "../composables/easing.js";
@@ -6,11 +6,15 @@ import { useFieldNotice } from "../composables/useFieldNotice.js";
 import { useShift } from "../composables/useShift.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$3 } from "./LpFieldNotice-CHuDeLjc.js";
-import { _ as _sfc_main$1 } from "./LpFormField-DPb47HEm.js";
-import { _ as _sfc_main$2 } from "./LpIcon-6tSrZ3Zy.js";
-import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
+import { _ as _sfc_main$4 } from "./LpFieldNotice-CurbNuXI.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-BiennROB.js";
+import { BADGE_REMOVE } from "../components/badge.js";
+import { _ as _sfc_main$2 } from "./LpBadge-HOEPBYmi.js";
+import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$5 } from "./OptionContent-CmYUUeWj.js";
+import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
 import { splitTags, addTags } from "../components/tags.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = { class: "relative" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { class: "truncate" };
@@ -27,14 +31,7 @@ const _hoisted_6 = {
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
 const _hoisted_7 = ["id", "aria-selected", "aria-disabled", "data-highlighted", "data-disabled", "onPointermove", "onClick"];
-const _hoisted_8 = ["src"];
-const _hoisted_9 = { class: "flex min-w-0 flex-col" };
-const _hoisted_10 = { class: "truncate" };
-const _hoisted_11 = {
-  key: 0,
-  class: "truncate text-xs text-muted"
-};
-const _hoisted_12 = {
+const _hoisted_8 = {
   class: "sr-only",
   "aria-live": "polite"
 };
@@ -221,6 +218,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function keepOpenInside(event) {
+      guardOutside(event);
       const target = event.target;
       if (target instanceof Node && boxEl.value?.contains(target)) event.preventDefault();
     }
@@ -297,16 +295,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", next);
     }
     __expose({ focus: () => inputEl.value?.focus(), add: (value) => add(value) });
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
+      return openBlock(), createBlock(_sfc_main$1, {
+        wrapped: hasField.value,
         ref: bindField,
-        label: hasField.value ? __props.label : void 0,
-        hint: hasField.value ? __props.hint : void 0,
-        error: hasField.value ? __props.error : void 0,
-        required: hasField.value ? __props.required : void 0,
-        id: hasField.value ? unref(field).id : void 0,
-        class: normalizeClass(hasField.value ? unref(attrs).class : "contents"),
-        style: normalizeStyle(hasField.value ? unref(attrs).style : void 0)
+        id: unref(field).id,
+        label: __props.label,
+        hint: __props.hint,
+        error: __props.error,
+        required: __props.required,
+        class: normalizeClass(unref(attrs).class),
+        style: normalizeStyle(unref(attrs).style)
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
@@ -338,42 +339,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     (openBlock(true), createElementBlock(Fragment, null, renderList(keyed.value, ({ tag, key, shown }) => {
                       return openBlock(), createBlock(unref(TagsInputItem), {
                         key,
-                        "data-tag-key": key,
-                        value: tag,
-                        class: normalizeClass(["inline-flex max-w-full items-center gap-1 rounded-pill bg-surface-raised py-0.5 pr-1 text-xs font-medium text-ink outline-none data-[state=active]:ring-2 data-[state=active]:ring-ring", shown?.image ? "pl-0.5" : "pl-2.5"])
+                        "as-child": "",
+                        value: tag
                       }, {
                         default: withCtx(() => [
-                          shown?.image ? (openBlock(), createElementBlock("img", {
-                            key: 0,
-                            src: shown.image,
-                            alt: "",
-                            class: "size-4 shrink-0 rounded-full object-cover"
-                          }, null, 8, _hoisted_2)) : createCommentVNode("", true),
-                          createVNode(unref(TagsInputItemText), { class: "flex min-w-0 items-baseline gap-1" }, {
-                            default: withCtx(() => [
-                              shown ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                                createElementVNode("span", _hoisted_3, toDisplayString(shown.label), 1),
-                                shown.hint ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(shown.hint), 1)) : createCommentVNode("", true)
-                              ], 64)) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(tag), 1))
-                            ]),
-                            _: 2
-                          }, 1024),
-                          createVNode(unref(TagsInputItemDelete), {
-                            "aria-labelledby": void 0,
-                            "aria-label": unref(text).remove.replace("{tag}", shown?.label ?? tag),
-                            class: "grid size-4 shrink-0 place-items-center rounded-pill text-muted transition-colors hover:bg-ink/10 hover:text-ink"
+                          createVNode(_sfc_main$2, {
+                            removable: "",
+                            "data-tag-key": key,
+                            class: normalizeClass(["max-w-full bg-surface-raised text-ink outline-none data-[state=active]:ring-2 data-[state=active]:ring-ring", shown?.image ? "pl-0.5" : ""])
                           }, {
+                            remove: withCtx(() => [
+                              createVNode(unref(TagsInputItemDelete), {
+                                "aria-labelledby": void 0,
+                                "aria-label": unref(text).remove.replace("{tag}", shown?.label ?? tag),
+                                class: normalizeClass(unref(BADGE_REMOVE))
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_sfc_main$3, {
+                                    name: "lucide:x",
+                                    size: 12
+                                  })
+                                ]),
+                                _: 1
+                              }, 8, ["aria-label", "class"])
+                            ]),
                             default: withCtx(() => [
-                              createVNode(_sfc_main$2, {
-                                name: "lucide:x",
-                                size: 12
-                              })
+                              shown?.image ? (openBlock(), createElementBlock("img", {
+                                key: 0,
+                                src: shown.image,
+                                alt: "",
+                                class: "size-4 shrink-0 rounded-full object-cover"
+                              }, null, 8, _hoisted_2)) : createCommentVNode("", true),
+                              createVNode(unref(TagsInputItemText), { class: "flex min-w-0 items-baseline gap-1" }, {
+                                default: withCtx(() => [
+                                  shown ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                                    createElementVNode("span", _hoisted_3, toDisplayString(shown.label), 1),
+                                    shown.hint ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(shown.hint), 1)) : createCommentVNode("", true)
+                                  ], 64)) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(tag), 1))
+                                ]),
+                                _: 2
+                              }, 1024)
                             ]),
-                            _: 1
-                          }, 8, ["aria-label"])
+                            _: 2
+                          }, 1032, ["data-tag-key", "class"])
                         ]),
                         _: 2
-                      }, 1032, ["data-tag-key", "value", "class"]);
+                      }, 1032, ["value"]);
                     }), 128))
                   ]),
                   _: 1
@@ -399,7 +410,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }, 16, ["model-value", "disabled", "required", "id", "class", "style"]),
-            standalone.value ? (openBlock(), createBlock(_sfc_main$3, {
+            standalone.value ? (openBlock(), createBlock(_sfc_main$4, {
               key: 0,
               notice: unref(notice),
               id: noticeId
@@ -415,7 +426,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   reference: unref(boxEl),
                   class: "hidden"
                 }, null, 8, ["reference"])) : createCommentVNode("", true),
-                createVNode(unref(PopoverPortal), null, {
+                createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
                   default: withCtx(() => [
                     createVNode(unref(PopoverContent), {
                       id: listId,
@@ -443,28 +454,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "aria-disabled": opt.disabled || void 0,
                             "data-highlighted": i === activeIndex.value ? "" : void 0,
                             "data-disabled": opt.disabled ? "" : void 0,
-                            style: normalizeStyle({ animationDelay: `${Math.min(i, 12) * 22}ms` }),
+                            style: normalizeStyle(unref(optionStagger)(i)),
                             class: normalizeClass([unref(OPTION_ITEM), "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"]),
                             onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
                             }, ["prevent"])),
                             onPointermove: ($event) => activeIndex.value = i,
                             onClick: ($event) => !opt.disabled && choose(opt)
                           }, [
-                            opt.image ? (openBlock(), createElementBlock("img", {
-                              key: 0,
-                              src: opt.image,
-                              alt: "",
-                              class: "size-6 shrink-0 rounded-full object-cover"
-                            }, null, 8, _hoisted_8)) : opt.icon ? (openBlock(), createBlock(_sfc_main$2, {
-                              key: 1,
-                              name: opt.icon,
-                              size: 16,
-                              class: "shrink-0 text-muted"
-                            }, null, 8, ["name"])) : createCommentVNode("", true),
-                            createElementVNode("span", _hoisted_9, [
-                              createElementVNode("span", _hoisted_10, toDisplayString(opt.label ?? opt.value), 1),
-                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
-                            ])
+                            createVNode(_sfc_main$5, { option: opt }, null, 8, ["option"])
                           ], 46, _hoisted_7);
                         }), 128))
                       ]),
@@ -472,15 +469,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, 8, ["aria-label", "class"])
                   ]),
                   _: 1
-                })
+                }, 8, ["to"])
               ]),
               _: 1
             }, 8, ["open"])) : createCommentVNode("", true)
           ]),
-          createElementVNode("span", _hoisted_12, toDisplayString(announcement.value), 1)
+          createElementVNode("span", _hoisted_8, toDisplayString(announcement.value), 1)
         ]),
         _: 1
-      }, 8, ["label", "hint", "error", "required", "id", "class", "style"]);
+      }, 8, ["wrapped", "id", "label", "hint", "error", "required", "class", "style"]);
     };
   }
 });