@leavepulse/ui 0.72.0 → 0.72.1

package/src/components/LpShift.vue

@@ -231,6 +231,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,6 +264,10 @@ 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' : '',
     ]"

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)
+}