@leavepulse/ui 0.55.0 → 0.56.0

package/dist/chunks/{LpActionBar-CnfFVIwC.js → LpActionBar-C3hkVsFz.js}

@@ -2,7 +2,7 @@ import { defineComponent, useSlots, computed, ref, watch, onBeforeUnmount, openB
 import { useLabels } from "../composables/useLpConfig.js";
 import { useBarStack } from "../components/actionBar.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$2 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {

package/dist/chunks/{LpAddressInput-iOJhmRzy.js → LpAddressInput-NUHmplCd.js}

@@ -3,7 +3,7 @@ import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
 import { flagEmoji, loadCountries } from "../components/countries.js";
 import { _ as _sfc_main$2 } from "./LpAutocomplete-C8IgSMsi.js";
-import { _ as _sfc_main$3 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$3 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$1 } from "./LpFormField-CtVYj6tO.js";
 import { _ as _sfc_main$4 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$5 } from "./LpInput-D-YGQbEv.js";

package/dist/chunks/{LpAppShell-DcSXik4a.js → LpAppShell-BEGjSqFl.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, useId, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, createBlock } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$2 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$3 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";

package/dist/chunks/{LpButton-CKSwC6Mu.js → LpButton-BdfZFNqi.js}

@@ -1,7 +1,8 @@
-import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createElementBlock, normalizeClass, createVNode, createCommentVNode } from "vue";
 import { tv } from "tailwind-variants";
 import { useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { resolveLink } from "../components/link.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -17,7 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     to: {},
     href: {},
     type: { default: "button" },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    loading: { type: Boolean }
   },
   setup(__props) {
     const button = tv({
@@ -54,7 +56,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         // icon-only square button — equal sides, no horizontal padding
         square: { true: "aspect-square p-0" },
         // soft elevation glow keyed to the variant's colour
-        glow: { true: "" }
+        glow: { true: "" },
+        // busy: the label fades out in place (no width jump) and a spinner sits on top
+        loading: { true: "relative cursor-progress !text-transparent hover:!text-transparent" }
       },
       compoundVariants: [
         { square: true, size: "xs", class: "size-8" },
@@ -91,10 +95,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const isNativeButton = computed(() => resolved.value.is === "button");
     function blockDisabled(event) {
-      if (!props.disabled || isNativeButton.value) return;
+      if (!props.loading && (!props.disabled || isNativeButton.value)) return;
       event.preventDefault();
       event.stopImmediatePropagation();
     }
+    const SPINNER_TONE = {
+      solid: "text-ink-inverse",
+      action: "text-ink-inverse",
+      danger: "text-ink-inverse",
+      light: "text-[#0b1210]",
+      muted: "text-muted"
+    };
+    const spinnerTone = computed(() => SPINNER_TONE[props.variant ?? "solid"] ?? "text-ink");
     const linkProps = computed(() => {
       if (isNativeButton.value) return {};
       if (!props.disabled) return resolved.value.props;
@@ -106,7 +118,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         size: props.size,
         block: props.block,
         square: props.square,
-        glow: props.glow
+        glow: props.glow,
+        loading: props.loading
       })
     );
     return (_ctx, _cache) => {
@@ -115,14 +128,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: isNativeButton.value ? __props.disabled : void 0,
         "aria-disabled": !isNativeButton.value && __props.disabled ? "true" : void 0,
         tabindex: !isNativeButton.value && __props.disabled ? -1 : void 0,
+        "aria-busy": __props.loading ? "true" : void 0,
         class: unref(classes),
         onClickCapture: blockDisabled
       }), {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
+          renderSlot(_ctx.$slots, "default"),
+          __props.loading ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(["pointer-events-none absolute inset-0 flex items-center justify-center animate-[fade-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none", spinnerTone.value]),
+            "aria-hidden": "true"
+          }, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:loader-circle",
+              class: "size-[1.15em] animate-spin motion-reduce:animate-none"
+            })
+          ], 2)) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 16, ["type", "disabled", "aria-disabled", "tabindex", "class"]);
+      }, 16, ["type", "disabled", "aria-disabled", "tabindex", "aria-busy", "class"]);
     };
   }
 });

package/dist/chunks/{LpConfirmDialog-Ca-CTlxT.js → LpConfirmDialog-CrbUZgJE.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementBlock, toDisplayString, createCommentVNode, createVNode, createTextVNode, unref, createElementVNode, normalizeClass, nextTick } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$2 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$3 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$1 } from "./LpModal-JNa3B_Lr.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };

package/dist/chunks/{LpConfirmHost-BAaSaT2b.js → LpConfirmHost-BgMIV8r9.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, openBlock, createBlock, createCommentVNode } from "vue";
 import { confirmQueue, settleConfirm } from "../components/confirm.js";
-import { _ as _sfc_main$1 } from "./LpConfirmDialog-Ca-CTlxT.js";
+import { _ as _sfc_main$1 } from "./LpConfirmDialog-CrbUZgJE.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmHost",
   props: {

package/dist/chunks/{LpModalNav-aWwc_5CD.js → LpModalNav-DXBilXr0.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { useGlass } from "../composables/useGlass.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$2 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$3 } from "./LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$1 } from "./LpModal-JNa3B_Lr.js";
 import { _ as _sfc_main$4 } from "./LpSidebar-C2oolgwy.js";

package/dist/chunks/{LpNotificationBell-wZ3meeim.js → LpNotificationBell-DEL-RoHS.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, useModel, getCurrentInstance, ref, onMounted, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, Transition, mergeModels } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$8 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$7 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$7 } from "./LpButton-BdfZFNqi.js";
 import { _ as _sfc_main$5 } from "./LpContextMenu-EF_90u3g.js";
 import { _ as _sfc_main$3 } from "./LpEmptyState-BJbZXC8D.js";
 import { _ as _sfc_main$6 } from "./LpIcon-DYtaid0K.js";

package/dist/components/LpActionBar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpActionBar-CnfFVIwC.js";
+import { _ as _sfc_main } from "../chunks/LpActionBar-C3hkVsFz.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-iOJhmRzy.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-NUHmplCd.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-DcSXik4a.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-BEGjSqFl.js";
 export {
   _sfc_main as default
 };

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

@@ -20,6 +20,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     href?: string;
     type?: "button" | "submit" | "reset";
     disabled?: boolean;
+    /**
+     * Busy state: blocks clicks like `disabled` without dimming, fades the label out
+     * in place and shows a spinner over it, so the width never jumps. Sets `aria-busy`.
+     */
+    loading?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     variant?: "ghost" | "action" | "muted" | "outline" | "danger" | "solid" | "light" | "soft" | undefined;
     size?: "md" | "sm" | "lg" | "xs" | undefined;
@@ -38,6 +43,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     href?: string;
     type?: "button" | "submit" | "reset";
     disabled?: boolean;
+    /**
+     * Busy state: blocks clicks like `disabled` without dimming, fades the label out
+     * in place and shows a spinner over it, so the width never jumps. Sets `aria-busy`.
+     */
+    loading?: boolean;
 }> & Readonly<{}>, {
     type: "button" | "submit" | "reset";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/components/LpButton.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main } from "../chunks/LpButton-BdfZFNqi.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-Ca-CTlxT.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CrbUZgJE.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmHost.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmHost-BAaSaT2b.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmHost-BgMIV8r9.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpImageEditor.vue.js

@@ -4,7 +4,7 @@ import { isSideways, coverScale, cropGeometry } from "./imageCrop.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { useReveal } from "../composables/useReveal.js";
 import { useZoomPan } from "../composables/useZoomPan.js";
-import { _ as _sfc_main$1 } from "../chunks/LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$1 } from "../chunks/LpButton-BdfZFNqi.js";
 import "reka-ui";
 import { _ as _sfc_main$2 } from "../chunks/LpIcon-DYtaid0K.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-aWwc_5CD.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-DXBilXr0.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-wZ3meeim.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-DEL-RoHS.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -14,7 +14,7 @@ import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { compareValues } from "./tableSort.js";
-import { _ as _sfc_main$1 } from "../chunks/LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$1 } from "../chunks/LpButton-BdfZFNqi.js";
 import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { summarizeShown, parseTableState, serializeTableState, countValues } from "./tableFilter.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";

package/dist/index.js

@@ -1,15 +1,15 @@
 import { _ } from "./chunks/LayoutCanvas-BkaGXTjx.js";
-import { _ as _2 } from "./chunks/LpAddressInput-iOJhmRzy.js";
+import { _ as _2 } from "./chunks/LpAddressInput-NUHmplCd.js";
 import { _ as _3 } from "./chunks/LpMapPicker-Cc84LaM3.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpActionBar-CnfFVIwC.js";
+import { _ as _4 } from "./chunks/LpActionBar-C3hkVsFz.js";
 import { _ as _5 } from "./chunks/LpAlert-B6ilrM7T.js";
-import { _ as _6 } from "./chunks/LpAppShell-DcSXik4a.js";
+import { _ as _6 } from "./chunks/LpAppShell-BEGjSqFl.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
 import { _ as _8 } from "./chunks/LpAvatar-LTvy0OkE.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-D4TsoFju.js";
-import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
+import { _ as _11 } from "./chunks/LpButton-BdfZFNqi.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
 import { _ as _13 } from "./chunks/LpCard-DbjO5yaF.js";
 import { default as default2 } from "./components/LpChart.vue.js";
@@ -30,8 +30,8 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-Ca-CTlxT.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-BAaSaT2b.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-CrbUZgJE.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-BgMIV8r9.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-EF_90u3g.js";
 import { _ as _21 } from "./chunks/LpDatePicker-BrdFtSTy.js";
@@ -60,8 +60,8 @@ import { _ as _37 } from "./chunks/LpLogViewer-BfgtXVKm.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-BnlkN_1f.js";
 import { _ as _39 } from "./chunks/LpModal-JNa3B_Lr.js";
-import { _ as _40 } from "./chunks/LpModalNav-aWwc_5CD.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-wZ3meeim.js";
+import { _ as _40 } from "./chunks/LpModalNav-DXBilXr0.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-DEL-RoHS.js";
 import { _ as _42 } from "./chunks/LpNumberField-B77O-z28.js";
 import { _ as _43 } from "./chunks/LpTimeField-Cqe7fXnh.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpButton.vue

@@ -9,6 +9,7 @@ import { tv, type VariantProps } from "tailwind-variants"
 import { computed, type Component } from "vue"
 import { useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import LpIcon from "./LpIcon.vue"
 import { resolveLink, type LinkTarget } from "./link"
 
 const button = tv({
@@ -47,6 +48,8 @@ const button = tv({
     square: { true: "aspect-square p-0" },
     // soft elevation glow keyed to the variant's colour
     glow: { true: "" },
+    // busy: the label fades out in place (no width jump) and a spinner sits on top
+    loading: { true: "relative cursor-progress !text-transparent hover:!text-transparent" },
   },
   compoundVariants: [
     { square: true, size: "xs", class: "size-8" },
@@ -96,6 +99,11 @@ const props = withDefaults(
     href?: string
     type?: "button" | "submit" | "reset"
     disabled?: boolean
+    /**
+     * Busy state: blocks clicks like `disabled` without dimming, fades the label out
+     * in place and shows a spinner over it, so the width never jumps. Sets `aria-busy`.
+     */
+    loading?: boolean
   }>(),
   { type: "button" },
 )
@@ -119,11 +127,20 @@ const isNativeButton = computed(() => resolved.value.is === "button")
  * own handler, which skips navigation once the event is default-prevented.
  */
 function blockDisabled(event: MouseEvent) {
-  if (!props.disabled || isNativeButton.value) return
+  if (!props.loading && (!props.disabled || isNativeButton.value)) return
   event.preventDefault()
   event.stopImmediatePropagation()
 }
 
+const SPINNER_TONE: Record<string, string> = {
+  solid: "text-ink-inverse",
+  action: "text-ink-inverse",
+  danger: "text-ink-inverse",
+  light: "text-[#0b1210]",
+  muted: "text-muted",
+}
+const spinnerTone = computed(() => SPINNER_TONE[props.variant ?? "solid"] ?? "text-ink")
+
 const linkProps = computed(() => {
   if (isNativeButton.value) return {}
   if (!props.disabled) return resolved.value.props
@@ -137,6 +154,7 @@ const { class: classes, attrs: rest } = useMergedAttrs(() =>
     block: props.block,
     square: props.square,
     glow: props.glow,
+    loading: props.loading,
   }),
 )
 </script>
@@ -149,9 +167,18 @@ const { class: classes, attrs: rest } = useMergedAttrs(() =>
     :disabled="isNativeButton ? disabled : undefined"
     :aria-disabled="!isNativeButton && disabled ? 'true' : undefined"
     :tabindex="!isNativeButton && disabled ? -1 : undefined"
+    :aria-busy="loading ? 'true' : undefined"
     :class="classes"
     @click.capture="blockDisabled"
   >
     <slot />
+    <span
+      v-if="loading"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center animate-[fade-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none"
+      :class="spinnerTone"
+      aria-hidden="true"
+    >
+      <LpIcon name="lucide:loader-circle" class="size-[1.15em] animate-spin motion-reduce:animate-none" />
+    </span>
   </component>
 </template>