@leavepulse/ui 0.24.1 → 0.25.0

package/dist/assets/LpNumberFlow-rZkwQwlU.css

@@ -0,0 +1,116 @@
+
+/*
+ * Unscoped: TransitionGroup applies its classes to elements Vue moves and
+ * clones, which a scoped attribute selector doesn't reliably reach. Everything
+ * is namespaced under .lp-nf.
+ */
+/*
+ * Fades the top and bottom of every column, so a digit rolls in and out of a
+ * window rather than appearing at a hard edge.
+ *
+ * In PIXELS, not percentages. A percentage fade scales with the row: at 18% it
+ * ate 2.4px off a 13.2px line, which on small text read as a shadow lying over
+ * the digits rather than as a window they pass through. A fixed 2px looks the
+ * same at every size, and only ever touches the sliver where a digit is
+ * genuinely entering or leaving.
+ */
+.lp-nf__track {
+  --lp-nf-fade: 2px;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--lp-nf-fade),
+    #000 calc(100% - var(--lp-nf-fade)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--lp-nf-fade),
+    #000 calc(100% - var(--lp-nf-fade)),
+    transparent 100%
+  );
+}
+
+/*
+ * The cell INHERITS its line box rather than declaring one. A fixed 1.1 made
+ * the digits 13.2px tall next to 16px text in the same row, so the two sat on
+ * different baselines and the number read as floating above the words beside
+ * it. Sharing the inherited line-height puts them on one baseline at any size.
+ */
+.lp-nf__cell {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  /* A formatter may put a space before its unit ("412 GB"); inline-flex would
+     collapse it away, gluing the unit to the number. */
+  white-space: pre;
+}
+
+/*
+ * The strip is as tall as its 20 entries and hangs from the top of the cell —
+ * NOT stretched to the cell's height, or each entry would be a twentieth of a
+ * line tall. Percentages on `translateY` resolve against the strip's own
+ * height, so one entry is 5% of it: digit N sits at -N × 5%.
+ */
+.lp-nf__strip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  /* Per-instance, so a counter whose VALUE is already being animated from
+     outside can shorten the wheel's own spin and stop lagging behind it. */
+  /* Settles rather than stops: the wheel carries a hair past its digit and
+     drifts back, so a column reads as a mechanism coming to rest. */
+  transition: transform var(--lp-nf-spin, var(--duration-slow, 320ms))
+    var(--ease-settle);
+  will-change: transform;
+}
+
+/* Each strip entry is exactly one line box tall, so translating by -N × 5%
+   (one twentieth of the 20-entry strip) lands digit N in the window. */
+.lp-nf__digit {
+  line-height: inherit;
+}
+.lp-nf__ghost {
+  visibility: hidden;
+}
+
+/* Faded, so a held-open column reads as an empty wheel rather than a zero the
+   number actually has. */
+.lp-nf__cell--pad {
+  opacity: 0.18;
+  transition: opacity var(--duration-fast, 160ms) linear;
+}
+
+/*
+ * Columns fade rather than grow. Animating `max-width` here was the cause of
+ * the row jittering whenever the digit count changed: the width tween fought
+ * the layout while the value was still climbing, so the whole number shuffled
+ * sideways and every wheel restarted. The padding above now reserves the space
+ * up front, which leaves these transitions with only the appearance of a
+ * column to handle — and that is a fade.
+ */
+.lp-nf-cell-enter-active,
+.lp-nf-cell-leave-active {
+  transition: opacity var(--duration-fast, 160ms) linear;
+}
+.lp-nf-cell-enter-from,
+.lp-nf-cell-leave-to {
+  opacity: 0;
+}
+
+/* Out of flow while leaving, so the settled row closes up without a reflow
+   jump at the end of the transition. */
+.lp-nf-cell-leave-active {
+  position: absolute;
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-nf__strip,
+  .lp-nf-cell-enter-active,
+  .lp-nf-cell-leave-active {
+    transition: none;
+}
+}

package/dist/assets/LpRollingText-CR1mb0Vt.css

@@ -0,0 +1,74 @@
+
+/*
+ * Unscoped on purpose: the transition classes are applied to the element Vue
+ * clones during the leave phase, which a scoped attribute selector doesn't
+ * reliably reach. Everything is namespaced under .lp-roll instead.
+ */
+.lp-roll {
+  perspective: var(--lp-roll-perspective);
+}
+.lp-roll__item {
+  display: inline-block;
+  white-space: nowrap;
+  backface-visibility: hidden;
+}
+
+/* The outgoing copy leaves the flow so the incoming one keeps the baseline. */
+.lp-roll-up-leave-active,
+.lp-roll-down-leave-active,
+.lp-roll-flip-leave-active {
+  position: absolute;
+  inset: 0;
+}
+.lp-roll-up-enter-active,
+.lp-roll-up-leave-active,
+.lp-roll-down-enter-active,
+.lp-roll-down-leave-active {
+  transition:
+    transform var(--lp-roll-duration) var(--ease-emphasized),
+    opacity var(--lp-roll-duration) var(--ease-emphasized);
+}
+.lp-roll-up-enter-from {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.lp-roll-up-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.lp-roll-down-enter-from {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.lp-roll-down-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.lp-roll-flip-enter-active,
+.lp-roll-flip-leave-active {
+  transition:
+    transform var(--lp-roll-duration) var(--ease-emphasized),
+    opacity calc(var(--lp-roll-duration) * 0.6) linear;
+  transform-origin: center center;
+}
+
+/* Quarter turns, not halves: the two faces meet edge-on at the midpoint, so
+   the box reads as turning rather than as one label briefly vanishing. */
+.lp-roll-flip-enter-from {
+  transform: rotateX(-90deg);
+  opacity: 0;
+}
+.lp-roll-flip-leave-to {
+  transform: rotateX(90deg);
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-roll-up-enter-active,
+  .lp-roll-up-leave-active,
+  .lp-roll-down-enter-active,
+  .lp-roll-down-leave-active,
+  .lp-roll-flip-enter-active,
+  .lp-roll-flip-leave-active {
+    transition: none;
+}
+}

package/dist/assets/LpSparkline-0mKTq7pb.css

@@ -0,0 +1,51 @@
+
+/*
+ * Unscoped and namespaced: the reveal is driven by CSS variables the component
+ * sets inline, and keyframes cannot live in a scoped block that the animated
+ * element may not carry the attribute for.
+ *
+ * Only elements that were given the variables animate — `animate: false` omits
+ * them, the `var()` fallbacks resolve to a finished state, and nothing moves.
+ *
+ * `--waiting` is the third state: the element is on the page but has not been
+ * scrolled to, so it is held at the animation's first frame. It cannot simply
+ * be left un-animated, because that is indistinguishable from finished.
+ */
+.lp-spark__line {
+  stroke-dasharray: var(--lp-spark-len, none);
+  stroke-dashoffset: 0;
+  animation: lp-spark-draw var(--lp-spark-dur, 0ms) var(--ease-travel) both;
+}
+.lp-spark__area,
+.lp-spark__dot {
+  /* Behind the line: the fill and the end marker belong to a line that has
+     already been drawn, so they fade in over its last third. */
+  animation: lp-spark-fade var(--lp-spark-dur, 0ms) ease both;
+}
+.lp-spark--waiting.lp-spark__line {
+  stroke-dashoffset: var(--lp-spark-len, 0);
+  animation: none;
+}
+.lp-spark--waiting.lp-spark__area,
+.lp-spark--waiting.lp-spark__dot {
+  opacity: 0;
+  animation: none;
+}
+@keyframes lp-spark-draw {
+from {
+    stroke-dashoffset: var(--lp-spark-len, 0);
+}
+}
+@keyframes lp-spark-fade {
+0%,
+  60% {
+    opacity: 0;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-spark__line,
+  .lp-spark__area,
+  .lp-spark__dot {
+    animation: none;
+}
+}

package/dist/assets/LpTooltip-B61SYd4K.css

@@ -0,0 +1,17 @@
+
+/*
+ * Unscoped: the element that has to be made transparent is reka's own
+ * positioning wrapper, which this component never renders and a scoped
+ * attribute therefore never reaches.
+ *
+ * In follow mode the tip is placed AT the cursor, so both the panel and that
+ * wrapper sit under the pointer. The panel alone being transparent was not
+ * enough — the wrapper still took the events, the trigger never received its
+ * pointerleave, and the tip stayed open: it lingered after the pointer left,
+ * a second chart could open its own on top, and a scroll left them stranded
+ * because the trigger had never been told the pointer had gone.
+ */
+:has(> [data-lp-follow]),
+[data-lp-follow] {
+  pointer-events: none;
+}

package/dist/assets/LpUptimeBar-B98o9krI.css

@@ -0,0 +1,18 @@
+
+/*
+ * The slot is the full share of the row; the mark inside it is narrowed to a
+ * FRACTION of that share, which is what produces the space between days.
+ * Because the inset scales with the slot, the mark-to-gap ratio holds at any
+ * width and any number of slices, and both round to device pixels together
+ * instead of drifting apart.
+ *
+ * A horizontal scale, not padding. Percentage padding resolves against the
+ * PARENT's width, never the element's own — so `padding-inline: 18%` on a slot
+ * of a 384px bar asked for 69px of padding on each side of a 3.2px slice. The
+ * marks collapsed to zero width and the bar vanished, while flex stretched the
+ * slots to fit the padding. `scale` is one of the few things that is genuinely
+ * relative to the box itself.
+ */
+.lp-uptime__mark {
+  scale: 0.64 1;
+}