@leavepulse/ui 0.70.0 → 0.70.1

package/dist/composables/useForm.js

@@ -30,6 +30,7 @@ function useForm(options) {
   const submitting = ref(false);
   const submitCount = ref(0);
   const runs = /* @__PURE__ */ new Map();
+  let validationEpoch = 0;
   const fromForm = /* @__PURE__ */ new Map();
   const baseVersion = ref(0);
   const keys = () => Object.keys(plain());
@@ -51,7 +52,7 @@ function useForm(options) {
     return void 0;
   }
   async function runField(name) {
-    const run = (runs.get(name) ?? 0) + 1;
+    const run = /* @__PURE__ */ Symbol();
     runs.set(name, run);
     const found = await checkField(name);
     if (runs.get(name) !== run) return !errors[name];
@@ -61,7 +62,7 @@ function useForm(options) {
   }
   async function runForm() {
     if (!options.validate) return true;
-    const run = (runs.get("form") ?? 0) + 1;
+    const run = /* @__PURE__ */ Symbol();
     runs.set("form", run);
     const found = await options.validate(plain()) ?? {};
     if (runs.get("form") !== run) return true;
@@ -78,12 +79,17 @@ function useForm(options) {
     return ok;
   }
   async function validate(name) {
+    const epoch = validationEpoch;
     validating.value = true;
     try {
-      if (name !== void 0) return await runField(name);
+      if (name !== void 0) {
+        const valid2 = await runField(name);
+        return epoch === validationEpoch && valid2;
+      }
       const fields = await Promise.all(keys().map(runField));
+      if (epoch !== validationEpoch) return false;
       const form = await runForm();
-      return fields.every(Boolean) && form && !Object.values(external).some(Boolean);
+      return epoch === validationEpoch && fields.every(Boolean) && form && !Object.values(external).some(Boolean);
     } finally {
       validating.value = false;
     }
@@ -99,6 +105,7 @@ function useForm(options) {
     for (const [k, v] of Object.entries(next)) set(k, v);
   }
   function clearState() {
+    validationEpoch++;
     for (const k of Object.keys(errors)) delete errors[k];
     for (const k of Object.keys(external)) delete external[k];
     for (const k of Object.keys(touched)) delete touched[k];
@@ -131,7 +138,9 @@ function useForm(options) {
     { deep: true }
   );
   async function recheck(names) {
+    const epoch = validationEpoch;
     await Promise.all(names.map((name) => validate(name)));
+    if (epoch !== validationEpoch) return;
     if (fromForm.size || submitCount.value) await runForm();
   }
   let snapshot = clone(plain());

package/dist/composables/useView.js

@@ -1,4 +1,4 @@
-import { computed, inject, provide } from "vue";
+import { inject, computed, provide } from "vue";
 const LP_VIEW = /* @__PURE__ */ Symbol.for("lp-view");
 function provideView(view) {
   provide(LP_VIEW, view);
@@ -27,6 +27,9 @@ function forwardViewEvents(from, to) {
     const Copy = event.constructor;
     const copy = new Copy(event.type, event);
     copy[ORIGIN] = from;
+    const path = event.composedPath();
+    Object.defineProperty(copy, "target", { value: event.target });
+    copy.composedPath = () => path;
     to.dispatchEvent(copy);
   };
   for (const type of FORWARDED) from.addEventListener(type, forward);

package/dist/index.js

@@ -1,14 +1,14 @@
 import { _ } from "./chunks/LayoutCanvas-BsJIzhdd.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CNnLTDZg.js";
+import { _ as _2 } from "./chunks/LpAddressInput-Chv_Xf8q.js";
 import { _ as _3 } from "./chunks/LpMapPicker-BtIl7NOM.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-CzOFar5t.js";
 import { _ as _5 } from "./chunks/LpAlert-C5igj802.js";
-import { _ as _6 } from "./chunks/LpAppShell-CEUAB8kK.js";
+import { _ as _6 } from "./chunks/LpAppShell-BiWByLmt.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-D92niDHE.js";
 import { _ as _8 } from "./chunks/LpAvatar-CLPl-qOF.js";
-import { _ as _9 } from "./chunks/LpBadge-HOEPBYmi.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-DYoPc3P4.js";
+import { _ as _9 } from "./chunks/LpBadge-BBq1Er9T.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-JKEi_yFF.js";
 import { _ as _11 } from "./chunks/LpButton-CVxBfGjd.js";
 import { _ as _12 } from "./chunks/LpCalendar-pVL91-Pl.js";
 import { _ as _13 } from "./chunks/LpCard-CqKLnEhl.js";
@@ -18,7 +18,7 @@ import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceSc
 import { _ as _14 } from "./chunks/LpCheckbox-DHc2bHDe.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-BGsQhxw8.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-DFugXNUi.js";
+import { _ as _16 } from "./chunks/LpColorPicker-B7HSIFmn.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { applyQueryFilters, highlightParts, parseCommandQuery, parsePaletteQuery, rankCommandItems } from "./components/commandSearch.js";
@@ -33,89 +33,89 @@ import { comboKeys, comboSteps } from "./components/keys.js";
 import { _ as _18 } from "./chunks/LpConfirmDialog-CfGCux8m.js";
 import { _ as _19 } from "./chunks/LpConfirmHost-exB7JmcO.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _20 } from "./chunks/LpContextMenu-COwOwRgI.js";
-import { _ as _21 } from "./chunks/LpDatePicker-BUe1VUC0.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-C_k65vGR.js";
+import { _ as _20 } from "./chunks/LpContextMenu-Cj96ENDC.js";
+import { _ as _21 } from "./chunks/LpDatePicker-ac1_6o5P.js";
+import { _ as _22 } from "./chunks/LpDateRangePicker-B15gYrZJ.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-c5qj7YcC.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-DOarzlAG.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _26 } from "./chunks/LpDrawer-DGNKRsGq.js";
-import { _ as _27 } from "./chunks/LpDropdownMenu-CRgrhdAH.js";
+import { _ as _27 } from "./chunks/LpDropdownMenu-R4aYVtVV.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-KTKipws2.js";
-import { _ as _29 } from "./chunks/LpFileTree-DMISXVHC.js";
+import { _ as _29 } from "./chunks/LpFileTree-DDNg34tJ.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-CurbNuXI.js";
 import { _ as _31 } from "./chunks/LpFormField-BWwgm1E4.js";
 import { _ as _32 } from "./chunks/LpIcon-HJP5xMz4.js";
 import { i, b, a, c } from "./chunks/icons-4IywzkHk.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
-import { _ as _33 } from "./chunks/LpInfraNode-CUC3t4na.js";
+import { _ as _33 } from "./chunks/LpInfraNode-D64hywJI.js";
 import { _ as _34 } from "./chunks/LpInput-CDuwODJG.js";
 import { _ as _35 } from "./chunks/LpLightbox-XJ0LpTcZ.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-elZHbj85.js";
+import { _ as _37 } from "./chunks/LpLogViewer-DKK4ySZl.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _38 } from "./chunks/LpMediaGallery-D5swlmZ_.js";
+import { _ as _38 } from "./chunks/LpMediaGallery-rmI1DjKN.js";
 import { _ as _39 } from "./chunks/LpModal-eBMt2Fqn.js";
-import { _ as _40 } from "./chunks/LpModalNav-D4Z0wVHR.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-DPZmP5dM.js";
+import { _ as _40 } from "./chunks/LpModalNav-DiyFCHiZ.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-D-WhE5m2.js";
 import { _ as _42 } from "./chunks/LpNumberField-B9k-h2HE.js";
 import { _ as _43 } from "./chunks/LpTimeField-BFQVf_PW.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-Cfyh033Q.js";
 import { _ as _45 } from "./chunks/LpOtpInput-CeBPsM7D.js";
 import { _ as _46 } from "./chunks/LpPagination-VNCX6pFC.js";
-import { _ as _47 } from "./chunks/LpPasswordInput-DTV18FIh.js";
-import { _ as _48 } from "./chunks/LpPie-CFuV7pZv.js";
+import { _ as _47 } from "./chunks/LpPasswordInput-GL2KOFK8.js";
+import { _ as _48 } from "./chunks/LpPie-BgXZ3xmm.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-C60tx1tC.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _50 } from "./chunks/LpPopover-BEIcqb9p.js";
+import { _ as _50 } from "./chunks/LpPopover-DmZ3wUtP.js";
 import { _ as _51 } from "./chunks/LpProgress-CE-m5OpD.js";
 import { _ as _52 } from "./chunks/LpRadio-CWA5Eb3M.js";
 import { _ as _53 } from "./chunks/LpRadioGroup-CGBr5nIp.js";
-import { _ as _54 } from "./chunks/LpRollingText-DB7upf-5.js";
+import { _ as _54 } from "./chunks/LpRollingText-DiL717LK.js";
 import { _ as _55 } from "./chunks/LpScrollArea-Hz3-JWUG.js";
 import { _ as _56 } from "./chunks/LpSegmented-BO99Sr4m.js";
 import { _ as _57 } from "./chunks/LpSection-BW4xJ-Li.js";
-import { _ as _58 } from "./chunks/LpSelect-B4f_yRi5.js";
+import { _ as _58 } from "./chunks/LpSelect-C_8cJtj6.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _60 } from "./chunks/LpShift-DXNsauQZ.js";
 import { _ as _61 } from "./chunks/LpSwap-DzE6M3Mg.js";
 import { _ as _62 } from "./chunks/LpHintExample-9Py0wc-L.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _63 } from "./chunks/LpSidebar-D-M0Y_7U.js";
+import { _ as _63 } from "./chunks/LpSidebar-CZRXtvem.js";
 import { _ as _64 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _65 } from "./chunks/LpSlider-DuoRpOrH.js";
 import { _ as _66 } from "./chunks/LpRangeSlider-Dv6lNvHY.js";
 import { _ as _67 } from "./chunks/LpVideoBackdrop-DS1wGv-X.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _68 } from "./chunks/LpSparkline-CExIRDb3.js";
-import { _ as _69 } from "./chunks/LpStat-B2ix1Q7t.js";
-import { _ as _70 } from "./chunks/LpStepper-DRFfdJaq.js";
+import { _ as _69 } from "./chunks/LpStat-DFKlPJgy.js";
+import { _ as _70 } from "./chunks/LpStepper-BbnS5jUr.js";
 import { _ as _71 } from "./chunks/LpSwitch-DrzKrZZV.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { resolveRowMenu } from "./components/tableRowMenu.js";
 import { _ as _72 } from "./chunks/LpTableOfContents-rYvo8z5T.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
-import { _ as _73 } from "./chunks/LpTagsInput-DgpBFRV2.js";
+import { _ as _73 } from "./chunks/LpTagsInput-DZg80W-B.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _74 } from "./chunks/LpTextarea-DiWjeVoJ.js";
-import { _ as _75 } from "./chunks/LpThemeSwitcher-D5uz0MhK.js";
+import { _ as _75 } from "./chunks/LpThemeSwitcher-CadVBTBn.js";
 import { _ as _76 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _77 } from "./chunks/LpToaster-Wv9ksj4q.js";
 import { _ as _78 } from "./chunks/LpTooltip-Cz8SQwRt.js";
-import { _ as _79 } from "./chunks/LpTour-NfRJNEIP.js";
+import { _ as _79 } from "./chunks/LpTour-CY2bFXge.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _80 } from "./chunks/LpHintLayer-p4hqzdyA.js";
-import { _ as _81 } from "./chunks/LpHints-CCrhRfy9.js";
+import { _ as _80 } from "./chunks/LpHintLayer-HvwUA5Ec.js";
+import { _ as _81 } from "./chunks/LpHints-DxbPKOzQ.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _82 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _83 } from "./chunks/LpTopologyCanvas-ZhKthfgz.js";
-import { _ as _84 } from "./chunks/LpUptimeBar-DWegV2p6.js";
+import { _ as _83 } from "./chunks/LpTopologyCanvas-C17A1XCb.js";
+import { _ as _84 } from "./chunks/LpUptimeBar-Tew1Ykx4.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -123,7 +123,7 @@ import { layoutController, useLayout } from "./layout/useLayout.js";
 import { a as parseTheme, s as serializeTheme } from "./chunks/useTheme-BOV_-AiY.js";
 import { D, T, b as b2, c as c2, d, e, f, g, l, h, n, i as i2, j, p, r, k, t, m, o, q, u, v } from "./chunks/useTheme-BOV_-AiY.js";
 import { G, N, d as d2, i as i3, s } from "./chunks/backdrop-Dkf2vM81.js";
-import { _ as _85, a as a2, b as b3, c as c3, d as d3, e as e2, u as u2, w } from "./chunks/LpThemeStudio-DguwHdGt.js";
+import { _ as _85, a as a2, b as b3, c as c3, d as d3, e as e2, u as u2, w } from "./chunks/LpThemeStudio-DxVZMtzN.js";
 import { useClipboard } from "./composables/useClipboard.js";
 import { activeShortcuts, appleModifierLabel, findHotkeyConflicts, hotkeyConflicts, hotkeySteps, isAppleKeyboard, matchesHotkey, mergeShortcutGroups, parseCombo, pendingHotkey, sequenceProgress, useAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth.js";
@@ -163,11 +163,11 @@ import { _ as _86 } from "./chunks/LpThemeProvider-DcbfOxsU.js";
 import { _ as _87 } from "./chunks/LpFrame-BVQCQLDI.js";
 import { _ as _88 } from "./chunks/LpThemeStudioSection-BwhqYDLf.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
-import { _ as _89 } from "./chunks/LpRepeater-D0VjmD6y.js";
-import { _ as _90 } from "./chunks/LpGauge-Bk8TwJj0.js";
-import { _ as _91 } from "./chunks/LpQuota-2Sw_gqcJ.js";
-import { _ as _92 } from "./chunks/LpStatus-C7kx5PKE.js";
-import { _ as _93 } from "./chunks/LpRelativeTime-CKzVqAo9.js";
+import { _ as _89 } from "./chunks/LpRepeater-D0S7jjwr.js";
+import { _ as _90 } from "./chunks/LpGauge-C14Z9503.js";
+import { _ as _91 } from "./chunks/LpQuota-DaL8TgNe.js";
+import { _ as _92 } from "./chunks/LpStatus-BsGLrpor.js";
+import { _ as _93 } from "./chunks/LpRelativeTime-yin9uQP7.js";
 import { _ as _94 } from "./chunks/LpActivityLine-CJvzrNpj.js";
 import { TONE_COLOR, TONE_SOFT, arcPath, capacityThresholds, meterFraction, toneAt } from "./components/meter.js";
 import { TONES, TONE_ALIASES, toneLook, toneOf } from "./components/tone.js";
@@ -175,20 +175,20 @@ import { formatAmount, quotaSegments, quotaState } from "./components/quota.js";
 import { compactNumber, formatBytes } from "./components/format.js";
 import { STATUS_LABELS, STATUS_LOOK } from "./components/status.js";
 import { formatRelativeTime } from "./components/relativeTime.js";
-import { _ as _95 } from "./chunks/LpPipeline-D81yh_NX.js";
-import { _ as _96 } from "./chunks/LpStepMark-DK-5BKAt.js";
+import { _ as _95 } from "./chunks/LpPipeline-B31h41Mu.js";
+import { _ as _96 } from "./chunks/LpStepMark-TrzOioa9.js";
 import { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed } from "./components/pipeline.js";
 import { _ as _97 } from "./chunks/LpLoader-DjJEX8hL.js";
 import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
-import { _ as _98 } from "./chunks/LpCountdown-Dtq1ihlJ.js";
+import { _ as _98 } from "./chunks/LpCountdown-BQnmB4gq.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
 import { _ as _99 } from "./chunks/LpCopyButton-DzHjnFs0.js";
-import { _ as _100 } from "./chunks/LpSecretField-DMfdJ1cQ.js";
-import { _ as _101 } from "./chunks/LpDataList-B-5nHfNw.js";
-import { _ as _102 } from "./chunks/LpEditable-DTqLt2lT.js";
+import { _ as _100 } from "./chunks/LpSecretField-CfWyHv9m.js";
+import { _ as _101 } from "./chunks/LpDataList-CHNYQw7h.js";
+import { _ as _102 } from "./chunks/LpEditable-Ws3DNQHn.js";
 import { _ as _103 } from "./chunks/LpTruncate-D_5Pfv5B.js";
-import { _ as _104 } from "./chunks/LpCodeDisplay-CIKKT2iW.js";
+import { _ as _104 } from "./chunks/LpCodeDisplay-CbJMs-IK.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _105 } from "./chunks/LpHoverCard-spGxyw7T.js";
 import { _ as _106 } from "./chunks/LpIdenticon-BzdC_qz9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.70.0",
+  "version": "0.70.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -59,6 +59,7 @@
     "prepublishOnly": "npm run build",
     "typecheck": "vue-tsc --noEmit",
     "test": "bun test",
+    "test:browser": "playwright test",
     "release": "npm version patch -m \"chore: release v%s\" && git push --follow-tags",
     "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
     "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags",
@@ -85,6 +86,7 @@
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.112",
     "@iconify/vue": "^5.0.1",
+    "@playwright/test": "^1.64.1",
     "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^26.2.0",
     "@vitejs/plugin-vue": "^6.0.6",
@@ -107,6 +109,7 @@
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
     "libphonenumber-js": "^1.12.0",
+    "tailwind-merge": "^3.6.0",
     "vaul-vue": "^0.4.1"
   }
 }

package/src/components/ContextMenuItems.vue

@@ -28,6 +28,7 @@ import {
   DropdownMenuSubTrigger,
 } from "reka-ui"
 import { computed } from "vue"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import MenuShortcut from "./MenuShortcut.vue"
@@ -66,6 +67,8 @@ const PRIMITIVES = {
 } as const
 
 const P = computed(() => PRIMITIVES[props.kind])
+const portalTo = usePortalTarget()
+const guardOutside = useOutsideGuard()
 
 const ITEM =
   "group/item flex cursor-pointer select-none items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
@@ -89,8 +92,8 @@ const ICON =
         </span>
         <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
       </component>
-      <component :is="P.Portal">
-        <component :is="P.SubContent" :collision-padding="8" :class="panel" :side-offset="2" :align-offset="-4">
+      <component :is="P.Portal" :to="portalTo">
+        <component :is="P.SubContent" @interact-outside="guardOutside" @focus-outside="guardOutside" @escape-key-down="guardOutside" :collision-padding="8" :class="panel" :side-offset="2" :align-offset="-4">
           <ContextMenuItems :items="item.children" :panel="panel" :kind="kind" />
         </component>
       </component>

package/src/components/LpChart.vue

@@ -1556,23 +1556,25 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </div>
     </LpContextMenu>
 
-    <table v-if="dataTable && ready" class="sr-only">
-      <caption v-if="title">{{ title }}</caption>
-      <thead>
-        <tr>
-          <th scope="col"></th>
-          <th v-for="s in allSeries" :key="s.id" scope="col">{{ s.name }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(label, i) in labels" :key="i">
-          <th scope="row">{{ label }}</th>
-          <td v-for="s in allSeries" :key="s.id">
-            {{ s.values[i] == null ? "—" : fmtSeries(s, s.values[i] as number) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div v-if="dataTable && ready" class="sr-only">
+      <table>
+        <caption v-if="title">{{ title }}</caption>
+        <thead>
+          <tr>
+            <th scope="col"></th>
+            <th v-for="s in allSeries" :key="s.id" scope="col">{{ s.name }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(label, i) in labels" :key="i">
+            <th scope="row">{{ label }}</th>
+            <td v-for="s in allSeries" :key="s.id">
+              {{ s.values[i] == null ? "—" : fmtSeries(s, s.values[i] as number) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 

package/src/components/LpContextMenu.vue

@@ -14,7 +14,7 @@ import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import MenuTitle from "./MenuTitle.vue"
 import { POPOVER_PANEL } from "./dropdown"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { useOutsideGuard, usePortalTarget, useView, viewDocument } from "../composables/useView"
 
 export interface ContextMenuItemDef {
   label: string
@@ -81,12 +81,13 @@ const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
 // selection if the menu action left the text as it was.
 type TextField = HTMLInputElement | HTMLTextAreaElement
 const SELECTABLE = new Set(["text", "search", "url", "tel", "password"])
+const view = useView()
 let field: { el: TextField; value: string; start: number; end: number } | null = null
 
 function rememberField() {
-  const el = document.activeElement
+  const el = viewDocument(view.value).activeElement
   const text =
-    el instanceof HTMLTextAreaElement || (el instanceof HTMLInputElement && SELECTABLE.has(el.type))
+    el?.tagName === "TEXTAREA" || (el?.tagName === "INPUT" && SELECTABLE.has((el as HTMLInputElement).type))
   field = text
     ? { el: el as TextField, value: (el as TextField).value, start: (el as TextField).selectionStart ?? 0, end: (el as TextField).selectionEnd ?? 0 }
     : null

package/src/components/LpDataList.vue

@@ -128,7 +128,7 @@ const pad = computed(() => (props.size === "sm" ? "py-1.5 text-xs" : "py-2.5 tex
           </LpTooltip>
         </dt>
         <dd class="flex min-w-0 items-center gap-1.5 text-ink" :class="item.mono ? 'font-mono' : ''">
-          <span class="min-w-0 break-words">
+          <span class="min-w-0 flex-1 [overflow-wrap:anywhere]">
             <slot
               v-if="slots[`value-${keyOf(item)}`] || slots.value"
               :name="slots[`value-${keyOf(item)}`] ? `value-${keyOf(item)}` : 'value'"
@@ -136,7 +136,7 @@ const pad = computed(() => (props.size === "sm" ? "py-1.5 text-xs" : "py-2.5 tex
               :value="item.value"
             />
             <span v-else-if="isEmpty(item.value)" class="text-muted">{{ text.empty }}</span>
-            <LpRollingText v-else-if="rolls(item.value)" :value="item.value!" align="start" />
+            <LpRollingText v-else-if="rolls(item.value)" :value="item.value!" align="start" wrap />
             <template v-else>{{ item.value }}</template>
           </span>
           <!-- Quiet until the row is hovered or focused; always there on touch,

package/src/components/LpDatePicker.vue

@@ -87,6 +87,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: string | undefined): void
+  (e: "blur", event: FocusEvent): void
 }>()
 
 const open = ref(false)
@@ -197,6 +198,7 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
     :presets="presetOptions"
     presets-class="sm:w-36"
     @clear="clear"
+    @blur="emit('blur', $event)"
   >
     <div class="flex flex-col">
       <LpCalendar

package/src/components/LpDateRangePicker.vue

@@ -69,6 +69,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: DateRange | undefined): void
+  (e: "blur", event: FocusEvent): void
 }>()
 
 const text = useLabels<DateRangePickerLabels>(
@@ -157,6 +158,7 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
     :presets="presetOptions"
     presets-class="sm:w-40"
     @clear="emit('update:modelValue', undefined)"
+    @blur="emit('blur', $event)"
   >
     <LpRangeCalendar
       :model-value="value"

package/src/components/LpDropdownMenu.vue

@@ -45,7 +45,7 @@ const guardOutside = useOutsideGuard()
 </script>
 
 <template>
-  <DropdownMenuRoot @update:open="opened">
+  <DropdownMenuRoot :modal="false" @update:open="opened">
     <DropdownMenuTrigger as-child>
       <slot name="trigger" />
     </DropdownMenuTrigger>

package/src/components/LpEditable.vue

@@ -129,7 +129,7 @@ function cancel() {
 
 let committing = false
 async function commit(refocus: boolean) {
-  if (!editing.value || committing) return
+  if (!editing.value || committing || !interactive.value) return
   const value = props.trim ? draft.value.trim() : draft.value
   if (value === props.modelValue) {
     notice.clear()
@@ -273,6 +273,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => "relative inline-
           :aria-invalid="(notice.tone.value === 'danger' && !!notice.message.value) || undefined"
           :placeholder="placeholder"
           :maxlength="maxlength"
+          :disabled="disabled"
+          :readonly="readonly"
           :rows="multiline ? 1 : undefined"
           class="col-start-1 row-start-1 w-full min-w-0 resize-none overflow-hidden bg-transparent text-ink outline-none placeholder:text-muted"
           :class="PAD[size]"

package/src/components/LpPasswordInput.vue

@@ -13,15 +13,18 @@ export interface PasswordInputLabels extends Record<string, string> {
 // LpSecretField's input form is this same field: it drives `visible` (to hide
 // again on a timer) and puts its copy button in `actions`.
 import { ref } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import LpInput from "./LpInput.vue"
 import RevealToggle from "./RevealToggle.vue"
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   modelValue?: string
   placeholder?: string
   invalid?: boolean
   disabled?: boolean
+  /** Offer the show/hide button. When false, the field stays masked. */
+  revealable?: boolean
   // Field wrapping mirrors LpInput: passing any of these wraps the control in
   // LpFormField, so a password field labels itself like every other field.
   label?: string
@@ -31,10 +34,11 @@ const props = defineProps<{
   /** Control height, as on LpInput. */
   size?: "sm" | "md" | "lg"
   labels?: Partial<PasswordInputLabels>
-}>()
+}>(), { revealable: true })
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 /** Whether the text shows; bind it to reveal or hide from outside. */
 const visible = defineModel<boolean>("visible", { default: false })
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
 
 const text = useLabels<PasswordInputLabels>(
   "passwordInput",
@@ -54,10 +58,10 @@ defineExpose({
     ref="inner"
     v-bind="$attrs"
     :model-value="modelValue"
-    :type="visible ? 'text' : 'password'"
+    :type="revealable && visible ? 'text' : 'password'"
     :placeholder="placeholder"
     :invalid="invalid"
-    :disabled="disabled"
+    :disabled="field.disabled"
     :label="label"
     :hint="hint"
     :error="error"
@@ -71,11 +75,12 @@ defineExpose({
       <!-- Sized to the icon with a hair of padding, as the field's other
            trailing controls are, rather than to a full square button. -->
       <RevealToggle
+        v-if="revealable"
         v-model="visible"
         :icon-size="size === 'sm' ? 14 : 16"
         :show-label="text.show"
         :hide-label="text.hide"
-        :disabled="disabled"
+        :disabled="field.disabled"
         class="size-auto rounded-inner p-1 hover:bg-transparent"
       />
     </template>

package/src/components/LpPopover.vue

@@ -10,6 +10,9 @@ import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
+// The trigger owns its attributes through the slot; fallthrough tags the panel.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     side?: "top" | "right" | "bottom" | "left"
@@ -47,6 +50,7 @@ const guardOutside = useOutsideGuard()
     </PopoverTrigger>
     <PopoverPortal :to="portalTo">
       <PopoverContent
+        v-bind="$attrs"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         :collision-padding="8"