@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/{LpAutocomplete-Dgn6hw3p.js → LpAutocomplete-D92niDHE.js}

@@ -3,8 +3,10 @@ import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxCo
 import { useFieldControl } from "../composables/useField.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { CLOSE_ICON, POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { CLOSE_ICON, POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$2 } from "./OptionContent-CmYUUeWj.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = { class: "relative flex min-w-0 flex-1 self-stretch" };
 const _hoisted_3 = {
@@ -18,14 +20,6 @@ const _hoisted_6 = {
   key: 0,
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
-const _hoisted_7 = { class: "flex min-w-0 items-center gap-2.5" };
-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 __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -157,11 +151,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       open.value = false;
     }
     function clear() {
+      if (field.value.disabled) return;
       typing.value = false;
       draft.value = null;
       emit("update:modelValue", "");
       open.value = false;
     }
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ComboboxRoot), {
         open: open.value,
@@ -241,7 +238,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
+              __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createElementBlock("button", {
                 key: 1,
                 type: "button",
                 class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
@@ -259,9 +256,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["class"]),
-          createVNode(unref(ComboboxPortal), null, {
+          createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(ComboboxContent), {
+                onInteractOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside),
                 "collision-padding": 8,
                 position: "popper",
                 "side-offset": 6,
@@ -286,28 +285,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           key: opt.value,
                           value: opt.value,
                           disabled: opt.disabled,
-                          style: normalizeStyle({ animationDelay: `${Math.min(i, 12) * 22}ms` }),
+                          style: normalizeStyle(unref(optionStagger)(i)),
                           class: normalizeClass([unref(OPTION_ITEM), "justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"]),
                           onSelect: withModifiers(($event) => choose(opt), ["prevent"])
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("span", _hoisted_7, [
-                              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$1, {
-                                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$2, { option: opt }, null, 8, ["option"])
                           ]),
                           _: 2
                         }, 1032, ["value", "disabled", "style", "class", "onSelect"]);
@@ -317,10 +300,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
-              }, 8, ["class"])
+              }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
             ]),
             _: 1
-          })
+          }, 8, ["to"])
         ]),
         _: 1
       }, 8, ["open", "disabled", "class", "style"]);

package/dist/chunks/{LpAvatar-Bs0Fb1lC.js → LpAvatar-CLPl-qOF.js}

@@ -1,8 +1,9 @@
-import { defineComponent, computed, ref, onMounted, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createCommentVNode, createElementBlock, Fragment, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, ref, onMounted, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createCommentVNode, normalizeClass, createElementBlock, Fragment, createTextVNode, toDisplayString } from "vue";
 import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
 import { tv } from "tailwind-variants";
 import { MenuWhen } from "../components/menuWhen.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpIdenticon-BzdC_qz9.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -13,6 +14,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     alt: {},
     fallback: {},
     icon: {},
+    identicon: { type: [Boolean, String] },
     size: { default: "md" },
     pixelSize: {},
     shape: { default: "circle" },
@@ -67,6 +69,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => avatar({ size: props.pixelSize ? void 0 : props.size, shape: props.shape, ring: props.ring })
     );
     const mounted = ref(false);
+    const identiconSeed = computed(() => {
+      if (!props.identicon || props.fallback || props.icon) return "";
+      return props.identicon === true ? (props.alt ?? "").trim() : props.identicon;
+    });
     const menuHeading = computed(() => props.menuTitle ?? props.alt);
     onMounted(() => {
       mounted.value = true;
@@ -91,18 +97,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 alt: __props.alt,
                 class: "size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none"
               }, null, 8, ["src", "alt"])) : createCommentVNode("", true),
-              createVNode(unref(AvatarFallback), null, {
+              createVNode(unref(AvatarFallback), {
+                class: normalizeClass(identiconSeed.value ? "size-full" : void 0)
+              }, {
                 default: withCtx(() => [
-                  __props.icon && !__props.fallback ? (openBlock(), createBlock(_sfc_main$1, {
+                  identiconSeed.value ? (openBlock(), createBlock(_sfc_main$1, {
                     key: 0,
+                    seed: identiconSeed.value,
+                    padding: __props.shape === "circle" ? 0.24 : 0.14
+                  }, null, 8, ["seed", "padding"])) : __props.icon && !__props.fallback ? (openBlock(), createBlock(_sfc_main$2, {
+                    key: 1,
                     name: __props.icon,
                     size: iconSize.value
-                  }, null, 8, ["name", "size"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  }, null, 8, ["name", "size"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                     createTextVNode(toDisplayString(initials.value), 1)
                   ], 64))
                 ]),
                 _: 1
-              })
+              }, 8, ["class"])
             ]),
             _: 1
           }, 16, ["class", "style"])

package/dist/chunks/LpBadge-HOEPBYmi.js

@@ -0,0 +1,126 @@
+import { defineComponent, useSlots, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, createCommentVNode, createBlock, renderSlot, normalizeClass } from "vue";
+import { tv } from "tailwind-variants";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedClass } from "../composables/useMergedClass.js";
+import { BADGE_REMOVE } from "../components/badge.js";
+import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$1 } from "./LpShift-DXNsauQZ.js";
+import { slotText } from "../components/slotText.js";
+import { TONES } from "../components/tone.js";
+const _hoisted_1 = { class: "inline-flex max-w-full items-center gap-1.5 whitespace-nowrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "size-1.5 shrink-0 rounded-full bg-current"
+};
+const _hoisted_3 = ["aria-label"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpBadge",
+  props: {
+    tone: {},
+    size: {},
+    dot: { type: Boolean },
+    removable: { type: Boolean },
+    removeLabel: {}
+  },
+  emits: ["remove"],
+  setup(__props, { emit: __emit }) {
+    const badge = tv({
+      /*
+       * `align-middle` and a line-height pinned to the box, because the default
+       * `inline-flex` baseline is the one thing a badge must not bring with it: a
+       * badge dropped next to a text-sm heading sat a pixel or two off the text's
+       * baseline and pushed the whole row taller, so a section title grew a step
+       * the moment it gained a status. The badge now occupies the height it says it
+       * does and leaves the line it sits on alone.
+       */
+      /*
+       * A status changes while it is watched, so the change shows as one: the
+       * colours ease between tones, the width eases (LpShift) and plain text rolls
+       * to the new word (LpRollingText). The outline tone draws its edge as an
+       * inset ring rather than a border, so switching to it neither adds a pixel
+       * nor snaps: the ring is there in every tone, transparent.
+       */
+      base: "inline-flex shrink-0 items-center rounded-pill align-middle font-medium leading-[1.2] ring-1 ring-transparent ring-inset transition-[color,background-color,box-shadow] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
+      variants: {
+        size: {
+          // Fits inside a text-sm line without growing it — for a badge beside a
+          // heading, in a table cell, or anywhere a row's height is already set.
+          sm: "h-[18px] px-1.5 text-[11px]",
+          md: "px-2.5 py-0.5 text-xs",
+          lg: "px-3 py-1 text-sm"
+        },
+        /*
+         * The kit's tones (tone.ts) under every name they go by, so a badge and a
+         * tinted row in one tone are one colour. `warning` is partial trouble,
+         * which every status surface eventually needs: without it a half-failed
+         * thing has to render as either fine or broken.
+         */
+        tone: {
+          neutral: TONES.neutral.chip,
+          muted: TONES.neutral.chip,
+          brand: TONES.brand.chip,
+          info: TONES.brand.chip,
+          action: TONES.success.chip,
+          success: TONES.success.chip,
+          ok: TONES.success.chip,
+          warning: TONES.warning.chip,
+          accent: TONES.warning.chip,
+          danger: TONES.danger.chip,
+          error: TONES.danger.chip,
+          outline: "text-ink ring-line"
+        },
+        // A chip that can be taken away (a tag, a filter in force): the ✕ sits
+        // tight to the trailing edge, so that side keeps only a hair of padding.
+        removable: {
+          true: "gap-1 pr-1"
+        }
+      },
+      defaultVariants: { tone: "neutral", size: "md" }
+    });
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels("badge", { remove: "Remove" });
+    const classes = useMergedClass(() => badge({ tone: props.tone, size: props.size, removable: props.removable }));
+    const slots = useSlots();
+    const plainText = () => slotText(slots.default);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, { class: unref(classes) }), [
+        createVNode(_sfc_main$1, {
+          axis: "width",
+          class: "min-w-0"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", _hoisted_1, [
+              __props.dot ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
+              plainText() !== null ? (openBlock(), createBlock(_sfc_main$2, {
+                key: 1,
+                value: plainText(),
+                align: "start"
+              }, null, 8, ["value"])) : renderSlot(_ctx.$slots, "default", { key: 2 })
+            ])
+          ]),
+          _: 3
+        }),
+        __props.removable ? renderSlot(_ctx.$slots, "remove", { key: 0 }, () => [
+          createElementVNode("button", {
+            type: "button",
+            class: normalizeClass(unref(BADGE_REMOVE)),
+            "aria-label": __props.removeLabel ?? unref(text).remove,
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("remove"))
+          }, [
+            createVNode(_sfc_main$3, {
+              name: "lucide:x",
+              size: 12
+            })
+          ], 10, _hoisted_3)
+        ]) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpBreadcrumbs-DYoPc3P4.js

@@ -0,0 +1,144 @@
+import { defineComponent, computed, ref, watch, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, TransitionGroup, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent } from "vue";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$3 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$1 } from "./LpShift-DXNsauQZ.js";
+import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { resolveLink } from "../components/link.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-current"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpBreadcrumbs",
+  props: {
+    items: {},
+    as: {},
+    labels: {}
+  },
+  emits: ["navigate"],
+  setup(__props) {
+    const props = __props;
+    const text = useLabels("breadcrumbs", { nav: "Breadcrumb" }, () => props.labels);
+    const linkComponent = useLinkComponent();
+    function linkOf(item) {
+      if (props.as && props.as !== "a") {
+        if (item.to != null) return { is: props.as, props: { to: item.to } };
+        return item.href != null ? { is: "a", props: { href: item.href } } : null;
+      }
+      return resolveLink(props.as === "a" ? "a" : linkComponent.value, { to: item.to, href: item.href });
+    }
+    const crumbs = computed(
+      () => props.items.map((item, i) => ({
+        item,
+        last: i === props.items.length - 1,
+        link: i === props.items.length - 1 ? null : linkOf(item)
+      }))
+    );
+    const list = ref(null);
+    const spots = /* @__PURE__ */ new WeakMap();
+    watch(
+      crumbs,
+      () => {
+        for (const crumb of Array.from(list.value?.$el.children ?? [])) {
+          if (crumb instanceof HTMLElement) spots.set(crumb, [crumb.offsetLeft, crumb.offsetTop]);
+        }
+      },
+      { flush: "pre" }
+    );
+    function liftLeaving(el) {
+      const crumb = el;
+      const [left, top] = spots.get(crumb) ?? [crumb.offsetLeft, crumb.offsetTop];
+      crumb.style.left = `${left}px`;
+      crumb.style.top = `${top}px`;
+      crumb.style.position = "absolute";
+      crumb.style.pointerEvents = "none";
+    }
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "flex min-w-0 items-center gap-1.5 text-sm"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", mergeProps({
+        "aria-label": unref(text).nav,
+        class: "flex min-w-0"
+      }, unref(rest)), [
+        createVNode(_sfc_main$1, {
+          axis: "width",
+          class: "min-w-0"
+        }, {
+          default: withCtx(() => [
+            createVNode(TransitionGroup, {
+              ref_key: "list",
+              ref: list,
+              tag: "ol",
+              class: normalizeClass([unref(rootClass), "relative"]),
+              "enter-active-class": "transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+              "enter-from-class": "-translate-x-1 opacity-0",
+              "leave-active-class": "transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+              "leave-to-class": "-translate-x-1 opacity-0",
+              onBeforeLeave: liftLeaving
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(crumbs.value, ({ item, last, link }, i) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: i,
+                    class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "shrink" : "shrink-0"])
+                  }, [
+                    i > 0 ? (openBlock(), createBlock(_sfc_main$2, {
+                      key: 0,
+                      name: "lucide:chevron-right",
+                      size: 14,
+                      class: "shrink-0 text-muted",
+                      "aria-hidden": "true"
+                    })) : createCommentVNode("", true),
+                    link ? (openBlock(), createBlock(resolveDynamicComponent(link.is), mergeProps({
+                      key: 1,
+                      ref_for: true
+                    }, link.props, {
+                      class: "inline-flex min-w-0 items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                      onClick: ($event) => _ctx.$emit("navigate", item, i)
+                    }), {
+                      default: withCtx(() => [
+                        item.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                          key: 0,
+                          name: item.icon,
+                          size: 14
+                        }, null, 8, ["name"])) : createCommentVNode("", true),
+                        createVNode(_sfc_main$3, {
+                          value: item.label,
+                          align: "start",
+                          class: "min-w-0"
+                        }, null, 8, ["value"])
+                      ]),
+                      _: 2
+                    }, 1040, ["onClick"])) : (openBlock(), createElementBlock("span", {
+                      key: 2,
+                      class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "text-ink" : "text-muted"]),
+                      "aria-current": last ? "page" : void 0
+                    }, [
+                      item.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                        key: 0,
+                        name: item.icon,
+                        size: 14
+                      }, null, 8, ["name"])) : createCommentVNode("", true),
+                      createVNode(_sfc_main$3, {
+                        value: item.label,
+                        align: "start",
+                        class: "min-w-0"
+                      }, null, 8, ["value"])
+                    ], 10, _hoisted_2))
+                  ], 2);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          _: 1
+        })
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpButton-DNR-YAq5.js → LpButton-CVxBfGjd.js}

@@ -6,7 +6,7 @@ import { useHotkeys, useAppleKeyboard, appleModifierLabel, parseCombo } from "..
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpLoader-DjJEX8hL.js";
 import { resolveLink } from "../components/link.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -121,7 +121,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let viaKey = false;
     const spoken = ref("");
     function readSpoken() {
-      spoken.value = String(attrs["aria-label"] ?? rootEl()?.textContent?.trim() ?? "");
+      const el = rootEl();
+      spoken.value = String(attrs["aria-label"] ?? (el ? labelText(el).trim() : ""));
+    }
+    function labelText(node) {
+      if (node instanceof Element && node.getAttribute("role") === "status") return "";
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+      return Array.from(node.childNodes, labelText).join("");
     }
     onMounted(readSpoken);
     onUpdated(readSpoken);
@@ -223,8 +229,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "aria-hidden": "true"
           }, [
             createVNode(_sfc_main$1, {
-              name: "lucide:loader-circle",
-              class: "size-[1.15em] animate-spin motion-reduce:animate-none"
+              size: "inline",
+              tone: "current",
+              delay: 0,
+              class: "text-[1.15em]"
             })
           ], 2)) : createCommentVNode("", true)
         ]),

package/dist/chunks/{LpCalendar-BLya39Fh.js → LpCalendar-pVL91-Pl.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, shallowRef, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
 import { today, getLocalTimeZone, parseDate } from "@internationalized/date";
 import { CalendarRoot, CalendarHeader, CalendarPrev, CalendarHeading, CalendarNext, CalendarGrid, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarGridBody, CalendarCell, CalendarCellTrigger } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { CALENDAR_LABELS, CALENDAR_NAV, CALENDAR_FRAME } from "../components/calendar.js";

package/dist/chunks/{LpCard-Bf71NXZq.js → LpCard-CqKLnEhl.js}

@@ -3,7 +3,8 @@ import { tv } from "tailwind-variants";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { MenuWhen } from "../components/menuWhen.js";
 import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpSwap-D82jiecV.js";
+import { _ as _sfc_main$1 } from "./LpSwap-DzE6M3Mg.js";
+import { useSpotlight } from "../composables/useSpotlight.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -18,7 +19,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     loading: { type: Boolean, default: false },
     as: { default: "div" },
     accent: {},
-    accentWidth: {}
+    accentWidth: {},
+    spotlight: { type: Boolean },
+    glow: { type: Boolean }
   },
   setup(__props) {
     const card = tv({
@@ -76,13 +79,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const props = __props;
     const { class: classes, attrs: rest } = useMergedAttrs(
-      () => card({
-        variant: props.variant,
-        padded: props.padded,
-        interactive: props.interactive,
-        accent: Boolean(props.accent)
-      })
+      () => [
+        card({
+          variant: props.variant,
+          padded: props.padded,
+          interactive: props.interactive,
+          accent: Boolean(props.accent)
+        }),
+        props.spotlight && "lp-spotlight",
+        props.glow && "lp-glow-border"
+      ].filter(Boolean).join(" ")
     );
+    const { el: spotlightEl } = useSpotlight({ disabled: () => !props.spotlight });
     const everLoaded = ref(props.loading);
     watch(
       () => props.loading,
@@ -104,6 +112,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           (openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+            ref_key: "spotlightEl",
+            ref: spotlightEl,
             class: unref(classes),
             style: accentStyle.value,
             "aria-busy": __props.loading || void 0

package/dist/chunks/{LpCheckbox-Da5oZPHo.js → LpCheckbox-DHc2bHDe.js}

@@ -1,6 +1,7 @@
 import { defineComponent, useId, computed, openBlock, createElementBlock, mergeProps, unref, createVNode, normalizeClass, withCtx, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
 import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$2 } from "./LpLoader-DjJEX8hL.js";
 import { useFieldControl } from "../composables/useField.js";
 import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
@@ -51,6 +52,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: __props.name,
           "model-value": __props.indeterminate ? "indeterminate" : __props.modelValue,
           disabled: unref(field).disabled,
+          required: unref(field).required,
           "aria-describedby": describedBy.value,
           "aria-busy": unref(pending) || void 0,
           class: normalizeClass([__props.description ? "mt-px" : "", "relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"]),
@@ -67,15 +69,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            unref(pending) ? (openBlock(), createBlock(_sfc_main$1, {
+            unref(pending) ? (openBlock(), createBlock(_sfc_main$2, {
               key: 0,
-              name: "lucide:loader-circle",
-              size: 12,
-              class: normalizeClass(["absolute animate-spin motion-reduce:animate-none", __props.modelValue ? "text-ink-inverse" : "text-muted"])
+              size: "inline",
+              delay: 0,
+              "aria-hidden": "true",
+              class: normalizeClass(["absolute text-[12px]", __props.modelValue ? "text-ink-inverse" : "text-muted"])
             }, null, 8, ["class"])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["id", "name", "model-value", "disabled", "aria-describedby", "aria-busy", "class"]),
+        }, 8, ["id", "name", "model-value", "disabled", "required", "aria-describedby", "aria-busy", "class"]),
         __props.description ? (openBlock(), createElementBlock("span", _hoisted_1, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)