@leavepulse/ui 0.77.3 → 0.78.1

package/dist/chunks/{LpSidebar-DzE1783C.js → LpSidebar-DDNJzb69.js}

@@ -1,12 +1,14 @@
-import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createBlock, withCtx, createVNode, createSlots, normalizeProps, guardReactiveProps, nextTick } from "vue";
+import { defineComponent, computed, ref, onBeforeUnmount, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createBlock, withCtx, createVNode, createSlots, normalizeProps, guardReactiveProps, nextTick } from "vue";
+import { clamp } from "../composables/clamp.js";
 import { useHotkeys, parseCombo } from "../composables/useHotkeys.js";
+import { startPointerDrag } from "../composables/pointerDrag.js";
 import { usePersisted } from "../composables/usePersisted.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$5 } from "./LpDrawer-CrG8t_KP.js";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$3 } from "./LpInput-Tw-yxT4I.js";
-import { _ as _sfc_main$1 } from "./LpTooltip-BcBvIx4z.js";
-import { _ as _sfc_main$4 } from "./LpSidebarNav-DE3PhXVP.js";
+import { _ as _sfc_main$5 } from "./LpDrawer-DXNQFpAA.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$3 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-Bz_rrq5S.js";
+import { _ as _sfc_main$4 } from "./LpSidebarNav-CE0jQS8i.js";
 const _hoisted_1 = ["data-compact", "aria-label"];
 const _hoisted_2 = {
   key: 0,
@@ -147,7 +149,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { validate: (value) => value === null || Array.isArray(value) && value.every((k) => typeof k === "string") }
     );
     const navLength = computed(
-      () => groups.value.reduce((n, g) => n + g.items.length + (g.title ? 1 : 0), 0)
+      () => groups.value.reduce(
+        (n, g) => n + (g.title ? 1 : 0) + g.items.reduce((rows, i) => rows + 1 + (i.children?.length ?? 0), 0),
+        0
+      )
     );
     const autoCollapsed = computed(() => {
       const limit = props.autoCollapseAfter;
@@ -164,13 +169,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     function toggleSection(key, collapsed) {
       const next = collapsed ? [.../* @__PURE__ */ new Set([...collapsedKeys.value, key])] : collapsedKeys.value.filter((k) => k !== key);
-      ownCollapsed.value = next;
+      if (props.collapsed === void 0) ownCollapsed.value = next;
       emit("update:collapsed", next);
     }
     const ownCompact = usePersisted(() => props.persist && `lp-sidebar:${props.persist}:compact`, false);
     const isCompact = computed(() => props.compact ?? ownCompact.value);
     function setCompact(value) {
-      ownCompact.value = value;
+      if (props.compact === void 0) ownCompact.value = value;
       emit("update:compact", value);
     }
     const ENV_TONE = {
@@ -185,39 +190,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const { label, tone = "warning" } = typeof e === "string" ? { label: e } : e;
       return { label, tone: ENV_TONE[tone] };
     });
-    const ownWidth = usePersisted(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH);
+    const ownWidth = usePersisted(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH, {
+      validate: (value) => typeof value === "number" && Number.isFinite(value)
+    });
     const dragging = ref(false);
+    const boundedWidth = (width) => clamp(width, props.minWidth, props.maxWidth);
     const railWidth = computed(() => {
       if (isCompact.value) return `${COMPACT_WIDTH}px`;
-      if (props.resizable) return `${ownWidth.value}px`;
+      if (props.resizable) return `${boundedWidth(ownWidth.value)}px`;
       return props.width;
     });
+    let stopResize = null;
+    onBeforeUnmount(() => stopResize?.());
     function startResize(event) {
       if (event.button !== 0) return;
-      const handle = event.currentTarget;
-      handle.setPointerCapture(event.pointerId);
       const from = event.clientX;
-      const start = isCompact.value ? COMPACT_WIDTH : ownWidth.value;
+      const start = isCompact.value ? COMPACT_WIDTH : boundedWidth(ownWidth.value);
       dragging.value = true;
-      const move = (e) => {
-        const wanted = start + (e.clientX - from);
-        if (wanted < FOLD_AT) {
-          if (!isCompact.value) setCompact(true);
-          if (start !== COMPACT_WIDTH) ownWidth.value = start;
-          return;
+      stopResize = startPointerDrag(event, {
+        move(e) {
+          const wanted = start + (e.clientX - from);
+          if (wanted < FOLD_AT) {
+            if (!isCompact.value) setCompact(true);
+            if (start !== COMPACT_WIDTH) ownWidth.value = start;
+            return;
+          }
+          if (isCompact.value) setCompact(false);
+          ownWidth.value = Math.round(boundedWidth(wanted));
+        },
+        end() {
+          dragging.value = false;
+          stopResize = null;
         }
-        if (isCompact.value) setCompact(false);
-        ownWidth.value = Math.round(Math.min(props.maxWidth, Math.max(props.minWidth, wanted)));
-      };
-      const stop = () => {
-        dragging.value = false;
-        handle.removeEventListener("pointermove", move);
-        handle.removeEventListener("pointerup", stop);
-        handle.removeEventListener("pointercancel", stop);
-      };
-      handle.addEventListener("pointermove", move);
-      handle.addEventListener("pointerup", stop);
-      handle.addEventListener("pointercancel", stop);
+      });
     }
     const railEl = ref(null);
     async function searchFromCompact() {
@@ -248,7 +253,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     function togglePin(id) {
       const next = pinnedIds.value.includes(id) ? pinnedIds.value.filter((k) => k !== id) : [...pinnedIds.value, id];
-      ownPinned.value = next;
+      if (props.pinned === void 0) ownPinned.value = next;
       emit("update:pinned", next);
     }
     function activate(item) {
@@ -272,6 +277,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const chromeClass = computed(
       () => props.variant === "panel" ? "rounded-card border border-line bg-surface-raised" : "border-r border-line bg-surface-raised"
     );
+    const navBinds = computed(() => ({
+      groups: groups.value,
+      pinnable: props.pinnable,
+      pinned: pinnedItems.value,
+      previewDelay: props.previewDelay,
+      labels: text.value,
+      itemActive,
+      loading: props.loading,
+      skeletonRows: props.skeletonRows,
+      skeletonHeader: props.skeletonHeader,
+      collapsedKeys: collapsedKeys.value,
+      hoverFollow: props.hoverFollow,
+      onActivate: activate,
+      onToggleSection: toggleSection,
+      onTogglePin: togglePin
+    }));
+    const searchField = computed(() => ({
+      size: "sm",
+      icon: "lucide:search",
+      clearable: true,
+      class: "mb-2 shrink-0",
+      placeholder: placeholder.value,
+      "aria-label": placeholder.value
+    }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("nav", mergeProps({
@@ -330,35 +359,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["content"])) : createCommentVNode("", true),
-          __props.searchable && !isCompact.value ? (openBlock(), createBlock(_sfc_main$3, {
+          __props.searchable && !isCompact.value ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
             key: 4,
             modelValue: query.value,
-            "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
-          }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
-          createVNode(_sfc_main$4, {
-            groups: groups.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event)
+          }, searchField.value), null, 16, ["modelValue"])) : createCommentVNode("", true),
+          createVNode(_sfc_main$4, mergeProps(navBinds.value, {
             "pill-id": railPillId,
-            compact: isCompact.value,
-            pinnable: __props.pinnable,
-            pinned: pinnedItems.value,
-            "preview-delay": __props.previewDelay,
-            labels: unref(text),
-            "item-active": itemActive,
-            loading: __props.loading,
-            "skeleton-rows": __props.skeletonRows,
-            "skeleton-header": __props.skeletonHeader,
-            "collapsed-keys": collapsedKeys.value,
-            "hover-follow": __props.hoverFollow,
-            onActivate: activate,
-            onToggleSection: toggleSection,
-            onTogglePin: togglePin
-          }, createSlots({ _: 2 }, [
+            compact: isCompact.value
+          }), createSlots({ _: 2 }, [
             _ctx.$slots.item ? {
               name: "item",
               fn: withCtx((slotProps) => [
@@ -366,7 +375,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["groups", "compact", "pinnable", "pinned", "preview-delay", "labels", "loading", "skeleton-rows", "skeleton-header", "collapsed-keys", "hover-follow"]),
+          ]), 1040, ["compact"]),
           __props.resizable ? (openBlock(), createBlock(_sfc_main$1, {
             key: 5,
             content: isCompact.value ? unref(text).expandRail : unref(text).compact,
@@ -439,34 +448,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 renderSlot(_ctx.$slots, "header")
               ], 2)) : createCommentVNode("", true),
-              __props.searchable ? (openBlock(), createBlock(_sfc_main$3, {
+              __props.searchable ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
                 key: 1,
                 modelValue: query.value,
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => query.value = $event),
-                size: "sm",
-                icon: "lucide:search",
-                clearable: "",
-                class: "mb-2 shrink-0",
-                placeholder: placeholder.value,
-                "aria-label": placeholder.value
-              }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
-              createVNode(_sfc_main$4, {
-                groups: groups.value,
-                "pill-id": drawerPillId,
-                pinnable: __props.pinnable,
-                pinned: pinnedItems.value,
-                "preview-delay": __props.previewDelay,
-                labels: unref(text),
-                "item-active": itemActive,
-                loading: __props.loading,
-                "skeleton-rows": __props.skeletonRows,
-                "skeleton-header": __props.skeletonHeader,
-                "collapsed-keys": collapsedKeys.value,
-                "hover-follow": __props.hoverFollow,
-                onActivate: activate,
-                onToggleSection: toggleSection,
-                onTogglePin: togglePin
-              }, createSlots({ _: 2 }, [
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => query.value = $event)
+              }, searchField.value), null, 16, ["modelValue"])) : createCommentVNode("", true),
+              createVNode(_sfc_main$4, mergeProps(navBinds.value, { "pill-id": drawerPillId }), createSlots({ _: 2 }, [
                 _ctx.$slots.item ? {
                   name: "item",
                   fn: withCtx((slotProps) => [
@@ -474,7 +461,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ]),
                   key: "0"
                 } : void 0
-              ]), 1032, ["groups", "pinnable", "pinned", "preview-delay", "labels", "loading", "skeleton-rows", "skeleton-header", "collapsed-keys", "hover-follow"]),
+              ]), 1040),
               _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_10, [
                 renderSlot(_ctx.$slots, "actions")
               ])) : createCommentVNode("", true),

package/dist/chunks/{LpSidebarNav-DE3PhXVP.js → LpSidebarNav-CE0jQS8i.js}

@@ -1,16 +1,16 @@
 import { defineComponent, computed, ref, openBlock, createBlock, mergeProps, unref, withCtx, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, toDisplayString, createVNode, normalizeClass, createTextVNode, createSlots, renderSlot } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
-import { _ as _sfc_main$5 } from "./LpBadge-wUYLN4U9.js";
+import { _ as _sfc_main$5 } from "./LpBadge-D5QQdDQ_.js";
 import "../components/commandSearch.js";
 import "../composables/useHints.js";
 import "../composables/useHintSystem.js";
-import { _ as _sfc_main$4 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$4 } from "./LpIcon-C6JpQ5td.js";
 import "../composables/useHotkeys.js";
 import '../assets/MenuShortcut-Cyub0frr.css';import '../assets/LpKeys-C5VMcBOW.css';/* empty css                */
 /* empty css                      */
-import { _ as _sfc_main$2 } from "./LpScrollArea-MyEnVB_5.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$3 } from "./LpSidebarRow-BRYhNDSo.js";
+import { _ as _sfc_main$3 } from "./LpSidebarRow-DOTg1txp.js";
 import { waiting } from "../components/sidebar.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
@@ -116,7 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onKey(event) {
       const box = event.currentTarget;
       const list = [...box.querySelectorAll("[data-lp-nav-row]")].filter((r) => r.offsetParent !== null);
-      const at = list.indexOf(document.activeElement);
+      const at = list.indexOf(box.ownerDocument.activeElement);
       if (at < 0) return;
       const row = list[at];
       const go = (i) => {
@@ -227,7 +227,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }), 128))
             ])) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (section, si) => {
-              return openBlock(), createElementBlock(Fragment, { key: si }, [
+              return openBlock(), createElementBlock(Fragment, {
+                key: sectionKey(section) || si
+              }, [
                 __props.compact && section.collapsible && section.title ? (openBlock(), createElementBlock("div", _hoisted_5, [
                   createVNode(_sfc_main$3, {
                     item: sectionItem(section),

package/dist/chunks/{LpSidebarRow-BRYhNDSo.js → LpSidebarRow-DOTg1txp.js}

@@ -1,12 +1,13 @@
 import { defineComponent, ref, watch, onBeforeUnmount, computed, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, resolveDynamicComponent, createTextVNode, unref, Fragment, renderList, mergeProps, createVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { clamp } from "../composables/clamp.js";
 import { Motion } from "motion-v";
 import { useLocale } from "../composables/useLocale.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useLinkComponent } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpBadge-wUYLN4U9.js";
-import { _ as _sfc_main$4 } from "./LpContextMenu-rx2tCjwk.js";
-import { _ as _sfc_main$1 } from "./LpHoverCard-spGxyw7T.js";
-import { _ as _sfc_main$3 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$2 } from "./LpBadge-D5QQdDQ_.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-Bx_IhQDS.js";
+import { _ as _sfc_main$1 } from "./LpHoverCard-CHE9jAJG.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
 import LpKeys from "../components/LpKeys.vue.js";
 import { _ as _sfc_main$5 } from "./LpNumberFlow-Vqj0tP7B.js";
 import { waiting } from "../components/sidebar.js";
@@ -167,7 +168,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       typeof __props.item.busy === "number" ? (openBlock(), createElementBlock("span", {
                         key: 0,
                         class: "block h-full rounded-pill bg-brand transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)]",
-                        style: normalizeStyle({ width: `${Math.round(Math.min(1, Math.max(0, __props.item.busy)) * 100)}%` })
+                        style: normalizeStyle({ width: `${Math.round(unref(clamp)(__props.item.busy, 0, 1) * 100)}%` })
                       }, null, 4)) : (openBlock(), createElementBlock("span", _hoisted_2))
                     ], 2)) : createCommentVNode("", true),
                     __props.pill ? (openBlock(), createBlock(unref(Motion), {

package/dist/chunks/{LpSlider-DxYoCJJO.js → LpSlider-A4ixovgS.js}

@@ -1,7 +1,8 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
+import { _ as _sfc_main$1 } from "./SliderRail-DhPREa_R.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
-import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { SliderRoot, SliderThumb } from "reka-ui";
+import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useSliderDrag, SLIDER_GLIDE } from "../components/slider.js";
 const __default__ = { inheritAttrs: false };
@@ -48,17 +49,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onValueCommit: onCommit
       }), {
         default: withCtx(() => [
-          createVNode(unref(SliderTrack), { class: "relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft" }, {
-            default: withCtx(() => [
-              createVNode(unref(SliderRange), { class: "absolute h-full rounded-pill bg-brand" })
-            ]),
-            _: 1
-          }),
+          createVNode(_sfc_main$1),
           createVNode(unref(SliderThumb), {
             id: unref(field).id,
             "aria-label": __props.ariaLabel,
             "aria-labelledby": __props.ariaLabel ? void 0 : unref(field).labelId,
-            "aria-describedby": unref(field).describedBy,
+            "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
             class: "block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
           }, null, 8, ["id", "aria-label", "aria-labelledby", "aria-describedby"])
         ]),

package/dist/chunks/{LpSpotlight-4F3NeUMY.js → LpSpotlight-DwxkhFgR.js}

@@ -1,4 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { clamp } from "../composables/clamp.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useSpotlight } from "../composables/useSpotlight.js";
 const __default__ = { inheritAttrs: false };
@@ -18,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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))}%`,
+      "--lp-spot-strength": `${clamp(props.strength, 0, 100)}%`,
       ...props.color ? { "--lp-spot-color": props.color } : {}
     }));
     return (_ctx, _cache) => {

package/dist/chunks/{LpStat-f2LfDCJ4.js → LpStat-DPjc6_fX.js}

@@ -1,11 +1,11 @@
 import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, createBlock, createCommentVNode, createVNode, Transition, normalizeProps, guardReactiveProps, withCtx, toDisplayString, normalizeStyle, normalizeClass, Fragment, createTextVNode, renderSlot } from "vue";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$4 } from "./LpNumberFlow-Vqj0tP7B.js";
 import { _ as _sfc_main$3 } from "./LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$1 } from "./LpStatus-DglxttQ7.js";
+import { _ as _sfc_main$1 } from "./LpStatus-DGJFwk5F.js";
 import { useFitScale } from "../composables/useFitScale.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { TONES } from "../components/tone.js";
+import { TONES, toneOf } from "../components/tone.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = { class: "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
 const _hoisted_3 = { key: 1 };
@@ -44,10 +44,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     deltaSuffix: {},
     trend: { default: "auto" },
     invertTrend: { type: Boolean },
-    loading: { type: Boolean }
+    loading: { type: Boolean },
+    tone: {},
+    size: { default: "lg" }
   },
   setup(__props) {
     const props = __props;
+    const FIGURE_SIZE = {
+      sm: { class: "text-lg", font: "var(--text-lg, 1.125rem)", line: "var(--text-lg--line-height, 1.55)" },
+      md: { class: "text-2xl", font: "var(--text-2xl, 1.5rem)", line: "var(--text-2xl--line-height, 1.33)" },
+      lg: { class: "text-3xl", font: "var(--text-3xl, 1.875rem)", line: "var(--text-3xl--line-height, 1.2)" }
+    };
+    const figureSize = computed(() => FIGURE_SIZE[props.size]);
+    const figureColor = computed(() => props.tone ? TONES[toneOf(props.tone)].text : "text-ink");
     const dir = computed(() => {
       if (props.trend !== "auto") return props.trend;
       if (typeof props.delta === "number") {
@@ -89,7 +98,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const row = ref(null);
     const figure = ref(null);
     const fit = useFitScale(row, figure, FIT_MIN);
-    const figureStyle = computed(() => fit.scale.value < 1 ? { fontSize: `calc(var(--text-3xl, 1.875rem) * ${fit.scale.value})`, lineHeight: "calc(var(--text-3xl, 1.875rem) * var(--text-3xl--line-height, 1.2))" } : void 0);
+    const figureStyle = computed(() => {
+      if (fit.scale.value >= 1) return void 0;
+      const { font, line } = figureSize.value;
+      return { fontSize: `calc(${font} * ${fit.scale.value})`, lineHeight: `calc(${font} * ${line})` };
+    });
     const figureTitle = computed(() => fit.clipped.value && !props.loading ? `${props.prefix ?? ""}${props.value}${props.valueSuffix ?? ""}` : void 0);
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex flex-col gap-2"
@@ -129,7 +142,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("span", {
             ref_key: "figure",
             ref: figure,
-            class: normalizeClass(["max-w-full whitespace-nowrap font-mono text-3xl font-medium tracking-tight text-ink", unref(fit).clipped.value ? "inline-block overflow-hidden text-ellipsis align-bottom" : ""]),
+            class: normalizeClass(["max-w-full whitespace-nowrap font-mono font-medium tracking-tight", [figureSize.value.class, figureColor.value, unref(fit).clipped.value ? "inline-block overflow-hidden text-ellipsis align-bottom" : ""]]),
             style: normalizeStyle(figureStyle.value),
             title: figureTitle.value
           }, [

package/dist/chunks/{LpStatus-DglxttQ7.js → LpStatus-DGJFwk5F.js}

@@ -1,9 +1,9 @@
 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-wUYLN4U9.js";
+import { _ as _sfc_main$1 } from "./LpBadge-D5QQdDQ_.js";
 import { _ as _sfc_main$2 } from "./LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$3 } from "./LpShift-CCq7dofl.js";
+import { _ as _sfc_main$3 } from "./LpShift-DAgS_d2x.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 = {

package/dist/chunks/{LpStepMark-DpzKVyh8.js → LpStepMark-Dw2MRTrt.js}

@@ -1,7 +1,7 @@
 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--5WSb3jJ.js";
-import { _ as _sfc_main$2 } from "./LpLoader-DVwkOmt9.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$2 } from "./LpLoader-Bf1yZwaU.js";
 import { _ as _sfc_main$1 } from "./LpRollingText-B54Pje7P.js";
 import { TONES } from "../components/tone.js";
 import '../assets/LpStepMark-Drvx33Vg.css';const _hoisted_1 = ["role", "aria-label", "aria-hidden", "data-status"];

package/dist/chunks/{LpStepper-DpsocBNJ.js → LpStepper-DNnh7lCu.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createElementVNode, createVNode, normalizeClass, createTextVNode, toDisplayString, createBlock, createCommentVNode } from "vue";
-import { _ as _sfc_main$1 } from "./LpStepMark-DpzKVyh8.js";
+import { _ as _sfc_main$1 } from "./LpStepMark-Dw2MRTrt.js";
 import { _ as _sfc_main$2 } from "./StepConnector-37OgEOXA.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["aria-current"];

package/dist/chunks/{LpSwap-C96c0LWh.js → LpSwap-M7nFeW3C.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createVNode, Transition, createElementBlock, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "./LpShift-CCq7dofl.js";
+import { _ as _sfc_main$1 } from "./LpShift-DAgS_d2x.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpSwap",
   props: {

package/dist/chunks/{LpSwitch-BnXd1llc.js → LpSwitch-DnC2-0aV.js}

@@ -1,9 +1,9 @@
 import { defineComponent, useSlots, computed, useId, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, mergeProps } from "vue";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { SwitchRoot, SwitchThumb } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
 import { useOptimisticToggle } from "../composables/useOptimisticToggle.js";
-import { _ as _sfc_main$1 } from "./LpLoader-DVwkOmt9.js";
+import { _ as _sfc_main$1 } from "./LpLoader-Bf1yZwaU.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }));
     const descriptionId = `${useId()}-description`;
     const describedBy = computed(
-      () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || void 0
+      () => mergeDescribedBy(rest.value["aria-describedby"], props.description && labelled.value ? descriptionId : void 0, field.value.describedBy)
     );
     function onUpdate(value) {
       void set(value);

package/dist/chunks/{LpTabFace-DPCwKkH2.js → LpTabFace-DQoV8mQG.js}

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, Fragment, createVNode, createBlock, createCommentVNode, Transition, withCtx, createElementVNode, normalizeClass, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./AttentionDot-DCBf4aWg.js";
-import { _ as _sfc_main$3 } from "./LpBadge-wUYLN4U9.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$3 } from "./LpBadge-D5QQdDQ_.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$4 } from "./LpRollingText-B54Pje7P.js";
 const _hoisted_1 = {
   key: 0,

package/dist/chunks/{LpTableFilter-CiVBpaq0.js → LpTableFilter-B_XMOeAh.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, Fragment, unref, normalizeClass, toDisplayString, createVNode, withCtx, renderList } from "vue";
-import { _ as _sfc_main$3 } from "./LpCheckbox-Cs4SHaHX.js";
-import { _ as _sfc_main$1 } from "./LpInput-Tw-yxT4I.js";
-import { _ as _sfc_main$2 } from "./LpShift-CCq7dofl.js";
+import { _ as _sfc_main$3 } from "./LpCheckbox-D6RuDW4X.js";
+import { _ as _sfc_main$1 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$2 } from "./LpShift-DAgS_d2x.js";
 import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { matchesQuery, onlyValues, unhideValues, hideAllValues, invertHidden } from "../components/tableFilter.js";
 const _hoisted_1 = { class: "flex flex-col gap-2" };
@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onListKeydown(event) {
       if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
       const boxes = [...list.value?.querySelectorAll("[role=checkbox]") ?? []];
-      const at = boxes.indexOf(document.activeElement);
+      const at = boxes.indexOf(list.value?.ownerDocument.activeElement);
       const next = boxes[at + (event.key === "ArrowDown" ? 1 : -1)];
       if (!next) return;
       event.preventDefault();

package/dist/chunks/{LpTableOfContents-BN5zvpnx.js → LpTableOfContents-CKkWEK6R.js}

@@ -1,6 +1,7 @@
 import { defineComponent, computed, ref, useId, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
 import { Motion } from "motion-v";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useView, viewDocument, viewWindow } from "../composables/useView.js";
 import { scrollParent, scrollToElement, scrollMarginTop, atScrollEnd } from "../composables/scroll.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 const _hoisted_1 = ["aria-label"];
@@ -35,25 +36,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let spySuppressed = false;
     let rafId = null;
     let safetyTimer = null;
+    const host = useView();
     function setup() {
       stopSpy?.();
       stopSpy = null;
       const ids = flatIds(props.links);
       if (!ids.length) return;
-      const first = document.getElementById(ids[0]);
+      const page = viewDocument(host.value);
+      const win = viewWindow(host.value);
+      const first = page.getElementById(ids[0]);
       const scroller = first ? scrollParent(first) : null;
       let frame = 0;
       const measure = () => {
         frame = 0;
         if (spySuppressed) return;
         const top = scroller ? scroller.getBoundingClientRect().top : 0;
-        const headings = ids.map((id) => document.getElementById(id)).filter((el) => !!el);
+        const headings = ids.map((id) => page.getElementById(id)).filter((el) => !!el);
         if (!headings.length) return;
         let current = headings[0].id;
-        const view = scroller ? scroller.clientHeight : window.innerHeight;
+        const view = scroller ? scroller.clientHeight : win.innerHeight;
         const line = Math.max(props.offset, view / 4);
         for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id;
-        const scrolled = scroller ? scroller.scrollTop : window.scrollY;
+        const scrolled = scroller ? scroller.scrollTop : win.scrollY;
         const end = atScrollEnd(headings[0]);
         if (scrolled > 0 && end) current = headings[headings.length - 1].id;
         activeId.value = current;
@@ -61,13 +65,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const onScroll = () => {
         if (!frame) frame = requestAnimationFrame(measure);
       };
-      const target = scroller ?? window;
+      const target = scroller ?? win;
       target.addEventListener("scroll", onScroll, { passive: true });
-      window.addEventListener("resize", onScroll);
+      win.addEventListener("resize", onScroll);
       measure();
       stopSpy = () => {
         target.removeEventListener("scroll", onScroll);
-        window.removeEventListener("resize", onScroll);
+        win.removeEventListener("resize", onScroll);
         if (frame) cancelAnimationFrame(frame);
       };
     }
@@ -83,7 +87,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (rafId != null) cancelAnimationFrame(rafId);
       if (safetyTimer != null) clearTimeout(safetyTimer);
       const scroller = scrollParent(target);
-      const position = () => scroller ? scroller.scrollTop : window.scrollY;
+      const win = viewWindow(host.value);
+      const position = () => scroller ? scroller.scrollTop : win.scrollY;
       let last = position();
       const tick = () => {
         const y = position();
@@ -98,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       safetyTimer = setTimeout(unfreeze, 1e3);
     }
     function onClick(id, ev) {
-      const el = document.getElementById(id);
+      const el = viewDocument(host.value).getElementById(id);
       if (!el) return;
       ev.preventDefault();
       activeId.value = id;