@leavepulse/ui 0.23.0 → 0.24.1

package/dist/chunks/{LpAppShell-CaQYQKZV.js → LpAppShell-B5k0J3Cf.js}

@@ -3,7 +3,7 @@ import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-D8xyKXcF.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-D3GGLSE7.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-7Vpy2IJc.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpAvatar-D-jHoHR7.js → LpAvatar-CzCE5cXg.js}

@@ -11,6 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     alt: {},
     fallback: {},
     size: { default: "md" },
+    pixelSize: {},
     shape: { default: "circle" },
     ring: { type: Boolean, default: false },
     menuItems: {}
@@ -20,9 +21,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-surface-soft font-medium text-muted-strong",
       variants: {
         size: {
+          xs: "size-5 text-[10px]",
           sm: "size-7 text-xs",
           md: "size-9 text-sm",
-          lg: "size-12 text-base"
+          lg: "size-12 text-base",
+          xl: "size-16 text-lg"
         },
         // People read as circles; things (servers, projects, orgs) read as
         // rounded squares — the same distinction platform icons make.
@@ -36,6 +39,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       defaultVariants: { size: "md", shape: "circle", ring: false }
     });
     const props = __props;
+    const sizeStyle = computed(
+      () => props.pixelSize ? {
+        width: `${props.pixelSize}px`,
+        height: `${props.pixelSize}px`,
+        fontSize: `${Math.max(10, Math.round(props.pixelSize * 0.4))}px`
+      } : void 0
+    );
     const initials = computed(
       () => props.fallback ?? props.alt?.slice(0, 2).toUpperCase() ?? "?"
     );
@@ -50,7 +60,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(unref(AvatarRoot), mergeProps({
-            class: unref(avatar)({ size: __props.size, shape: __props.shape, ring: __props.ring })
+            class: unref(avatar)({ size: __props.pixelSize ? void 0 : __props.size, shape: __props.shape, ring: __props.ring }),
+            style: sizeStyle.value
           }, _ctx.$attrs), {
             default: withCtx(() => [
               __props.src && mounted.value ? (openBlock(), createBlock(unref(AvatarImage), {
@@ -67,12 +78,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               })
             ]),
             _: 1
-          }, 16, ["class"])
+          }, 16, ["class", "style"])
         ]),
         _: 1
       }, 8, ["items"])) : (openBlock(), createBlock(unref(AvatarRoot), mergeProps({
         key: 1,
-        class: unref(avatar)({ size: __props.size, shape: __props.shape, ring: __props.ring })
+        class: unref(avatar)({ size: __props.pixelSize ? void 0 : __props.size, shape: __props.shape, ring: __props.ring }),
+        style: sizeStyle.value
       }, _ctx.$attrs), {
         default: withCtx(() => [
           __props.src ? (openBlock(), createBlock(unref(AvatarImage), {
@@ -89,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 1
-      }, 16, ["class"]));
+      }, 16, ["class", "style"]));
     };
   }
 });

package/dist/chunks/LpBreadcrumbs-5uvViCXi.js

@@ -0,0 +1,60 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, normalizeClass } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = {
+  class: "flex items-center gap-1.5 text-sm",
+  "aria-label": "Breadcrumb"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpBreadcrumbs",
+  props: {
+    items: {},
+    as: { default: "a" }
+  },
+  emits: ["navigate"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
+          return openBlock(), createElementBlock(Fragment, { key: i }, [
+            i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              name: "lucide:chevron-right",
+              size: 14,
+              class: "text-muted"
+            })) : createCommentVNode("", true),
+            (item.href || item.to) && i < __props.items.length - 1 ? (openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+              key: 1,
+              href: __props.as === "a" ? item.href : void 0,
+              to: __props.as === "a" ? void 0 : item.to,
+              class: "inline-flex 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$1, {
+                  key: 0,
+                  name: item.icon,
+                  size: 14
+                }, null, 8, ["name"])) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(item.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["href", "to", "onClick"])) : (openBlock(), createElementBlock("span", {
+              key: 2,
+              class: normalizeClass(["inline-flex items-center gap-1.5", i === __props.items.length - 1 ? "text-ink" : "text-muted"])
+            }, [
+              item.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                name: item.icon,
+                size: 14
+              }, null, 8, ["name"])) : createCommentVNode("", true),
+              createTextVNode(" " + toDisplayString(item.label), 1)
+            ], 2))
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpCodeBlock-CSiOSPs8.js → LpCodeBlock-rS_6mO3D.js}

@@ -212,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                     createElementVNode("button", {
                       type: "button",
-                      class: "lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                      class: "lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
                       "aria-expanded": openState[seg.id],
                       onClick: ($event) => toggleFold(seg.id)
                     }, [

package/dist/chunks/{LpDisclosure-DP6yfgfM.js → LpDisclosure-BnwP4Q-b.js}

@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:open": onToggle
       }, {
         default: withCtx(() => [
-          createVNode(unref(CollapsibleTrigger), { class: "group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring" }, {
+          createVNode(unref(CollapsibleTrigger), { class: "group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" }, {
             default: withCtx(() => [
               __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,

package/dist/chunks/LpEmptyState-BV3q7Qyi.js

@@ -0,0 +1,49 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "flex flex-col gap-1" };
+const _hoisted_2 = {
+  key: 0,
+  class: "max-w-sm text-sm text-muted"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "mt-1"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpEmptyState",
+  props: {
+    icon: {},
+    title: {},
+    description: {},
+    compact: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["flex flex-col items-center px-6 text-center", __props.compact ? "gap-2 py-6" : "gap-3 py-12"])
+      }, [
+        __props.icon ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["flex items-center justify-center rounded-pill bg-surface-soft text-muted", __props.compact ? "size-9" : "size-12"])
+        }, [
+          createVNode(_sfc_main$1, {
+            name: __props.icon,
+            size: __props.compact ? 16 : 22
+          }, null, 8, ["name", "size"])
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("p", {
+            class: normalizeClass(["font-semibold text-ink", __props.compact ? "text-sm" : ""])
+          }, toDisplayString(__props.title), 3),
+          __props.description ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpFileTree-CN0IOIY7.js → LpFileTree-H7Ho8uoq.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, mergeProps, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { computeStats, formatSize, sortNodes, subtreeIds, ancestorIds } from "../components/fileTree.js";
-import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
-import { _ as _sfc_main$3 } from "./LpFileTreeNode-D7WgUPcJ.js";
+import { _ as _sfc_main$1 } from "./LpEmptyState-BV3q7Qyi.js";
+import { _ as _sfc_main$3 } from "./LpFileTreeNode-BEZIvxHi.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
 const _hoisted_1 = {
   key: 0,

package/dist/chunks/{LpFileTreeNode-D7WgUPcJ.js → LpFileTreeNode-BEZIvxHi.js}

@@ -127,7 +127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               "data-node-id": __props.node.id,
               tabindex: isFocused.value ? 0 : -1,
-              class: normalizeClass(["group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
+              class: normalizeClass(["group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", [
                 __props.node.disabled ? "cursor-not-allowed text-muted/50" : isSelected.value ? "bg-brand-soft text-ink" : "text-muted hover:bg-surface-soft hover:text-ink"
               ]]),
               style: normalizeStyle({ paddingLeft: `${__props.depth * 14 + 6}px` }),

package/dist/chunks/{LpLink-DU9kkKGW.js → LpLink-Bu01SZzB.js}

@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rel: rel.value,
         class: normalizeClass(["inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", [
           colorClass.value,
-          __props.variant === "reveal" ? revealClass : "hover:underline"
+          __props.variant === "reveal" ? revealClass : __props.variant === "underline" ? "underline decoration-current/40 hover:decoration-current" : "hover:underline"
         ]])
       }, {
         default: withCtx(() => [

package/dist/chunks/{LpNotificationBell-a08cl0yY.js → LpNotificationBell-X1M30e0X.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useModel, openBlock, createBlock, withCtx, c
 import { _ as _sfc_main$8 } from "./LpBadge-BPodVcJa.js";
 import { _ as _sfc_main$7 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$5 } from "./LpContextMenu-D0mzXqA7.js";
-import { _ as _sfc_main$3 } from "./LpEmptyState-CrfyRJUG.js";
+import { _ as _sfc_main$3 } from "./LpEmptyState-BV3q7Qyi.js";
 import { _ as _sfc_main$6 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
 import { _ as _sfc_main$4 } from "./LpScrollArea-D8xyKXcF.js";

package/dist/chunks/{LpSidebar-D3GGLSE7.js → LpSidebar-7Vpy2IJc.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
 import { _ as _sfc_main$2 } from "./LpDrawer-DAJN5rGK.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-X14xMdPa.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-CFX5NxGs.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-X14xMdPa.js → LpSidebarNav-CFX5NxGs.js}

@@ -74,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       disabled: item.href ? void 0 : item.disabled,
                       "aria-current": __props.itemActive(item) ? "page" : void 0,
                       "aria-disabled": item.disabled || void 0,
-                      class: normalizeClass(["group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", item.disabled ? "cursor-not-allowed text-muted/50" : __props.itemActive(item) ? "text-ink" : "text-muted hover:text-ink"]),
+                      class: normalizeClass(["group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", item.disabled ? "cursor-not-allowed text-muted/50" : __props.itemActive(item) ? "text-ink" : "text-muted hover:text-ink"]),
                       onClick: ($event) => emit("activate", item)
                     }, {
                       default: withCtx(() => [

package/dist/chunks/{LpStepper-5dFTrW21.js → LpStepper-Wtl-6nUh.js}

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, createBlock, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, createBlock, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = ["aria-current"];
@@ -8,39 +8,56 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpStepper",
   props: {
     steps: {},
-    current: {}
+    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;
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("ol", _hoisted_1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, i) => {
           return openBlock(), createElementBlock("li", {
-            key: i,
+            key: step.key ?? i,
             class: "flex flex-1 items-center gap-2 last:flex-none",
-            "aria-current": i === __props.current ? "step" : void 0
+            "aria-current": isCurrent(i) ? "step" : void 0
           }, [
             createElementVNode("div", _hoisted_3, [
               createElementVNode("span", {
-                class: normalizeClass(["flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors", i < __props.current ? "border-transparent bg-brand text-ink-inverse" : i === __props.current ? "border-brand text-brand" : "border-line text-muted"])
+                class: normalizeClass(["flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors", isCompleted(step, i) ? "border-transparent bg-brand text-ink-inverse" : isCurrent(i) ? "border-brand text-brand" : "border-line text-muted"])
               }, [
-                i < __props.current ? (openBlock(), createBlock(_sfc_main$1, {
+                isCompleted(step, i) ? (openBlock(), createBlock(_sfc_main$1, {
                   key: 0,
                   name: "lucide:check",
                   size: 14
-                })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                })) : step.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 1,
+                  name: step.icon,
+                  size: 14
+                }, null, 8, ["name"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                   createTextVNode(toDisplayString(i + 1), 1)
                 ], 64))
               ], 2),
               createElementVNode("span", {
-                class: normalizeClass(["text-sm", i <= __props.current ? "text-ink" : "text-muted"])
+                class: normalizeClass(["text-sm", isCompleted(step, i) || isCurrent(i) ? "text-ink" : "text-muted"])
               }, [
                 createTextVNode(toDisplayString(step.label) + " ", 1),
-                createElementVNode("span", _hoisted_4, toDisplayString(i < __props.current ? "(completed)" : i === __props.current ? "(current step)" : ""), 1)
+                createElementVNode("span", _hoisted_4, toDisplayString(isCompleted(step, i) ? "(completed)" : isCurrent(i) ? "(current step)" : ""), 1)
               ], 2)
             ]),
             i < __props.steps.length - 1 ? (openBlock(), createElementBlock("span", {
               key: 0,
-              class: normalizeClass(["h-px flex-1", i < __props.current ? "bg-brand" : "bg-line"])
+              class: normalizeClass(["h-px flex-1", isCompleted(step, i) ? "bg-brand" : "bg-line"])
             }, null, 2)) : createCommentVNode("", true)
           ], 8, _hoisted_2);
         }), 128))

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-CaQYQKZV.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-B5k0J3Cf.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAvatar.vue.d.ts

@@ -5,7 +5,9 @@ declare const __VLS_export: import('vue').DefineComponent<{
     src?: string;
     alt?: string;
     fallback?: string;
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
+    pixelSize?: number;
     /** Silhouette: circle for people, soft/square for servers and projects. */
     shape?: "circle" | "square" | "soft" | undefined;
     /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
@@ -16,7 +18,9 @@ declare const __VLS_export: import('vue').DefineComponent<{
     src?: string;
     alt?: string;
     fallback?: string;
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
+    pixelSize?: number;
     /** Silhouette: circle for people, soft/square for servers and projects. */
     shape?: "circle" | "square" | "soft" | undefined;
     /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
@@ -24,7 +28,7 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** Right-click menu (e.g. account quick actions). Consumer-supplied. */
     menuItems?: ContextMenuItemDef[];
 }> & Readonly<{}>, {
-    size: "sm" | "md" | "lg";
+    size: "sm" | "md" | "lg" | "xs" | "xl";
     shape: "circle" | "square" | "soft";
     ring: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/LpAvatar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAvatar-D-jHoHR7.js";
+import { _ as _sfc_main } from "../chunks/LpAvatar-CzCE5cXg.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpBreadcrumbs.vue.d.ts

@@ -1,14 +1,26 @@
+import { Component } from 'vue';
 export interface Crumb {
     label: string;
     href?: string;
+    /** Destination for router links; passed straight to the `as` component. */
+    to?: string | Record<string, unknown>;
+    /** Leading icon, for crumbs that carry a glyph (a home root, a section). */
+    icon?: string;
 }
 type __VLS_Props = {
     items: Crumb[];
+    /**
+     * Root element/component for linked crumbs. Defaults to a native <a>;
+     * pass a router link component to keep client-side navigation.
+     */
+    as?: string | Component;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     navigate: (item: Crumb, index: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onNavigate?: ((item: Crumb, index: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    as: string | Component;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpBreadcrumbs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-B7Aqatzw.js";
+import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-5uvViCXi.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCodeBlock.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpCodeBlock-CSiOSPs8.js";
+import { _ as _sfc_main } from "../chunks/LpCodeBlock-rS_6mO3D.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDisclosure.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDisclosure-DP6yfgfM.js";
+import { _ as _sfc_main } from "../chunks/LpDisclosure-BnwP4Q-b.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpEmptyState.vue.d.ts

@@ -2,6 +2,11 @@ type __VLS_Props = {
     icon?: string;
     title: string;
     description?: string;
+    /**
+     * Tightens the block for empty states nested inside a card or a panel,
+     * where the full-page padding would dwarf its container.
+     */
+    compact?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/components/LpEmptyState.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpEmptyState-CrfyRJUG.js";
+import { _ as _sfc_main } from "../chunks/LpEmptyState-BV3q7Qyi.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-CN0IOIY7.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-H7Ho8uoq.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTreeNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTreeNode-D7WgUPcJ.js";
+import { _ as _sfc_main } from "../chunks/LpFileTreeNode-BEZIvxHi.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLink.vue.d.ts

@@ -21,11 +21,13 @@ type __VLS_Props = {
     as?: string | Component;
     /**
      * "default" — plain hover underline.
+     * "underline" — underlined at rest; for links inside running prose,
+     *   where hover-only underlines leave the link invisible until pointed at.
      * "reveal"  — an underline bar that grows in from the left on hover
      *   (origin-left scale-x 0→1). The LeavePulse landing "monitoring" link feel;
      *   good for inline prose links and nav items that want a bit of motion.
      */
-    variant?: "default" | "reveal";
+    variant?: "default" | "underline" | "reveal";
 };
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -33,7 +35,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     as: string | Component;
-    variant: "default" | "reveal";
+    variant: "default" | "underline" | "reveal";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpLink.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLink-DU9kkKGW.js";
+import { _ as _sfc_main } from "../chunks/LpLink-Bu01SZzB.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-a08cl0yY.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-X1M30e0X.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-D3GGLSE7.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-7Vpy2IJc.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-X14xMdPa.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-CFX5NxGs.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpStepper.vue.d.ts

@@ -1,9 +1,23 @@
 export interface Step {
     label: string;
+    /** Stable id, for flows whose steps are addressed by name rather than order. */
+    key?: string;
+    /** Replaces the step number while the step is pending or current. */
+    icon?: string;
 }
 type __VLS_Props = {
     steps: Step[];
-    current: number;
+    /**
+     * The active step: an index, or a step `key` for keyed flows.
+     */
+    current: number | string;
+    /**
+     * Which steps count as done. Omit it and everything before `current` is
+     * complete, which is the linear case. Pass keys (or indices) when a flow can
+     * finish steps out of order — a verification that succeeds before its
+     * prerequisite is filled in, say.
+     */
+    completed?: Array<string | number>;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpStepper.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpStepper-5dFTrW21.js";
+import { _ as _sfc_main } from "../chunks/LpStepper-Wtl-6nUh.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -3,26 +3,26 @@ import { _ as _2 } from "./chunks/LpAddressInput-BTqnUXZG.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-CaQYQKZV.js";
+import { _ as _5 } from "./chunks/LpAppShell-B5k0J3Cf.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
-import { _ as _7 } from "./chunks/LpAvatar-D-jHoHR7.js";
+import { _ as _7 } from "./chunks/LpAvatar-CzCE5cXg.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
-import { _ as _9 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
+import { _ as _9 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
 import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
-import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
+import { _ as _14 } from "./chunks/LpCodeBlock-rS_6mO3D.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
 import { _ as _15 } from "./chunks/LpConfirmDialog-CObRah9c.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
-import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
+import { _ as _18 } from "./chunks/LpDisclosure-BnwP4Q-b.js";
 import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _20 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
-import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-CN0IOIY7.js";
+import { _ as _22 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
+import { _ as _23 } from "./chunks/LpFileTree-H7Ho8uoq.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-CesaPWPO.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
@@ -30,10 +30,10 @@ import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
 import { _ as _27 } from "./chunks/LpInput-jwqXlAy0.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _29 } from "./chunks/LpLink-DU9kkKGW.js";
+import { _ as _29 } from "./chunks/LpLink-Bu01SZzB.js";
 import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
 import { _ as _31 } from "./chunks/LpModal-D_o-56To.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-a08cl0yY.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-X1M30e0X.js";
 import { _ as _33 } from "./chunks/LpNumberField-B3JuQFol.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -50,11 +50,11 @@ import { _ as _44 } from "./chunks/LpSelect-Cw8-gL5F.js";
 import { _ as _45 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _46 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _47 } from "./chunks/LpSidebar-D3GGLSE7.js";
+import { _ as _47 } from "./chunks/LpSidebar-7Vpy2IJc.js";
 import { _ as _48 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _49 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _50 } from "./chunks/LpStat-CdbEFOvn.js";
-import { _ as _51 } from "./chunks/LpStepper-5dFTrW21.js";
+import { _ as _51 } from "./chunks/LpStepper-Wtl-6nUh.js";
 import { _ as _52 } from "./chunks/LpSwitch-v6fnccSM.js";
 import { _ as _53 } from "./chunks/LpTable-DTj52qlg.js";
 import { _ as _54 } from "./chunks/LpTableOfContents-CjvxPMpU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpAvatar.vue

@@ -15,9 +15,11 @@ const avatar = tv({
   base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-surface-soft font-medium text-muted-strong",
   variants: {
     size: {
+      xs: "size-5 text-[10px]",
       sm: "size-7 text-xs",
       md: "size-9 text-sm",
       lg: "size-12 text-base",
+      xl: "size-16 text-lg",
     },
     // People read as circles; things (servers, projects, orgs) read as
     // rounded squares — the same distinction platform icons make.
@@ -39,6 +41,8 @@ const props = withDefaults(
     alt?: string
     fallback?: string
     size?: AvatarVariants["size"]
+    /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
+    pixelSize?: number
     /** Silhouette: circle for people, soft/square for servers and projects. */
     shape?: AvatarVariants["shape"]
     /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
@@ -49,6 +53,18 @@ const props = withDefaults(
   { size: "md", shape: "circle", ring: false },
 )
 
+// A pixel size drives both box and glyph, so the initials keep their
+// proportion instead of staying at the preset's step.
+const sizeStyle = computed(() =>
+  props.pixelSize
+    ? {
+        width: `${props.pixelSize}px`,
+        height: `${props.pixelSize}px`,
+        fontSize: `${Math.max(10, Math.round(props.pixelSize * 0.4))}px`,
+      }
+    : undefined,
+)
+
 const initials = computed(
   () => props.fallback ?? props.alt?.slice(0, 2).toUpperCase() ?? "?",
 )
@@ -67,12 +83,12 @@ onMounted(() => {
 
 <template>
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <AvatarRoot :class="avatar({ size, shape, ring })" v-bind="$attrs">
+    <AvatarRoot :class="avatar({ size: pixelSize ? undefined : size, shape, ring })" :style="sizeStyle" v-bind="$attrs">
       <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
       <AvatarFallback>{{ initials }}</AvatarFallback>
     </AvatarRoot>
   </LpContextMenu>
-  <AvatarRoot v-else :class="avatar({ size, shape, ring })" v-bind="$attrs">
+  <AvatarRoot v-else :class="avatar({ size: pixelSize ? undefined : size, shape, ring })" :style="sizeStyle" v-bind="$attrs">
     <AvatarImage v-if="src" :src="src" :alt="alt" class="size-full object-cover" />
     <AvatarFallback>{{ initials }}</AvatarFallback>
   </AvatarRoot>

package/src/components/LpBreadcrumbs.vue

@@ -1,12 +1,27 @@
 <script setup lang="ts">
+import type { Component } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 export interface Crumb {
   label: string
   href?: string
+  /** Destination for router links; passed straight to the `as` component. */
+  to?: string | Record<string, unknown>
+  /** Leading icon, for crumbs that carry a glyph (a home root, a section). */
+  icon?: string
 }
 
-defineProps<{ items: Crumb[] }>()
+withDefaults(
+  defineProps<{
+    items: Crumb[]
+    /**
+     * Root element/component for linked crumbs. Defaults to a native <a>;
+     * pass a router link component to keep client-side navigation.
+     */
+    as?: string | Component
+  }>(),
+  { as: "a" },
+)
 defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
 </script>
 
@@ -19,15 +34,23 @@ defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
         :size="14"
         class="text-muted"
       />
-      <a
-        v-if="item.href && i < items.length - 1"
-        :href="item.href"
-        class="rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+      <component
+        :is="as"
+        v-if="(item.href || item.to) && i < items.length - 1"
+        :href="as === 'a' ? item.href : undefined"
+        :to="as === 'a' ? undefined : item.to"
+        class="inline-flex 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"
         @click="$emit('navigate', item, i)"
       >
+        <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
         {{ item.label }}
-      </a>
-      <span v-else :class="i === items.length - 1 ? 'text-ink' : 'text-muted'">
+      </component>
+      <span
+        v-else
+        class="inline-flex items-center gap-1.5"
+        :class="i === items.length - 1 ? 'text-ink' : 'text-muted'"
+      >
+        <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
         {{ item.label }}
       </span>
     </template>

package/src/components/LpCodeBlock.vue

@@ -268,7 +268,7 @@ function onInput(e: Event) {
             v-else
           ><button
               type="button"
-              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               :aria-expanded="openState[seg.id]"
               @click="toggleFold(seg.id)"
             ><LpIcon

package/src/components/LpDisclosure.vue

@@ -61,7 +61,7 @@ function onToggle(value: boolean) {
     @update:open="onToggle"
   >
     <CollapsibleTrigger
-      class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
     >
       <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
       <span class="min-w-0 flex-1 text-left">

package/src/components/LpEmptyState.vue

@@ -1,19 +1,32 @@
 <script setup lang="ts">
 import LpIcon from "./LpIcon.vue"
 
-defineProps<{ icon?: string; title: string; description?: string }>()
+defineProps<{
+  icon?: string
+  title: string
+  description?: string
+  /**
+   * Tightens the block for empty states nested inside a card or a panel,
+   * where the full-page padding would dwarf its container.
+   */
+  compact?: boolean
+}>()
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-3 px-6 py-12 text-center">
+  <div
+    class="flex flex-col items-center px-6 text-center"
+    :class="compact ? 'gap-2 py-6' : 'gap-3 py-12'"
+  >
     <div
       v-if="icon"
-      class="flex size-12 items-center justify-center rounded-pill bg-surface-soft text-muted"
+      class="flex items-center justify-center rounded-pill bg-surface-soft text-muted"
+      :class="compact ? 'size-9' : 'size-12'"
     >
-      <LpIcon :name="icon" :size="22" />
+      <LpIcon :name="icon" :size="compact ? 16 : 22" />
     </div>
     <div class="flex flex-col gap-1">
-      <p class="font-semibold text-ink">{{ title }}</p>
+      <p class="font-semibold text-ink" :class="compact ? 'text-sm' : ''">{{ title }}</p>
       <p v-if="description" class="max-w-sm text-sm text-muted">{{ description }}</p>
     </div>
     <div v-if="$slots.default" class="mt-1"><slot /></div>

package/src/components/LpFileTreeNode.vue

@@ -163,10 +163,13 @@ function onActivate() {
   >
     <!-- Passthrough when the node has no menu, so the row keeps the native one. -->
     <LpContextMenu :items="node.menu ?? []">
+      <!-- The ring is drawn inset, like LpTable's rows: a row spans the full
+           width of the branch, and a branch clips its overflow to animate its
+           height, so an outset ring loses its left and right edge. -->
       <div
         :data-node-id="node.id"
         :tabindex="isFocused ? 0 : -1"
-        class="group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        class="group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
         :class="[
           node.disabled
             ? 'cursor-not-allowed text-muted/50'

package/src/components/LpLink.vue

@@ -24,11 +24,13 @@ const props = withDefaults(
     as?: string | Component
     /**
      * "default" — plain hover underline.
+     * "underline" — underlined at rest; for links inside running prose,
+     *   where hover-only underlines leave the link invisible until pointed at.
      * "reveal"  — an underline bar that grows in from the left on hover
      *   (origin-left scale-x 0→1). The LeavePulse landing "monitoring" link feel;
      *   good for inline prose links and nav items that want a bit of motion.
      */
-    variant?: "default" | "reveal"
+    variant?: "default" | "underline" | "reveal"
   }>(),
   { variant: "default", as: "a" },
 )
@@ -72,7 +74,11 @@ const revealClass =
     class="inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
     :class="[
       colorClass,
-      variant === 'reveal' ? revealClass : 'hover:underline',
+      variant === 'reveal'
+        ? revealClass
+        : variant === 'underline'
+          ? 'underline decoration-current/40 hover:decoration-current'
+          : 'hover:underline',
     ]"
   >
     <slot />

package/src/components/LpSidebarNav.vue

@@ -78,7 +78,7 @@ const pillTransition = usePillTransition()
           :disabled="item.href ? undefined : item.disabled"
           :aria-current="itemActive(item) ? 'page' : undefined"
           :aria-disabled="item.disabled || undefined"
-          class="group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+          class="group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
           :class="item.disabled
             ? 'cursor-not-allowed text-muted/50'
             : itemActive(item)

package/src/components/LpStepper.vue

@@ -1,45 +1,85 @@
 <script setup lang="ts">
+import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 export interface Step {
   label: string
+  /** Stable id, for flows whose steps are addressed by name rather than order. */
+  key?: string
+  /** Replaces the step number while the step is pending or current. */
+  icon?: string
 }
 
-defineProps<{ steps: Step[]; current: number }>()
+const props = defineProps<{
+  steps: Step[]
+  /**
+   * The active step: an index, or a step `key` for keyed flows.
+   */
+  current: number | string
+  /**
+   * Which steps count as done. Omit it and everything before `current` is
+   * complete, which is the linear case. Pass keys (or indices) when a flow can
+   * finish steps out of order — a verification that succeeds before its
+   * prerequisite is filled in, say.
+   */
+  completed?: Array<string | number>
+}>()
+
+const currentIndex = computed(() => {
+  if (typeof props.current === "number") return props.current
+  return props.steps.findIndex((s) => s.key === props.current)
+})
+
+function isCompleted(step: Step, i: number): boolean {
+  if (!props.completed) return i < currentIndex.value
+  return props.completed.includes(i) || (!!step.key && props.completed.includes(step.key))
+}
+
+function isCurrent(i: number): boolean {
+  return i === currentIndex.value
+}
 </script>
 
 <template>
   <ol class="flex items-center gap-2">
     <li
       v-for="(step, i) in steps"
-      :key="i"
+      :key="step.key ?? i"
       class="flex flex-1 items-center gap-2 last:flex-none"
-      :aria-current="i === current ? 'step' : undefined"
+      :aria-current="isCurrent(i) ? 'step' : undefined"
     >
       <div class="flex items-center gap-2">
         <span
           class="flex size-7 shrink-0 items-center justify-center rounded-pill border text-xs font-semibold transition-colors"
-          :class="i < current
+          :class="isCompleted(step, i)
             ? 'border-transparent bg-brand text-ink-inverse'
-            : i === current
+            : isCurrent(i)
               ? 'border-brand text-brand'
               : 'border-line text-muted'"
         >
-          <LpIcon v-if="i < current" name="lucide:check" :size="14" />
+          <LpIcon v-if="isCompleted(step, i)" name="lucide:check" :size="14" />
+          <LpIcon v-else-if="step.icon" :name="step.icon" :size="14" />
           <template v-else>{{ i + 1 }}</template>
         </span>
-        <span class="text-sm" :class="i <= current ? 'text-ink' : 'text-muted'">
+        <span
+          class="text-sm"
+          :class="isCompleted(step, i) || isCurrent(i) ? 'text-ink' : 'text-muted'"
+        >
           {{ step.label }}
           <!-- Status for screen readers; the colour/check are visual only. -->
           <span class="sr-only">{{
-            i < current ? "(completed)" : i === current ? "(current step)" : ""
+            isCompleted(step, i)
+              ? "(completed)"
+              : isCurrent(i)
+                ? "(current step)"
+                : ""
           }}</span>
         </span>
       </div>
       <span
         v-if="i < steps.length - 1"
         class="h-px flex-1"
-        :class="i < current ? 'bg-brand' : 'bg-line'"
+        :class="isCompleted(step, i) ? 'bg-brand' : 'bg-line'"
       />
     </li>
   </ol>

package/dist/chunks/LpBreadcrumbs-B7Aqatzw.js

@@ -1,42 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, normalizeClass } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = {
-  class: "flex items-center gap-1.5 text-sm",
-  "aria-label": "Breadcrumb"
-};
-const _hoisted_2 = ["href", "onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpBreadcrumbs",
-  props: {
-    items: {}
-  },
-  emits: ["navigate"],
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", _hoisted_1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, i) => {
-          return openBlock(), createElementBlock(Fragment, { key: i }, [
-            i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
-              key: 0,
-              name: "lucide:chevron-right",
-              size: 14,
-              class: "text-muted"
-            })) : createCommentVNode("", true),
-            item.href && i < __props.items.length - 1 ? (openBlock(), createElementBlock("a", {
-              key: 1,
-              href: item.href,
-              class: "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)
-            }, toDisplayString(item.label), 9, _hoisted_2)) : (openBlock(), createElementBlock("span", {
-              key: 2,
-              class: normalizeClass(i === __props.items.length - 1 ? "text-ink" : "text-muted")
-            }, toDisplayString(item.label), 3))
-          ], 64);
-        }), 128))
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpEmptyState-CrfyRJUG.js

@@ -1,47 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = { class: "flex flex-col items-center gap-3 px-6 py-12 text-center" };
-const _hoisted_2 = {
-  key: 0,
-  class: "flex size-12 items-center justify-center rounded-pill bg-surface-soft text-muted"
-};
-const _hoisted_3 = { class: "flex flex-col gap-1" };
-const _hoisted_4 = { class: "font-semibold text-ink" };
-const _hoisted_5 = {
-  key: 0,
-  class: "max-w-sm text-sm text-muted"
-};
-const _hoisted_6 = {
-  key: 1,
-  class: "mt-1"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpEmptyState",
-  props: {
-    icon: {},
-    title: {},
-    description: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        __props.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(_sfc_main$1, {
-            name: __props.icon,
-            size: 22
-          }, null, 8, ["name"])
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("p", _hoisted_4, toDisplayString(__props.title), 1),
-          __props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
-        ]),
-        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          renderSlot(_ctx.$slots, "default")
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};