@leavepulse/ui 0.68.0 → 0.70.0

package/src/tokens/tokens.css

@@ -168,15 +168,18 @@
 
 /* ── layering scale ──────────────────────────────
    One ladder so overlays never fight. Toasts sit ABOVE modals on purpose:
-   a notification must remain visible even while a dialog is open. */
+   a notification must remain visible even while a dialog is open. Tooltips
+   top the ladder: a tip only exists under the pointer or focus that asked
+   for it, and below the toasts one on a toast's own button (the error
+   toast's copy) opened underneath the toast stacked above it. */
 @theme {
   --z-dropdown: 50;
   --z-overlay: 100;
   --z-modal: 110;
   --z-popover: 120;
-  --z-tooltip: 130;
   --z-tour: 140;
   --z-toast: 200;
+  --z-tooltip: 210;
 
 }
 
@@ -220,11 +223,54 @@
   }
 }
 /* For panels a flex/grid parent already centres, so the animation only has to
-   supply the rise — no -50% to preserve. LpModal uses these. */
+   supply the rise — no -50% to preserve. LpModal uses these.
+ *
+ * rise-in is also THE "arrive from a little below" entrance for everything
+ * smaller: a tab panel, an option, a log row, a dropzone, a palette line. Those
+ * were seven keyframes that differed only in the distance, so the distance is a
+ * variable: `--rise` (10px, the dialog's, when unset). A list sets 6px, a line of
+ * text 3-4px, and a negative distance arrives from above (an option cascading
+ * down from its trigger). Registered as non-inheriting so a distance set on a
+ * list does not leak into a dialog opened from inside it. */
+@property --rise {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
 @keyframes rise-in {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(var(--rise, 10px));
+  }
+}
+/*
+ * Names apps reach for in their own `animate-[…]` classes (the panel's option
+ * cascades and cards use them). The kit itself draws every entrance with
+ * `rise-in` and a `--rise` distance; these stay as the same motion under the
+ * names that were published, so an app's class keeps animating.
+ */
+@keyframes option-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+@keyframes option-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes tab-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes disclosure-body-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
   }
 }
 @keyframes rise-out {
@@ -276,27 +322,6 @@
     transform: scale(0.85);
   }
 }
-/* Option cascade: items slide in top→down on open. */
-@keyframes option-in {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-}
-/* Cascade upward when the list opens above the trigger (data-side=top), so the
-   options drift toward where the list actually is — mirror of option-in. */
-@keyframes option-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-}
-@keyframes tab-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-}
 @keyframes toast-in {
   from {
     opacity: 0;
@@ -356,16 +381,6 @@
     transform: scale(0.6);
   }
 }
-@keyframes disclosure-body-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 /*
  * Tree/list row reveal: a row fades in while sliding from its parent's indent,
  * so an expanding branch reads as unfolding outward rather than popping. Used by
@@ -399,6 +414,75 @@
   }
 }
 
+/*
+ * A ring that swells off a live light and fades: "this one is happening now".
+ * LpStatus's light and a running LpStepMark breathe it; how far it swells is
+ * `--halo-scale` (each sets its own, the ring around a step mark is already
+ * the size of the mark), the pace is each one's own `animation`. One name keeps
+ * every live light on a page breathing in phase, since CSS animations are timed
+ * against the document rather than against when each one mounted.
+ */
+@property --halo-scale {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 2.6;
+}
+@keyframes lp-halo {
+  0% {
+    transform: scale(1);
+    opacity: 0.55;
+  }
+  70%,
+  100% {
+    transform: scale(var(--halo-scale, 2.6));
+    opacity: 0;
+  }
+}
+
+/*
+ * A short bright segment crossing a line: work in flight whose length is not
+ * known (LpLoader's bar, LpActivityLine) or work moving along a connector
+ * (LpPipeline's running step). The element paints itself (colour, gradient,
+ * width); the class only moves it, from just before its start to past the end.
+ * `--sweep-to` is how far, as a share of its own length: a segment 2/5 of its
+ * track clears it at 250%, a half-length one at 200%. `.lp-sweep--y` runs it
+ * down instead of across. Across follows the reading direction.
+ */
+.lp-sweep {
+  animation: lp-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.lp-sweep--y {
+  --sweep-x: 0;
+  --sweep-y: 1;
+}
+.lp-sweep:not(.lp-sweep--y):dir(rtl) {
+  animation-direction: reverse;
+}
+@keyframes lp-sweep {
+  from {
+    translate: calc(var(--sweep-x, 1) * -100%) calc(var(--sweep-y, 0) * -100%);
+  }
+  to {
+    translate: calc(var(--sweep-x, 1) * var(--sweep-to, 250%)) calc(var(--sweep-y, 0) * var(--sweep-to, 250%));
+  }
+}
+/* No travel: the segment lies along the whole line, dimmed, which still says busy. */
+@media (prefers-reduced-motion: reduce) {
+  .lp-sweep {
+    animation: none;
+    translate: none;
+    opacity: 0.5;
+  }
+  .lp-sweep:not(.lp-sweep--y) {
+    left: 0;
+    width: 100%;
+  }
+  .lp-sweep--y {
+    top: 0;
+    height: 100%;
+  }
+}
+
 /*
  * Lightbox. The image grows in from slightly under full size so opening reads as
  * the picture coming toward you rather than a panel appearing; the exit is
@@ -646,9 +730,17 @@
   pointer-events: none;
 }
 
-.lp-skin-panel > * {
-  position: relative;
-  z-index: 1;
+/*
+ * Content above the overlay, in the base layer so a child's own utilities win:
+ * unlayered, this beat every Tailwind class, and an `absolute` line or badge
+ * placed as a card's direct child became `relative` and collapsed (an activity
+ * line on a card's edge drew at zero width).
+ */
+@layer base {
+  .lp-skin-panel > * {
+    position: relative;
+    z-index: 1;
+  }
 }
 
 /*
@@ -731,7 +823,7 @@
    CSS transitions/animate-pulse used across the kit collapse to a near-instant
    state change — content still mounts/unmounts, it just doesn't travel. This is
    the CSS half; motion-v springs (Tabs/Layout) opt out in JS via
-   useReducedMotion(). */
+   usePrefersReducedMotion() (usePillTransition). */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

package/src/tokens/utilities.css

@@ -90,3 +90,84 @@
   caret-color: var(--color-ink);
   filter: none;
 }
+
+/*
+ * A floating panel that should travel when its anchor moves rather than jump:
+ * the tour's card going to the next target, the theme studio following its
+ * switcher as a theme change resizes it. reka places the panel through a
+ * transform on its popper wrapper, which the panel cannot class itself, hence
+ * the :has(). The panel sets the attribute only while travel is wanted (the
+ * tour drops it while the page scrolls, where the card must stick).
+ */
+[data-reka-popper-content-wrapper]:has(> [data-lp-glide-position]) {
+  transition: transform var(--duration-medium) var(--ease-emphasized);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-reka-popper-content-wrapper]:has(> [data-lp-glide-position]) {
+    transition: none;
+  }
+}
+
+/*
+ * A two-state icon that morphs instead of swapping: stack both glyphs in one
+ * grid cell and mark the current one `data-on`; the leaving glyph shrinks and
+ * turns away as the arriving one grows in. Shared by the copy button's tick
+ * and every eye toggle in the fields group (password, secret, code display),
+ * so it lives here rather than in one component's <style>, which would only
+ * load where that component is imported.
+ */
+.lp-glyph-swap {
+  opacity: 0;
+  scale: 0.4;
+  rotate: -45deg;
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    scale var(--duration-medium) var(--ease-emphasized),
+    rotate var(--duration-medium) var(--ease-emphasized);
+}
+.lp-glyph-swap[data-on] {
+  opacity: 1;
+  scale: 1;
+  rotate: 0deg;
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-glyph-swap {
+    transition: none;
+  }
+}
+
+/*
+ * A bar running out: the time left before something goes away on its own (a
+ * toast dismissing, a revealed secret hiding again). Set the run's length as
+ * `animation-duration` on the element; a toast that pauses while hovered sets
+ * `data-paused`, and the run resumes with exactly the time it had left, which
+ * is what the toast's own timer does. Driven by CSS rather than a ticking
+ * clock, so it is smooth at any frame rate and costs nothing while it runs.
+ * Shrinks toward the inline start, so in a right-to-left layout it drains
+ * from the left.
+ */
+.lp-drain {
+  transform-origin: left center;
+  animation-name: lp-drain;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.lp-drain:dir(rtl) {
+  transform-origin: right center;
+}
+.lp-drain[data-paused] {
+  animation-play-state: paused;
+}
+@keyframes lp-drain {
+  from {
+    scale: 1 1;
+  }
+  to {
+    scale: 0 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-drain {
+    animation: none;
+  }
+}

package/dist/assets/LpTabs-Bk7v4bZz.css

@@ -1,18 +0,0 @@
-
-.lp-tab-badge-enter-active[data-v-1557d8e9],
-.lp-tab-badge-leave-active[data-v-1557d8e9] {
-  transition:
-    opacity var(--duration-fast) var(--ease-emphasized),
-    transform var(--duration-fast) var(--ease-emphasized);
-}
-.lp-tab-badge-enter-from[data-v-1557d8e9],
-.lp-tab-badge-leave-to[data-v-1557d8e9] {
-  opacity: 0;
-  transform: scale(0.6);
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-tab-badge-enter-active[data-v-1557d8e9],
-  .lp-tab-badge-leave-active[data-v-1557d8e9] {
-    transition: none;
-}
-}

package/dist/chunks/LpAlert-BdvxvcWE.js

@@ -1,85 +0,0 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, mergeProps, unref, createVNode, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
-import { tv } from "tailwind-variants";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
-const _hoisted_1 = ["role", "aria-busy"];
-const _hoisted_2 = { class: "min-w-0" };
-const _hoisted_3 = {
-  key: 0,
-  class: "font-semibold text-ink"
-};
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpAlert",
-  props: {
-    variant: { default: "info" },
-    title: {},
-    icon: {},
-    live: { type: [String, Boolean], default: void 0 },
-    busy: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const alert = tv({
-      base: "flex gap-3 rounded-card border p-4 text-sm",
-      variants: {
-        variant: {
-          info: "border-line bg-surface-soft text-ink",
-          success: "border-action/30 bg-action/10 text-ink",
-          warning: "border-accent/30 bg-accent/10 text-ink",
-          danger: "border-danger/30 bg-danger/10 text-ink"
-        }
-      },
-      defaultVariants: { variant: "info" }
-    });
-    const ICONS = {
-      info: "lucide:info",
-      success: "lucide:circle-check",
-      warning: "lucide:triangle-alert",
-      danger: "lucide:octagon-alert"
-    };
-    const ICON_TONE = {
-      info: "text-brand",
-      success: "text-action",
-      warning: "text-accent",
-      danger: "text-danger"
-    };
-    const props = __props;
-    const wasBusy = ref(props.busy);
-    watch(() => props.busy, (busy) => {
-      if (busy) wasBusy.value = true;
-    });
-    const role = computed(() => {
-      const live = props.live ?? (props.variant === "danger" ? "assertive" : wasBusy.value ? "polite" : false);
-      return live === "assertive" ? "alert" : live === "polite" ? "status" : void 0;
-    });
-    const { class: rootClass, attrs: rest } = useMergedAttrs(() => alert({ variant: props.variant }));
-    const resolvedIcon = computed(() => props.icon ?? (props.busy ? "lucide:loader-circle" : ICONS[props.variant ?? "info"]));
-    const iconTone = computed(() => ICON_TONE[props.variant ?? "info"]);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: unref(rootClass),
-        role: role.value,
-        "aria-busy": __props.busy || void 0
-      }, unref(rest)), [
-        createVNode(_sfc_main$1, {
-          name: resolvedIcon.value,
-          size: 18,
-          class: normalizeClass(["mt-0.5 shrink-0", iconTone.value, __props.busy ? "animate-spin motion-reduce:animate-none" : ""]),
-          "aria-hidden": "true"
-        }, null, 8, ["name", "class"]),
-        createElementVNode("div", _hoisted_2, [
-          __props.title ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          createElementVNode("div", {
-            class: normalizeClass(["text-muted-strong", __props.title ? "mt-0.5" : ""])
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)
-        ])
-      ], 16, _hoisted_1);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpBadge-Fe0D1bYx.js

@@ -1,62 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, mergeProps, unref, createCommentVNode, renderSlot } from "vue";
-import { tv } from "tailwind-variants";
-import { useMergedClass } from "../composables/useMergedClass.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "size-1.5 rounded-full bg-current"
-};
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpBadge",
-  props: {
-    tone: {},
-    size: {},
-    dot: { type: Boolean }
-  },
-  setup(__props) {
-    const badge = tv({
-      /*
-       * `align-middle` and a line-height pinned to the box, because the default
-       * `inline-flex` baseline is the one thing a badge must not bring with it: a
-       * badge dropped next to a text-sm heading sat a pixel or two off the text's
-       * baseline and pushed the whole row taller, so a section title grew a step
-       * the moment it gained a status. The badge now occupies the height it says it
-       * does and leaves the line it sits on alone.
-       */
-      base: "inline-flex shrink-0 items-center gap-1.5 rounded-pill align-middle font-medium leading-[1.2]",
-      variants: {
-        size: {
-          // Fits inside a text-sm line without growing it — for a badge beside a
-          // heading, in a table cell, or anywhere a row's height is already set.
-          sm: "h-[18px] px-1.5 text-[11px]",
-          md: "px-2.5 py-0.5 text-xs",
-          lg: "px-3 py-1 text-sm"
-        },
-        tone: {
-          neutral: "bg-surface-soft text-muted-strong",
-          brand: "bg-brand-soft text-brand",
-          action: "bg-action/15 text-action",
-          success: "bg-action/15 text-action",
-          // Partial trouble, which every status surface eventually needs: without
-          // it a half-failed thing has to render as either fine or broken.
-          warning: "bg-accent/15 text-accent",
-          danger: "bg-danger-soft text-danger",
-          outline: "border border-line text-ink"
-        }
-      },
-      defaultVariants: { tone: "neutral", size: "md" }
-    });
-    const props = __props;
-    const classes = useMergedClass(() => badge({ tone: props.tone, size: props.size }));
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, { class: unref(classes) }), [
-        __props.dot ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default")
-      ], 16);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/chunks/LpBreadcrumbs-rzOKkLiI.js

@@ -1,98 +0,0 @@
-import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
-import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { resolveLink } from "../components/link.js";
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = { class: "truncate" };
-const _hoisted_3 = ["aria-current"];
-const _hoisted_4 = { class: "truncate" };
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpBreadcrumbs",
-  props: {
-    items: {},
-    as: {},
-    labels: {}
-  },
-  emits: ["navigate"],
-  setup(__props) {
-    const props = __props;
-    const text = useLabels("breadcrumbs", { nav: "Breadcrumb" }, () => props.labels);
-    const linkComponent = useLinkComponent();
-    function linkOf(item) {
-      if (props.as && props.as !== "a") {
-        if (item.to != null) return { is: props.as, props: { to: item.to } };
-        return item.href != null ? { is: "a", props: { href: item.href } } : null;
-      }
-      return resolveLink(props.as === "a" ? "a" : linkComponent.value, { to: item.to, href: item.href });
-    }
-    const crumbs = computed(
-      () => props.items.map((item, i) => ({
-        item,
-        last: i === props.items.length - 1,
-        link: i === props.items.length - 1 ? null : linkOf(item)
-      }))
-    );
-    const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "flex min-w-0 items-center gap-1.5 text-sm"
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", mergeProps({
-        "aria-label": unref(text).nav,
-        class: "min-w-0"
-      }, unref(rest)), [
-        createElementVNode("ol", {
-          class: normalizeClass(unref(rootClass))
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(crumbs.value, ({ item, last, link }, i) => {
-            return openBlock(), createElementBlock("li", {
-              key: i,
-              class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "shrink" : "shrink-0"])
-            }, [
-              i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
-                key: 0,
-                name: "lucide:chevron-right",
-                size: 14,
-                class: "shrink-0 text-muted",
-                "aria-hidden": "true"
-              })) : createCommentVNode("", true),
-              link ? (openBlock(), createBlock(resolveDynamicComponent(link.is), mergeProps({
-                key: 1,
-                ref_for: true
-              }, link.props, {
-                class: "inline-flex min-w-0 items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-                onClick: ($event) => _ctx.$emit("navigate", item, i)
-              }), {
-                default: withCtx(() => [
-                  item.icon ? (openBlock(), createBlock(_sfc_main$1, {
-                    key: 0,
-                    name: item.icon,
-                    size: 14
-                  }, null, 8, ["name"])) : createCommentVNode("", true),
-                  createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)
-                ]),
-                _: 2
-              }, 1040, ["onClick"])) : (openBlock(), createElementBlock("span", {
-                key: 2,
-                class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "text-ink" : "text-muted"]),
-                "aria-current": last ? "page" : void 0
-              }, [
-                item.icon ? (openBlock(), createBlock(_sfc_main$1, {
-                  key: 0,
-                  name: item.icon,
-                  size: 14
-                }, null, 8, ["name"])) : createCommentVNode("", true),
-                createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1)
-              ], 10, _hoisted_3))
-            ], 2);
-          }), 128))
-        ], 2)
-      ], 16, _hoisted_1);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};