@leavepulse/ui 0.69.0 → 0.70.0

package/dist/components/LpDock.vue.js

@@ -0,0 +1,204 @@
+import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createVNode, withCtx, createBlock, resolveDynamicComponent, renderSlot, createCommentVNode, createElementVNode, normalizeClass } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { springStep, springSettled } from "../composables/usePillTransition.js";
+import { useRovingFocus } from "../composables/useRovingFocus.js";
+import { dockSize } from "./dock.js";
+import { _ as _sfc_main$2 } from "../chunks/LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "../chunks/LpTooltip-Cz8SQwRt.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpDock-Cbh0wQUv.css';const _hoisted_1 = ["aria-orientation", "data-orientation"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpDock",
+  props: {
+    items: {},
+    active: {},
+    orientation: { default: "horizontal" },
+    size: { default: 44 },
+    magnify: { default: 72 },
+    reach: { default: 150 },
+    tooltipSide: {},
+    focusAt: { default: null }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const vertical = computed(() => props.orientation === "vertical");
+    const { class: classes, attrs: rest } = useMergedAttrs(
+      () => [
+        "lp-skin-panel inline-flex rounded-card border border-line bg-surface-raised p-1.5 gap-1.5",
+        vertical.value ? "flex-col items-start" : "flex-row items-end"
+      ].join(" ")
+    );
+    const activeIds = computed(() => new Set(Array.isArray(props.active) ? props.active : props.active ? [props.active] : []));
+    function select(id) {
+      const item = props.items.find((entry) => entry.id === id);
+      if (item && !item.disabled) emit("select", id, item);
+    }
+    const roving = useRovingFocus(
+      () => props.items.map((item) => ({ id: item.id, label: item.label, disabled: item.disabled })),
+      { orientation: props.orientation, onActivate: select }
+    );
+    const buttons = /* @__PURE__ */ new Map();
+    const springs = /* @__PURE__ */ new Map();
+    const bar = ref(null);
+    let pointer = null;
+    let frame = 0;
+    let lastTime = 0;
+    function setButton(id, el) {
+      if (el instanceof HTMLElement) buttons.set(id, el);
+      else buttons.delete(id);
+    }
+    function centreOf(el) {
+      const rect = el.getBoundingClientRect();
+      return vertical.value ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+    }
+    function targetFor(el) {
+      if (pointer === null) return props.size;
+      return dockSize(props.size, Math.max(props.size, props.magnify), pointer - centreOf(el), props.reach);
+    }
+    function step(time) {
+      frame = 0;
+      const dt = lastTime ? (time - lastTime) / 1e3 : 1 / 60;
+      lastTime = time;
+      let moving = false;
+      const targets = /* @__PURE__ */ new Map();
+      for (const [id, el] of buttons) targets.set(id, targetFor(el));
+      for (const [id, el] of buttons) {
+        const target = targets.get(id);
+        const next = springStep(springs.get(id) ?? { value: props.size, velocity: 0 }, target, "pill", dt);
+        const settled = springSettled(next, target);
+        const value = settled ? target : next.value;
+        springs.set(id, settled ? { value: target, velocity: 0 } : next);
+        el.style.setProperty("--lp-dock-size", `${value.toFixed(2)}px`);
+        if (!settled) moving = true;
+      }
+      if (moving) frame = requestAnimationFrame(step);
+      else lastTime = 0;
+    }
+    function kick() {
+      if (!frame) frame = requestAnimationFrame(step);
+    }
+    function magnifying() {
+      return props.magnify > props.size && !prefersReducedMotion();
+    }
+    function onPointerMove(event) {
+      if (event.pointerType !== "mouse" || props.focusAt !== null || !magnifying()) return;
+      pointer = vertical.value ? event.clientY : event.clientX;
+      kick();
+    }
+    function onPointerLeave() {
+      if (props.focusAt !== null) return;
+      pointer = null;
+      kick();
+    }
+    function onFocusIn(event) {
+      const target = event.target;
+      if (!target?.matches(":focus-visible") || props.focusAt !== null || !magnifying()) return;
+      pointer = centreOf(target);
+      kick();
+    }
+    function onFocusOut(event) {
+      if (bar.value?.contains(event.relatedTarget) || props.focusAt !== null) return;
+      pointer = null;
+      kick();
+    }
+    watch(
+      () => props.focusAt,
+      (at) => {
+        if (at === null) {
+          pointer = null;
+        } else if (bar.value && magnifying()) {
+          const rect = bar.value.getBoundingClientRect();
+          pointer = (vertical.value ? rect.top : rect.left) + at;
+        }
+        kick();
+      },
+      { flush: "post" }
+    );
+    onBeforeUnmount(() => {
+      if (frame) cancelAnimationFrame(frame);
+    });
+    const dotSide = computed(() => vertical.value ? "left" : "bottom");
+    const tipSide = computed(() => props.tooltipSide ?? (vertical.value ? "right" : "top"));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref: (el) => {
+          bar.value = el;
+          unref(roving).setContainer(el);
+        },
+        role: "toolbar",
+        "aria-orientation": __props.orientation,
+        class: unref(classes),
+        style: { "--lp-dock-rest": `${__props.size}px` },
+        "data-orientation": __props.orientation
+      }, unref(rest), {
+        onKeydown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(roving).onKeydown && unref(roving).onKeydown(...args)),
+        onPointermove: onPointerMove,
+        onPointerleave: onPointerLeave,
+        onFocusin: onFocusIn,
+        onFocusout: onFocusOut
+      }), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.id,
+            class: "relative flex shrink-0 items-center justify-center"
+          }, [
+            createVNode(_sfc_main$1, {
+              content: item.label,
+              label: "",
+              side: tipSide.value,
+              delay: 0
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(item.href && !item.disabled ? "a" : "button"), mergeProps({
+                  ref_for: true,
+                  ref: (el) => setButton(item.id, el),
+                  type: item.href ? void 0 : "button",
+                  href: item.disabled ? void 0 : item.href,
+                  disabled: item.href ? void 0 : item.disabled,
+                  "aria-disabled": item.disabled || void 0,
+                  "aria-current": activeIds.value.has(item.id) ? "true" : void 0
+                }, { ref_for: true }, unref(roving).itemProps(item.id), {
+                  class: "lp-dock-item flex items-center justify-center rounded-control bg-surface-soft text-ink outline-none transition-colors duration-(--duration-fast) hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
+                  onClick: ($event) => select(item.id)
+                }), {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "icon", {
+                      item,
+                      active: activeIds.value.has(item.id)
+                    }, () => [
+                      item.icon ? (openBlock(), createBlock(_sfc_main$2, {
+                        key: 0,
+                        name: item.icon,
+                        class: "size-[52%]",
+                        "aria-hidden": "true"
+                      }, null, 8, ["name"])) : createCommentVNode("", true)
+                    ], true)
+                  ]),
+                  _: 2
+                }, 1040, ["type", "href", "disabled", "aria-disabled", "aria-current", "onClick"]))
+              ]),
+              _: 2
+            }, 1032, ["content", "side"]),
+            createElementVNode("span", {
+              "aria-hidden": "true",
+              class: normalizeClass(["pointer-events-none absolute size-1 rounded-pill bg-brand transition-[opacity,scale] duration-(--duration-medium) ease-(--ease-emphasized)", [
+                dotSide.value === "bottom" ? "-bottom-1 left-1/2 -translate-x-1/2" : "-left-1 top-1/2 -translate-y-1/2",
+                activeIds.value.has(item.id) ? "opacity-100 scale-100" : "opacity-0 scale-0"
+              ]])
+            }, null, 2)
+          ]);
+        }), 128))
+      ], 16, _hoisted_1);
+    };
+  }
+});
+const LpDock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0f41b35e"]]);
+export {
+  LpDock as default
+};

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-Q4SOxM4s.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-DGNKRsGq.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDropdownMenu.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDropdownMenu-DWTt0ooM.js";
+import { _ as _sfc_main } from "../chunks/LpDropdownMenu-CRgrhdAH.js";
 export {
   _sfc_main as default
 };

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

@@ -47,10 +47,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         keys: string;
         invalid: string;
     }>;
+} & {
+    linking?: boolean;
 }, {
     browse: () => void | undefined;
     link: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:linking": (value: boolean) => any;
+} & {
     link: (url: string) => any;
     files: (files: File[]) => any;
     rejected: (reason: {
@@ -104,9 +108,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         keys: string;
         invalid: string;
     }>;
+} & {
+    linking?: boolean;
 }> & Readonly<{
     onLink?: ((url: string) => any) | undefined;
     onFiles?: ((files: File[]) => any) | undefined;
+    "onUpdate:linking"?: ((value: boolean) => any) | undefined;
     onRejected?: ((reason: {
         file: File;
         cause: "type" | "size";

package/dist/components/LpDropzone.vue.js

@@ -1,15 +1,16 @@
-import { defineComponent, ref, computed, watch, useId, onMounted, onBeforeUnmount, openBlock, createElementBlock, withModifiers, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, createVNode, Transition, withCtx, renderSlot, toDisplayString, createCommentVNode, createTextVNode, Fragment, nextTick } from "vue";
+import { defineComponent, ref, computed, useModel, watch, useId, onMounted, onBeforeUnmount, openBlock, createElementBlock, withModifiers, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, createVNode, Transition, withCtx, renderSlot, toDisplayString, createCommentVNode, createTextVNode, Fragment, mergeModels, nextTick } from "vue";
 import { HINT_SIGNALS, noteDropzone } from "../composables/useHintSystem.js";
 import { hints } from "../composables/useHints.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useReveal } from "../composables/useReveal.js";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
-import { _ as _sfc_main$1 } from "../chunks/DropzoneLinkField-CjkrpDqO.js";
+import { _ as _sfc_main$1 } from "../chunks/DropzoneLinkField-Bw8Flkhk.js";
 import { POPOVER_PANEL } from "./dropdown.js";
-import { _ as _sfc_main$2 } from "../chunks/LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$2 } from "../chunks/LpIcon-HJP5xMz4.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpDropzone-Qb8k7cg4.css';const _hoisted_1 = ["aria-disabled"];
+import '../assets/LpDropzone-Bb1vBTeU.css';const _hoisted_1 = ["aria-disabled"];
 const _hoisted_2 = ["disabled", "aria-labelledby"];
 const _hoisted_3 = ["id"];
 const _hoisted_4 = {
@@ -26,7 +27,7 @@ const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpDropzone",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     accept: { default: "" },
     multiple: { type: Boolean, default: false },
     disabled: { type: Boolean },
@@ -40,8 +41,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     animate: { type: Boolean, default: true },
     links: { type: Boolean },
     labels: {}
-  },
-  emits: ["files", "rejected", "link"],
+  }, {
+    "linking": { type: Boolean, ...{ default: false } },
+    "linkingModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["files", "rejected", "link"], ["update:linking"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const TONES = {
@@ -154,7 +158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       direct();
       emit("link", url);
     }
-    const linking = ref(false);
+    const linking = useModel(__props, "linking");
     const draft = ref("");
     const invalid = ref(false);
     const linkField = ref(null);
@@ -162,19 +166,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const floating = ref(false);
     const pressTarget = ref(null);
     const heldHeight = ref(null);
-    function startLink() {
-      if (!props.links || props.disabled) return;
+    function measure() {
       const zone = revealAnchor.value;
       floating.value = (zone?.offsetWidth ?? 0) < IN_PLACE_MIN;
       heldHeight.value = floating.value ? null : zone?.offsetHeight ?? null;
+    }
+    let byUser = false;
+    function startLink() {
+      if (!props.links || props.disabled) return;
+      byUser = true;
+      measure();
       linking.value = true;
       invalid.value = false;
     }
+    watch(
+      linking,
+      (open) => {
+        if (open && !byUser) measure();
+        if (!open) byUser = false;
+      },
+      { flush: "sync" }
+    );
     function contentBack() {
       if (!linking.value) heldHeight.value = null;
     }
     watch(linkField, (field) => {
-      if (field && linking.value) field.focus();
+      if (field && linking.value && byUser) field.focus();
     });
     function stopLink(refocus = true) {
       linking.value = false;
@@ -260,6 +277,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       over.value ? "lp-dropzone--over" : "",
       props.animate && !revealed.value ? "lp-dropzone--waiting" : ""
     ].join(" "));
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "revealAnchor",
@@ -363,9 +382,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(unref(PopoverAnchor), {
               reference: unref(revealAnchor) ?? void 0
             }, null, 8, ["reference"]),
-            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: "bottom",
                   align: "start",
@@ -387,10 +408,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["modelValue", "invalid", "labels"])
                   ]),
                   _: 1
-                }, 8, ["class"])
+                }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
               ]),
               _: 1
-            })
+            }, 8, ["to"])
           ]),
           _: 1
         }, 8, ["open"]),
@@ -410,7 +431,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ece70987"]]);
+const LpDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-46c9a55a"]]);
 export {
   LpDropzone as default
 };

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

@@ -0,0 +1,85 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+export interface EditableLabels extends Record<string, string> {
+    edit: string;
+    empty: string;
+    saving: string;
+    failed: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<{
+    modelValue?: string;
+    /** What the text is, for assistive tech ("Server name"). */
+    label?: string;
+    /** Shown when the text is empty; clicking it starts editing. */
+    placeholder?: string;
+    /** A textarea; Enter adds a line and Ctrl/⌘+Enter commits. */
+    multiline?: boolean;
+    /**
+     * Persists the new text. May be async and may throw: a throw reopens the
+     * field with the typed text and shows the error's message.
+     */
+    save?: (value: string) => unknown;
+    /**
+     * Checks the text before saving. Return an error message to refuse it
+     * (the field stays open with the message under it), anything else to accept.
+     */
+    validate?: (value: string) => string | true | void | null | undefined;
+    /** Trim spaces around the text on commit. */
+    trim?: boolean;
+    /** Refuse an empty commit (with the `required` message) instead of saving "". */
+    required?: boolean;
+    maxlength?: number;
+    disabled?: boolean;
+    /** Shown as text, never editable — for a viewer without the right to change it. */
+    readonly?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: Partial<EditableLabels & {
+        required: string;
+    }>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    edit: () => any;
+    cancel: () => any;
+    error: (error: unknown) => any;
+    "update:modelValue": (value: string) => any;
+    saved: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue?: string;
+    /** What the text is, for assistive tech ("Server name"). */
+    label?: string;
+    /** Shown when the text is empty; clicking it starts editing. */
+    placeholder?: string;
+    /** A textarea; Enter adds a line and Ctrl/⌘+Enter commits. */
+    multiline?: boolean;
+    /**
+     * Persists the new text. May be async and may throw: a throw reopens the
+     * field with the typed text and shows the error's message.
+     */
+    save?: (value: string) => unknown;
+    /**
+     * Checks the text before saving. Return an error message to refuse it
+     * (the field stays open with the message under it), anything else to accept.
+     */
+    validate?: (value: string) => string | true | void | null | undefined;
+    /** Trim spaces around the text on commit. */
+    trim?: boolean;
+    /** Refuse an empty commit (with the `required` message) instead of saving "". */
+    required?: boolean;
+    maxlength?: number;
+    disabled?: boolean;
+    /** Shown as text, never editable — for a viewer without the right to change it. */
+    readonly?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: Partial<EditableLabels & {
+        required: string;
+    }>;
+}> & Readonly<{
+    onEdit?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onSaved?: ((value: string) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    trim: boolean;
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpEditable.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpEditable-DTqLt2lT.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpEmptyState.vue.js

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

package/dist/components/LpFieldNotice.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFieldNotice-CHuDeLjc.js";
+import { _ as _sfc_main } from "../chunks/LpFieldNotice-CurbNuXI.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

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

package/dist/components/LpFileTreeNode.vue.js

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

package/dist/components/LpFormField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFormField-DPb47HEm.js";
+import { _ as _sfc_main } from "../chunks/LpFormField-BWwgm1E4.js";
 export {
   _sfc_main as default
 };

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

@@ -0,0 +1,22 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Fixed height (px or any CSS length). Without it the frame grows with its content. */
+    height?: number | string;
+    /** Read by assistive technology for the frame as a whole. */
+    title?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Fixed height (px or any CSS length). Without it the frame grows with its content. */
+    height?: number | string;
+    /** Read by assistive technology for the frame as a whole. */
+    title?: string;
+}> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpFrame.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpFrame-BVQCQLDI.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,116 @@
+import { type MeterThreshold, type MeterTone } from "./meter";
+export type GaugeLabels = {
+    /** Appended to the spoken value when the reading is in a warning step. */
+    warning: string;
+    /** Appended to the spoken value when the reading is in a danger step. */
+    danger: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    value: number;
+    min?: number;
+    max?: number;
+    /**
+     * Steps of the scale, in the gauge's own units: from each `at` upward the
+     * arc takes that tone. Unset, the capacity scale applies (warning from 80%
+     * of the range, danger from 90%), which is what a resource gauge wants. A
+     * score where higher is better lists its own steps:
+     * `[{ at: 0, tone: 'danger' }, { at: 50, tone: 'warning' }, { at: 80, tone: 'ok' }]`.
+     */
+    thresholds?: MeterThreshold[];
+    /**
+     * A fixed tone instead of the scale. For a gauge whose reading is neither
+     * good nor bad (a temperature, a position), where colouring it by
+     * thresholds would invent a judgement.
+     */
+    tone?: MeterTone;
+    /** What is measured, printed under the figure ("CPU", "Disk"). Also the accessible name. */
+    label?: string;
+    /** Printed after the figure, smaller ("%", "°C", "ms"). */
+    unit?: string;
+    /** Decimal places of the figure. */
+    decimals?: number;
+    /**
+     * Says the figure differently ("1.2k", "3/8"). Overrides `decimals`; the
+     * figure still rolls, since the formatted string is what LpNumberFlow animates.
+     */
+    format?: (value: number) => string;
+    /** `semi` (default) sweeps across the top; `full` is a 270° dial open at the bottom. */
+    variant?: "semi" | "full";
+    /** Width in px. The height follows from the shape. */
+    size?: number;
+    /** Arc thickness in px. Defaults to a share of `size`. */
+    thickness?: number;
+    /** Print `min` and `max` under the ends of the arc. On by default for `semi`, where they sit naturally. */
+    showRange?: boolean;
+    /** Notch the track where each threshold starts, so the reader sees how far the next step is. */
+    showThresholds?: boolean;
+    /**
+     * Sweep up from the floor when first seen, instead of appearing already
+     * at the reading. Later changes always ease from where the needle is.
+     */
+    animateOnMount?: boolean;
+    /** Sweep length in ms, shared by the arc and the figure. */
+    duration?: number;
+    locale?: string;
+    labels?: Partial<GaugeLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    value: number;
+    min?: number;
+    max?: number;
+    /**
+     * Steps of the scale, in the gauge's own units: from each `at` upward the
+     * arc takes that tone. Unset, the capacity scale applies (warning from 80%
+     * of the range, danger from 90%), which is what a resource gauge wants. A
+     * score where higher is better lists its own steps:
+     * `[{ at: 0, tone: 'danger' }, { at: 50, tone: 'warning' }, { at: 80, tone: 'ok' }]`.
+     */
+    thresholds?: MeterThreshold[];
+    /**
+     * A fixed tone instead of the scale. For a gauge whose reading is neither
+     * good nor bad (a temperature, a position), where colouring it by
+     * thresholds would invent a judgement.
+     */
+    tone?: MeterTone;
+    /** What is measured, printed under the figure ("CPU", "Disk"). Also the accessible name. */
+    label?: string;
+    /** Printed after the figure, smaller ("%", "°C", "ms"). */
+    unit?: string;
+    /** Decimal places of the figure. */
+    decimals?: number;
+    /**
+     * Says the figure differently ("1.2k", "3/8"). Overrides `decimals`; the
+     * figure still rolls, since the formatted string is what LpNumberFlow animates.
+     */
+    format?: (value: number) => string;
+    /** `semi` (default) sweeps across the top; `full` is a 270° dial open at the bottom. */
+    variant?: "semi" | "full";
+    /** Width in px. The height follows from the shape. */
+    size?: number;
+    /** Arc thickness in px. Defaults to a share of `size`. */
+    thickness?: number;
+    /** Print `min` and `max` under the ends of the arc. On by default for `semi`, where they sit naturally. */
+    showRange?: boolean;
+    /** Notch the track where each threshold starts, so the reader sees how far the next step is. */
+    showThresholds?: boolean;
+    /**
+     * Sweep up from the floor when first seen, instead of appearing already
+     * at the reading. Later changes always ease from where the needle is.
+     */
+    animateOnMount?: boolean;
+    /** Sweep length in ms, shared by the arc and the figure. */
+    duration?: number;
+    locale?: string;
+    labels?: Partial<GaugeLabels>;
+}> & Readonly<{}>, {
+    duration: number;
+    size: number;
+    max: number;
+    min: number;
+    variant: "semi" | "full";
+    decimals: number;
+    animateOnMount: boolean;
+    showRange: boolean;
+    showThresholds: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpGauge.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpGauge-Bk8TwJj0.js";
+export {
+  _sfc_main as default
+};