@leavepulse/ui 0.29.1 → 0.29.2

package/dist/assets/{LpTable-DMOyAUOh.css → LpTable-ChxURw0m.css}

@@ -11,34 +11,35 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-7884aed8],
-.lp-row-leave-active[data-v-7884aed8] {
+.lp-row-enter-active[data-v-359c1c0d],
+.lp-row-leave-active[data-v-359c1c0d] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-7884aed8] {
+.lp-row-move[data-v-359c1c0d] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-7884aed8],
-.lp-row-leave-to[data-v-7884aed8] {
+.lp-row-enter-from[data-v-359c1c0d],
+.lp-row-leave-to[data-v-359c1c0d] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
-.lp-row-leave-active[data-v-7884aed8] {
-  position: absolute;
-  width: 100%;
-}
+
+/*
+ * The leaving row stays in the flow. Taking it out with `position: absolute` is
+ * the usual trick for a list, but a `<tr>` positioned that way loses the table's
+ * column grid and collapses to its content width — the row visibly breaks apart
+ * on its way out. The rows below close the gap through `lp-row-move` instead,
+ * which is a moment slower and stays a table the whole time.
+ */
 
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-7884aed8],
-  .lp-row-leave-active[data-v-7884aed8],
-  .lp-row-move[data-v-7884aed8] {
+.lp-row-enter-active[data-v-359c1c0d],
+  .lp-row-leave-active[data-v-359c1c0d],
+  .lp-row-move[data-v-359c1c0d] {
     transition: none;
 }
-.lp-row-leave-active[data-v-7884aed8] {
-    position: static;
-}
 }

package/dist/components/LpTable.vue.js

@@ -5,7 +5,7 @@ import { _ as _sfc_main$3 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-DMOyAUOh.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+import '../assets/LpTable-ChxURw0m.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {
   key: 0,
@@ -274,7 +274,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7884aed8"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-359c1c0d"]]);
 export {
   LpTable as default
 };

package/package.json

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

package/src/components/LpTable.vue

@@ -375,10 +375,13 @@ const barInsetTop = computed(() =>
   transform: translateX(-0.5rem);
 }
 
-.lp-row-leave-active {
-  position: absolute;
-  width: 100%;
-}
+/*
+ * The leaving row stays in the flow. Taking it out with `position: absolute` is
+ * the usual trick for a list, but a `<tr>` positioned that way loses the table's
+ * column grid and collapses to its content width — the row visibly breaks apart
+ * on its way out. The rows below close the gap through `lp-row-move` instead,
+ * which is a moment slower and stays a table the whole time.
+ */
 
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
@@ -388,9 +391,5 @@ const barInsetTop = computed(() =>
   .lp-row-move {
     transition: none;
   }
-
-  .lp-row-leave-active {
-    position: static;
-  }
 }
 </style>