@leavepulse/ui 0.69.0 → 0.70.1

package/dist/chunks/{LpNumberFlow-z4WPZcZu.js → LpNumberFlow-Cfyh033Q.js}

@@ -1,6 +1,7 @@
 import { defineComponent, ref, watch, onBeforeUnmount, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, createVNode, TransitionGroup, withCtx, Fragment, renderList, normalizeClass, normalizeStyle, createTextVNode } from "vue";
 import { prefersReducedMotion, easeOut } from "../composables/easing.js";
-import { useReveal } from "../composables/useReveal.js";
+import { useRevealedValue } from "../composables/useRevealedValue.js";
+import { compactNumber } from "../components/format.js";
 import '../assets/LpNumberFlow-rZkwQwlU.css';const _hoisted_1 = { class: "sr-only" };
 const _hoisted_2 = {
   key: 0,
@@ -95,39 +96,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
       frame = requestAnimationFrame(step);
     };
-    const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animateOnMount });
-    watch(revealed, (visible) => {
-      if (visible && props.animateOnMount) travel(props.value);
-    }, { immediate: true });
-    watch(() => props.value, travel);
+    const { el: revealAnchor, target } = useRevealedValue(() => props.value, {
+      animateOnMount: () => props.animateOnMount,
+      holdChanges: false
+    });
+    watch(target, travel);
     onBeforeUnmount(stop);
-    const UNITS = [
-      { limit: 1e9, suffix: "B" },
-      { limit: 1e6, suffix: "M" },
-      { limit: 1e3, suffix: "k" }
-    ];
-    const scaleFor = (v) => {
-      const abs = Math.abs(v);
-      let at = UNITS.findIndex((u) => abs >= u.limit);
-      if (at > 0 && Math.abs(Number((v / UNITS[at].limit).toFixed(1))) >= 1e3) at--;
-      if (at === -1 && abs >= 999.5) at = UNITS.length - 1;
-      const unit = UNITS[at];
-      if (!unit) return { divisor: 1, suffix: "", decimals: 0 };
-      const scaled = v / unit.limit;
-      return {
-        divisor: unit.limit,
-        suffix: unit.suffix,
-        decimals: Number.isInteger(scaled) ? 0 : 1
-      };
-    };
     const formatted = computed(() => formatAt(round(displayed.value), !settled.value));
     function formatAt(v, padded) {
       if (props.format) return props.format(v);
       if (!Number.isFinite(v)) return String(v);
       if (props.compact) {
-        const { divisor, suffix } = scaleFor(v);
-        const places = divisor === 1 ? 0 : 1;
-        return `${(v / divisor).toFixed(places)}${suffix}`;
+        return compactNumber(v, { plainDecimals: 0, fixed: true });
       }
       const pad = padded ? Math.max(1, padTo.value) : 1;
       if (props.grouped)

package/dist/chunks/{LpOtpInput-PbeNJ5In.js → LpOtpInput-CeBPsM7D.js}

@@ -92,6 +92,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         type: __props.alphanumeric ? "text" : "number",
         mask: __props.mask,
         disabled: unref(field).disabled,
+        required: unref(field).required,
         otp: "",
         class: unref(rootClass)
       }, unref(rest), { onComplete }), {
@@ -122,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["modelValue", "type", "mask", "disabled", "class"]);
+      }, 16, ["modelValue", "type", "mask", "disabled", "required", "class"]);
     };
   }
 });

package/dist/chunks/{LpPagination-Bx-VG4Ag.js → LpPagination-VNCX6pFC.js}

@@ -1,9 +1,10 @@
-import { defineComponent, computed, useId, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, createVNode, Fragment, renderList, createBlock, createCommentVNode, toDisplayString } from "vue";
+import { defineComponent, computed, ref, useId, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, createVNode, Fragment, renderList, createBlock, createCommentVNode, toDisplayString } from "vue";
 import { Motion } from "motion-v";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["disabled", "aria-label"];
 const _hoisted_3 = {
@@ -43,16 +44,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const current = computed(
       () => Number.isFinite(props.page) ? Math.min(Math.max(1, Math.floor(props.page)), count.value) : 1
     );
+    const root = ref(null);
+    const room = ref(Infinity);
+    const slotWidth = ref(32);
+    const gap = ref(6);
+    function measure() {
+      const nav = root.value;
+      if (!nav || !nav.children.length) return;
+      gap.value = parseFloat(getComputedStyle(nav).columnGap) || 0;
+      const items = nav.children.length;
+      const used = [...nav.children].reduce((sum, el) => sum + el.offsetWidth, 0);
+      slotWidth.value = used / items;
+    }
+    useResizeObserver(
+      () => root.value?.parentElement,
+      (entry) => {
+        measure();
+        if (entry) room.value = entry.contentRect.width;
+      }
+    );
+    const siblings = computed(() => {
+      for (let n = props.siblings; n > 0; n--) {
+        const items = Math.min(n * 2 + 1 + 4, count.value) + 2;
+        if (items * slotWidth.value + (items - 1) * gap.value <= room.value) return n;
+      }
+      return 0;
+    });
     const slots = computed(() => {
       const c = count.value;
       const cur = current.value;
-      const inner = props.siblings * 2 + 1;
+      const inner = siblings.value * 2 + 1;
       const total = inner + 4;
       if (c <= total) {
         return Array.from({ length: c }, (_, i) => ({ kind: "page", page: i + 1 }));
       }
-      let lo = cur - props.siblings;
-      let hi = cur + props.siblings;
+      let lo = cur - siblings.value;
+      let hi = cur + siblings.value;
       if (lo < 3) {
         hi += 3 - lo;
         lo = 3;
@@ -83,7 +110,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "flex items-center gap-1.5"
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", mergeProps({ class: unref(rootClass) }, unref(rest), {
+      return openBlock(), createElementBlock("nav", mergeProps({
+        ref_key: "root",
+        ref: root,
+        class: unref(rootClass)
+      }, unref(rest), {
         "aria-label": unref(text).nav
       }), [
         createElementVNode("button", {

package/dist/chunks/{LpPalettePreview-CFav_7co.js → LpPalettePreview-BNB8T_MY.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
-import '../assets/LpPalettePreview-CJmAKgYW.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpPalettePreview-B9VKDrvA.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpPalettePreview",
   props: {
     gap: { default: "md" }

package/dist/chunks/{LpPasswordInput-CbnXitAS.js → LpPasswordInput-GL2KOFK8.js}

@@ -1,33 +1,38 @@
-import { defineComponent, ref, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, unref, createVNode, renderSlot } from "vue";
+import { defineComponent, useModel, ref, openBlock, createBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createCommentVNode, mergeModels } from "vue";
+import { useFieldControl } from "../composables/useField.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$1 } from "./LpInput-CUyr6PIE.js";
-const _hoisted_1 = ["aria-label"];
+import { _ as _sfc_main$1 } from "./LpInput-CDuwODJG.js";
+import { _ as _sfc_main$2 } from "./RevealToggle-C-KzaQGJ.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpPasswordInput",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     modelValue: {},
     placeholder: {},
     invalid: { type: Boolean },
     disabled: { type: Boolean },
+    revealable: { type: Boolean, default: true },
     label: {},
     hint: {},
     error: {},
     required: { type: Boolean },
     size: {},
     labels: {}
-  },
-  emits: ["update:modelValue"],
+  }, {
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue"], ["update:visible"]),
   setup(__props, { expose: __expose }) {
     const props = __props;
+    const visible = useModel(__props, "visible");
+    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const text = useLabels(
       "passwordInput",
       { show: "Show password", hide: "Hide password" },
       () => props.labels
     );
-    const visible = ref(false);
     const inner = ref(null);
     __expose({
       focus: (options) => inner.value?.focus(options),
@@ -40,10 +45,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: inner
       }, _ctx.$attrs, {
         "model-value": __props.modelValue,
-        type: visible.value ? "text" : "password",
+        type: __props.revealable && visible.value ? "text" : "password",
         placeholder: __props.placeholder,
         invalid: __props.invalid,
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
         label: __props.label,
         hint: __props.hint,
         error: __props.error,
@@ -52,18 +57,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => _ctx.$emit("update:modelValue", v))
       }), createSlots({
         trailing: withCtx(() => [
-          createElementVNode("button", {
-            type: "button",
-            class: "group rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:text-ink",
-            "aria-label": visible.value ? unref(text).hide : unref(text).show,
-            onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value)
-          }, [
-            createVNode(_sfc_main$2, {
-              name: visible.value ? "lucide:eye-off" : "lucide:eye",
-              size: __props.size === "sm" ? 14 : 16,
-              class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-90 motion-reduce:group-active:scale-100"
-            }, null, 8, ["name", "size"])
-          ], 8, _hoisted_1)
+          renderSlot(_ctx.$slots, "actions"),
+          __props.revealable ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            modelValue: visible.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+            "icon-size": __props.size === "sm" ? 14 : 16,
+            "show-label": unref(text).show,
+            "hide-label": unref(text).hide,
+            disabled: unref(field).disabled,
+            class: "size-auto rounded-inner p-1 hover:bg-transparent"
+          }, null, 8, ["modelValue", "icon-size", "show-label", "hide-label", "disabled"])) : createCommentVNode("", true)
         ]),
         _: 2
       }, [

package/dist/chunks/{LpPhoneInput-DP69HONS.js → LpPhoneInput-C60tx1tC.js}

@@ -5,11 +5,12 @@ import { useFieldNotice } from "../composables/useFieldNotice.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { matchCountryByValue, filterCountries, loadCountries, flagEmoji } from "../components/countries.js";
-import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpFieldNotice-CHuDeLjc.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
+import { _ as _sfc_main$2 } from "./LpFieldNotice-CurbNuXI.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 import { loadPhoneLib, formatPhone, loadPhoneExamples, digitsBefore, caretAfterDigits, digitsOf } from "../components/phone.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = { class: "text-base leading-none" };
 const _hoisted_2 = { class: "border-b border-line p-2" };
 const _hoisted_3 = { class: "text-base leading-none" };
@@ -212,6 +213,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const { style: _s, ...others } = rest.value;
       return others;
     });
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         "data-lp-ring-owner": "",
@@ -249,9 +252,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(ComboboxPortal), null, {
+            createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
               default: withCtx(() => [
                 createVNode(unref(ComboboxContent), {
+                  onInteractOutside: unref(guardOutside),
+                  onEscapeKeyDown: unref(guardOutside),
                   "collision-padding": 8,
                   position: "popper",
                   align: "start",
@@ -281,7 +286,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           return openBlock(), createBlock(unref(ComboboxItem), {
                             key: c.iso2,
                             value: c.iso2,
-                            style: normalizeStyle({ animationDelay: `${Math.min(i, 12) * 22}ms` }),
+                            style: normalizeStyle(unref(optionStagger)(i)),
                             class: normalizeClass([unref(OPTION_ITEM), "gap-2.5"]),
                             onSelect: withModifiers(($event) => chooseCountry(c), ["prevent"])
                           }, {
@@ -298,10 +303,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     })
                   ]),
                   _: 1
-                }, 8, ["class"])
+                }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
               ]),
               _: 1
-            })
+            }, 8, ["to"])
           ]),
           _: 1
         }, 8, ["open", "disabled"]),

package/dist/chunks/{LpPie-yLF9-aDR.js → LpPie-BgXZ3xmm.js}

@@ -1,15 +1,17 @@
 import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createVNode, withCtx, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, withModifiers, normalizeClass, renderSlot } from "vue";
 import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
 import { useReveal } from "../composables/useReveal.js";
+import { useTween, lerp, mixColor } from "../composables/useTween.js";
 import { resolveSlices, arcPath, calloutLabels, formatTick } from "../components/chart.js";
-import { _ as _sfc_main$4 } from "./LpContextMenu-CRnjoqSt.js";
-import { _ as _sfc_main$3 } from "./LpEmptyState-om1UnFjV.js";
-import { _ as _sfc_main$6 } from "./LpNumberFlow-z4WPZcZu.js";
-import { _ as _sfc_main$7 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$9 } from "./LegendSwatch-BhRjrtzv.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-Cj96ENDC.js";
+import { _ as _sfc_main$3 } from "./LpEmptyState-KTKipws2.js";
+import { _ as _sfc_main$6 } from "./LpNumberFlow-Cfyh033Q.js";
+import { _ as _sfc_main$7 } from "./LpRollingText-DiL717LK.js";
 import { _ as _sfc_main$8 } from "./LpShift-DXNsauQZ.js";
 import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpSwap-D82jiecV.js";
-import { _ as _sfc_main$5 } from "./LpTooltip-suFCM34F.js";
+import { _ as _sfc_main$1 } from "./LpSwap-DzE6M3Mg.js";
+import { _ as _sfc_main$5 } from "./LpTooltip-Cz8SQwRt.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = ["aria-busy"];
@@ -54,13 +56,12 @@ const _hoisted_24 = {
   key: 0,
   class: "shrink-0 text-muted"
 };
-const _hoisted_25 = { class: "ml-auto shrink-0 pl-2 font-mono tabular-nums text-muted" };
-const _hoisted_26 = {
+const _hoisted_25 = {
   key: 1,
   class: "sr-only"
 };
-const _hoisted_27 = { key: 0 };
-const _hoisted_28 = { scope: "row" };
+const _hoisted_26 = { key: 0 };
+const _hoisted_27 = { scope: "row" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -156,9 +157,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const inner = computed(
       () => props.type === "donut" ? outer.value * Math.min(0.95, Math.max(0, props.innerRatio)) : 0
     );
+    const sliceKeys = computed(() => {
+      const seen = /* @__PURE__ */ new Map();
+      return resolved.value.slices.map((s) => {
+        const n = seen.get(s.label) ?? 0;
+        seen.set(s.label, n + 1);
+        return `${s.isOther ? "other" : "slice"}:${s.label}#${n}`;
+      });
+    });
     const arcs = computed(
-      () => arcAngles.value.map(({ slice, start, end, mid }) => ({
+      () => arcAngles.value.map(({ slice, start, end, mid, index }) => ({
         ...slice,
+        key: sliceKeys.value[index],
         d: arcPath(cx.value, cy.value, outer.value, inner.value, start, end, props.cornerRadius),
         /*
          * Push along the slice's own bisector, so it moves straight out of the
@@ -215,6 +225,93 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const radius = outer.value + props.hoverOffset + 4;
       return arcPath(cx.value, cy.value, radius, 0, start, start + Math.PI * 2 * sweep.value);
     });
+    const wedges = computed(() => {
+      let at = 0;
+      return resolved.value.slices.map((s, i) => {
+        const w = { key: sliceKeys.value[i], from: at, to: at + s.fraction, color: s.color };
+        at = w.to;
+        return w;
+      });
+    });
+    const mixWedges = (from, to, t) => {
+      const before = new Map(from.map((w) => [w.key, w]));
+      const after = new Map(to.map((w) => [w.key, w]));
+      const out = [];
+      let edge = 0;
+      for (const w of to) {
+        const was = before.get(w.key);
+        const a = was ?? { from: edge, to: edge, color: w.color };
+        if (was) edge = was.to;
+        out.push({
+          key: w.key,
+          from: lerp(a.from, w.from, t),
+          to: lerp(a.to, w.to, t),
+          color: mixColor(a.color, w.color, t)
+        });
+      }
+      edge = 0;
+      let slot = 0;
+      for (const w of from) {
+        const next = after.get(w.key);
+        if (next) {
+          edge = next.to;
+          slot = out.findIndex((o) => o.key === w.key) + 1;
+          continue;
+        }
+        out.splice(slot++, 0, {
+          key: w.key,
+          from: lerp(w.from, edge, t),
+          to: lerp(w.to, edge, t),
+          color: w.color
+        });
+      }
+      return out;
+    };
+    const shownWedges = useTween(() => wedges.value, mixWedges, {
+      enabled: () => props.animate && sweep.value >= 1
+    });
+    const figureChars = ref(0);
+    watch(
+      () => arcs.value.map((a) => [a.key, props.showPercent ? a.fraction : a.value]),
+      (next, prev) => {
+        const text = props.showPercent ? pct : fmt;
+        const before = new Map(prev ?? []);
+        let widest = 0;
+        for (const [key, to] of next) {
+          const from = before.get(key) ?? to;
+          for (let k = 0; k <= 8; k++) widest = Math.max(widest, text(lerp(from, to, k / 8)).length);
+        }
+        figureChars.value = widest;
+      },
+      { immediate: true }
+    );
+    const drawn = computed(() => {
+      const indexOf = new Map(arcs.value.map((a, i) => [a.key, i]));
+      const pad = arcs.value.length > 1 ? props.padAngle * Math.PI / 180 : 0;
+      const TURN = Math.PI * 2;
+      return shownWedges.value.filter((w) => w.to - w.from > 1e-5).map((w) => {
+        const sweepAngle = (w.to - w.from) * TURN;
+        const start = -Math.PI / 2 + w.from * TURN;
+        const gap = Math.min(pad, sweepAngle * 0.5);
+        const mid = start + sweepAngle / 2;
+        return {
+          key: w.key,
+          /* -1 for a slice on its way out: no longer data, so never lifted. */
+          index: indexOf.get(w.key) ?? -1,
+          color: w.color,
+          d: arcPath(
+            cx.value,
+            cy.value,
+            outer.value,
+            inner.value,
+            start + gap / 2,
+            start + sweepAngle - gap / 2,
+            props.cornerRadius
+          ),
+          lift: `translate(${(Math.cos(mid) * props.hoverOffset).toFixed(2)} ${(Math.sin(mid) * props.hoverOffset).toFixed(2)})`
+        };
+      });
+    });
     const callouts = computed(
       () => props.labels ? calloutLabels(
         arcAngles.value.map((a) => ({ index: a.index, mid: a.mid })),
@@ -511,20 +608,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           createElementVNode("g", {
                             "clip-path": __props.animate ? `url(#${sweepId}-sweep)` : void 0
                           }, [
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(drawn.value, (w) => {
                               return openBlock(), createElementBlock("path", {
-                                key: `${i}-${a.label}`,
-                                d: a.d,
-                                fill: a.color,
+                                key: w.key,
+                                d: w.d,
+                                fill: w.color,
                                 class: "pointer-events-none transition-[transform,opacity] duration-medium ease-[var(--ease-emphasized)] motion-reduce:transition-none",
-                                transform: active.value === i ? a.lift : void 0,
-                                opacity: dimmed(i) ? 0.28 : 1
+                                transform: w.index >= 0 && active.value === w.index ? w.lift : void 0,
+                                opacity: dimmed(w.index) ? 0.28 : 1
                               }, null, 8, _hoisted_15);
                             }), 128))
                           ], 8, _hoisted_14),
                           (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
                             return openBlock(), createElementBlock("path", {
-                              key: `hit-${i}-${a.label}`,
+                              key: `hit-${a.key}`,
                               d: a.d,
                               fill: "transparent",
                               class: "cursor-pointer",
@@ -586,35 +683,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 3
                   }, 8, ["disabled"]),
-                  legendShown.value ? (openBlock(), createElementBlock("div", {
+                  legendShown.value ? (openBlock(), createBlock(_sfc_main$8, {
                     key: 0,
-                    class: "flex min-w-0 flex-col gap-1.5",
-                    onPointerup: endDrag
-                  }, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
-                      return openBlock(), createElementBlock("button", {
-                        key: `${i}-${a.label}`,
-                        type: "button",
-                        class: normalizeClass(["group flex cursor-pointer items-center gap-2 rounded-inner px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring", [dimmed(i) ? "opacity-45" : "", isSelected(i) ? "bg-surface-soft" : ""]]),
-                        "aria-pressed": isSelected(i),
-                        onPointerenter: ($event) => onSlicePointerEnter(i),
-                        onPointerleave: ($event) => onSlicePointerLeave(i),
-                        onPointerdown: ($event) => onSlicePointerDown(i, $event),
-                        onClick: ($event) => onLegendClick(i, $event),
-                        onFocus: ($event) => active.value = i,
-                        onBlur: ($event) => active.value === i && (active.value = -1),
-                        onContextmenu: ($event) => onSliceContextMenu(i)
+                    axis: "width",
+                    class: "min-w-0"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", {
+                        class: "flex min-w-0 flex-col gap-1.5",
+                        onPointerup: endDrag
                       }, [
-                        createElementVNode("span", {
-                          class: "size-2 shrink-0 rounded-full transition-transform duration-fast group-hover:scale-125",
-                          style: normalizeStyle({ backgroundColor: a.color })
-                        }, null, 4),
-                        createElementVNode("span", _hoisted_23, toDisplayString(a.label), 1),
-                        a.isOther ? (openBlock(), createElementBlock("span", _hoisted_24, "(" + toDisplayString(a.count) + ")", 1)) : createCommentVNode("", true),
-                        createElementVNode("span", _hoisted_25, toDisplayString(__props.showPercent ? pct(a.fraction) : fmt(a.value)), 1)
-                      ], 42, _hoisted_22);
-                    }), 128))
-                  ], 32)) : createCommentVNode("", true)
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
+                          return openBlock(), createElementBlock("button", {
+                            key: a.key,
+                            type: "button",
+                            class: normalizeClass(["group flex cursor-pointer items-center gap-2 rounded-inner px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring", [dimmed(i) ? "opacity-45" : "", isSelected(i) ? "bg-surface-soft" : ""]]),
+                            "aria-pressed": isSelected(i),
+                            onPointerenter: ($event) => onSlicePointerEnter(i),
+                            onPointerleave: ($event) => onSlicePointerLeave(i),
+                            onPointerdown: ($event) => onSlicePointerDown(i, $event),
+                            onClick: ($event) => onLegendClick(i, $event),
+                            onFocus: ($event) => active.value = i,
+                            onBlur: ($event) => active.value === i && (active.value = -1),
+                            onContextmenu: ($event) => onSliceContextMenu(i)
+                          }, [
+                            createVNode(_sfc_main$9, {
+                              color: a.color
+                            }, null, 8, ["color"]),
+                            createElementVNode("span", _hoisted_23, toDisplayString(a.label), 1),
+                            a.isOther ? (openBlock(), createElementBlock("span", _hoisted_24, "(" + toDisplayString(a.count) + ")", 1)) : createCommentVNode("", true),
+                            createVNode(_sfc_main$6, {
+                              class: "ml-auto shrink-0 pl-2 text-right font-mono tabular-nums text-muted",
+                              style: normalizeStyle({ minWidth: `calc(${figureChars.value}ch + 0.5rem)` }),
+                              value: __props.showPercent ? a.fraction : a.value,
+                              duration: 360,
+                              format: __props.showPercent ? pct : fmt,
+                              "animate-on-mount": false
+                            }, null, 8, ["style", "value", "format"])
+                          ], 42, _hoisted_22);
+                        }), 128))
+                      ], 32)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
                 ])
               ]),
               _: 3
@@ -622,14 +733,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["swap-key"]),
-        __props.dataTable && hasData.value && !__props.loading ? (openBlock(), createElementBlock("table", _hoisted_26, [
-          __props.title ? (openBlock(), createElementBlock("caption", _hoisted_27, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+        __props.dataTable && hasData.value && !__props.loading ? (openBlock(), createElementBlock("table", _hoisted_25, [
+          __props.title ? (openBlock(), createElementBlock("caption", _hoisted_26, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
           createElementVNode("tbody", null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
               return openBlock(), createElementBlock("tr", {
                 key: `${i}-${a.label}`
               }, [
-                createElementVNode("th", _hoisted_28, toDisplayString(a.label), 1),
+                createElementVNode("th", _hoisted_27, toDisplayString(a.label), 1),
                 createElementVNode("td", null, toDisplayString(fmt(a.value)), 1),
                 createElementVNode("td", null, toDisplayString(pct(a.fraction)), 1)
               ]);