@leavepulse/ui 0.78.1 → 0.78.3

package/dist/index.js

@@ -1,11 +1,11 @@
 import { _ } from "./chunks/LayoutCanvas-CZKOltfA.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BSS49jpm.js";
+import { _ as _2 } from "./chunks/LpAddressInput-ft8fQOGx.js";
 import { _ as _3 } from "./chunks/LpMapPicker-D5_YLLBC.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BGMk5KoG.js";
 import { _ as _5 } from "./chunks/LpAlert-CjvTZIKF.js";
-import { _ as _6 } from "./chunks/LpAppShell-BKbYCHkx.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-DkY6CSyD.js";
+import { _ as _6 } from "./chunks/LpAppShell-DRHoQtr-.js";
+import { _ as _7 } from "./chunks/LpAutocomplete-CrZbd0uv.js";
 import { _ as _8 } from "./chunks/LpAvatar-cQVsNk6F.js";
 import { _ as _9 } from "./chunks/LpBadge-D5QQdDQ_.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-CIIBsygI.js";
@@ -18,10 +18,10 @@ import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceSc
 import { chartView, lttbIndices, minMaxBuckets, panRange, slotOf, sourceOf, zoomRange } from "./components/chartWindow.js";
 import { useChartSync } from "./composables/useChartSync.js";
 import { createLinkedView, linkChart, linkLog, linkPipeline, linkTable, linkTopology, provideLinkedView, useLinkedView } from "./composables/useLinkedView.js";
-import { _ as _14 } from "./chunks/LpCheckbox-D6RuDW4X.js";
+import { _ as _14 } from "./chunks/LpCheckbox-CCWCwD0y.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-DBqy4RLd.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-COHzV68R.js";
+import { _ as _16 } from "./chunks/LpColorPicker-BONURBFN.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, searchCommandItems, swapCommandLayout } from "./components/commandSearch.js";
@@ -37,8 +37,8 @@ import { _ as _18 } from "./chunks/LpConfirmDialog-CnrmzkuN.js";
 import { _ as _19 } from "./chunks/LpConfirmHost-CwbObVGH.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-Bx_IhQDS.js";
-import { _ as _21 } from "./chunks/LpDatePicker-DwSDY0mt.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-CNQXdTVv.js";
+import { _ as _21 } from "./chunks/LpDatePicker-C2AOtxgF.js";
+import { _ as _22 } from "./chunks/LpDateRangePicker-CiXdIAyh.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-BrqlGZzE.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-DG7JCo-d.js";
@@ -47,7 +47,7 @@ import { _ as _26 } from "./chunks/LpDrawer-DXNQFpAA.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-CLzxIOgM.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-DurPF001.js";
-import { _ as _29 } from "./chunks/LpFileTree-C-rJKzEQ.js";
+import { _ as _29 } from "./chunks/LpFileTree-CpNurwZp.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-DJ10cYIo.js";
 import { _ as _31 } from "./chunks/LpFormField-BKYn9dyP.js";
@@ -55,54 +55,54 @@ import { _ as _32 } from "./chunks/LpIcon-C6JpQ5td.js";
 import { i, r, a, b } from "./chunks/icons-CYfcpSDS.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
 import { _ as _33 } from "./chunks/LpInfraNode-Bb5nbuFY.js";
-import { _ as _34 } from "./chunks/LpInput-D0O6dpuA.js";
+import { _ as _34 } from "./chunks/LpInput-CbI7z5fQ.js";
 import { _ as _35 } from "./chunks/LpLightbox-CtDTQV01.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-umCZBapN.js";
-import { _ as _38 } from "./chunks/LpLogInspector-BdQlX6S-.js";
+import { _ as _37 } from "./chunks/LpLogViewer-CWu49Dko.js";
+import { _ as _38 } from "./chunks/LpLogInspector-CcSJSGan.js";
 import { compilePattern, findIds, messageShape, structuredPayload, timeMs } from "./components/logTools.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _39 } from "./chunks/LpMediaGallery-BYEwySoF.js";
 import { _ as _40 } from "./chunks/LpModal-DDvrSAnf.js";
-import { _ as _41 } from "./chunks/LpModalNav-gOi1Giz1.js";
+import { _ as _41 } from "./chunks/LpModalNav-DI3BW5ff.js";
 import { _ as _42 } from "./chunks/LpNotificationBell-DUbVyK6R.js";
-import { _ as _43 } from "./chunks/LpNumberField-Csg-1Zh_.js";
-import { _ as _44 } from "./chunks/LpTimeField-DeOcKWJq.js";
+import { _ as _43 } from "./chunks/LpNumberField-C8LfUz_R.js";
+import { _ as _44 } from "./chunks/LpTimeField-B5n0m8m0.js";
 import { _ as _45 } from "./chunks/LpNumberFlow-Vqj0tP7B.js";
-import { _ as _46 } from "./chunks/LpOtpInput-BRpLBbOD.js";
+import { _ as _46 } from "./chunks/LpOtpInput-B1X9l9no.js";
 import { _ as _47 } from "./chunks/LpPagination-snQ020xQ.js";
-import { _ as _48 } from "./chunks/LpPasswordInput-D4HPhqfV.js";
+import { _ as _48 } from "./chunks/LpPasswordInput-Duc_3wPv.js";
 import { _ as _49 } from "./chunks/LpPie-oVNHjsKD.js";
-import { _ as _50 } from "./chunks/LpPhoneInput-BSL7NX4z.js";
+import { _ as _50 } from "./chunks/LpPhoneInput-CctcRK9K.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _51 } from "./chunks/LpPopover-BQSuxtai.js";
 import { _ as _52 } from "./chunks/LpProgress-D_MSjowb.js";
 import { _ as _53 } from "./chunks/LpRadio-CWA5Eb3M.js";
-import { _ as _54 } from "./chunks/LpRadioGroup-BrazjLY_.js";
+import { _ as _54 } from "./chunks/LpRadioGroup-DTM0nd9G.js";
 import { _ as _55 } from "./chunks/LpRollingText-B54Pje7P.js";
 import { _ as _56 } from "./chunks/LpScrollArea-CqvwfZs2.js";
 import { _ as _57 } from "./chunks/LpPageScrollbar-D2O0xhJw.js";
-import { _ as _58 } from "./chunks/LpSegmented-DbEJhbv-.js";
+import { _ as _58 } from "./chunks/LpSegmented-sskrJKJJ.js";
 import { _ as _59 } from "./chunks/LpSection-BfteipxU.js";
-import { _ as _60 } from "./chunks/LpSelect-Y-iuSymW.js";
+import { _ as _60 } from "./chunks/LpSelect-JFZehOkd.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _61 } from "./chunks/LpServiceNode-Cln2ntdw.js";
 import { _ as _62 } from "./chunks/LpShift-DAgS_d2x.js";
 import { _ as _63 } from "./chunks/LpSwap-M7nFeW3C.js";
 import { _ as _64 } from "./chunks/LpHintExample-YzCXiSUp.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _65 } from "./chunks/LpSidebar-DDNJzb69.js";
+import { _ as _65 } from "./chunks/LpSidebar-CvRvVBTt.js";
 import { _ as _66 } from "./chunks/LpContextSwitcher-1C1tExdl.js";
 import { _ as _67 } from "./chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _68 } from "./chunks/LpSlider-A4ixovgS.js";
-import { _ as _69 } from "./chunks/LpRangeSlider-fz61tzc-.js";
+import { _ as _68 } from "./chunks/LpSlider-C4ilCtZX.js";
+import { _ as _69 } from "./chunks/LpRangeSlider-DJsEZXad.js";
 import { _ as _70 } from "./chunks/LpVideoBackdrop-Ct4St4ZL.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _71 } from "./chunks/LpSparkline-CExIRDb3.js";
 import { _ as _72 } from "./chunks/LpStat-DPjc6_fX.js";
 import { _ as _73 } from "./chunks/LpStepper-DNnh7lCu.js";
-import { _ as _74 } from "./chunks/LpSwitch-DnC2-0aV.js";
+import { _ as _74 } from "./chunks/LpSwitch-DyAYTchz.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { filterRows, showOnly, shownValues } from "./components/tableFilter.js";
@@ -111,10 +111,10 @@ import { resolveRowMenu } from "./components/tableRowMenu.js";
 import { _ as _75 } from "./chunks/LpTableOfContents-CKkWEK6R.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
 import { _ as _76 } from "./chunks/LpBottomNav-zxLGGbjm.js";
-import { _ as _77 } from "./chunks/LpTagsInput-Dt0mteSj.js";
+import { _ as _77 } from "./chunks/LpTagsInput-CkNxpNYa.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _78 } from "./chunks/LpTextarea-Co0b9PVx.js";
-import { _ as _79 } from "./chunks/LpThemeSwitcher-DmCZ21P_.js";
+import { _ as _78 } from "./chunks/LpTextarea-CFK_5QB8.js";
+import { _ as _79 } from "./chunks/LpThemeSwitcher-Bzy15MCP.js";
 import { _ as _80 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _81 } from "./chunks/LpToaster-Ct_ZOhCh.js";
 import { _ as _82 } from "./chunks/LpTooltip-Bz_rrq5S.js";
@@ -124,14 +124,14 @@ import { _ as _84 } from "./chunks/LpHintLayer-BeKRsRon.js";
 import { _ as _85 } from "./chunks/LpHints-qf3xYsza.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _86 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _87 } from "./chunks/LpTopologyCanvas-jqz1KCq2.js";
+import { _ as _87 } from "./chunks/LpTopologyCanvas-BNgw9RyZ.js";
 import { clusterGraph, diffTopology, findPath, layeredLayout, neighborhood, topologyToSvg } from "./components/topologyGraph.js";
 import { _ as _88 } from "./chunks/LpUptimeBar-BoxcCDVY.js";
 import { addLeaf, addTab, countBlocks, countLeaves, deserializeLayout, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, serializeLayout, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
 import { useWorkspaces } from "./layout/useWorkspaces.js";
-import { _ as _89 } from "./chunks/LpWorkspaceSwitcher-BeNHCLd5.js";
+import { _ as _89 } from "./chunks/LpWorkspaceSwitcher-ugv-fyig.js";
 import { _ as _90 } from "./chunks/LpInspector-DO3fTCQ1.js";
 import { _ as _91 } from "./chunks/LpWindow-B8YSRVTH.js";
 import { WINDOW_DOCKS, clampRect, dockAt, dockedRect, isWindowRect, resizeRect, snapRect, useWindowLayer } from "./composables/windowing.js";
@@ -181,10 +181,10 @@ import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
 import { _ as _92 } from "./chunks/LpThemeProvider-XK6ZeWAE.js";
 import { _ as _93 } from "./chunks/LpFrame-Bv5Fphte.js";
-import { _ as _94 } from "./chunks/LpThemeStudio-ChU0_Ga8.js";
+import { _ as _94 } from "./chunks/LpThemeStudio-R-wohbCY.js";
 import { _ as _95 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
-import { _ as _96 } from "./chunks/LpRepeater-BkJHSPI1.js";
+import { _ as _96 } from "./chunks/LpRepeater-Czib3rmv.js";
 import { _ as _97 } from "./chunks/LpGauge-KZaQ_FDR.js";
 import { _ as _98 } from "./chunks/LpQuota-CgWPgdVt.js";
 import { _ as _99 } from "./chunks/LpStatus-DGJFwk5F.js";
@@ -205,11 +205,11 @@ import { useNow } from "./composables/useNow.js";
 import { _ as _105 } from "./chunks/LpCountdown-DVl7vXI1.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
 import { _ as _106 } from "./chunks/LpCopyButton-sAMvWeLP.js";
-import { _ as _107 } from "./chunks/LpSecretField-B2roc4Iz.js";
+import { _ as _107 } from "./chunks/LpSecretField-BtlCk3IH.js";
 import { _ as _108 } from "./chunks/LpDataList-CaVfsozH.js";
 import { _ as _109 } from "./chunks/LpEditable-DVT0Rh8F.js";
 import { _ as _110 } from "./chunks/LpTruncate-ellq9RYM.js";
-import { _ as _111 } from "./chunks/LpCodeDisplay-D3BUAhV1.js";
+import { _ as _111 } from "./chunks/LpCodeDisplay-D59uPwRb.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _112 } from "./chunks/LpHoverCard-CHE9jAJG.js";
 import { _ as _113 } from "./chunks/LpIdenticon-Dbbr4fvt.js";
@@ -239,7 +239,7 @@ import { _ as _125 } from "./chunks/LpCommandScope-DRUvHiX7.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
 import { commandShortcuts, commandToHotkey, commandToMenuItem, commandToPalette, useCommands } from "./composables/useCommands.js";
 import { usePaletteTheme } from "./theme/palette.js";
-import { _ as _126 } from "./chunks/LpPaletteTheme-BIXpZLGe.js";
+import { _ as _126 } from "./chunks/LpPaletteTheme-B-xuZiKK.js";
 export {
   CHART_PALETTE,
   DEFAULT_MASK_TOKENS,

package/package.json

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

package/src/components/LpAddressInput.vue

@@ -18,6 +18,7 @@ export default { inheritAttrs: false }
  * the picker is an async component, so the tile maths stays out of the bundle
  * of every form that never shows a map.
  */
+import FieldWrapper from "./FieldWrapper.vue"
 import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue"
 import { useAsyncTask } from "../composables/useAsyncTask"
 import {
@@ -41,7 +42,7 @@ import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 import LpModal from "./LpModal.vue"
 import LpSelect from "./LpSelect.vue"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -68,6 +69,8 @@ const props = withDefaults(
     disabled?: boolean
     /** Mark every part of the address invalid (also set by a surrounding LpFormField's error). */
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     size?: "sm" | "md" | "lg"
     /** Hide the map button when picking a point makes no sense. */
     hideMap?: boolean
@@ -289,15 +292,15 @@ function confirmPoint() {
  * every part: each inner field provides its own context, which would otherwise
  * hide the outer one from the controls.
  */
-const field = useFieldControl(() => ({ wrapped: false, invalid: props.invalid, disabled: props.disabled }))
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 
 // The group stacks its fields on a fixed gap that a tighter form has to close.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex flex-col gap-3",
-)
+  "flex flex-col gap-3", () => ownAttrs())
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <div
     role="group"
     :aria-labelledby="field.labelId"
@@ -428,4 +431,5 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </template>
     </LpModal>
   </div>
+  </FieldWrapper>
 </template>

package/src/components/LpAppShell.vue

@@ -47,8 +47,9 @@ export default { inheritAttrs: false }
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, useSlots, watch } from "vue"
 import { easingToken, durationToken, prefersReducedMotion } from "../composables/easing"
 import { useLabels } from "../composables/useLpConfig"
+import { useResizeObserver } from "../composables/useResizeObserver"
 import { useScrollMemory } from "../composables/scrollMemory"
-import { nodeWindow, useView, viewWindow } from "../composables/useView"
+import { isHTMLElement, nodeWindow, useView, viewWindow } from "../composables/useView"
 import AppShellContextNav from "./AppShellContextNav.vue"
 import {
   contextNavItems,
@@ -129,6 +130,15 @@ const props = withDefaults(
      * `min-h-[calc(100dvh-4rem)]` or `fullBleed`. `"region"`: the shell is
      * the viewport and the page scrolls inside main. Read once: changing it
      * remounts the page.
+     *
+     * A page's own sticky parts keep clear of the shell's with two variables
+     * set inside it: `--lp-shell-top`, how much of the window's top the shell
+     * covers (the header, 0 while `headerCollapse` has it away, plus the
+     * sub-page row), and `--lp-shell-bottom`, how much of its foot (the bottom
+     * bar). Both change as those do, and are 0px in `"region"` and on a
+     * `fullBleed` page, where nothing of the shell's lies over the page:
+     * `position: sticky; top: var(--lp-shell-top)`. Keep the page's sticky
+     * layers under `--z-sticky`, the shell's.
      */
     scroll?: "document" | "region"
     /**
@@ -329,8 +339,8 @@ useScrollMemory(
   () => props.path,
   () => props.hash,
   "",
-  // The sticky header covers the top of the window; a region starts below it.
-  () => (documentScroll && !bleeding.value ? (headerEl.value?.offsetHeight ?? 0) : 0),
+  // The sticky header and sub-page row cover the top of the window; a region starts below them.
+  () => (documentScroll && !bleeding.value ? (headerEl.value?.offsetHeight ?? 0) + contextRowHeight.value : 0),
 )
 // The side region keeps its own place on the same address.
 useScrollMemory(
@@ -389,17 +399,19 @@ watch(bleeding, (bleed) => {
     void nextTick(() => view.scrollTo({ top, behavior: "instant" }))
   }
 })
-// The bottom bar's height, for the page's scrollbar to stop above it (0 where it is hidden).
+/*
+ * What the shell's sticky bars cover of the window, for the page: the sub-page
+ * row's height (it sits under the header) and the bottom bar's (0 where hidden).
+ */
 const bottomBarEl = ref<{ $el: HTMLElement } | null>(null)
 const bottomBarHeight = ref(0)
-let bottomBarSize: ResizeObserver | undefined
-onMounted(() => {
-  const el = bottomBarEl.value?.$el
-  if (!el || el.nodeType !== 1) return
-  bottomBarSize = new (nodeWindow(el).ResizeObserver)(() => (bottomBarHeight.value = el.offsetHeight))
-  bottomBarSize.observe(el)
-})
-onBeforeUnmount(() => bottomBarSize?.disconnect())
+useResizeObserver(
+  () => (bottomBarEl.value?.$el?.nodeType === 1 ? bottomBarEl.value.$el : null),
+  (_, el) => (bottomBarHeight.value = (el as HTMLElement).offsetHeight),
+  { immediate: true },
+)
+const contextRowEl = ref<HTMLElement | null>(null)
+const contextRowHeight = ref(0)
 
 let releaseDocument: (() => void) | undefined
 onMounted(() => {
@@ -480,7 +492,7 @@ const asideClasses = computed(() =>
 const columnClass = computed(() => (hasAside.value ? "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto]" : "flex min-w-0 flex-1 flex-col"))
 const columnStyle = computed(() => ({
   ...(hasAside.value ? { gridTemplateRows: `auto ${contextVisible.value ? "auto " : ""}minmax(0,1fr) auto` } : {}),
-  ...(windowScrolls.value ? { "--lp-shell-top": shellTop.value } : {}),
+  ...shellVars.value,
 }))
 const spanClass = computed(() => (hasAside.value ? "col-span-2" : undefined))
 
@@ -520,6 +532,17 @@ const contextItems = computed(() => (props.adaptiveNav?.contextNav ? contextNavI
 const contextVisible = computed(
   () => (navMode.value === "bottom" || navMode.value === "drawer") && (contextItems.value.length > 0 || (!!slots["context-nav"] && !!props.adaptiveNav?.contextNav)),
 )
+// The row is the app's own slot or the shell's, so it is found where it renders: right after the header.
+watch(
+  [contextVisible, mounted],
+  () => {
+    const next = headerEl.value?.nextElementSibling
+    contextRowEl.value = contextVisible.value && isHTMLElement(next) && next !== mainEl.value ? next : null
+    if (!contextRowEl.value) contextRowHeight.value = 0
+  },
+  { flush: "post" },
+)
+useResizeObserver(contextRowEl, (_, el) => (contextRowHeight.value = (el as HTMLElement).offsetHeight), { immediate: true })
 
 function onSelect(item: SidebarItem) {
   emit("select", item)
@@ -564,12 +587,27 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 
 /*
  * What stays in view while the window scrolls the page. The header sits on
- * top; the row of sub-pages and the aside sit under it, following it out
- * when it collapses (--lp-shell-top is how much of the header is showing).
+ * top; the row of sub-pages sits under it and follows it out when it
+ * collapses (--lp-shell-header is how much of the header is showing).
+ *
+ * Two variables are the page's to use (documented on `scroll`), and set in
+ * every mode, so `var(--lp-shell-top)` never needs a fallback:
+ * --lp-shell-top is how much of the window's top the shell covers (header
+ * plus sub-page row), --lp-shell-bottom how much of its foot (the bottom
+ * bar). Both are 0px where the page scrolls in its own region or is full bleed.
  */
 const STICKY = "sticky z-(--z-sticky)"
 const railClass = computed(() => (windowScrolls.value ? "sticky top-0 flex h-dvh shrink-0 self-start" : "contents"))
-const shellTop = computed(() => (headerHidden.value ? "0px" : headerHeight.value))
+const shellHeader = computed(() => (headerHidden.value ? "0px" : headerHeight.value))
+const shellVars = computed(() =>
+  windowScrolls.value
+    ? {
+        "--lp-shell-header": shellHeader.value,
+        "--lp-shell-top": `calc(${shellHeader.value} + ${contextRowHeight.value}px)`,
+        "--lp-shell-bottom": `${bottomBarHeight.value}px`,
+      }
+    : { "--lp-shell-header": "0px", "--lp-shell-top": "0px", "--lp-shell-bottom": "0px" },
+)
 const BACK_TO_TOP_ABOVE_BAR: Record<NavBreakpoint, string> = {
   sm: "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] sm:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
   md: "bottom-[calc(4.5rem+env(safe-area-inset-bottom))] md:bottom-[calc(1rem+env(safe-area-inset-bottom))]",
@@ -725,7 +763,7 @@ const backToTopClass = computed(() =>
       <template v-if="contextVisible">
         <slot name="context-nav" :items="contextItems" :mode="navMode">
           <AppShellContextNav
-            :class="[spanClass, windowScrolls && `${STICKY} top-(--lp-shell-top) transition-[top] duration-[var(--duration-medium)] ease-[var(--ease-settle)]`]"
+            :class="[spanClass, windowScrolls && `${STICKY} top-(--lp-shell-header) transition-[top] duration-[var(--duration-medium)] ease-[var(--ease-settle)]`]"
             :items="contextItems"
             :is-active="activeTest"
             :label="text.contextNav"
@@ -769,7 +807,7 @@ const backToTopClass = computed(() =>
           <slot name="aside" />
         </LpScrollArea>
       </aside>
-      <LpPageScrollbar v-if="windowScrolls && pageScrollbar" top="var(--lp-shell-top)" :bottom="`${bottomBarHeight}px`" />
+      <LpPageScrollbar v-if="windowScrolls && pageScrollbar" top="var(--lp-shell-top)" bottom="var(--lp-shell-bottom)" />
       <LpBottomNav
         v-if="bottomNav"
         ref="bottomBarEl"

package/src/components/LpAutocomplete.vue

@@ -10,6 +10,7 @@ export type AutocompleteLabels = {
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import IconCloseButton from "./IconCloseButton.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
@@ -35,8 +36,8 @@ import {
   ComboboxRoot,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, nextTick, ref, useId, watch } from "vue"
-import { useAttrsField, mergeDescribedBy } from "../composables/useField"
+import { computed, nextTick, ref, useId, watch, useAttrs } from "vue"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
 import { CLOSE_ICON, OPTION_ITEM, optionStagger, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
@@ -64,6 +65,8 @@ const props = withDefaults(
     size?: "sm" | "md" | "lg"
     icon?: string
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     emptyText?: string
     loading?: boolean
     loadingText?: string
@@ -122,7 +125,8 @@ const inputAttrs = computed(() => {
   return rest
 })
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid || isInvalid(props.modelValue), disabled: props.disabled }))
 const isInvalidState = computed(() => field.value.invalid)
 const labels = useLabels<AutocompleteLabels>(
   "autocomplete",
@@ -270,14 +274,15 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <ComboboxRoot
     :open="open"
     :ignore-filter="true"
     :reset-search-term-on-blur="false"
     :reset-search-term-on-select="false"
     :disabled="field.disabled"
-    :class="['relative', attrs.class]"
-    :style="attrs.style as never"
+    :class="['relative', ownAttrs() ? attrs.class : undefined]"
+    :style="ownAttrs() ? (attrs.style as never) : undefined"
     @update:open="onOpenChange"
   >
     <ComboboxAnchor
@@ -410,4 +415,5 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       </ComboboxContent>
     </ComboboxPortal>
   </ComboboxRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpCheckbox.vue

@@ -6,12 +6,13 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import FieldWrapper from "./FieldWrapper.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
 import { computed, useId } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpLoader from "./LpLoader.vue"
-import { isAttrOn, mergeDescribedBy, useFieldControl } from "../composables/useField"
+import { isAttrOn, mergeDescribedBy, useOwnField } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -22,6 +23,8 @@ const props = withDefaults(defineProps<{
   /** Mixed state (e.g. a "select all" with a partial selection). Shows a dash. */
   indeterminate?: boolean
   disabled?: boolean
+  /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+  error?: string
   label?: string
   /** Secondary line under the label, as on LpSwitch. */
   description?: string
@@ -67,8 +70,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
     "group/check inline-flex cursor-pointer gap-2 text-sm text-ink",
     props.description ? "items-start" : "items-center",
-  ].join(" "),
-)
+  ].join(" "), () => ownAttrs())
 
 /*
  * The box is the control, so what describes it (aria-*, name, title) goes to
@@ -89,9 +91,7 @@ const parts = computed(() => {
   return { label, control }
 })
 
-const field = useFieldControl(() => ({
-  wrapped: false,
-  id: props.id,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, id: props.id,
   required: isAttrOn(rest.value.required),
   disabled: props.disabled,
 }))
@@ -104,6 +104,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <label
     :class="rootClass"
     v-bind="parts.label">
@@ -143,4 +144,5 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
     </span>
     <slot v-else>{{ label }}</slot>
   </label>
+  </FieldWrapper>
 </template>

package/src/components/LpColorPicker.vue

@@ -29,6 +29,7 @@
  * keeps the colours settled on in browser storage and offers them back above
  * the presets.
  */
+import FieldWrapper from "./FieldWrapper.vue"
 import { CONTROL_SIZE } from "./controlSize"
 import { clamp } from "../composables/clamp"
 import {
@@ -41,7 +42,7 @@ import {
 import { computed, nextTick, ref, useAttrs, watch } from "vue"
 import { useKitStorage } from "../composables/usePersisted"
 import { prefersReducedMotion } from "../composables/easing"
-import { useFieldControl, mergeDescribedBy } from "../composables/useField"
+import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import {
   clampHsv,
   DEFAULT_SWATCHES,
@@ -103,6 +104,8 @@ const props = withDefaults(
     hideInput?: boolean
     disabled?: boolean
     invalid?: boolean
+    /** A message under the control, as on LpInput: it marks it invalid and shows under it (what `form.field()` hands it). */
+    error?: string
     size?: "sm" | "md" | "lg"
     /** Trigger text beside the swatch. Defaults to the colour's own value. */
     label?: string
@@ -623,9 +626,7 @@ const menuItems = computed<ContextMenuItemDef[]>(() => {
 })
 
 const attrs = useAttrs()
-const field = useFieldControl(() => ({
-  wrapped: false,
-  invalid: props.invalid,
+const { field, wrapper, ownAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid,
   disabled: props.disabled,
 }))
 
@@ -639,6 +640,7 @@ const guardOutside = useOutsideGuard()
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PopoverRoot v-model:open="open">
     <!-- reka supports chaining `as-child` triggers onto one element, but only
          when each link forwards the props down — and LpContextMenu is a wrapper
@@ -879,4 +881,5 @@ const guardOutside = useOutsideGuard()
       </PopoverContent>
     </PopoverPortal>
   </PopoverRoot>
+  </FieldWrapper>
 </template>

package/src/components/LpDatePicker.vue

@@ -32,8 +32,9 @@ export interface DatePickerLabels extends Record<string, string> {
  * week") and, unlike the range picker's, are opt-in, so forms that already use
  * the picker keep the plain calendar they were laid out around.
  */
-import { computed, ref } from "vue"
-import { useAttrsField } from "../composables/useField"
+import FieldWrapper from "./FieldWrapper.vue"
+import { computed, ref, useAttrs } from "vue"
+import { useOwnField } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
 import type { CalendarLabels, PickerFieldProps } from "./calendar"
@@ -131,7 +132,8 @@ function clear() {
   emit("update:modelValue", undefined)
 }
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, controlAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 const text = useLabels<DatePickerLabels>(
   "datePicker",
   {
@@ -172,8 +174,9 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PickerField
-    v-bind="attrs"
+    v-bind="controlAttrs"
     v-model:open="open"
     :field="field"
     :display="display"
@@ -221,4 +224,5 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
       </div>
     </div>
   </PickerField>
+  </FieldWrapper>
 </template>

package/src/components/LpDateRangePicker.vue

@@ -9,8 +9,9 @@ export default { inheritAttrs: false }
  * Picking the second end or a preset fills the field and closes the popover.
  * Two months sit side by side where there is room, one on a phone.
  */
-import { computed, ref } from "vue"
-import { useAttrsField } from "../composables/useField"
+import FieldWrapper from "./FieldWrapper.vue"
+import { computed, ref, useAttrs } from "vue"
+import { useOwnField } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
 import { useMediaQuery } from "../composables/useMediaQuery"
@@ -121,7 +122,8 @@ function presetFits(preset: DateRangePreset): boolean {
 
 const wide = useMediaQuery("(min-width: 640px)")
 
-const { attrs, field } = useAttrsField(() => ({ invalid: props.invalid, disabled: props.disabled }))
+const attrs = useAttrs()
+const { field, wrapper, controlAttrs } = useOwnField(() => ({ error: props.error, invalid: props.invalid, disabled: props.disabled }))
 const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled)
 
 const presetOptions = computed(() => presetList.value.map((preset) => ({
@@ -133,8 +135,9 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
 </script>
 
 <template>
+  <FieldWrapper v-bind="wrapper">
   <PickerField
-    v-bind="attrs"
+    v-bind="controlAttrs"
     v-model:open="open"
     :field="field"
     :display="display"
@@ -163,4 +166,5 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
       @update:model-value="pick"
     />
   </PickerField>
+  </FieldWrapper>
 </template>