@leavepulse/ui 0.80.1 → 0.81.0

package/dist/assets/{LpCommandPalette-C1LRFzbN.css → LpCommandPalette-DCZB4EAf.css}

@@ -5,34 +5,34 @@
  * 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-63099a19] {
+.lp-cmd-dialog[data-v-b72dc3e1] {
   --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-63099a19] {
+.lp-cmd-split[data-v-b72dc3e1] {
   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-63099a19] {
+.lp-cmd-split .lp-cmd-list[data-v-b72dc3e1] {
     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-63099a19] {
+.lp-cmd-dialog[data-pane="open"][data-v-b72dc3e1] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-63099a19] {
+.lp-cmd-pane[data-v-b72dc3e1] {
   width: var(--lp-cmd-pane);
 }
-.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-63099a19] {
+.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-b72dc3e1] {
   width: 100%;
 }
-.lp-cmd-dialog[data-editing][data-v-63099a19] {
+.lp-cmd-dialog[data-editing][data-v-b72dc3e1] {
   width: var(--lp-cmd-list);
   min-height: 0;
 }
@@ -40,43 +40,43 @@
  * 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-63099a19],
-.lp-cmd-pane-leave-active[data-v-63099a19] {
+.lp-cmd-pane-enter-active[data-v-b72dc3e1],
+.lp-cmd-pane-leave-active[data-v-b72dc3e1] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-63099a19],
-.lp-cmd-pane-leave-to[data-v-63099a19] {
+.lp-cmd-pane-enter-from[data-v-b72dc3e1],
+.lp-cmd-pane-leave-to[data-v-b72dc3e1] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-63099a19] {
+.lp-cmd-para[data-v-b72dc3e1] {
   --rise: 4px;
   animation: rise-in 260ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-63099a19],
-  .lp-cmd-pane-enter-active[data-v-63099a19],
-  .lp-cmd-pane-leave-active[data-v-63099a19] {
+.lp-cmd-split[data-v-b72dc3e1],
+  .lp-cmd-pane-enter-active[data-v-b72dc3e1],
+  .lp-cmd-pane-leave-active[data-v-b72dc3e1] {
     transition: none;
 }
-.lp-cmd-para[data-v-63099a19] {
+.lp-cmd-para[data-v-b72dc3e1] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-63099a19] {
+.lp-cmd-excerpt[data-v-b72dc3e1] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-63099a19] {
+.lp-cmd-item[data-v-b72dc3e1] {
   --rise: 3px;
   animation: rise-in 140ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-63099a19] {
+.lp-cmd-item[data-v-b72dc3e1] {
     animation: none;
 }
 }

package/dist/chunks/{LpAppShell-InIK01Nn.js → LpAppShell-BBINfN1v.js}

@@ -10,7 +10,7 @@ import { _ as _sfc_main$9 } from "./LpBottomNav-4I89sPDZ.js";
 import { _ as _sfc_main$2 } from "./LpContextSwitcher-CGr6ZAuq.js";
 import { _ as _sfc_main$3 } from "./LpButton-DSHioIfD.js";
 import { _ as _sfc_main$4 } from "./LpIcon-BCQLuHSP.js";
-import { _ as _sfc_main$8 } from "./LpPageScrollbar-D2O0xhJw.js";
+import { _ as _sfc_main$8 } from "./LpPageScrollbar-C9sTeU-2.js";
 import { _ as _sfc_main$7 } from "./LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$5 } from "./LpShift-DAgS_d2x.js";
 import { _ as _sfc_main$1 } from "./LpSidebar-D3S8rYFf.js";

package/dist/chunks/{LpPageScrollbar-D2O0xhJw.js → LpPageScrollbar-C9sTeU-2.js}

@@ -29,13 +29,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function scroller() {
       return doc?.scrollingElement ?? null;
     }
-    function nativeBarWidth(d) {
-      const probe = d.createElement("div");
-      probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll";
-      d.body.append(probe);
-      const width = probe.offsetWidth - probe.clientWidth;
-      probe.remove();
-      return width;
+    function finePointer(d) {
+      return nodeWindow(d).matchMedia?.("(pointer: fine)").matches ?? false;
     }
     function measure() {
       frame = 0;
@@ -107,7 +102,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       const host = barEl.value ?? void 0;
       doc = host?.ownerDocument;
-      if (!doc || nativeBarWidth(doc) === 0) return;
+      if (!doc || !finePointer(doc)) return;
       active.value = true;
       releaseNative = hideNativeBar(doc);
       const win = nodeWindow(doc);

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-InIK01Nn.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-BBINfN1v.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCommandPalette.vue.js

@@ -26,7 +26,7 @@ import { parsePaletteQuery, parseCommandQuery, searchCommandItems, applyQueryFil
 import { PALETTE_MODES, modeChipLabel, settleFetched, fallbackRows, readRecent, resolveRecentItems, recentVisible, commandHasPreview, matchModePrefix, isSafeHref, absoluteHref, commandKey, recentKey, pushRecent, moreRowId, toRecentItem } from "./commandPalette.js";
 import { useView, usePortalTarget, useOutsideGuard, viewWindow } from "../composables/useView.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-C1LRFzbN.css';const _hoisted_1 = { class: "relative flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-DCZB4EAf.css';const _hoisted_1 = { class: "relative flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder", "onKeydown"];
 const _hoisted_4 = { class: "shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted" };
@@ -1091,6 +1091,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   type: linkOf(c) ? void 0 : "button",
                                   role: "option",
                                   tabindex: "-1",
+                                  "aria-label": c.description ? `${c.label} ${c.description}` : c.label,
                                   "aria-selected": flatIndexOf(c) === selectedIndex.value,
                                   "aria-disabled": c.disabled || void 0,
                                   "data-cmd-index": flatIndexOf(c),
@@ -1169,7 +1170,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     })) : createCommentVNode("", true)
                                   ]),
                                   _: 2
-                                }, 1064, ["id", "href", "type", "aria-selected", "aria-disabled", "data-cmd-index", "disabled", "class", "onClick", "onPointerenter"]);
+                                }, 1064, ["id", "href", "type", "aria-label", "aria-selected", "aria-disabled", "data-cmd-index", "disabled", "class", "onClick", "onPointerenter"]);
                               }), 128))
                             ], 8, _hoisted_12);
                           }), 128))
@@ -1363,7 +1364,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63099a19"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b72dc3e1"]]);
 export {
   LpCommandPalette as default
 };

package/dist/components/LpPageScrollbar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPageScrollbar-D2O0xhJw.js";
+import { _ as _sfc_main } from "../chunks/LpPageScrollbar-C9sTeU-2.js";
 export {
   _sfc_main as default
 };

package/dist/composables/overlayHistory.js

@@ -205,7 +205,7 @@ function install() {
   window.addEventListener("popstate", afterPop);
   const push = history.pushState.bind(history);
   const replace = history.replaceState.bind(history);
-  history.pushState = function(data, unused, url) {
+  const pushed = (data, unused, url) => {
     const before = location.href;
     push(data, unused, url);
     s.href = location.href;
@@ -214,12 +214,26 @@ function install() {
     if (pathOf(before) !== pathOf(location.href)) leavePage();
     mute();
   };
-  history.replaceState = function(data, unused, url) {
+  const replaced = (data, unused, url) => {
     const mark = s.internal ? null : current();
     const keep = mark && data && typeof data === "object" && !markOf(data) ? { ...data, [KEY]: mark } : data;
     replace(keep, unused, url);
     s.href = location.href;
   };
+  history.pushState = function(data, unused, url) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => pushed(unmarked(data), unused, url));
+    else pushed(data, unused, url);
+  };
+  history.replaceState = function(data, unused, url) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => replaced(unmarked(data), unused, url));
+    else replaced(data, unused, url);
+  };
+}
+function unmarked(data) {
+  if (!markOf(data)) return data;
+  const copy = { ...data };
+  delete copy[KEY];
+  return copy;
 }
 function pushEntry(entry) {
   if (typeof window === "undefined") return;

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-DW2EnrCJ.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-C7g52Cyo.js";
 import { _ as _5 } from "./chunks/LpAlert-DWFeR82L.js";
-import { _ as _6 } from "./chunks/LpAppShell-InIK01Nn.js";
+import { _ as _6 } from "./chunks/LpAppShell-BBINfN1v.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DY3LvpB9.js";
 import { _ as _8 } from "./chunks/LpAvatar-CEZmMcGh.js";
 import { _ as _9 } from "./chunks/LpBadge-C_VqLHtg.js";
@@ -83,7 +83,7 @@ import { _ as _54 } from "./chunks/LpRadio-CWA5Eb3M.js";
 import { _ as _55 } from "./chunks/LpRadioGroup-E3SP6j9h.js";
 import { _ as _56 } from "./chunks/LpRollingText-B54Pje7P.js";
 import { _ as _57 } from "./chunks/LpScrollArea-CqvwfZs2.js";
-import { _ as _58 } from "./chunks/LpPageScrollbar-D2O0xhJw.js";
+import { _ as _58 } from "./chunks/LpPageScrollbar-C9sTeU-2.js";
 import { _ as _59 } from "./chunks/LpSegmented-DjvrHL_G.js";
 import { _ as _60 } from "./chunks/LpSection-CghNNxIv.js";
 import { _ as _61 } from "./chunks/LpSelect-DYPimzAZ.js";

package/package.json

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

package/src/components/LpCommandPalette.vue

@@ -1696,6 +1696,7 @@ const guardOutside = useOutsideGuard()
                   :type="linkOf(c) ? undefined : 'button'"
                   role="option"
                   tabindex="-1"
+                  :aria-label="c.description ? `${c.label} ${c.description}` : c.label"
                   :aria-selected="flatIndexOf(c) === selectedIndex"
                   :aria-disabled="c.disabled || undefined"
                   :data-cmd-index="flatIndexOf(c)"
@@ -1713,6 +1714,10 @@ const guardOutside = useOutsideGuard()
                   @pointerenter="onPointerEnter(c)"
                   @pointerleave="onPointerLeave"
                 >
+                  <!-- Named from label and description, not from content: split
+                       into <mark> parts, a row's text was not always read as its
+                       name (BotEco's palette showed nameless options), and the
+                       shortcut or prefix kbd is not part of what the row is. -->
                   <!-- A picture takes the icon's slot at the icon's footprint, with
                        a negative margin so a 20px avatar does not make its row
                        taller than its neighbours. -->

package/src/components/LpPageScrollbar.vue

@@ -13,8 +13,10 @@
  * (the bar is not printed, and at rest it is not drawn). What the kit adds is
  * the drawing, a thumb that drags, and a press beside it that pages.
  *
- * Where the browser's bars already float over the content (phones, macOS set
- * to show them while scrolling) it draws nothing and leaves the browser's.
+ * With a mouse or touchpad it draws the bar, also where the browser's bars
+ * float over the content (macOS, GTK on Linux, Windows 11's overlay setting).
+ * With a finger as the main pointer (phones, tablets) it draws nothing and
+ * leaves the browser's.
  *
  * `top` and `bottom` keep the bar clear of what covers the window's edges: a
  * sticky header, a bottom bar. Any CSS length, a variable included, and a
@@ -51,14 +53,14 @@ function scroller(): HTMLElement | null {
   return (doc?.scrollingElement as HTMLElement | null) ?? null
 }
 
-/* The width the browser's bar takes from the layout: 0 where it floats over the content. */
-function nativeBarWidth(d: Document): number {
-  const probe = d.createElement("div")
-  probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll"
-  d.body.append(probe)
-  const width = probe.offsetWidth - probe.clientWidth
-  probe.remove()
-  return width
+/*
+ * Decided by the input, not by the browser's bar: desktop bars float over the
+ * content too (GTK's overlay bars on Linux, Windows 11's setting), and there the
+ * kit's bar is wanted beside the rest of the kit. A finger has no use for a thumb
+ * to drag, so a touch screen keeps the browser's.
+ */
+function finePointer(d: Document): boolean {
+  return nodeWindow(d).matchMedia?.("(pointer: fine)").matches ?? false
 }
 
 function measure() {
@@ -138,7 +140,7 @@ function onThumbPointerDown(event: PointerEvent) {
 onMounted(() => {
   const host = barEl.value ?? undefined
   doc = host?.ownerDocument
-  if (!doc || nativeBarWidth(doc) === 0) return
+  if (!doc || !finePointer(doc)) return
   active.value = true
   releaseNative = hideNativeBar(doc)
   const win = nodeWindow(doc)

package/src/composables/overlayHistory.ts

@@ -31,6 +31,10 @@
  *    entries keep working once Back returns past it.
  *  - Someone else's `replaceState` on a kit entry keeps the kit's key, so a
  *    router saving its scroll position does not orphan the entry.
+ *  - Someone else's `pushState` or `replaceState` while a step the kit started
+ *    is on its way (closing an overlay and following a link in it in one tick)
+ *    is held until the step lands, then applied there: the address changes a
+ *    traversal later than the router's own route does.
  *  - An app that keeps an overlay in its query through `replace` rewrites the
  *    address of the kit's entry when the overlay closes, and the entry under it
  *    still holds the old one. Taking the entry out lands there, so the address
@@ -362,7 +366,7 @@ function install() {
 
   const push = history.pushState.bind(history)
   const replace = history.replaceState.bind(history)
-  history.pushState = function (data: unknown, unused: string, url?: string | URL | null) {
+  const pushed = (data: unknown, unused: string, url?: string | URL | null) => {
     const before = location.href
     push(data, unused, url)
     s.href = location.href
@@ -371,12 +375,35 @@ function install() {
     if (pathOf(before) !== pathOf(location.href)) leavePage()
     mute()
   }
-  history.replaceState = function (data: unknown, unused: string, url?: string | URL | null) {
+  const replaced = (data: unknown, unused: string, url?: string | URL | null) => {
     const mark = s.internal ? null : current()
     const keep = mark && data && typeof data === "object" && !markOf(data) ? { ...(data as object), [KEY]: mark } : data
     replace(keep, unused, url)
     s.href = location.href
   }
+  history.pushState = function (data: unknown, unused: string, url?: string | URL | null) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => pushed(unmarked(data), unused, url))
+    else pushed(data, unused, url)
+  }
+  history.replaceState = function (data: unknown, unused: string, url?: string | URL | null) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => replaced(unmarked(data), unused, url))
+    else replaced(data, unused, url)
+  }
+}
+
+/*
+ * A change written while a step the kit started is on its way (an overlay
+ * closed and a link inside it navigated in the same tick) waits for the step to
+ * land. Applied at once, the step would then go back from the new entry, and
+ * the page would end on the old path. A router builds its state from the entry
+ * it sat on, the kit's, so the kit's key is taken off: the entry it lands on is
+ * not the kit's any more.
+ */
+function unmarked(data: unknown): unknown {
+  if (!markOf(data)) return data
+  const copy = { ...(data as Record<string, unknown>) }
+  delete copy[KEY]
+  return copy
 }
 
 /** Record an entry on top of the history, under the current address. */