@leavepulse/ui 0.93.0 → 0.93.2

package/dist/assets/{LpTable-gpdZSVMX.css → LpTable-DxnthVz4.css}

@@ -6,28 +6,28 @@
  * outside and only the dots between facts are seen. A cell whose slot drew
  * nothing (a v-if that failed, an empty value) is left out, dot and all.
  */
-.lp-line[data-v-5ac91b9e] {
+.lp-line[data-v-a346ca36] {
   --lp-line-sep: 1rem;
 }
-.lp-line-row[data-v-5ac91b9e] {
+.lp-line-row[data-v-a346ca36] {
   margin-left: calc(-1 * var(--lp-line-sep));
 }
 
 /* The dot lives in the field's own left padding, so whatever the cell draws,
    a word or a block of two lines, starts after it and never in the clipped
    strip. */
-.lp-line-field[data-v-5ac91b9e] {
+.lp-line-field[data-v-a346ca36] {
   position: relative;
   padding-left: var(--lp-line-sep);
 }
-.lp-line-field[data-v-5ac91b9e]::before {
+.lp-line-field[data-v-a346ca36]::before {
   content: "·" / "";
   position: absolute;
   left: 0;
   width: var(--lp-line-sep);
   text-align: center;
 }
-.lp-line-field[data-v-5ac91b9e]:has(> .lp-line-value:empty) {
+.lp-line-field[data-v-a346ca36]:has(> .lp-line-value:empty) {
   display: none;
 }
 
@@ -43,17 +43,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-5ac91b9e],
-.lp-row-leave-active[data-v-5ac91b9e] {
+.lp-row-enter-active[data-v-a346ca36],
+.lp-row-leave-active[data-v-a346ca36] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-5ac91b9e] {
+.lp-row-move[data-v-a346ca36] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-5ac91b9e],
-.lp-row-leave-to[data-v-5ac91b9e] {
+.lp-row-enter-from[data-v-a346ca36],
+.lp-row-leave-to[data-v-a346ca36] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -67,7 +67,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-5ac91b9e] {
+.lp-row-empty.lp-row-leave-active[data-v-a346ca36] {
   display: none;
 }
 
@@ -86,7 +86,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-5ac91b9e] {
+.lp-tick[data-v-a346ca36] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -98,17 +98,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-5ac91b9e] {
+.lp-tick-open[data-v-a346ca36] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-5ac91b9e],
-.lp-tick-cue[data-v-5ac91b9e] {
+.lp-tick-hidden[data-v-a346ca36],
+.lp-tick-cue[data-v-a346ca36] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-5ac91b9e],
-.lp-tick-cue[data-v-5ac91b9e]:focus-within {
+tr:hover .lp-tick-cue[data-v-a346ca36],
+.lp-tick-cue[data-v-a346ca36]:focus-within {
   opacity: 1;
 }
 
@@ -116,15 +116,15 @@ tr:hover .lp-tick-cue[data-v-5ac91b9e],
    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-5ac91b9e] {
+tr:hover .lp-tick-cue[data-v-a346ca36] {
     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-5ac91b9e],
-  .lp-tick-cue[data-v-5ac91b9e] {
+.lp-tick-hidden[data-v-a346ca36],
+  .lp-tick-cue[data-v-a346ca36] {
     max-width: 0;
     padding-inline: 0;
 }
@@ -134,7 +134,7 @@ tr:hover .lp-tick-cue[data-v-5ac91b9e] {
  * A list line's tick opens from nothing, as the table's column does, so lines
  * do not carry an empty gap until selection starts.
  */
-.lp-tick-line[data-v-5ac91b9e] {
+.lp-tick-line[data-v-a346ca36] {
   max-width: 2rem;
   opacity: 1;
 }
@@ -144,28 +144,28 @@ tr:hover .lp-tick-cue[data-v-5ac91b9e] {
  * open; a cue shows it only while
  * the card is pointed at or holds focus, the same rule as a row's.
  */
-.lp-tick-card[data-v-5ac91b9e] {
+.lp-tick-card[data-v-a346ca36] {
   max-width: none;
   padding-inline: 0;
   opacity: 1;
 }
-.lp-tick[data-cue][data-v-5ac91b9e] {
+.lp-tick[data-cue][data-v-a346ca36] {
   opacity: 0;
 }
-.lp-item:hover .lp-tick[data-cue][data-v-5ac91b9e],
-.lp-tick[data-cue][data-v-5ac91b9e]:focus-within {
+.lp-item:hover .lp-tick[data-cue][data-v-a346ca36],
+.lp-tick[data-cue][data-v-a346ca36]:focus-within {
   opacity: 1;
 }
 @media (hover: none) {
-.lp-item:hover .lp-tick[data-cue][data-v-5ac91b9e] {
+.lp-item:hover .lp-tick[data-cue][data-v-a346ca36] {
     opacity: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-5ac91b9e],
-  .lp-row-leave-active[data-v-5ac91b9e],
-  .lp-row-move[data-v-5ac91b9e],
-  .lp-tick[data-v-5ac91b9e] {
+.lp-row-enter-active[data-v-a346ca36],
+  .lp-row-leave-active[data-v-a346ca36],
+  .lp-row-move[data-v-a346ca36],
+  .lp-tick[data-v-a346ca36] {
     transition: none;
 }
 }

package/dist/components/LpTable.vue.js

@@ -34,7 +34,7 @@ import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-gpdZSVMX.css';const _hoisted_1 = {
+import '../assets/LpTable-DxnthVz4.css';const _hoisted_1 = {
   key: 0,
   class: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2 pb-3 text-xs"
 };
@@ -141,6 +141,7 @@ const _hoisted_48 = {
   class: "lp-line-label"
 };
 const _hoisted_49 = { class: "lp-line-value" };
+const _hoisted_50 = ["aria-expanded", "aria-label", "onClick"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -232,7 +233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         noMatches: "No rows match the filters",
         resetFilters: "Reset filters",
         rowCount: "{shown} of {total}",
-        rowsTotal: "{total} rows",
+        rowsTotal: "Rows: {total}",
         selectedCount: "{count} selected",
         clearSelection: "Clear selection",
         pageSelected: "All {count} on this page are selected.",
@@ -1873,7 +1874,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ])
                               ])) : createCommentVNode("", true)
                             ], true)
-                          ]))
+                          ])),
+                          expansionOn.value && canExpand(entry.row) ? (openBlock(), createElementBlock("button", {
+                            key: 3,
+                            type: "button",
+                            class: normalizeClass(["inline-grid size-6 shrink-0 place-items-center rounded-small text-muted outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", activeLayout.value === "cards" ? "absolute right-2 bottom-2" : ""]),
+                            "aria-expanded": expandedKeys.value.has(keyFor(entry.row, entry.index)),
+                            "aria-label": expandedKeys.value.has(keyFor(entry.row, entry.index)) ? text.value.collapseRow : text.value.expandRow,
+                            onClick: withModifiers(($event) => toggleExpanded(keyFor(entry.row, entry.index)), ["stop"]),
+                            onPointerdown: _cache[10] || (_cache[10] = withModifiers(() => {
+                            }, ["stop"]))
+                          }, [
+                            createVNode(_sfc_main$5, {
+                              name: "lucide:chevron-right",
+                              size: 14,
+                              class: normalizeClass(["transition-transform duration-fast motion-reduce:transition-none", expandedKeys.value.has(keyFor(entry.row, entry.index)) ? "rotate-90" : ""])
+                            }, null, 8, ["class"])
+                          ], 42, _hoisted_50)) : createCommentVNode("", true)
                         ], 16, _hoisted_35))
                       ], 64);
                     }), 128))
@@ -1889,7 +1906,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           page: page.value,
-          "onUpdate:page": _cache[10] || (_cache[10] = ($event) => page.value = $event),
+          "onUpdate:page": _cache[11] || (_cache[11] = ($event) => page.value = $event),
           total: total.value,
           "page-size": __props.pageSize,
           disabled: busy.value
@@ -1898,7 +1915,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ac91b9e"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a346ca36"]]);
 export {
   LpTable as default
 };

package/dist/components/chart.d.ts

@@ -75,9 +75,9 @@ export interface ChartAnnotation {
 }
 /**
  * Which x labels to print with every `stride`-th one shown. The last point is
- * always labelled (it is usually "now"), and when it lands within half a
- * stride to the previous shown label that one gives way: "20 22 23" read as
- * one smudge at the end of an hourly axis.
+ * always labelled (it is usually "now"), and when it lands closer than a
+ * full stride to the previous shown label that one gives way: "20 22 23" read
+ * as one smudge at the end of an hourly axis.
  */
 export declare function xLabelIndices(count: number, stride: number): number[];
 /** The x index a marker points at, or -1 when it names nothing on the axis. */

package/dist/components/chart.js

@@ -7,7 +7,7 @@ function xLabelIndices(count, stride) {
   for (let i = 0; i < count; i += step) out.push(i);
   const last = count - 1;
   if (out[out.length - 1] !== last) {
-    if (out.length > 1 && last - out[out.length - 1] <= step / 2) out.pop();
+    if (out.length > 1 && last - out[out.length - 1] < step) out.pop();
     out.push(last);
   }
   return out;

package/package.json

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

package/src/components/LpTable.vue

@@ -523,7 +523,7 @@ const labelSet = useLabels<TableLabels>(
     noMatches: "No rows match the filters",
     resetFilters: "Reset filters",
     rowCount: "{shown} of {total}",
-    rowsTotal: "{total} rows",
+    rowsTotal: "Rows: {total}",
     selectedCount: "{count} selected",
     clearSelection: "Clear selection",
     pageSelected: "All {count} on this page are selected.",
@@ -2413,6 +2413,20 @@ usePaletteCommands(() => {
               </div>
             </slot>
           </div>
+          <!-- The table's chevron, in a line and a card too: without it an
+               expandable row drew its detail panel but nothing opened it. -->
+          <button
+            v-if="expansionOn && canExpand(entry.row)"
+            type="button"
+            class="inline-grid size-6 shrink-0 place-items-center rounded-small text-muted outline-none transition-colors duration-fast hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            :class="activeLayout === 'cards' ? 'absolute right-2 bottom-2' : ''"
+            :aria-expanded="expandedKeys.has(keyFor(entry.row, entry.index))"
+            :aria-label="expandedKeys.has(keyFor(entry.row, entry.index)) ? text.collapseRow : text.expandRow"
+            @click.stop="toggleExpanded(keyFor(entry.row, entry.index))"
+            @pointerdown.stop
+          >
+            <LpIcon name="lucide:chevron-right" :size="14" class="transition-transform duration-fast motion-reduce:transition-none" :class="expandedKeys.has(keyFor(entry.row, entry.index)) ? 'rotate-90' : ''" />
+          </button>
         </div>
       </template>
     </TransitionGroup>

package/src/components/chart.ts

@@ -91,9 +91,9 @@ export interface ChartAnnotation {
 
 /**
  * Which x labels to print with every `stride`-th one shown. The last point is
- * always labelled (it is usually "now"), and when it lands within half a
- * stride to the previous shown label that one gives way: "20 22 23" read as
- * one smudge at the end of an hourly axis.
+ * always labelled (it is usually "now"), and when it lands closer than a
+ * full stride to the previous shown label that one gives way: "20 22 23" read
+ * as one smudge at the end of an hourly axis.
  */
 export function xLabelIndices(count: number, stride: number): number[] {
   if (count <= 0) return []
@@ -102,7 +102,10 @@ export function xLabelIndices(count: number, stride: number): number[] {
   for (let i = 0; i < count; i += step) out.push(i)
   const last = count - 1
   if (out[out.length - 1] !== last) {
-    if (out.length > 1 && last - out[out.length - 1] <= step / 2) out.pop()
+    // The stride is the spacing at which labels fit, so a last label closer
+    // than a full step to the one before would print over it ("10:03 PM10:09
+    // PM"): the earlier one gives way.
+    if (out.length > 1 && last - out[out.length - 1] < step) out.pop()
     out.push(last)
   }
   return out