@leavepulse/ui 0.69.0 → 0.70.1

package/dist/chunks/{LpHintExample-C1eKYdeL.js → LpHintExample-9Py0wc-L.js}

@@ -1,9 +1,8 @@
 import { defineComponent, computed, watch, openBlock, createBlock, Transition, withCtx, createElementBlock, renderSlot, createCommentVNode, createVNode } from "vue";
-import { prefersReducedMotion, easingToken, durationToken } from "../composables/easing.js";
 import { hints } from "../composables/useHints.js";
-import { _ as _sfc_main$1 } from "./HintSampleTag-BV8AZXZh.js";
+import { _ as _sfc_main$2 } from "./HintSampleTag-BV8AZXZh.js";
+import { _ as _sfc_main$1 } from "./LpCollapse-CWS9M_lm.js";
 const _hoisted_1 = ["data-lp-hint-example"];
-const _hoisted_2 = ["data-lp-hint-example"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpHintExample",
   props: {
@@ -24,22 +23,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     const visible = computed(() => absent.value.some((id) => hints.showingExample(id)));
-    function grow(el, done, opening) {
-      if (prefersReducedMotion()) return done();
-      const box = el;
-      const frames = [
-        { height: "0px", opacity: 0 },
-        { height: `${box.scrollHeight}px`, opacity: 1 }
-      ];
-      box.style.overflow = "hidden";
-      box.animate(opening ? frames : frames.reverse(), {
-        duration: durationToken("duration-medium"),
-        easing: easingToken("ease-emphasized")
-      }).onfinish = () => {
-        box.style.overflow = "";
-        done();
-      };
-    }
     return (_ctx, _cache) => {
       return __props.inline ? (openBlock(), createBlock(Transition, {
         key: 0,
@@ -60,26 +43,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 8, _hoisted_1)) : createCommentVNode("", true)
         ]),
         _: 3
-      })) : (openBlock(), createBlock(Transition, {
+      })) : (openBlock(), createBlock(_sfc_main$1, {
         key: 1,
-        css: false,
-        onEnter: _cache[0] || (_cache[0] = (el, done) => grow(el, done, true)),
-        onLeave: _cache[1] || (_cache[1] = (el, done) => grow(el, done, false))
+        open: visible.value,
+        "data-lp-hint-example": ids.value.join(" "),
+        inert: "",
+        "aria-hidden": "true",
+        class: "relative"
       }, {
         default: withCtx(() => [
-          visible.value ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            "data-lp-hint-example": ids.value.join(" "),
-            inert: "",
-            "aria-hidden": "true",
-            class: "relative"
-          }, [
-            renderSlot(_ctx.$slots, "default"),
-            createVNode(_sfc_main$1, { labels: __props.labels }, null, 8, ["labels"])
-          ], 8, _hoisted_2)) : createCommentVNode("", true)
+          renderSlot(_ctx.$slots, "default"),
+          createVNode(_sfc_main$2, { labels: __props.labels }, null, 8, ["labels"])
         ]),
         _: 3
-      }));
+      }, 8, ["open", "data-lp-hint-example"]));
     };
   }
 });

package/dist/chunks/{LpHintLayer-7UOdWQG3.js → LpHintLayer-HvwUA5Ec.js}

@@ -1,17 +1,18 @@
-import { defineComponent, computed, ref, shallowRef, watch, onMounted, onBeforeUnmount, openBlock, createBlock, Teleport, createElementBlock, Fragment, renderList, unref, normalizeStyle, createElementVNode, createVNode, withCtx, createCommentVNode, normalizeClass, toDisplayString, createTextVNode } from "vue";
+import { defineComponent, computed, ref, shallowRef, watch, onMounted, onBeforeUnmount, openBlock, createBlock, Teleport, unref, createElementBlock, Fragment, renderList, normalizeStyle, createElementVNode, createVNode, withCtx, createCommentVNode, normalizeClass, createTextVNode, toDisplayString } from "vue";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { hints } from "../composables/useHints.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { PANEL_SURFACE, POPOVER_ANIM } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpButton-DNR-YAq5.js";
+import { _ as _sfc_main$1 } from "./LpBadge-BBq1Er9T.js";
+import { _ as _sfc_main$2 } from "./LpButton-CVxBfGjd.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = ["aria-label", "onPointerenter", "onFocus", "onClick"];
 const _hoisted_2 = { class: "flex items-center gap-2 font-medium" };
-const _hoisted_3 = { class: "rounded-full bg-brand/15 px-1.5 text-[11px] text-brand" };
-const _hoisted_4 = {
+const _hoisted_3 = {
   key: 0,
   class: "mt-1.5 text-muted"
 };
-const _hoisted_5 = { class: "mt-3 flex justify-end" };
+const _hoisted_4 = { class: "mt-3 flex justify-end" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpHintLayer",
   props: {
@@ -83,8 +84,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       for (const stop of off) stop();
     });
     const note = computed(() => openId.value ? props.notes[openId.value] : void 0);
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Teleport, { to: "body" }, [
+      return openBlock(), createBlock(Teleport, { to: unref(portalTo) }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(spots.value, (spot) => {
           return openBlock(), createElementBlock("button", {
             key: spot.id,
@@ -111,9 +114,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 0,
               reference: anchor.value
             }, null, 8, ["reference"])) : createCommentVNode("", true),
-            createVNode(unref(PopoverPortal), null, {
+            createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
               default: withCtx(() => [
                 createVNode(unref(PopoverContent), {
+                  onInteractOutside: unref(guardOutside),
+                  onEscapeKeyDown: unref(guardOutside),
                   side: "bottom",
                   "side-offset": 8,
                   "collision-padding": 8,
@@ -121,12 +126,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     createElementVNode("p", _hoisted_2, [
-                      createElementVNode("span", _hoisted_3, toDisplayString(unref(labels).badge), 1),
+                      createVNode(_sfc_main$1, {
+                        tone: "brand",
+                        size: "sm"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(unref(labels).badge), 1)
+                        ]),
+                        _: 1
+                      }),
                       createTextVNode(" " + toDisplayString(note.value?.title), 1)
                     ]),
-                    note.value?.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(note.value.text), 1)) : createCommentVNode("", true),
-                    createElementVNode("div", _hoisted_5, [
-                      createVNode(_sfc_main$1, {
+                    note.value?.text ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(note.value.text), 1)) : createCommentVNode("", true),
+                    createElementVNode("div", _hoisted_4, [
+                      createVNode(_sfc_main$2, {
                         size: "sm",
                         onClick: read
                       }, {
@@ -138,14 +151,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   _: 1
-                }, 8, ["class"])
+                }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
               ]),
               _: 1
-            })
+            }, 8, ["to"])
           ]),
           _: 1
         }, 8, ["open"])
-      ]);
+      ], 8, ["to"]);
     };
   }
 });

package/dist/chunks/{LpHints-BUtBp9-w.js → LpHints-DxbPKOzQ.js}

@@ -2,9 +2,9 @@ import { defineComponent, ref, onErrorCaptured, onMounted, onBeforeUnmount, comp
 import { provideHintSystem } from "../composables/useHintSystem.js";
 import { useAppleKeyboard, appleModifierLabel } from "../composables/useHotkeys.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$3 } from "./LpActionBar-MPKMu3pz.js";
-import { _ as _sfc_main$2 } from "./LpHintLayer-7UOdWQG3.js";
-import { _ as _sfc_main$1 } from "./LpTour-BUp3Jt2e.js";
+import { _ as _sfc_main$3 } from "./LpActionBar-CzOFar5t.js";
+import { _ as _sfc_main$2 } from "./LpHintLayer-HvwUA5Ec.js";
+import { _ as _sfc_main$1 } from "./LpTour-CY2bFXge.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpHints",
   props: {

package/dist/chunks/LpHoverCard-spGxyw7T.js

@@ -0,0 +1,130 @@
+import { defineComponent, useModel, computed, watch, onBeforeUnmount, renderSlot, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createCommentVNode, mergeModels } from "vue";
+import { HoverCardRoot, HoverCardTrigger, HoverCardPortal, HoverCardContent, HoverCardArrow } from "reka-ui";
+import { mergeClass } from "../composables/useMergedClass.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+import { POPOVER_PANEL } from "../components/dropdown.js";
+const SLOP = 8;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpHoverCard",
+  props: /* @__PURE__ */ mergeModels({
+    side: { default: "bottom" },
+    align: { default: "center" },
+    sideOffset: { default: 8 },
+    openDelay: { default: 500 },
+    closeDelay: { default: 200 },
+    arrow: { type: Boolean, default: false },
+    touch: { default: "hold" },
+    holdDelay: { default: 450 },
+    disabled: { type: Boolean, default: false },
+    panelClass: {}
+  }, {
+    "open": { type: Boolean, ...{ default: false } },
+    "openModifiers": {}
+  }),
+  emits: ["update:open"],
+  setup(__props) {
+    const props = __props;
+    const open = useModel(__props, "open");
+    const panel = computed(
+      () => mergeClass(POPOVER_PANEL, "z-(--z-popover) w-72 rounded-card p-4 text-sm text-ink outline-none", props.panelClass)
+    );
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
+    let holdTimer = 0;
+    let start = { x: 0, y: 0 };
+    let held = false;
+    function cancelHold() {
+      window.clearTimeout(holdTimer);
+      holdTimer = 0;
+    }
+    function onPointerDown(event) {
+      if (event.pointerType !== "touch" || props.touch !== "hold" || props.disabled) return;
+      held = false;
+      start = { x: event.clientX, y: event.clientY };
+      cancelHold();
+      holdTimer = window.setTimeout(() => {
+        holdTimer = 0;
+        held = true;
+        open.value = true;
+      }, props.holdDelay);
+    }
+    function onPointerMove(event) {
+      if (!holdTimer) return;
+      if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) cancelHold();
+    }
+    function onClickCapture(event) {
+      if (!held) return;
+      held = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    function onContextMenu(event) {
+      if (holdTimer || held) event.preventDefault();
+    }
+    watch(
+      () => props.disabled,
+      (off) => {
+        if (off) open.value = false;
+      }
+    );
+    onBeforeUnmount(cancelHold);
+    return (_ctx, _cache) => {
+      return __props.disabled ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : (openBlock(), createBlock(unref(HoverCardRoot), {
+        key: 1,
+        open: open.value,
+        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+        "open-delay": __props.openDelay,
+        "close-delay": __props.closeDelay
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(HoverCardTrigger), {
+            "as-child": "",
+            class: normalizeClass(__props.touch === "hold" ? "[-webkit-touch-callout:none]" : void 0),
+            onPointerdown: onPointerDown,
+            onPointermove: onPointerMove,
+            onPointerup: cancelHold,
+            onPointercancel: cancelHold,
+            onClickCapture,
+            onContextmenu: onContextMenu
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "trigger")
+            ]),
+            _: 3
+          }, 8, ["class"]),
+          createVNode(unref(HoverCardPortal), { to: unref(portalTo) }, {
+            default: withCtx(() => [
+              createVNode(unref(HoverCardContent), {
+                side: __props.side,
+                align: __props.align,
+                "side-offset": __props.sideOffset,
+                "collision-padding": 8,
+                class: normalizeClass(panel.value),
+                onPointerDownOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside)
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", {
+                    close: () => open.value = false
+                  }),
+                  __props.arrow ? (openBlock(), createBlock(unref(HoverCardArrow), {
+                    key: 0,
+                    width: 14,
+                    height: 7,
+                    class: "fill-surface-raised"
+                  })) : createCommentVNode("", true)
+                ]),
+                _: 3
+              }, 8, ["side", "align", "side-offset", "class", "onPointerDownOutside", "onEscapeKeyDown"])
+            ]),
+            _: 3
+          }, 8, ["to"])
+        ]),
+        _: 3
+      }, 8, ["open", "open-delay", "close-delay"]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpIcon-6tSrZ3Zy.js → LpIcon-HJP5xMz4.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, watchEffect, openBlock, createElementBlock, createBlock, unref } from "vue";
 import { getIcon, Icon } from "@iconify/vue";
-import { i as iconsVersion, r as requestIcon } from "./icons-DVhZ_plB.js";
+import { i as iconsVersion, r as requestIcon } from "./icons-4IywzkHk.js";
 const _hoisted_1 = ["width", "height", "viewBox", "innerHTML"];
 const _hoisted_2 = ["width", "height"];
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/LpIdenticon-BzdC_qz9.js

@@ -0,0 +1,63 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, normalizeStyle, createCommentVNode, Fragment, renderList } from "vue";
+import { identicon, identiconRects } from "../components/identicon.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = ["viewBox", "role", "aria-label", "aria-hidden"];
+const _hoisted_2 = ["width", "height"];
+const _hoisted_3 = ["fill"];
+const _hoisted_4 = ["x", "y", "width"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpIdenticon",
+  props: {
+    seed: {},
+    grid: { default: 5 },
+    background: { default: "tint" },
+    padding: { default: 0.14 },
+    label: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const icon = computed(() => identicon(props.seed, { grid: props.grid }));
+    const rects = computed(() => identiconRects(icon.value.cells));
+    const pad = computed(() => props.grid * Math.max(0, Math.min(0.4, props.padding)));
+    const view = computed(() => props.grid + pad.value * 2);
+    const wash = computed(() => `color-mix(in oklab, ${icon.value.color} 16%, var(--color-surface-soft))`);
+    const { class: rootClass, attrs: rest } = useMergedAttrs("block size-full");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", mergeProps({ class: unref(rootClass) }, unref(rest), {
+        viewBox: `0 0 ${view.value} ${view.value}`,
+        "shape-rendering": "crispEdges",
+        role: __props.label ? "img" : void 0,
+        "aria-label": __props.label,
+        "aria-hidden": __props.label ? void 0 : "true"
+      }), [
+        __props.background === "tint" ? (openBlock(), createElementBlock("rect", {
+          key: 0,
+          width: view.value,
+          height: view.value,
+          style: normalizeStyle({ fill: wash.value }),
+          class: "transition-[fill] duration-medium motion-reduce:transition-none"
+        }, null, 12, _hoisted_2)) : createCommentVNode("", true),
+        (openBlock(), createElementBlock("g", {
+          key: __props.seed,
+          fill: icon.value.color,
+          class: "animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(rects.value, (r, i) => {
+            return openBlock(), createElementBlock("rect", {
+              key: i,
+              x: r.x + pad.value,
+              y: r.y + pad.value,
+              width: r.w,
+              height: "1"
+            }, null, 8, _hoisted_4);
+          }), 128))
+        ], 8, _hoisted_3))
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpInfraNode-Ds_8SZgN.js → LpInfraNode-D64hywJI.js}

@@ -1,5 +1,7 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, unref, createElementVNode, toDisplayString, createCommentVNode, createTextVNode } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, unref, createElementVNode, toDisplayString, createBlock, createCommentVNode, withCtx, createTextVNode } from "vue";
 import { Handle, Position } from "@vue-flow/core";
+import { _ as _sfc_main$2 } from "./LpBadge-BBq1Er9T.js";
+import { _ as _sfc_main$1 } from "./LpStatus-BsGLrpor.js";
 const _hoisted_1 = { class: "px-[11px] pb-2.5 pt-[9px]" };
 const _hoisted_2 = { class: "flex items-center gap-[7px]" };
 const _hoisted_3 = { class: "text-[13px] text-[var(--accent)]" };
@@ -14,9 +16,6 @@ const _hoisted_8 = {
   key: 0,
   class: "mt-1.5 flex items-center gap-1.5"
 };
-const _hoisted_9 = ["title"];
-const _hoisted_10 = ["title"];
-const _hoisted_11 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpInfraNode",
   props: {
@@ -87,40 +86,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_2, [
             createElementVNode("span", _hoisted_3, toDisplayString(icon.value), 1),
             createElementVNode("span", _hoisted_4, toDisplayString(__props.data.name), 1),
-            __props.data.online !== void 0 ? (openBlock(), createElementBlock("span", {
+            __props.data.online !== void 0 ? (openBlock(), createBlock(_sfc_main$1, {
               key: 0,
-              class: normalizeClass(["size-[7px] rounded-full", __props.data.online ? "bg-action shadow-[0_0_6px_var(--color-action)]" : "bg-danger"])
-            }, null, 2)) : createCommentVNode("", true)
+              state: __props.data.online ? "online" : "down",
+              pulse: __props.data.online,
+              "hide-label": ""
+            }, null, 8, ["state", "pulse"])) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_5, [
             createElementVNode("span", _hoisted_6, toDisplayString(__props.data.roleLabel ?? __props.data.role), 1),
             __props.data.overlay ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.data.overlay), 1)) : createCommentVNode("", true)
           ]),
           __props.data.firewallCount || __props.data.serviceCount !== void 0 || __props.data.staleFor ? (openBlock(), createElementBlock("div", _hoisted_8, [
-            __props.data.firewallCount ? (openBlock(), createElementBlock("span", {
+            __props.data.firewallCount ? (openBlock(), createBlock(_sfc_main$2, {
               key: 0,
-              class: "inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger",
+              tone: "danger",
+              size: "sm",
+              class: "text-[9px]",
               title: fill(text.value.firewallRules, { n: __props.data.firewallCount })
-            }, [
-              _cache[0] || (_cache[0] = createElementVNode("span", null, "⛨", -1)),
-              createTextVNode(toDisplayString(__props.data.firewallCount), 1)
-            ], 8, _hoisted_9)) : createCommentVNode("", true),
-            __props.data.serviceCount !== void 0 ? (openBlock(), createElementBlock("span", {
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" ⛨ " + toDisplayString(__props.data.firewallCount), 1)
+              ]),
+              _: 1
+            }, 8, ["title"])) : createCommentVNode("", true),
+            __props.data.serviceCount !== void 0 ? (openBlock(), createBlock(_sfc_main$2, {
               key: 1,
-              class: normalizeClass(["inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted", __props.data.staleFor ? "line-through decoration-danger/70" : ""]),
+              size: "sm",
+              class: "text-[9px] text-muted",
               title: __props.data.staleFor ? fill(text.value.servicesStale, { n: __props.data.serviceCount, age: __props.data.staleFor }) : fill(text.value.services, { n: __props.data.serviceCount })
-            }, [
-              _cache[1] || (_cache[1] = createElementVNode("span", null, "◇", -1)),
-              createTextVNode(toDisplayString(__props.data.serviceCount), 1)
-            ], 10, _hoisted_10)) : createCommentVNode("", true),
-            __props.data.staleFor ? (openBlock(), createElementBlock("span", {
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass(__props.data.staleFor ? "line-through decoration-danger/70" : "")
+                }, "◇ " + toDisplayString(__props.data.serviceCount), 3)
+              ]),
+              _: 1
+            }, 8, ["title"])) : createCommentVNode("", true),
+            __props.data.staleFor ? (openBlock(), createBlock(_sfc_main$2, {
               key: 2,
-              class: "inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger",
+              tone: "danger",
+              size: "sm",
+              class: "text-[9px]",
               title: fill(text.value.noContact, { age: __props.data.staleFor })
-            }, [
-              _cache[2] || (_cache[2] = createElementVNode("span", null, "⚠", -1)),
-              createTextVNode(toDisplayString(__props.data.staleFor) + " " + toDisplayString(text.value.old), 1)
-            ], 8, _hoisted_11)) : createCommentVNode("", true)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" ⚠ " + toDisplayString(__props.data.staleFor) + " " + toDisplayString(text.value.old), 1)
+              ]),
+              _: 1
+            }, 8, ["title"])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ])
       ], 6);

package/dist/chunks/{LpInput-CUyr6PIE.js → LpInput-CDuwODJG.js}

@@ -1,16 +1,18 @@
-import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, unref, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps } from "vue";
+import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps, withModifiers, createVNode } from "vue";
 import { tv } from "tailwind-variants";
 import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useInputMask, DEFAULT_MASK_TOKENS } from "../composables/useInputMask.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpFormField-DPb47HEm.js";
-import { _ as _sfc_main$2 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-BiennROB.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-center text-muted"
 };
 const _hoisted_2 = ["id", "type", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _hoisted_3 = ["aria-label"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -26,6 +28,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hint: {},
     error: {},
     icon: {},
+    clearable: { type: Boolean },
+    labels: {},
     required: { type: Boolean },
     pattern: {},
     restrict: {},
@@ -93,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const attrs = useAttrs();
     const hasLeading = computed(() => !!slots.leading || !!props.icon);
-    const hasTrailing = computed(() => !!slots.trailing);
+    const hasTrailing = computed(() => !!slots.trailing || showClear.value);
     const hasField = computed(
       () => !!props.label || !!props.hint || !!props.error
     );
@@ -105,17 +109,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       required: props.required,
       disabled: props.disabled
     }));
+    const text = useLabels("input", { clear: "Clear" }, () => props.labels);
+    const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && (attrs.readonly === void 0 || attrs.readonly === false));
     const isInvalidState = computed(() => field.value.invalid);
     const shellClass = computed(
       () => shell({ size: props.size, invalid: isInvalidState.value })
     );
-    const rootClass = computed(() => attrs.class);
-    const rootStyle = computed(() => attrs.style);
     const inputAttrs = computed(() => {
       const { class: _c, style: _s, ...rest } = attrs;
       return rest;
     });
     const inputEl = ref(null);
+    function clear() {
+      if (!showClear.value) return;
+      emit("update:modelValue", "");
+      if (masking.active.value) emit("update:raw", "");
+      inputEl.value?.focus();
+    }
     __expose({
       focus: (options) => inputEl.value?.focus(options),
       blur: () => inputEl.value?.blur(),
@@ -123,20 +133,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       input: inputEl
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
-        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 ? rootClass.value : "contents"),
-        style: normalizeStyle(hasField.value ? rootStyle.value : void 0)
+      return openBlock(), createBlock(_sfc_main$1, {
+        wrapped: hasField.value,
+        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", {
             "data-lp-ring-owner": "",
-            class: normalizeClass(unref(mergeClass)(shellClass.value, hasLeading.value ? "pl-2.5" : "", hasTrailing.value ? "pr-1.5" : "", hasField.value ? "" : rootClass.value)),
-            style: normalizeStyle(hasField.value ? void 0 : rootStyle.value)
+            class: normalizeClass(unref(mergeClass)(shellClass.value, hasLeading.value ? "pl-2.5" : "", hasTrailing.value ? "pr-1.5" : "", hasField.value ? "" : unref(attrs).class)),
+            style: normalizeStyle(hasField.value ? void 0 : unref(attrs).style)
           }, [
             hasLeading.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
               renderSlot(_ctx.$slots, "leading", {}, () => [
@@ -161,6 +172,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(field).describedBy,
               class: [
                 "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
+                __props.clearable && "[&::-webkit-search-cancel-button]:hidden",
                 hasLeading.value ? "pl-2" : padX[__props.size ?? "md"],
                 hasTrailing.value ? "" : padX[__props.size ?? "md"]
               ],
@@ -170,11 +182,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onCompositionend: onComposed,
               onInput: onInputEvent
             }), null, 16, _hoisted_2),
-            renderSlot(_ctx.$slots, "trailing")
+            renderSlot(_ctx.$slots, "trailing"),
+            showClear.value ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              type: "button",
+              "aria-label": unref(text).clear,
+              class: "shrink-0 rounded-inner p-1 text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+              onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["prevent"])),
+              onClick: clear
+            }, [
+              createVNode(_sfc_main$2, {
+                name: "lucide:x",
+                size: __props.size === "sm" ? 12 : 16
+              }, null, 8, ["size"])
+            ], 40, _hoisted_3)) : createCommentVNode("", true)
           ], 6)
         ]),
         _: 3
-      }, 8, ["label", "hint", "error", "required", "id", "class", "style"]);
+      }, 8, ["wrapped", "id", "label", "hint", "error", "required", "class", "style"]);
     };
   }
 });