@leavepulse/ui 0.72.0 → 0.72.2

package/dist/index.js

@@ -1,22 +1,22 @@
 import { _ } from "./chunks/LayoutCanvas-CNOAUk7D.js";
-import { _ as _2 } from "./chunks/LpAddressInput-B1bB3F6M.js";
-import { _ as _3 } from "./chunks/LpMapPicker-DNIUvF6V.js";
+import { _ as _2 } from "./chunks/LpAddressInput-q8Vu3M8z.js";
+import { _ as _3 } from "./chunks/LpMapPicker-CmuOTS7N.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpActionBar-DfiBL1dE.js";
-import { _ as _5 } from "./chunks/LpAlert-CpRF9eYr.js";
-import { _ as _6 } from "./chunks/LpAppShell-D8Q0Jv9d.js";
+import { _ as _4 } from "./chunks/LpActionBar-DZP0IpXS.js";
+import { _ as _5 } from "./chunks/LpAlert-CGeYc3fe.js";
+import { _ as _6 } from "./chunks/LpAppShell-oB-QWu74.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DOu7FN5P.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cg6Az3wz.js";
-import { _ as _9 } from "./chunks/LpBadge-vtCpsDmv.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-BdzjQcql.js";
-import { _ as _11 } from "./chunks/LpButton-Dk7eT4ro.js";
+import { _ as _9 } from "./chunks/LpBadge-BVDOfrqI.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-DJvcYVPM.js";
+import { _ as _11 } from "./chunks/LpButton-Cse4COe7.js";
 import { _ as _12 } from "./chunks/LpCalendar-CuoWks-0.js";
-import { _ as _13 } from "./chunks/LpCard-Ce3rw8zm.js";
+import { _ as _13 } from "./chunks/LpCard-BoB-UqzE.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { backgroundOf, csvField, downloadFile, fileStem, inlineSvg, resolveCssColor, svgToPng, toCsv } from "./components/exportData.js";
 import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceScale, resolveSlices } from "./components/chart.js";
-import { _ as _14 } from "./chunks/LpCheckbox-DLX4amba.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-j0W5bpmF.js";
+import { _ as _14 } from "./chunks/LpCheckbox-B6lfW2GC.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-BjptdRIt.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
 import { _ as _16 } from "./chunks/LpColorPicker-1y1QJHZR.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
@@ -30,8 +30,8 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-w1ni5nxh.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-Br_-Gn-6.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-DqsrdJSK.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-BT8iDrWb.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-rx2tCjwk.js";
 import { _ as _21 } from "./chunks/LpDatePicker-CA0QTfBC.js";
@@ -44,31 +44,31 @@ import { _ as _26 } from "./chunks/LpDrawer-RRamxbLV.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-Dl7Z4ZhS.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-EQHiRYhG.js";
-import { _ as _29 } from "./chunks/LpFileTree-D7KTaJiM.js";
+import { _ as _29 } from "./chunks/LpFileTree-Cnw35H2X.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-CzQ2_5rQ.js";
-import { _ as _31 } from "./chunks/LpFormField-MSQhRCTz.js";
+import { _ as _31 } from "./chunks/LpFormField-CjnOXjFq.js";
 import { _ as _32 } from "./chunks/LpIcon--5WSb3jJ.js";
 import { i, b, a, c } from "./chunks/icons-DMITlfw5.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
-import { _ as _33 } from "./chunks/LpInfraNode-BT0VQrOa.js";
-import { _ as _34 } from "./chunks/LpInput-1eNvtzXs.js";
-import { _ as _35 } from "./chunks/LpLightbox-DWw6OSA4.js";
+import { _ as _33 } from "./chunks/LpInfraNode-CZrDvfnL.js";
+import { _ as _34 } from "./chunks/LpInput-D9uwTIqP.js";
+import { _ as _35 } from "./chunks/LpLightbox-DlNPihiz.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-pzanZASC.js";
+import { _ as _37 } from "./chunks/LpLogViewer-By_fmDpN.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _38 } from "./chunks/LpMediaGallery-Dx8xzg5N.js";
+import { _ as _38 } from "./chunks/LpMediaGallery-Dh5ONZt1.js";
 import { _ as _39 } from "./chunks/LpModal-BnjZ2iem.js";
-import { _ as _40 } from "./chunks/LpModalNav-Cu04W1pV.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-PSQqFqEv.js";
+import { _ as _40 } from "./chunks/LpModalNav-CThPOPAF.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-674IgUph.js";
 import { _ as _42 } from "./chunks/LpNumberField-e0IBkWU1.js";
 import { _ as _43 } from "./chunks/LpTimeField-BawSVsmt.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-CcxEGUy0.js";
 import { _ as _45 } from "./chunks/LpOtpInput-CeBPsM7D.js";
 import { _ as _46 } from "./chunks/LpPagination-BIIiYHXR.js";
-import { _ as _47 } from "./chunks/LpPasswordInput-vdcw-koG.js";
-import { _ as _48 } from "./chunks/LpPie-BlWDxCtG.js";
+import { _ as _47 } from "./chunks/LpPasswordInput-DNCvyY6N.js";
+import { _ as _48 } from "./chunks/LpPie-DCpGXbRS.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-CETEp5W7.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DmZ3wUtP.js";
@@ -82,41 +82,41 @@ import { _ as _57 } from "./chunks/LpSection-DFK_uoJE.js";
 import { _ as _58 } from "./chunks/LpSelect-Cxq4yBGd.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _60 } from "./chunks/LpShift-BAp8lGoa.js";
-import { _ as _61 } from "./chunks/LpSwap-B5YOXgtx.js";
+import { _ as _60 } from "./chunks/LpShift-DLU4_TFf.js";
+import { _ as _61 } from "./chunks/LpSwap-BA5fh77B.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-BftYsk5d.js";
+import { _ as _63 } from "./chunks/LpSidebar-DVPinvaL.js";
 import { _ as _64 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _65 } from "./chunks/LpSlider-DxYoCJJO.js";
 import { _ as _66 } from "./chunks/LpRangeSlider-CM-0ZITZ.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-BFCM6fUn.js";
-import { _ as _70 } from "./chunks/LpStepper-BgqjKrqg.js";
-import { _ as _71 } from "./chunks/LpSwitch-DyrRes7s.js";
+import { _ as _69 } from "./chunks/LpStat-tq-f6ZzL.js";
+import { _ as _70 } from "./chunks/LpStepper-B15etK5F.js";
+import { _ as _71 } from "./chunks/LpSwitch-ByaxQKEm.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-CraicEs4.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
-import { _ as _73 } from "./chunks/LpBottomNav-VXJf0cKc.js";
-import { _ as _74 } from "./chunks/LpTagsInput-DAZNNehI.js";
+import { _ as _73 } from "./chunks/LpBottomNav-w_5LKno0.js";
+import { _ as _74 } from "./chunks/LpTagsInput-CSv62X4B.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _75 } from "./chunks/LpTextarea-DbmVPj2X.js";
-import { _ as _76 } from "./chunks/LpThemeSwitcher-Dcx-VkSk.js";
+import { _ as _75 } from "./chunks/LpTextarea-Blv8qdz0.js";
+import { _ as _76 } from "./chunks/LpThemeSwitcher-BGIVrM1l.js";
 import { _ as _77 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _78 } from "./chunks/LpToaster-50hp_B5O.js";
+import { _ as _78 } from "./chunks/LpToaster-D5Pj_wc9.js";
 import { _ as _79 } from "./chunks/LpTooltip-BcBvIx4z.js";
-import { _ as _80 } from "./chunks/LpTour-DC3LTlxg.js";
+import { _ as _80 } from "./chunks/LpTour-BU4JX3RU.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _81 } from "./chunks/LpHintLayer-CmYm37z7.js";
-import { _ as _82 } from "./chunks/LpHints-iLIRUkCj.js";
+import { _ as _81 } from "./chunks/LpHintLayer-DWWn7Xm2.js";
+import { _ as _82 } from "./chunks/LpHints-Ctl4p_tS.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _83 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _84 } from "./chunks/LpTopologyCanvas-CnUh8uzS.js";
-import { _ as _85 } from "./chunks/LpUptimeBar-CuB0LX8K.js";
+import { _ as _84 } from "./chunks/LpTopologyCanvas-Bq-k5tgI.js";
+import { _ as _85 } from "./chunks/LpUptimeBar-Cdq76qi_.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";
@@ -124,7 +124,7 @@ import { layoutController, useLayout } from "./layout/useLayout.js";
 import { a as parseTheme, s as serializeTheme } from "./chunks/LpThemeProvider-8MG6yqU9.js";
 import { D, _ as _86, 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/LpThemeProvider-8MG6yqU9.js";
 import { G, N, d as d2, i as i3, s } from "./chunks/backdrop-Dkf2vM81.js";
-import { _ as _87, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-DWtG6OZZ.js";
+import { _ as _87, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-DYQP_qbp.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,10 +163,10 @@ import { useToast } from "./composables/useToast.js";
 import { _ as _88 } from "./chunks/LpFrame-BVQCQLDI.js";
 import { _ as _89 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
-import { _ as _90 } from "./chunks/LpRepeater-fliVBcN7.js";
+import { _ as _90 } from "./chunks/LpRepeater-BnOQXjWo.js";
 import { _ as _91 } from "./chunks/LpGauge-BO1PYYqD.js";
 import { _ as _92 } from "./chunks/LpQuota-B12yijdB.js";
-import { _ as _93 } from "./chunks/LpStatus-BWTLVPVh.js";
+import { _ as _93 } from "./chunks/LpStatus-Chbh_JJr.js";
 import { _ as _94 } from "./chunks/LpRelativeTime-DwgCb5-8.js";
 import { _ as _95 } from "./chunks/LpActivityLine-CJvzrNpj.js";
 import { TONE_COLOR, TONE_SOFT, arcPath, capacityThresholds, meterFraction, toneAt } from "./components/meter.js";
@@ -175,20 +175,20 @@ import { formatAmount, quotaSegments, quotaState } from "./components/quota.js";
 import { compactNumber, decimalMark, formatBytes } from "./components/format.js";
 import { STATUS_LABELS, STATUS_LOOK } from "./components/status.js";
 import { formatRelativeTime } from "./components/relativeTime.js";
-import { _ as _96 } from "./chunks/LpPipeline-BXjoxkq_.js";
-import { _ as _97 } from "./chunks/LpStepMark-DkdkebLC.js";
+import { _ as _96 } from "./chunks/LpPipeline-wh1SzEHF.js";
+import { _ as _97 } from "./chunks/LpStepMark-C064WOYG.js";
 import { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed } from "./components/pipeline.js";
-import { _ as _98 } from "./chunks/LpLoader-B82_CcV0.js";
+import { _ as _98 } from "./chunks/LpLoader-DBVl6KDH.js";
 import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
-import { _ as _99 } from "./chunks/LpCountdown-Cgy0mVEq.js";
+import { _ as _99 } from "./chunks/LpCountdown-9QnxUFXk.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
-import { _ as _100 } from "./chunks/LpCopyButton-DaD1KCn6.js";
-import { _ as _101 } from "./chunks/LpSecretField-D_IMxEGW.js";
-import { _ as _102 } from "./chunks/LpDataList-CkcGFJgv.js";
-import { _ as _103 } from "./chunks/LpEditable-D3PvD6Zm.js";
-import { _ as _104 } from "./chunks/LpTruncate-Ced4gquB.js";
-import { _ as _105 } from "./chunks/LpCodeDisplay-COdiv4xu.js";
+import { _ as _100 } from "./chunks/LpCopyButton-DhptBlXE.js";
+import { _ as _101 } from "./chunks/LpSecretField-Ck0Mx6xx.js";
+import { _ as _102 } from "./chunks/LpDataList-_D19wjXa.js";
+import { _ as _103 } from "./chunks/LpEditable-BdjKjOMG.js";
+import { _ as _104 } from "./chunks/LpTruncate-Cb7MDTD7.js";
+import { _ as _105 } from "./chunks/LpCodeDisplay-BkVeLcLM.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _106 } from "./chunks/LpHoverCard-spGxyw7T.js";
 import { _ as _107 } from "./chunks/LpIdenticon-BzdC_qz9.js";
@@ -200,7 +200,7 @@ import { pseudoLocalize } from "./composables/pseudoLocale.js";
 import { _ as _110 } from "./chunks/LpTextReveal-CtAnOUkp.js";
 import { _ as _111 } from "./chunks/LpShinyText-DX2ajtWq.js";
 import { _ as _112 } from "./chunks/LpTypewriter-BCL_a6wE.js";
-import { _ as _113 } from "./chunks/LpScramble-Cw-af0Yh.js";
+import { _ as _113 } from "./chunks/LpScramble-INTKwGsY.js";
 import { useScramble } from "./composables/useScramble.js";
 import { useInView } from "./composables/useInView.js";
 import { SCRAMBLE_GLYPHS, graphemes, planScramble, randomGlyph, scrambleFrame, seededRandom, settledCells } from "./components/scramble.js";
@@ -217,7 +217,7 @@ import { spotlightPoint, useSpotlight } from "./composables/useSpotlight.js";
 import { _ as _119 } from "./chunks/LpCommandScope-BlKcgBnK.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
 import { u as u3 } from "./chunks/palette-Cvxl_1tM.js";
-import { _ as _120 } from "./chunks/LpPaletteTheme-D05ywM1W.js";
+import { _ as _120 } from "./chunks/LpPaletteTheme-hsYXczIM.js";
 const UI_CONFIG_VERSION = 1;
 function serializeConfig(config) {
   const out = {

package/package.json

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

package/src/components/LpKeys.vue

@@ -34,7 +34,11 @@ const steps = computed(() => (Array.isArray(props.combo) ? [props.combo] : combo
   <span class="lp-keys" :class="`lp-keys--${size}`">
     <template v-for="(step, stepIndex) in steps" :key="stepIndex">
       <span v-if="stepIndex" class="lp-keys__then">{{ text.then }}</span>
-      <kbd v-for="(key, index) in step" :key="`${key}-${index}`">{{ appleModifierLabel(key.trim(), apple) }}</kbd>
+      <!-- A chord never splits: squeezed, the keys wrap between steps, not
+           between Ctrl and K. -->
+      <span class="lp-keys__step">
+        <kbd v-for="(key, index) in step" :key="`${key}-${index}`">{{ appleModifierLabel(key.trim(), apple) }}</kbd>
+      </span>
     </template>
     <span v-if="label || $slots.default" class="lp-keys__label"><slot>{{ label }}</slot></span>
   </span>
@@ -48,6 +52,11 @@ const steps = computed(() => (Array.isArray(props.combo) ? [props.combo] : combo
   gap: 3px;
   color: var(--color-muted);
 }
+.lp-keys__step {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
 .lp-keys__then {
   padding: 0 2px;
   font-size: 0.68rem;

package/src/components/LpShift.vue

@@ -101,8 +101,6 @@ const EASE = "cubic-bezier(0.2, 0, 0, 1)"
 const GHOST = "data-lp-shift-ghost"
 
 interface Seen {
-  from: number
-  top: number
   width: number
   height: number
   x: number
@@ -124,12 +122,9 @@ function elementsOf(box: HTMLElement): Element[] {
 }
 
 function remember(box: HTMLElement) {
-  const outer = box.getBoundingClientRect()
   for (const node of elementsOf(box)) {
     const r = node.getBoundingClientRect()
     seen.set(node, {
-      from: props.anchor === "end" ? outer.right - r.right : r.left - outer.left,
-      top: r.top - outer.top,
       width: r.width,
       height: r.height,
       x: r.left,
@@ -149,14 +144,21 @@ function ghost(box: HTMLElement, node: Element) {
   copy.inert = true
   Object.assign(copy.style, {
     position: "absolute",
-    top: `${at.top}px`,
-    [props.anchor === "end" ? "right" : "left"]: `${at.from}px`,
+    left: "0px",
+    top: "0px",
     width: `${at.width}px`,
     height: `${at.height}px`,
     margin: "0",
     pointerEvents: "none",
   })
   box.appendChild(copy)
+  // The box is not made a positioning context (content inside it may centre
+  // itself against an ancestor further out), so the clone is placed against
+  // whatever it is positioned from: put at that origin, measured, and moved
+  // by the difference to where the element was last seen.
+  const origin = copy.getBoundingClientRect()
+  copy.style.left = `${at.x - origin.left}px`
+  copy.style.top = `${at.y - origin.top}px`
   copy
     .animate(
       [
@@ -231,6 +233,17 @@ watch(
   { flush: "post" },
 )
 
+// A child that changed inside itself (a label rolling to a longer word) moves
+// its neighbours without any child coming or going: when the box starts to
+// resize, every child glides from where it was last seen.
+watch(resizing, (now) => {
+  const box = el.value
+  if (!now || !box || !presenceObserver || prefersReducedMotion()) return
+  requestAnimationFrame(() => {
+    for (const child of box.children) if (!child.hasAttribute(GHOST)) glide(child)
+  })
+})
+
 onBeforeUnmount(() => {
   presenceObserver?.disconnect()
   presenceSize?.disconnect()
@@ -253,8 +266,11 @@ defineExpose({ resizing })
         ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
         : '',
       resizing ? 'overflow-hidden' : '',
+      // While the box holds a width its content has outgrown, a flex row would
+      // squeeze its children to fit (a button's keys folding into a column)
+      // instead of letting the easing edge clip them.
+      resizing && axis !== 'height' ? '[&>*]:shrink-0' : '',
       resizing && anchor === 'end' ? 'justify-end' : '',
-      presence ? 'relative' : '',
     ]"
   >
     <slot :resizing="resizing" />

package/src/components/LpSidebarNav.vue

@@ -20,7 +20,7 @@ import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpSidebarRow from "./LpSidebarRow.vue"
-import type { SidebarItem, SidebarSection } from "./sidebar"
+import { waiting, type SidebarItem, type SidebarSection } from "./sidebar"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -196,7 +196,12 @@ function onKey(event: KeyboardEvent) {
 const SECTION = "lp-section:"
 function sectionItem(section: SidebarSection): SidebarItem {
   const icon = section.icon ?? section.items.find((i) => i.icon)?.icon
-  return { id: `${SECTION}${sectionKey(section)}`, label: section.title ?? "", icon, children: section.items }
+  return {
+    id: `${SECTION}${sectionKey(section)}`,
+    label: section.title ?? "",
+    icon,
+    children: section.items,
+  }
 }
 
 function activate(item: SidebarItem) {
@@ -311,6 +316,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
              It is always rendered and merely fades, never removed: taking it
              out of the row changes the heading's height, and a heading that
              resizes under the cursor makes its own click feel like a misfire. -->
+        <span
+          v-if="section.items.some(waiting)"
+          class="size-1.5 shrink-0 rounded-full bg-brand transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"
+          :class="isOpen(section) ? 'opacity-0' : 'opacity-100'"
+        />
         <LpBadge
           tone="neutral"
           class="shrink-0 transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"

package/src/components/LpSidebarRow.vue

@@ -20,7 +20,7 @@ import LpHoverCard from "./LpHoverCard.vue"
 import LpIcon from "./LpIcon.vue"
 import LpKeys from "./LpKeys.vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
-import type { SidebarItem } from "./sidebar"
+import { waiting, type SidebarItem } from "./sidebar"
 import { resolveLink, type ResolvedLink } from "./link"
 
 const props = withDefaults(
@@ -92,7 +92,11 @@ const initials = computed(() =>
     .join(""),
 )
 
-const hasBadge = computed(() => props.item.badge != null || props.item.dot)
+// Something waiting on a page under this row shows on the row while those pages
+// are out of sight, folded away or behind a compact icon: otherwise closing a
+// group would hide that anything is waiting in it.
+const hidden = computed(() => (props.compact || !props.expanded) && !!props.item.children?.some(waiting))
+const hasBadge = computed(() => props.item.badge != null || !!props.item.dot || hidden.value)
 const card = computed(() => !props.item.disabled && (props.compact || !!props.item.preview))
 const delay = computed(() => (props.compact && !props.item.preview ? 250 : props.previewDelay))
 </script>
@@ -172,7 +176,7 @@ const delay = computed(() => (props.compact && !props.item.preview ? 250 : props
                 aria-hidden="true"
                 class="pointer-events-none absolute right-2 z-10 rounded-small bg-surface-raised/90 opacity-0 transition-opacity duration-(--duration-fast) group-hover/item:opacity-100 group-focus-visible/item:opacity-100"
               />
-              <span v-if="item.dot && item.badge == null" class="relative z-10 size-2 shrink-0 rounded-full bg-brand" />
+              <span v-if="hasBadge && item.badge == null" class="relative z-10 size-2 shrink-0 rounded-full bg-brand" />
               <LpBadge v-if="item.badge != null" :tone="active ? 'brand' : 'neutral'" class="relative z-10 shrink-0">
                 <span v-if="bumped" class="absolute inset-0 animate-ping rounded-pill bg-brand/30" />
                 <LpNumberFlow v-if="typeof item.badge === 'number'" :value="item.badge" grouped :locale="locale" :animate-on-mount="false" />

package/src/components/sidebar.ts

@@ -92,3 +92,11 @@ export interface SidebarSection {
   /** Icon for the heading — shown when the group is collapsible. */
   icon?: string
 }
+
+/**
+ * Something on this page or a page under it is waiting: a count, news, a dot.
+ * A row or a group whose pages are out of sight shows it for them.
+ */
+export function waiting(item: SidebarItem): boolean {
+  return item.badge != null || !!item.dot || !!item.children?.some(waiting)
+}