@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/LpShinyText-DX2ajtWq.js

@@ -0,0 +1,48 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { useInView } from "../composables/useInView.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { toneLook } from "../components/tone.js";
+import '../assets/LpShinyText-D69cBYDR.css';const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpShinyText",
+  props: {
+    variant: { default: "shine" },
+    tone: { default: "brand" },
+    speed: { default: 3 },
+    paused: { type: Boolean, default: false },
+    as: { default: "span" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { el, inView } = useInView();
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => `lp-shiny lp-shiny--${props.variant}`);
+    const style = computed(() => {
+      const base = props.tone === "ink" ? "var(--color-ink)" : toneLook(props.tone).color;
+      return {
+        "--lp-shiny-base": base,
+        // Toward ink, so the band is the contrast direction in either theme; plain
+        // ink text gets a brand band instead, since ink toward ink is no band.
+        "--lp-shiny-sheen": props.tone === "ink" ? "var(--color-brand)" : `color-mix(in oklab, ${base}, var(--color-ink) 65%)`,
+        "--lp-shiny-speed": `${Math.max(0.3, props.speed)}s`,
+        animationPlayState: props.paused || !inView.value ? "paused" : "running"
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "el",
+        ref: el,
+        class: unref(rootClass),
+        style: style.value
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpSidebar-DfIiS-lB.js → LpSidebar-D-M0Y_7U.js}

@@ -1,9 +1,9 @@
 import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
 import { usePersisted } from "../composables/usePersisted.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$3 } from "./LpDrawer-Q4SOxM4s.js";
-import { _ as _sfc_main$1 } from "./LpInput-CUyr6PIE.js";
-import { _ as _sfc_main$2 } from "./LpSidebarNav-C5FDNI0t.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-DGNKRsGq.js";
+import { _ as _sfc_main$1 } from "./LpInput-CDuwODJG.js";
+import { _ as _sfc_main$2 } from "./LpSidebarNav-DF-TYxOV.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 2,
@@ -154,6 +154,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
             size: "sm",
             icon: "lucide:search",
+            clearable: "",
             class: "mb-2 shrink-0",
             placeholder: placeholder.value,
             "aria-label": placeholder.value
@@ -211,6 +212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
                 size: "sm",
                 icon: "lucide:search",
+                clearable: "",
                 class: "mb-2 shrink-0",
                 placeholder: placeholder.value,
                 "aria-label": placeholder.value

package/dist/chunks/{LpSidebarNav-C5FDNI0t.js → LpSidebarNav-DF-TYxOV.js}

@@ -2,9 +2,9 @@ import { defineComponent, computed, ref, openBlock, createBlock, mergeProps, unr
 import { Motion } from "motion-v";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$4 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$5 } from "./LpContextMenu-CRnjoqSt.js";
-import { _ as _sfc_main$3 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$4 } from "./LpBadge-HOEPBYmi.js";
+import { _ as _sfc_main$5 } from "./LpContextMenu-COwOwRgI.js";
+import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
 import { resolveLink } from "../components/link.js";

package/dist/chunks/{LpSlider-Cuzmrd7p.js → LpSlider-DuoRpOrH.js}

@@ -2,6 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, cr
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useSliderDrag, SLIDER_GLIDE } from "../components/slider.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -26,8 +27,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55"
+      `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`
     );
+    const { dragging, onPointerDown } = useSliderDrag();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(SliderRoot), mergeProps({
         "model-value": [props.modelValue],
@@ -37,6 +39,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: unref(field).disabled,
         class: unref(rootClass)
       }, unref(rest), {
+        "data-dragging": unref(dragging) || void 0,
+        onPointerdown: unref(onPointerDown),
         "onUpdate:modelValue": onUpdate,
         onValueCommit: onCommit
       }), {
@@ -56,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 8, ["id", "aria-label", "aria-labelledby", "aria-describedby"])
         ]),
         _: 1
-      }, 16, ["model-value", "min", "max", "step", "disabled", "class"]);
+      }, 16, ["model-value", "min", "max", "step", "disabled", "class", "data-dragging", "onPointerdown"]);
     };
   }
 });

package/dist/chunks/{LpSparkline-DXT4KrSi.js → LpSparkline-CExIRDb3.js}

@@ -3,8 +3,10 @@ import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
 import { sampleValues } from "../components/chartSkeleton.js";
 import { useSample } from "../composables/useSample.js";
 import { useReveal } from "../composables/useReveal.js";
+import { useTween, mixValues } from "../composables/useTween.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { normalise, extent, linePath, areaPath } from "../components/chart.js";
+import { toneLook } from "../components/tone.js";
 import '../assets/LpSparkline-0mKTq7pb.css';const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["inert", "width", "height", "viewBox", "aria-label"];
 const _hoisted_3 = { key: 0 };
@@ -37,14 +39,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const TONE = {
-      brand: "var(--color-brand)",
-      action: "var(--color-action)",
-      danger: "var(--color-danger)",
-      accent: "var(--color-accent)",
-      muted: "var(--color-muted)"
-    };
-    const stroke = computed(() => props.color ?? TONE[props.tone]);
+    const stroke = computed(() => props.color ?? toneLook(props.tone).color);
+    const { el, revealed } = useReveal({ immediate: () => !props.animate });
+    const stub = ref(null);
+    const sampling = useSample(
+      computed(() => el.value ?? stub.value),
+      () => !props.loading && !props.data.some((v) => v != null),
+      () => props.sample
+    );
     const data = computed(() => sampling.value ? sampleValues(props.data.length || 12) : props.data);
     const series = computed(() => normalise([{ name: "s", data: data.value }]));
     const box = computed(() => ({
@@ -59,29 +61,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const auto = extent(series.value, false);
       return { min: props.min ?? auto.min, max: props.max ?? auto.max };
     });
+    const heights = computed(() => {
+      const { min, max } = bounds.value;
+      const span = max - min || 1;
+      return series.value[0].values.map((v) => v == null ? null : (v - min) / span);
+    });
+    const shown = useTween(() => heights.value, mixValues, {
+      /*
+       * Only a line already on screen morphs. Before it is revealed the draw-on
+       * is still to come, and while the loading band or the stub stands in (`el`
+       * unset) the line will mount fresh and draw itself in — a morph from
+       * readings nobody saw would only blur that entrance.
+       */
+      enabled: () => props.animate && revealed.value && !!el.value
+    });
     const geo = computed(() => ({
-      min: bounds.value.min,
-      max: bounds.value.max,
+      min: 0,
+      max: 1,
       box: box.value,
-      count: data.value.length,
+      count: shown.value.length,
       banded: false
     }));
-    const d = computed(() => linePath(series.value[0].values, geo.value, props.smooth));
-    const fill = computed(
-      () => props.area ? areaPath(series.value[0].values, geo.value, props.smooth) : ""
-    );
+    const d = computed(() => linePath(shown.value, geo.value, props.smooth));
+    const fill = computed(() => props.area ? areaPath(shown.value, geo.value, props.smooth) : "");
     const lastPoint = computed(() => {
-      const values = series.value[0].values;
+      const values = shown.value;
       for (let i = values.length - 1; i >= 0; i--) {
         const v = values[i];
         if (v == null) continue;
-        const span = bounds.value.max - bounds.value.min || 1;
         const w = props.width - PAD * 2;
         const h = props.height - PAD * 2;
         return {
-          x: data.value.length <= 1 ? PAD + w / 2 : PAD + w / (data.value.length - 1) * i,
-          y: PAD + h - (v - bounds.value.min) / span * h,
-          v
+          x: values.length <= 1 ? PAD + w / 2 : PAD + w / (values.length - 1) * i,
+          y: PAD + h - v * h
         };
       }
       return null;
@@ -113,13 +125,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const segment = Math.hypot((props.width - PAD * 2) / n, props.height - PAD * 2);
       return Math.ceil(segment * n + 4);
     });
-    const { el, revealed } = useReveal({ immediate: () => !props.animate });
-    const stub = ref(null);
-    const sampling = useSample(
-      computed(() => el.value ?? stub.value),
-      () => !props.loading && !props.data.some((v) => v != null),
-      () => props.sample
-    );
     const revealStyle = computed(
       () => props.animate ? {
         "--lp-spark-len": `${pathLength.value}`,

package/dist/chunks/LpSpotlight-4F3NeUMY.js

@@ -0,0 +1,41 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useSpotlight } from "../composables/useSpotlight.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSpotlight",
+  props: {
+    color: {},
+    size: { default: 280 },
+    strength: { default: 18 },
+    disabled: { type: Boolean, default: false },
+    as: { default: "div" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { el } = useSpotlight({ disabled: () => props.disabled });
+    const { class: classes, attrs: rest } = useMergedAttrs(() => "lp-spotlight rounded-card");
+    const style = computed(() => ({
+      "--lp-spot-size": `${props.size}px`,
+      "--lp-spot-strength": `${Math.min(100, Math.max(0, props.strength))}%`,
+      ...props.color ? { "--lp-spot-color": props.color } : {}
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "el",
+        ref: el,
+        class: unref(classes),
+        style: style.value
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpStat-iBMF5QNk.js → LpStat-B2ix1Q7t.js}

@@ -1,28 +1,26 @@
-import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, createCommentVNode, createBlock, createVNode, Transition, normalizeProps, guardReactiveProps, withCtx, toDisplayString, Fragment, createTextVNode, normalizeClass, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$3 } from "./LpNumberFlow-z4WPZcZu.js";
-import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, createBlock, createCommentVNode, createVNode, Transition, normalizeProps, guardReactiveProps, withCtx, toDisplayString, Fragment, createTextVNode, normalizeClass, renderSlot } from "vue";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$4 } from "./LpNumberFlow-Cfyh033Q.js";
+import { _ as _sfc_main$3 } from "./LpSkeleton-BB6XIV-w.js";
+import { _ as _sfc_main$1 } from "./LpStatus-C7kx5PKE.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { TONES } from "../components/tone.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
-const _hoisted_2 = {
-  key: 0,
-  class: "size-1.5 rounded-full bg-action"
-};
-const _hoisted_3 = { class: "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
-const _hoisted_4 = { key: 1 };
-const _hoisted_5 = { class: "flex items-baseline gap-2" };
-const _hoisted_6 = { class: "font-mono text-3xl font-medium tracking-tight text-ink" };
-const _hoisted_7 = { key: "loading" };
-const _hoisted_8 = { key: "value" };
-const _hoisted_9 = {
+const _hoisted_2 = { class: "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { class: "flex items-baseline gap-2" };
+const _hoisted_5 = { class: "font-mono text-3xl font-medium tracking-tight text-ink" };
+const _hoisted_6 = { key: "loading" };
+const _hoisted_7 = { key: "value" };
+const _hoisted_8 = {
   key: 0,
   class: "inline-flex items-center text-sm font-medium"
 };
-const _hoisted_10 = {
+const _hoisted_9 = {
   key: 2,
   class: "ml-3 self-center"
 };
-const _hoisted_11 = {
+const _hoisted_10 = {
   key: 0,
   class: "text-sm text-muted"
 };
@@ -63,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const trendColor = computed(() => {
       if (dir.value === "flat") return "text-muted";
       const good = props.invertTrend ? dir.value === "down" : dir.value === "up";
-      return good ? "text-action" : "text-danger";
+      return good ? TONES.success.text : TONES.danger.text;
     });
     const deltaText = computed(() => {
       if (props.delta == null) return "";
@@ -92,33 +90,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest)), [
         createElementVNode("div", _hoisted_1, [
-          __props.online ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
-          __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+          __props.online ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            state: "online",
+            size: "sm",
+            "hide-label": ""
+          })) : createCommentVNode("", true),
+          __props.icon ? (openBlock(), createBlock(_sfc_main$2, {
             key: 1,
             name: __props.icon,
             size: 14,
             class: "text-muted"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("span", _hoisted_3, [
+          createElementVNode("span", _hoisted_2, [
             createVNode(Transition, normalizeProps(guardReactiveProps(FADE)), {
               default: withCtx(() => [
-                __props.loading && !__props.label ? (openBlock(), createBlock(_sfc_main$2, {
+                __props.loading && !__props.label ? (openBlock(), createBlock(_sfc_main$3, {
                   key: 0,
                   class: "inline-block h-[0.8em] w-20 align-middle"
-                })) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.label), 1))
+                })) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.label), 1))
               ]),
               _: 1
             }, 16)
           ])
         ]),
-        createElementVNode("div", _hoisted_5, [
-          createElementVNode("span", _hoisted_6, [
+        createElementVNode("div", _hoisted_4, [
+          createElementVNode("span", _hoisted_5, [
             createVNode(Transition, normalizeProps(guardReactiveProps(FADE)), {
               default: withCtx(() => [
-                __props.loading ? (openBlock(), createElementBlock("span", _hoisted_7, [
-                  createVNode(_sfc_main$2, { class: "inline-block h-[0.8em] w-[4.5ch] align-middle" })
-                ])) : (openBlock(), createElementBlock("span", _hoisted_8, [
-                  typeof __props.value === "number" ? (openBlock(), createBlock(_sfc_main$3, {
+                __props.loading ? (openBlock(), createElementBlock("span", _hoisted_6, [
+                  createVNode(_sfc_main$3, { class: "inline-block h-[0.8em] w-[4.5ch] align-middle" })
+                ])) : (openBlock(), createElementBlock("span", _hoisted_7, [
+                  typeof __props.value === "number" ? (openBlock(), createBlock(_sfc_main$4, {
                     key: 0,
                     value: __props.value,
                     compact: __props.compact,
@@ -134,17 +137,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 1
             }, 16)
           ]),
-          __props.loading ? (openBlock(), createElementBlock("span", _hoisted_9, [
-            createVNode(_sfc_main$2, { class: "inline-block h-[0.9em] w-10 align-middle" })
+          __props.loading ? (openBlock(), createElementBlock("span", _hoisted_8, [
+            createVNode(_sfc_main$3, { class: "inline-block h-[0.9em] w-10 align-middle" })
           ])) : showDelta.value ? (openBlock(), createElementBlock("span", {
             key: 1,
             class: normalizeClass(["inline-flex items-center gap-0.5 text-sm font-medium tabular-nums", trendColor.value])
           }, [
-            createVNode(_sfc_main$1, {
+            createVNode(_sfc_main$2, {
               name: trendIcon.value,
               size: 14
             }, null, 8, ["name"]),
-            typeof __props.delta === "number" ? (openBlock(), createBlock(_sfc_main$3, {
+            typeof __props.delta === "number" ? (openBlock(), createBlock(_sfc_main$4, {
               key: 0,
               value: __props.delta,
               decimals: deltaDecimals.value,
@@ -154,11 +157,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(deltaText.value), 1)
             ], 64))
           ], 2)) : createCommentVNode("", true),
-          _ctx.$slots.trend ? (openBlock(), createElementBlock("span", _hoisted_10, [
+          _ctx.$slots.trend ? (openBlock(), createElementBlock("span", _hoisted_9, [
             renderSlot(_ctx.$slots, "trend")
           ])) : createCommentVNode("", true)
         ]),
-        __props.hint ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+        __props.hint ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
       ], 16);
     };
   }

package/dist/chunks/LpStatus-C7kx5PKE.js

@@ -0,0 +1,86 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, toDisplayString, createVNode } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$1 } from "./LpBadge-HOEPBYmi.js";
+import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+import { TONE_COLOR } from "../components/meter.js";
+import { STATUS_LABELS, STATUS_LOOK } from "../components/status.js";
+import '../assets/LpStatus-430OGTZY.css';const _hoisted_1 = {
+  key: 0,
+  class: "sr-only"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpStatus",
+  props: {
+    state: {},
+    label: {},
+    tone: {},
+    pulse: { type: Boolean, default: void 0 },
+    variant: { default: "inline" },
+    size: { default: "md" },
+    hideLabel: { type: Boolean, default: false },
+    announce: { type: Boolean, default: false },
+    labels: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const names = useLabels("status", STATUS_LABELS, () => props.labels);
+    const look = computed(() => STATUS_LOOK[props.state] ?? STATUS_LOOK.unknown);
+    const tone = computed(() => props.tone ?? look.value.tone);
+    const pulsing = computed(() => props.pulse ?? look.value.pulse);
+    const word = computed(() => props.label ?? names.value[props.state] ?? props.state);
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => props.variant === "pill" ? "" : [
+        "inline-flex shrink-0 items-center align-middle font-medium leading-[1.2] whitespace-nowrap text-muted-strong",
+        props.size === "sm" ? "gap-1.5 text-[11px]" : "gap-2 text-xs"
+      ].join(" ")
+    );
+    const dotSize = computed(() => props.size === "sm" ? "size-1.5" : "size-2");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.variant === "pill" ? _sfc_main$1 : "span"), mergeProps({
+        role: __props.announce ? "status" : void 0,
+        title: __props.hideLabel ? word.value : void 0,
+        class: unref(rootClass)
+      }, __props.variant === "pill" ? { ...unref(rest), tone: tone.value, size: __props.size } : unref(rest)), {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["relative inline-flex shrink-0", dotSize.value]),
+            "aria-hidden": "true"
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(["lp-status-halo absolute inset-0 rounded-full transition-[background-color,opacity] duration-(--duration-medium)", pulsing.value ? "lp-status-halo--on" : "opacity-0"]),
+              style: normalizeStyle({ backgroundColor: unref(TONE_COLOR)[tone.value] })
+            }, null, 6),
+            createElementVNode("span", {
+              class: "relative inline-flex size-full rounded-full transition-[background-color] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none",
+              style: normalizeStyle({ backgroundColor: unref(TONE_COLOR)[tone.value] })
+            }, null, 4)
+          ], 2),
+          __props.hideLabel ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(word.value), 1)) : __props.variant === "pill" ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 1,
+            value: word.value,
+            align: "start"
+          }, null, 8, ["value"])) : (openBlock(), createBlock(_sfc_main$3, {
+            key: 2,
+            axis: "width"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                value: word.value,
+                align: "start"
+              }, null, 8, ["value"])
+            ]),
+            _: 1
+          }))
+        ]),
+        _: 1
+      }, 16, ["role", "title", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpStepMark-DK-5BKAt.js

@@ -0,0 +1,101 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createCommentVNode, createVNode, withCtx, createBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from "vue";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$2 } from "./LpLoader-DjJEX8hL.js";
+import { _ as _sfc_main$1 } from "./LpRollingText-DB7upf-5.js";
+import { TONES } from "../components/tone.js";
+import '../assets/LpStepMark-Drvx33Vg.css';const _hoisted_1 = ["role", "aria-label", "aria-hidden", "data-status"];
+const _hoisted_2 = {
+  key: 0,
+  class: "lp-step-halo pointer-events-none absolute -inset-px rounded-pill border border-brand"
+};
+const _hoisted_3 = {
+  key: 4,
+  class: "block size-0"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpStepMark",
+  props: {
+    status: {},
+    variant: { default: "status" },
+    size: { default: "md" },
+    number: {},
+    icon: {},
+    label: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const BOX = { sm: "size-4 text-[9px]", md: "size-6 text-[11px]", lg: "size-8 text-xs" };
+    const GLYPH = { sm: 10, md: 14, lg: 18 };
+    const TONE = {
+      pending: "border-line-strong bg-surface text-muted",
+      current: `bg-surface ${TONES.brand.border} ${TONES.brand.text}`,
+      running: `${TONES.brand.border} ${TONES.brand.chip}`,
+      success: `border-transparent text-ink-inverse ${TONES.success.bg}`,
+      failed: `border-transparent text-ink-inverse ${TONES.danger.bg}`,
+      skipped: "border-dashed border-line-strong bg-surface text-muted",
+      cancelled: "border-line-strong bg-surface-soft text-muted-strong"
+    };
+    const STEP_TONE = {
+      pending: "border-line text-muted",
+      current: `${TONES.brand.border} ${TONES.brand.text}`,
+      success: `border-transparent text-ink-inverse ${TONES.brand.bg}`
+    };
+    const ICON = {
+      success: "lucide:check",
+      failed: "lucide:x",
+      skipped: "lucide:minus",
+      cancelled: "lucide:slash"
+    };
+    const glyph = computed(() => {
+      if (props.status !== "pending" && props.status !== "current") return props.status;
+      if (props.icon) return "icon";
+      return props.number !== void 0 ? `n:${props.number}` : "pending";
+    });
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => `relative inline-flex shrink-0 items-center justify-center rounded-pill border font-semibold tabular-nums transition-[color,background-color,border-color] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none ${BOX[props.size]} ${props.variant === "step" && STEP_TONE[props.status] || TONE[props.status]}`
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps({
+        class: unref(rootClass),
+        role: __props.label ? "img" : void 0,
+        "aria-label": __props.label || void 0,
+        "aria-hidden": __props.label ? void 0 : "true",
+        "data-status": __props.status
+      }, unref(rest)), [
+        __props.status === "running" ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
+        createVNode(_sfc_main$1, {
+          mode: "flip",
+          duration: 260,
+          value: glyph.value
+        }, {
+          default: withCtx(({ value }) => [
+            value === "running" ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              delay: 0,
+              "min-visible": 0,
+              size: "inline",
+              class: normalizeClass(__props.size === "sm" ? "text-[10px]" : __props.size === "md" ? "text-sm" : "text-lg")
+            }, null, 8, ["class"])) : ICON[value] ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 1,
+              name: ICON[value],
+              size: GLYPH[__props.size]
+            }, null, 8, ["name", "size"])) : value === "icon" && __props.icon ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 2,
+              name: __props.icon,
+              size: __props.variant === "step" ? GLYPH[__props.size] : GLYPH[__props.size] - 2
+            }, null, 8, ["name", "size"])) : String(value).startsWith("n:") ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+              createTextVNode(toDisplayString(__props.number), 1)
+            ], 64)) : (openBlock(), createElementBlock("span", _hoisted_3))
+          ]),
+          _: 1
+        }, 8, ["value"])
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};