@leavepulse/ui 0.68.0 → 0.70.0

package/README.md

@@ -183,3 +183,40 @@ bun run dev:dist     # rebuild dist on change (for a linked consumer)
 `dist/` is generated, not committed. Releases: `npm run release` (or
 `release:minor`) bumps the version and pushes the tag; CI tests, builds and
 publishes it.
+
+### Repeatable form rows
+
+`LpRepeater` supplies add/remove controls and stable row identity. Its slot owns
+the fields and validation; internal keys never become part of the saved model.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import { LpInput, LpRepeater } from "@leavepulse/ui"
+
+const volumes = ref([{ name: "data", mount: "/var/lib/app" }])
+const emptyVolume = () => ({ name: "", mount: "" })
+</script>
+
+<template>
+  <LpRepeater v-model="volumes" :create-item="emptyVolume" label="Volumes">
+    <template #default="{ item, disabled }">
+      <div class="flex gap-2">
+        <LpInput v-model="item.name" label="Name" :disabled="disabled" />
+        <LpInput v-model="item.mount" label="Mount path" :disabled="disabled" />
+      </div>
+    </template>
+  </LpRepeater>
+</template>
+```
+
+For immutable reloads, pass `item-key="id"` (or a function returning a unique
+string/number). Without a business key, rows retain identity while the same
+objects are edited, reordered or removed. The slot also provides `index`,
+`update(nextItem)` for immutable edits and `remove()`. `labels` overrides
+`add`, `remove` (`{index}` is one-based) and `empty`; app-wide labels use the
+`repeater` scope. The `empty` slot replaces the empty-list text.
+
+`LpInput clearable` adds a clear button that keeps focus in the input, respects
+disabled/read-only state, and can be combined with the `trailing` slot. Its
+button text comes from `labels.clear` or the app-wide `input` label scope.

package/dist/assets/LoaderMark-DxBV2iDJ.css

@@ -0,0 +1,43 @@
+
+/*
+ * Unscoped, namespaced under lp-loader: the keyframes are named in the
+ * elements' own `animation`, which a scoped stylesheet would rename.
+ */
+.lp-loader-spin {
+  animation: lp-loader-spin 0.8s linear infinite;
+}
+@keyframes lp-loader-spin {
+to { transform: rotate(360deg);
+}
+}
+
+/* Each dot swells and brightens in turn: a wave that reads as "still going". */
+.lp-loader-dot {
+  animation: lp-loader-dot 0.96s var(--ease-emphasized, ease-in-out) infinite both;
+}
+@keyframes lp-loader-dot {
+0%, 80%, 100% { transform: scale(0.6); opacity: 0.35;
+}
+40% { transform: scale(1); opacity: 1;
+}
+}
+
+/* The bar's run is the kit's sweep (.lp-sweep in tokens.css), the same one
+   LpActivityLine draws: it enters past one edge and leaves past the other,
+   so the bar never sits still and never looks full. */
+@media (prefers-reduced-motion: reduce) {
+.lp-loader-spin,
+  .lp-loader-dot,
+  .lp-loader-bar {
+    animation: lp-loader-breathe 1.6s ease-in-out infinite;
+    transform: none;
+}
+.lp-loader-dot { opacity: 1;
+}
+@keyframes lp-loader-breathe {
+0%, 100% { opacity: 1;
+}
+50% { opacity: 0.4;
+}
+}
+}

package/dist/assets/LpActivityLine-B3EwNQEB.css

@@ -0,0 +1,33 @@
+
+/*
+ * Unscoped and namespaced, like the other kit animations: the keyframes are
+ * shared by every line on the page. The sweep's travel is the kit's own
+ * (.lp-sweep in tokens.css); this paints it, soft at both ends.
+ */
+.lp-activity-sweep {
+  background: linear-gradient(90deg, transparent, var(--lp-al-color) 35%, var(--lp-al-color) 65%, transparent);
+}
+.lp-activity-shimmer {
+  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-surface) 45%, transparent), transparent);
+  background-size: 40% 100%;
+  background-repeat: no-repeat;
+  animation: lp-activity-shimmer 1.6s linear infinite;
+}
+@keyframes lp-activity-shimmer {
+0% {
+    background-position: -40% 0;
+}
+100% {
+    background-position: 140% 0;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+  /* The sweep lies still across the line (tokens.css); a solid tint rather than its soft ends. */
+.lp-activity-sweep {
+    background: var(--lp-al-color);
+}
+.lp-activity-shimmer {
+    animation: none;
+    display: none;
+}
+}

package/dist/assets/{LpCommandPalette-DxyjhYn_.css → LpCommandPalette-u-zOxKWa.css}

@@ -5,81 +5,71 @@
  * pane from its right edge as it grows. Animating the columns themselves made
  * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-dialog[data-v-945452ec] {
+.lp-cmd-dialog[data-v-9c48e89a] {
   --lp-cmd-list: min(92vw, 40rem);
   --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
   width: var(--lp-cmd-list);
 }
-.lp-cmd-split[data-v-945452ec] {
+.lp-cmd-split[data-v-9c48e89a] {
   transition:
     width 300ms var(--ease-emphasized, ease),
     min-height 300ms var(--ease-emphasized, ease);
 }
 @media (min-width: 768px) {
-.lp-cmd-split .lp-cmd-list[data-v-945452ec] {
+.lp-cmd-split .lp-cmd-list[data-v-9c48e89a] {
     flex: 0 0 auto;
     /* the dialog's 1px border on each side */
     width: calc(var(--lp-cmd-list) - 2px);
 }
-.lp-cmd-dialog[data-pane="open"][data-v-945452ec] {
+.lp-cmd-dialog[data-pane="open"][data-v-9c48e89a] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-945452ec] {
+.lp-cmd-pane[data-v-9c48e89a] {
   width: var(--lp-cmd-pane);
 }
 /*
  * The pane rides in from the right edge while the dialog opens up to it, and
  * leaves the same way, for as long as the dialog takes to close over it.
  */
-.lp-cmd-pane-enter-active[data-v-945452ec],
-.lp-cmd-pane-leave-active[data-v-945452ec] {
+.lp-cmd-pane-enter-active[data-v-9c48e89a],
+.lp-cmd-pane-leave-active[data-v-9c48e89a] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-945452ec],
-.lp-cmd-pane-leave-to[data-v-945452ec] {
+.lp-cmd-pane-enter-from[data-v-9c48e89a],
+.lp-cmd-pane-leave-to[data-v-9c48e89a] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-945452ec] {
-  animation: lp-cmd-para-in-945452ec 260ms ease-out both;
-}
-@keyframes lp-cmd-para-in-945452ec {
-from {
-    opacity: 0;
-    transform: translateY(4px);
-}
+.lp-cmd-para[data-v-9c48e89a] {
+  --rise: 4px;
+  animation: rise-in 260ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-945452ec],
-  .lp-cmd-pane-enter-active[data-v-945452ec],
-  .lp-cmd-pane-leave-active[data-v-945452ec] {
+.lp-cmd-split[data-v-9c48e89a],
+  .lp-cmd-pane-enter-active[data-v-9c48e89a],
+  .lp-cmd-pane-leave-active[data-v-9c48e89a] {
     transition: none;
 }
-.lp-cmd-para[data-v-945452ec] {
+.lp-cmd-para[data-v-9c48e89a] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-945452ec] {
+.lp-cmd-excerpt[data-v-9c48e89a] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-945452ec] {
-  animation: lp-cmd-in-945452ec 140ms ease-out both;
-}
-@keyframes lp-cmd-in-945452ec {
-from {
-    opacity: 0;
-    transform: translateY(3px);
-}
+.lp-cmd-item[data-v-9c48e89a] {
+  --rise: 3px;
+  animation: rise-in 140ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-945452ec] {
+.lp-cmd-item[data-v-9c48e89a] {
     animation: none;
 }
 }

package/dist/assets/LpDock-Cbh0wQUv.css

@@ -0,0 +1,17 @@
+
+/* The bar keeps its rest thickness while icons swell: they grow out of it
+   (upward, or to the right when vertical) instead of pushing the bar, and
+   with it whatever sits next to the bar, around on every pointer move. */
+[data-orientation="horizontal"][data-v-0f41b35e] {
+  height: calc(var(--lp-dock-rest) + 0.75rem + 2px);
+}
+[data-orientation="vertical"][data-v-0f41b35e] {
+  width: calc(var(--lp-dock-rest) + 0.75rem + 2px);
+}
+
+/* Size is a custom property the spring writes per frame; the rest size is the
+   fallback so the first paint (and touch, and reduced motion) needs no script. */
+.lp-dock-item[data-v-0f41b35e] {
+  width: var(--lp-dock-size, var(--lp-dock-rest));
+  height: var(--lp-dock-size, var(--lp-dock-rest));
+}

package/dist/assets/{LpDropzone-Qb8k7cg4.css → LpDropzone-Bb1vBTeU.css}

@@ -1,9 +1,9 @@
 
-.lp-dropzone__frame rect[data-v-ece70987] {
+.lp-dropzone__frame rect[data-v-46c9a55a] {
   stroke: var(--color-line);
   transition: stroke var(--duration-fast) linear;
 }
-.lp-dropzone:hover .lp-dropzone__frame rect[data-v-ece70987] {
+.lp-dropzone:hover .lp-dropzone__frame rect[data-v-46c9a55a] {
   stroke: var(--color-line-strong);
 }
 
@@ -12,33 +12,28 @@
    with every other thing on it; under a drag it is the answer to "can I let go
    here". One dash period per cycle, so the travel is continuous rather than
    jumping back at the seam. */
-.lp-dropzone--over .lp-dropzone__frame rect[data-v-ece70987] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-46c9a55a] {
   stroke: var(--color-brand);
-  animation: lp-dropzone-ants-ece70987 500ms linear infinite;
+  animation: lp-dropzone-ants-46c9a55a 500ms linear infinite;
 }
-@keyframes lp-dropzone-ants-ece70987 {
+@keyframes lp-dropzone-ants-46c9a55a {
 to {
     stroke-dashoffset: -11;
 }
 }
 
 /* The dashes fade in and the block settles up a few pixels. */
-.lp-dropzone[data-v-ece70987] {
-  animation: lp-dropzone-in-ece70987 var(--duration-slow) var(--ease-settle) both;
+.lp-dropzone[data-v-46c9a55a] {
+  --rise: 6px;
+  animation: rise-in var(--duration-slow) var(--ease-settle) both;
 }
-.lp-dropzone--waiting[data-v-ece70987] {
+.lp-dropzone--waiting[data-v-46c9a55a] {
   opacity: 0;
   animation: none;
 }
-@keyframes lp-dropzone-in-ece70987 {
-from {
-    opacity: 0;
-    transform: translateY(6px);
-}
-}
 @media (prefers-reduced-motion: reduce) {
-.lp-dropzone[data-v-ece70987],
-  .lp-dropzone--waiting[data-v-ece70987] {
+.lp-dropzone[data-v-46c9a55a],
+  .lp-dropzone--waiting[data-v-46c9a55a] {
     opacity: 1;
     transform: none;
     animation: none;
@@ -46,7 +41,7 @@ from {
 
   /* The ants stop, the colour stays: the brand stroke is what says "drop
      here", and it says it standing still. */
-.lp-dropzone--over .lp-dropzone__frame rect[data-v-ece70987] {
+.lp-dropzone--over .lp-dropzone__frame rect[data-v-46c9a55a] {
     animation: none;
 }
 }

package/dist/assets/{LpImageEditor-CElPDzpF.css → LpImageEditor-XM5bAziW.css}

@@ -2,22 +2,22 @@
 /* The picture settles into the frame instead of appearing in it. Scale rather
    than a slide: the frame is the fixed thing here and the image lives inside
    it, so anything that moved would read as a crop that had shifted. */
-.lp-editor__image[data-v-ed30e8ba] {
-  animation: lp-editor-in-ed30e8ba var(--duration-slow) var(--ease-settle) both;
+.lp-editor__image[data-v-7eb4ac08] {
+  animation: lp-editor-in-7eb4ac08 var(--duration-slow) var(--ease-settle) both;
 }
-.lp-editor__image--waiting[data-v-ed30e8ba] {
+.lp-editor__image--waiting[data-v-7eb4ac08] {
   opacity: 0;
   animation: none;
 }
-@keyframes lp-editor-in-ed30e8ba {
+@keyframes lp-editor-in-7eb4ac08 {
 from {
     opacity: 0;
     scale: 1.04;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-editor__image[data-v-ed30e8ba],
-  .lp-editor__image--waiting[data-v-ed30e8ba] {
+.lp-editor__image[data-v-7eb4ac08],
+  .lp-editor__image--waiting[data-v-7eb4ac08] {
     opacity: 1;
     scale: 1;
     animation: none;

package/dist/assets/LpLogViewer-BDNW6P52.css

@@ -0,0 +1,38 @@
+
+/*
+ * Unscoped and namespaced, like LpRollingText: Vue applies these to the row
+ * while it leaves, and an unlayered rule is also what lets them outrank the
+ * row's own `transition-colors` utility (see `transitionProps`).
+ */
+/* Rises into place from just below, the direction a tail grows in (the kit's rise-in). */
+.lp-log-row-enter-active,
+.lp-log-row-fresh {
+  --rise: 6px;
+  animation: rise-in var(--duration-medium) var(--ease-emphasized);
+}
+.lp-log-row-leave-active {
+  overflow: hidden;
+  animation: lp-log-row-out var(--duration-medium) var(--ease-emphasized) forwards;
+}
+.lp-log-row-move {
+  transition: transform var(--duration-medium) var(--ease-emphasized);
+}
+@keyframes lp-log-row-out {
+from {
+    height: var(--lp-log-row-h, 1.25rem);
+}
+to {
+    height: 0;
+    opacity: 0;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-log-row-enter-active,
+  .lp-log-row-fresh,
+  .lp-log-row-leave-active {
+    animation: none;
+}
+.lp-log-row-move {
+    transition: none;
+}
+}

package/dist/assets/{LpPalettePreview-CJmAKgYW.css → LpPalettePreview-B9VKDrvA.css}

@@ -16,7 +16,8 @@
 }
 .lp-palette-preview > * {
   min-width: 0;
-  animation: lp-palette-in 260ms var(--ease-emphasized, ease-out) both;
+  --rise: 4px;
+  animation: rise-in 260ms var(--ease-emphasized, ease-out) both;
 }
 .lp-palette-preview > :nth-child(2) {
   animation-delay: 40ms;
@@ -30,12 +31,6 @@
 .lp-palette-preview > :nth-child(n + 5) {
   animation-delay: 160ms;
 }
-@keyframes lp-palette-in {
-from {
-    opacity: 0;
-    transform: translateY(4px);
-}
-}
 @media (prefers-reduced-motion: reduce) {
 .lp-palette-preview > * {
     animation: none;

package/dist/assets/LpShinyText-D69cBYDR.css

@@ -0,0 +1,61 @@
+
+.lp-shiny {
+  color: var(--lp-shiny-base);
+  background-repeat: repeat-x;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* Descenders and italics poke out of the content box; the clip follows the
+     background box, so give it room instead of cutting a tail off. */
+  padding-block: 0.08em;
+  animation: lp-shiny-move var(--lp-shiny-speed) linear infinite;
+}
+.lp-shiny--shine {
+  /* The band is a third of a 300% wide image; the image moves by its own
+     width, so the band crosses the text and then rests off to the side for
+     a while, which is what makes it an occasional glint and not a strobe. */
+  background-image: linear-gradient(
+    105deg,
+    var(--lp-shiny-base) 0%,
+    var(--lp-shiny-base) 40%,
+    var(--lp-shiny-sheen) 50%,
+    var(--lp-shiny-base) 60%,
+    var(--lp-shiny-base) 100%
+  );
+  background-size: 300% 100%;
+}
+.lp-shiny--gradient {
+  /* First and last stops match, so the repeat has no seam as it drifts. */
+  background-image: linear-gradient(
+    90deg,
+    var(--color-brand),
+    var(--color-accent),
+    var(--color-action),
+    var(--color-brand)
+  );
+  background-size: 200% 100%;
+}
+@keyframes lp-shiny-move {
+from {
+    background-position: 100% 0;
+}
+to {
+    background-position: -200% 0;
+}
+}
+.lp-shiny--gradient {
+  animation-name: lp-shiny-drift;
+}
+@keyframes lp-shiny-drift {
+from {
+    background-position: 0% 0;
+}
+to {
+    background-position: -200% 0;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-shiny {
+    animation: none;
+}
+}

package/dist/assets/LpStatus-430OGTZY.css

@@ -0,0 +1,17 @@
+
+/*
+ * Unscoped and namespaced, like LpSkeleton's pulse. The keyframe is the kit's
+ * halo (tokens.css): one animation name keeps every live light on a page
+ * breathing in phase, because CSS animations are timed against the document
+ * rather than against when each one mounted. A column of servers pulsing out
+ * of step reads as flicker. A small light swells to 2.6x, the halo's default.
+ */
+.lp-status-halo--on {
+  animation: lp-halo 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-status-halo--on {
+    animation: none;
+    opacity: 0;
+}
+}

package/dist/assets/LpStepMark-Drvx33Vg.css

@@ -0,0 +1,10 @@
+
+/* The kit's halo (tokens.css), swelling less: this ring already starts at the mark's own size. */
+.lp-step-halo {
+  --halo-scale: 1.6;
+  animation: lp-halo 1.6s var(--ease-emphasized, ease-out) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-step-halo { animation: none; opacity: 0;
+}
+}

package/dist/assets/{LpTable-BPERfJIk.css → LpTable-DHxEQ_-3.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-ea1300a4],
-.lp-row-leave-active[data-v-ea1300a4] {
+.lp-row-enter-active[data-v-18479205],
+.lp-row-leave-active[data-v-18479205] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-ea1300a4] {
+.lp-row-move[data-v-18479205] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-ea1300a4],
-.lp-row-leave-to[data-v-ea1300a4] {
+.lp-row-enter-from[data-v-18479205],
+.lp-row-leave-to[data-v-18479205] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-ea1300a4] {
+.lp-row-empty.lp-row-leave-active[data-v-18479205] {
   display: none;
 }
 
@@ -54,7 +54,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-ea1300a4] {
+.lp-tick[data-v-18479205] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -66,17 +66,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-ea1300a4] {
+.lp-tick-open[data-v-18479205] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-ea1300a4],
-.lp-tick-cue[data-v-ea1300a4] {
+.lp-tick-hidden[data-v-18479205],
+.lp-tick-cue[data-v-18479205] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-ea1300a4],
-.lp-tick-cue[data-v-ea1300a4]:focus-within {
+tr:hover .lp-tick-cue[data-v-18479205],
+.lp-tick-cue[data-v-18479205]:focus-within {
   opacity: 1;
 }
 
@@ -84,24 +84,24 @@ tr:hover .lp-tick-cue[data-v-ea1300a4],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-ea1300a4] {
+tr:hover .lp-tick-cue[data-v-18479205] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-ea1300a4],
-  .lp-tick-cue[data-v-ea1300a4] {
+.lp-tick-hidden[data-v-18479205],
+  .lp-tick-cue[data-v-18479205] {
     max-width: 0;
     padding-inline: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-ea1300a4],
-  .lp-row-leave-active[data-v-ea1300a4],
-  .lp-row-move[data-v-ea1300a4],
-  .lp-tick[data-v-ea1300a4] {
+.lp-row-enter-active[data-v-18479205],
+  .lp-row-leave-active[data-v-18479205],
+  .lp-row-move[data-v-18479205],
+  .lp-tick[data-v-18479205] {
     transition: none;
 }
 }

package/dist/assets/LpTabs-BJ-nrJuI.css

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

package/dist/assets/LpTextReveal-DjI1MsDS.css

@@ -0,0 +1,35 @@
+
+/* Unscoped and namespaced, like LpRollingText: the classes are toggled on
+   elements rendered inside a v-for of fragments. */
+.lp-reveal__part {
+  display: inline-block;
+}
+.lp-reveal--waiting .lp-reveal__part {
+  opacity: 0;
+}
+.lp-reveal__part--in {
+  animation: lp-reveal-in var(--lp-reveal-duration) var(--ease-emphasized) both;
+  animation-delay: calc(var(--lp-reveal-i, 0) * var(--lp-reveal-stagger));
+}
+.lp-reveal__part--out {
+  opacity: 0;
+  filter: blur(var(--lp-reveal-blur));
+  transition:
+    opacity var(--lp-reveal-leave) ease-in,
+    filter var(--lp-reveal-leave) ease-in;
+}
+@keyframes lp-reveal-in {
+from {
+    opacity: 0;
+    transform: translateY(var(--lp-reveal-rise));
+    filter: blur(var(--lp-reveal-blur));
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-reveal__part--in {
+    animation: none;
+}
+.lp-reveal__part--out {
+    transition: none;
+}
+}

package/dist/assets/LpTypewriter-CXAm9Nca.css

@@ -0,0 +1,27 @@
+
+.lp-typewriter__caret {
+  display: inline-block;
+  width: 0.08em;
+  min-width: 2px;
+  height: 1.05em;
+  margin-inline-start: 0.06em;
+  vertical-align: -0.15em;
+  border-radius: 1px;
+  background: var(--color-brand);
+}
+
+/* Solid while keys are moving, blinking while it waits: the same cue a real
+   text field gives about whether input is happening. */
+.lp-typewriter__caret--blink {
+  animation: lp-typewriter-blink 1.06s step-end infinite;
+}
+@keyframes lp-typewriter-blink {
+50% {
+    opacity: 0;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-typewriter__caret--blink {
+    animation: none;
+}
+}