@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/LpPipeline-D81yh_NX.js

@@ -0,0 +1,329 @@
+import { defineComponent, useModel, useSlots, computed, ref, watch, useId, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, unref, Fragment, renderList, normalizeClass, createVNode, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, renderSlot, mergeModels } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useNow } from "../composables/useNow.js";
+import { _ as _sfc_main$6 } from "./LpCollapse-CWS9M_lm.js";
+import { _ as _sfc_main$5 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$4 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$1 } from "./LpStepMark-DK-5BKAt.js";
+import { _ as _sfc_main$7 } from "./LpTooltip-Cz8SQwRt.js";
+import { _ as _sfc_main$2 } from "./StepConnector-37OgEOXA.js";
+import { stepKey, connectorFilled, currentStepIndex, stepElapsed, childProgress } from "../components/pipeline.js";
+import { DEFAULT_UNIT_LABELS, toEpoch, formatElapsed } from "../components/timeSpan.js";
+import { TONES } from "../components/tone.js";
+const _hoisted_1 = { class: "contents" };
+const _hoisted_2 = ["aria-current"];
+const _hoisted_3 = { class: "flex flex-col items-center" };
+const _hoisted_4 = { class: "flex min-w-0 flex-1 flex-col" };
+const _hoisted_5 = { class: "sr-only" };
+const _hoisted_6 = {
+  key: 0,
+  class: "truncate text-xs text-muted"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "text-muted"
+};
+const _hoisted_8 = ["id"];
+const _hoisted_9 = {
+  tabindex: "0",
+  class: "inline-flex rounded-pill focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+};
+const _hoisted_10 = { class: "sr-only" };
+const _hoisted_11 = { class: "flex min-w-0 shrink flex-col" };
+const _hoisted_12 = { class: "sr-only" };
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = {
+  key: 0,
+  class: "sr-only",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpPipeline",
+  props: /* @__PURE__ */ mergeModels({
+    steps: {},
+    orientation: { default: "vertical" },
+    compact: { type: Boolean },
+    numbered: { type: Boolean },
+    follow: { type: Boolean },
+    autoExpand: { type: Boolean, default: true },
+    announce: { type: Boolean, default: true },
+    labels: {}
+  }, {
+    "expanded": { default: () => [] },
+    "expandedModifiers": {}
+  }),
+  emits: ["update:expanded"],
+  setup(__props) {
+    const props = __props;
+    const expanded = useModel(__props, "expanded");
+    const text = useLabels(
+      "pipeline",
+      {
+        pending: "Pending",
+        running: "Running",
+        success: "Passed",
+        failed: "Failed",
+        skipped: "Skipped",
+        cancelled: "Cancelled",
+        showDetails: "Show details",
+        hideDetails: "Hide details"
+      },
+      () => props.labels
+    );
+    const units = useLabels("time", DEFAULT_UNIT_LABELS);
+    const slots = useSlots();
+    const vertical = computed(() => props.orientation === "vertical");
+    const markSize = computed(() => props.compact ? "sm" : "md");
+    const ticking = computed(
+      () => props.steps.some((s) => s.status === "running" && s.duration === void 0 && !Number.isNaN(toEpoch(s.startedAt)))
+    );
+    const now = useNow(ticking);
+    const elapsed = (step) => {
+      const ms = stepElapsed(step, now.value);
+      return ms === null ? "" : formatElapsed(ms, units.value);
+    };
+    const progressText = (step) => {
+      const p = childProgress(step);
+      return p ? `${p.done}/${p.total}` : "";
+    };
+    const expandable = (step) => vertical.value && (!!step.steps?.length || !!slots.detail && step.status !== "pending");
+    const isOpen = (step, i) => expanded.value.includes(stepKey(step, i));
+    function toggle(step, i) {
+      const key = stepKey(step, i);
+      autoOpened.delete(key);
+      expanded.value = isOpen(step, i) ? expanded.value.filter((k) => k !== key) : [...expanded.value, key];
+    }
+    const FILL = {
+      success: TONES.success.bg,
+      skipped: "bg-line-strong"
+    };
+    const statusText = (step) => {
+      const time = elapsed(step);
+      return time ? `${text.value[step.status]}, ${time}` : text.value[step.status];
+    };
+    const announcement = ref("");
+    let seen = /* @__PURE__ */ new Map();
+    const autoOpened = /* @__PURE__ */ new Set();
+    watch(
+      () => props.steps.map((s, i) => [stepKey(s, i), s.status]),
+      (pairs, old) => {
+        const next = new Map(pairs);
+        if (old) {
+          const opened = [];
+          const closed = [];
+          const said = [];
+          props.steps.forEach((step, i) => {
+            const key = stepKey(step, i);
+            const before = seen.get(key);
+            if (before === void 0 || before === step.status) return;
+            said.push(`${step.label}: ${text.value[step.status]}`);
+            if (!props.autoExpand) return;
+            if ((step.status === "running" || step.status === "failed") && expandable(step)) opened.push(key);
+            else if (connectorFilled(step.status) && autoOpened.has(key)) closed.push(key);
+          });
+          if (said.length && props.announce) announcement.value = said.join(". ");
+          const fresh = opened.filter((k) => !expanded.value.includes(k));
+          fresh.forEach((k) => autoOpened.add(k));
+          closed.forEach((k) => autoOpened.delete(k));
+          if (fresh.length || closed.length) {
+            expanded.value = [...expanded.value.filter((k) => !closed.includes(k)), ...fresh];
+          }
+        }
+        seen = next;
+      },
+      { immediate: true }
+    );
+    const uid = useId();
+    const items = [];
+    const bindItem = (i) => (el) => {
+      items[i] = el instanceof Element ? el : null;
+    };
+    const current = computed(() => currentStepIndex(props.steps));
+    watch(current, async (i) => {
+      if (!props.follow || i < 0) return;
+      await nextTick();
+      items[i]?.scrollIntoView({
+        block: "nearest",
+        inline: "center",
+        behavior: prefersReducedMotion() ? "auto" : "smooth"
+      });
+    });
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => vertical.value ? "flex w-full min-w-0 flex-col" : `flex w-full min-w-0 items-start overflow-x-auto ${props.compact ? "gap-1.5 py-1" : "gap-3 pb-1"}`
+    );
+    return (_ctx, _cache) => {
+      const _component_LpPipeline = resolveComponent("LpPipeline", true);
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("ol", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, i) => {
+            return openBlock(), createElementBlock("li", {
+              key: unref(stepKey)(step, i),
+              ref_for: true,
+              ref: bindItem(i),
+              "aria-current": i === current.value ? "step" : void 0,
+              class: normalizeClass(vertical.value ? "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3" : "flex min-w-0 flex-1 items-start last:flex-none " + (__props.compact ? "min-w-6 gap-1.5" : "min-w-28 gap-3"))
+            }, [
+              vertical.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createElementVNode("div", _hoisted_3, [
+                  createVNode(_sfc_main$1, {
+                    status: step.status,
+                    size: markSize.value,
+                    number: __props.numbered ? i + 1 : void 0,
+                    icon: step.icon,
+                    class: normalizeClass(__props.compact ? "mt-0.5" : "mt-px")
+                  }, null, 8, ["status", "size", "number", "icon", "class"]),
+                  i < __props.steps.length - 1 ? (openBlock(), createBlock(_sfc_main$2, {
+                    key: 0,
+                    orientation: "vertical",
+                    filled: unref(connectorFilled)(step.status),
+                    fill: FILL[step.status] ?? unref(TONES).success.bg,
+                    flowing: step.status === "running",
+                    class: "my-1 min-h-3"
+                  }, null, 8, ["filled", "fill", "flowing"])) : createCommentVNode("", true)
+                ]),
+                createElementVNode("div", {
+                  class: normalizeClass(["min-w-0", i < __props.steps.length - 1 ? __props.compact ? "pb-2" : "pb-4" : ""])
+                }, [
+                  (openBlock(), createBlock(resolveDynamicComponent(expandable(step) ? "button" : "div"), {
+                    type: expandable(step) ? "button" : void 0,
+                    "aria-expanded": expandable(step) ? isOpen(step, i) : void 0,
+                    "aria-controls": expandable(step) ? `${unref(uid)}-${i}` : void 0,
+                    class: normalizeClass(["group/row flex w-full min-w-0 items-start gap-2 rounded-control text-left", expandable(step) && "-mx-1.5 -my-0.5 w-[calc(100%+0.75rem)] px-1.5 py-0.5 transition-colors duration-(--duration-fast) hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"]),
+                    onClick: ($event) => expandable(step) && toggle(step, i)
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_4, [
+                        createElementVNode("span", {
+                          class: normalizeClass(["truncate transition-colors duration-(--duration-medium)", [__props.compact ? "text-xs" : "text-sm", step.status === "pending" || step.status === "skipped" ? "text-muted" : "text-ink", step.status === "running" && "font-medium"]])
+                        }, [
+                          createTextVNode(toDisplayString(step.label) + " ", 1),
+                          createElementVNode("span", _hoisted_5, "(" + toDisplayString(statusText(step)) + ")", 1)
+                        ], 2),
+                        step.description && !__props.compact ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(step.description), 1)) : createCommentVNode("", true)
+                      ]),
+                      createElementVNode("span", {
+                        class: normalizeClass(["flex shrink-0 items-center gap-2 font-mono text-xs tabular-nums", step.status === "failed" ? unref(TONES).danger.text : "text-muted"]),
+                        "aria-hidden": "true"
+                      }, [
+                        progressText(step) ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(progressText(step)), 1)) : createCommentVNode("", true),
+                        createVNode(_sfc_main$3, { axis: "width" }, {
+                          default: withCtx(() => [
+                            elapsed(step) ? (openBlock(), createBlock(_sfc_main$4, {
+                              key: 0,
+                              value: elapsed(step),
+                              align: "end",
+                              duration: 200
+                            }, null, 8, ["value"])) : createCommentVNode("", true)
+                          ]),
+                          _: 2
+                        }, 1024),
+                        expandable(step) ? (openBlock(), createBlock(_sfc_main$5, {
+                          key: 1,
+                          name: "lucide:chevron-down",
+                          size: 14,
+                          class: normalizeClass(["text-muted transition-transform duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none", isOpen(step, i) && "rotate-180"])
+                        }, null, 8, ["class"])) : createCommentVNode("", true)
+                      ], 2)
+                    ]),
+                    _: 2
+                  }, 1032, ["type", "aria-expanded", "aria-controls", "class", "onClick"])),
+                  createVNode(_sfc_main$6, {
+                    open: expandable(step) && isOpen(step, i)
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", {
+                        id: `${unref(uid)}-${i}`,
+                        class: "flex flex-col gap-2 pt-2"
+                      }, [
+                        step.steps?.length ? (openBlock(), createBlock(_component_LpPipeline, {
+                          key: 0,
+                          steps: step.steps,
+                          compact: "",
+                          announce: false,
+                          "auto-expand": false,
+                          labels: __props.labels,
+                          class: "rounded-card border border-line bg-surface-soft/40 px-3 py-2"
+                        }, null, 8, ["steps", "labels"])) : createCommentVNode("", true),
+                        renderSlot(_ctx.$slots, "detail", {
+                          step,
+                          index: i
+                        })
+                      ], 8, _hoisted_8)
+                    ]),
+                    _: 2
+                  }, 1032, ["open"])
+                ], 2)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                __props.compact ? (openBlock(), createBlock(_sfc_main$7, {
+                  key: 0,
+                  content: `${step.label}: ${statusText(step)}`
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", _hoisted_9, [
+                      createVNode(_sfc_main$1, {
+                        status: step.status,
+                        size: "sm",
+                        number: __props.numbered ? i + 1 : void 0,
+                        icon: step.icon
+                      }, null, 8, ["status", "number", "icon"]),
+                      createElementVNode("span", _hoisted_10, toDisplayString(step.label) + " (" + toDisplayString(statusText(step)) + ")", 1)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["content"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createVNode(_sfc_main$1, {
+                    status: step.status,
+                    size: markSize.value,
+                    number: __props.numbered ? i + 1 : void 0,
+                    icon: step.icon
+                  }, null, 8, ["status", "size", "number", "icon"]),
+                  createElementVNode("span", _hoisted_11, [
+                    createElementVNode("span", {
+                      class: normalizeClass(["truncate text-sm transition-colors duration-(--duration-medium)", [step.status === "pending" || step.status === "skipped" ? "text-muted" : "text-ink", step.status === "running" && "font-medium"]])
+                    }, [
+                      createTextVNode(toDisplayString(step.label) + " ", 1),
+                      createElementVNode("span", _hoisted_12, "(" + toDisplayString(statusText(step)) + ")", 1)
+                    ], 2),
+                    createElementVNode("span", {
+                      class: normalizeClass(["flex h-4 items-center gap-1.5 font-mono text-[11px] tabular-nums", step.status === "failed" ? unref(TONES).danger.text : "text-muted"]),
+                      "aria-hidden": "true"
+                    }, [
+                      createVNode(_sfc_main$3, { axis: "width" }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$4, {
+                            value: elapsed(step) || unref(text)[step.status],
+                            align: "start",
+                            duration: 200
+                          }, null, 8, ["value"])
+                        ]),
+                        _: 2
+                      }, 1024),
+                      progressText(step) ? (openBlock(), createElementBlock("span", _hoisted_13, "· " + toDisplayString(progressText(step)), 1)) : createCommentVNode("", true)
+                    ], 2)
+                  ])
+                ], 64)),
+                i < __props.steps.length - 1 ? (openBlock(), createBlock(_sfc_main$2, {
+                  key: 2,
+                  filled: unref(connectorFilled)(step.status),
+                  fill: FILL[step.status] ?? unref(TONES).success.bg,
+                  flowing: step.status === "running",
+                  class: normalizeClass(["min-w-4 self-start", __props.compact ? "mt-[7px]" : "mt-[11px]"])
+                }, null, 8, ["filled", "fill", "flowing", "class"])) : createCommentVNode("", true)
+              ], 64))
+            ], 10, _hoisted_2);
+          }), 128))
+        ], 16),
+        __props.announce ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(announcement.value), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpPopover-DVnkHaOu.js → LpPopover-BEIcqb9p.js}

@@ -2,6 +2,7 @@ import { defineComponent, useModel, computed, openBlock, createBlock, unref, wit
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
 import { mergeClass } from "../composables/useMergedClass.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpPopover",
   props: /* @__PURE__ */ mergeModels({
@@ -21,6 +22,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const panel = computed(
       () => mergeClass(POPOVER_PANEL, "z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none", props.panelClass)
     );
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverRoot), {
         open: open.value,
@@ -33,9 +36,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }),
-          createVNode(unref(PopoverPortal), null, {
+          createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(PopoverContent), {
+                onInteractOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside),
                 "collision-padding": 8,
                 side: __props.side,
                 align: __props.align,
@@ -47,10 +52,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "default")
                 ]),
                 _: 3
-              }, 8, ["side", "align", "side-offset", "aria-label", "class"])
+              }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "align", "side-offset", "aria-label", "class"])
             ]),
             _: 3
-          })
+          }, 8, ["to"])
         ]),
         _: 3
       }, 8, ["open"]);

package/dist/chunks/{LpProgress-CA86wxXu.js → LpProgress-CE-m5OpD.js}

@@ -1,9 +1,10 @@
-import { defineComponent, ref, onBeforeUnmount, watch, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, createElementVNode, Fragment, createTextVNode, toDisplayString, createCommentVNode, createVNode, normalizeClass, normalizeStyle } from "vue";
+import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, createElementVNode, Fragment, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, createVNode, normalizeStyle } from "vue";
 import { ProgressRoot, ProgressIndicator } from "reka-ui";
-import { prefersReducedMotion, easeOut } from "../composables/easing.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { useReveal } from "../composables/useReveal.js";
-import { _ as _sfc_main$1 } from "./LpNumberFlow-z4WPZcZu.js";
+import { useRevealedValue } from "../composables/useRevealedValue.js";
+import { _ as _sfc_main$1 } from "./LpNumberFlow-Cfyh033Q.js";
+import { meterFraction, toneAt, capacityThresholds, METER_HEADER, METER_TRACK } from "../components/meter.js";
+import { toneLook } from "../components/tone.js";
 const _hoisted_1 = ["width", "height"];
 const _hoisted_2 = ["cx", "cy", "r", "stroke-width"];
 const _hoisted_3 = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray"];
@@ -11,9 +12,8 @@ const _hoisted_4 = {
   key: 0,
   class: "absolute font-mono text-[11px] font-medium text-ink"
 };
-const _hoisted_5 = { class: "flex items-baseline justify-between gap-2 text-xs" };
-const _hoisted_6 = { class: "text-muted" };
-const _hoisted_7 = { class: "font-mono tabular-nums text-muted-strong" };
+const _hoisted_5 = { class: "text-muted" };
+const _hoisted_6 = { class: "font-mono tabular-nums text-muted-strong" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -35,68 +35,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const shown = ref(props.animateOnMount ? 0 : props.value);
-    let raf = 0;
-    const runSweep = (to, ms) => {
-      if (raf) cancelAnimationFrame(raf);
-      const from = shown.value;
-      if (prefersReducedMotion() || ms <= 0 || from === to) {
-        shown.value = to;
-        return;
-      }
-      const t0 = performance.now();
-      const step = (now) => {
-        const t = Math.min(1, (now - t0) / ms);
-        shown.value = from + (to - from) * easeOut(t);
-        raf = t < 1 ? requestAnimationFrame(step) : 0;
-      };
-      raf = requestAnimationFrame(step);
-    };
-    onBeforeUnmount(() => {
-      if (raf) cancelAnimationFrame(raf);
+    const { el: revealAnchor, shown } = useRevealedValue(() => props.value, {
+      animateOnMount: () => props.animateOnMount,
+      duration: () => props.duration
     });
-    const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animateOnMount });
     const bindReveal = (instance) => {
       revealAnchor.value = instance?.$el ?? null;
     };
-    watch(
-      revealed,
-      (visible) => {
-        if (visible && props.animateOnMount) runSweep(props.value, props.duration);
-      },
-      { immediate: true }
-    );
-    watch(
-      () => [props.value, props.max],
-      () => runSweep(props.value, props.duration)
-    );
     const pct = computed(() => {
       const ratio = props.max > 0 ? shown.value / props.max * 100 : 0;
       return Number.isFinite(ratio) ? Math.max(0, Math.min(100, ratio)) : 0;
     });
     const paintedTone = computed(() => {
-      if (props.tone !== "auto") return props.tone;
-      const fraction = props.max > 0 ? props.value / props.max : 0;
-      if (fraction >= props.dangerAt) return "danger";
-      if (fraction >= props.warnAt) return "accent";
-      return "action";
+      if (props.tone !== "auto") return toneLook(props.tone);
+      const fraction = meterFraction(props.value, 0, props.max);
+      return toneLook(toneAt(fraction, capacityThresholds(0, 1, props.warnAt, props.dangerAt)));
     });
     const captionText = computed(() => {
       if (props.caption === void 0 || props.caption === false) return "";
       return typeof props.caption === "string" ? props.caption : `${Math.round(pct.value)}%`;
     });
-    const bar = {
-      brand: "bg-brand",
-      action: "bg-action",
-      danger: "bg-danger",
-      accent: "bg-accent"
-    };
-    const stroke = {
-      brand: "var(--color-brand)",
-      action: "var(--color-action)",
-      danger: "var(--color-danger)",
-      accent: "var(--color-accent)"
-    };
     const radius = computed(() => (props.size - props.thickness) / 2);
     const circumference = computed(() => 2 * Math.PI * radius.value);
     const dash = computed(() => {
@@ -105,7 +63,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (pct.value >= 100) return full;
       return Math.min(raw, full - props.thickness * 1.5);
     });
-    const BAR_TRACK = "h-1.5 w-full overflow-hidden rounded-pill bg-surface-soft";
+    const BAR_TRACK = `${METER_TRACK} overflow-hidden`;
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => props.variant === "ring" ? "relative inline-flex shrink-0 items-center justify-center" : props.title || captionText.value ? "flex w-full flex-col gap-1" : BAR_TRACK
     );
@@ -140,7 +98,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               cy: __props.size / 2,
               r: radius.value,
               fill: "none",
-              stroke: stroke[paintedTone.value],
+              stroke: paintedTone.value.color,
               "stroke-width": __props.thickness,
               "stroke-linecap": "round",
               "stroke-dasharray": `${dash.value} ${circumference.value - dash.value}`
@@ -164,10 +122,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         key: 1,
         class: unref(rootClass)
       }, unref(rest)), [
-        createElementVNode("div", _hoisted_5, [
-          createElementVNode("span", _hoisted_6, toDisplayString(__props.title), 1),
-          createElementVNode("span", _hoisted_7, toDisplayString(captionText.value), 1)
-        ]),
+        createElementVNode("div", {
+          class: normalizeClass([unref(METER_HEADER), "gap-2 text-xs"])
+        }, [
+          createElementVNode("span", _hoisted_5, toDisplayString(__props.title), 1),
+          createElementVNode("span", _hoisted_6, toDisplayString(captionText.value), 1)
+        ], 2),
         createVNode(unref(ProgressRoot), {
           ref: bindReveal,
           "model-value": __props.value,
@@ -176,7 +136,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createVNode(unref(ProgressIndicator), {
-              class: normalizeClass(["h-full rounded-pill transition-colors duration-medium", bar[paintedTone.value]]),
+              class: normalizeClass(["h-full rounded-pill transition-colors duration-medium", paintedTone.value.bg]),
               style: normalizeStyle({ width: `${pct.value}%` })
             }, null, 8, ["class", "style"])
           ]),
@@ -191,7 +151,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, unref(rest)), {
         default: withCtx(() => [
           createVNode(unref(ProgressIndicator), {
-            class: normalizeClass(["h-full rounded-pill transition-colors duration-medium", bar[paintedTone.value]]),
+            class: normalizeClass(["h-full rounded-pill transition-colors duration-medium", paintedTone.value.bg]),
             style: normalizeStyle({ width: `${pct.value}%` })
           }, null, 8, ["class", "style"])
         ]),