@leavepulse/ui 0.78.0 → 0.78.1

package/src/components/LpInfraNode.vue

@@ -8,7 +8,7 @@
  * `@source` over the kit emits these classes — scoped CSS in a published
  * component doesn't reach apps that only import the kit's token css.
  */
-import { Handle, Position } from "@vue-flow/core"
+import { Handle, Position, type NodeProps } from "@vue-flow/core"
 import { computed } from "vue"
 import LpBadge from "./LpBadge.vue"
 import LpStatus from "./LpStatus.vue"
@@ -66,8 +66,9 @@ export interface InfraNodeLabels {
   old?: string
 }
 
-const props = defineProps<{
-  data: InfraNodeData
+// Vue Flow hands a custom node all of NodeProps. Declared, they stop falling
+// through onto the node's root as attributes (position="[object Object]").
+const props = defineProps<Omit<NodeProps<InfraNodeData>, "selected"> & {
   selected?: boolean
   /** Extra/overriding role styles, merged over the defaults below. */
   roles?: Record<string, InfraRoleStyle>

package/src/components/LpInput.vue

@@ -13,6 +13,7 @@ import { useInputFilter } from "../composables/useInputFilter"
 import { DEFAULT_MASK_TOKENS, useInputMask, type MaskSpec, type MaskTokens } from "../composables/useInputMask"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
+import FieldLeading from "./FieldLeading.vue"
 import LpIcon from "./LpIcon.vue"
 
 // Single source of truth for the field shell — bare input and adorned input
@@ -189,9 +190,9 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
       :class="mergeClass(shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : (attrs.class as string))"
       :style="hasField ? undefined : attrs.style"
     >
-      <span v-if="hasLeading" class="flex shrink-0 items-center text-muted">
-        <slot name="leading"><LpIcon v-if="icon" :name="icon" :size="16" /></slot>
-      </span>
+      <FieldLeading :icon="icon">
+        <template v-if="$slots.leading" #default><slot name="leading" /></template>
+      </FieldLeading>
       <input
         ref="inputEl"
         v-bind="inputAttrs"

package/src/components/LpLaneNode.vue

@@ -10,6 +10,8 @@
  * tab stays clickable-looking but is inert. Tailwind utilities only so styles
  * reach consumer apps via @source.
  */
+import type { NodeProps } from "@vue-flow/core"
+
 export interface LaneNodeData {
   label: string
   /** Optional accent colour token for the lane border + label. */
@@ -18,7 +20,9 @@ export interface LaneNodeData {
   height: number
 }
 
-const props = defineProps<{ data: LaneNodeData }>()
+// Vue Flow hands a custom node all of NodeProps. Declared, they stop falling
+// through onto the node's root as attributes (position="[object Object]").
+const props = defineProps<NodeProps<LaneNodeData>>()
 </script>
 
 <template>

package/src/components/LpNumberField.vue

@@ -16,6 +16,7 @@ import {
   NumberFieldRoot,
 } from "reka-ui"
 import { computed, useId } from "vue"
+import FieldLeading from "./FieldLeading.vue"
 import LpIcon from "./LpIcon.vue"
 import { focusLeft, useAttrsField, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
@@ -67,6 +68,8 @@ const props = withDefaults(defineProps<{
   // "Depth", "Weight" tells the reader nothing about which one wants grams.
   // Not part of the value: it is never typed, selected, or submitted.
   unit?: string
+  /** A leading icon, as on LpInput; the `leading` slot replaces it. */
+  icon?: string
   invalid?: boolean
   /** Control height, matching LpInput. */
   size?: "sm" | "md" | "lg"
@@ -151,6 +154,9 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
     @update:model-value="(v) => emit('update:modelValue', Number.isNaN(v) ? null : (v ?? null))"
     @focusout="onFocusOut"
   >
+    <FieldLeading :icon="icon" class="pl-2.5">
+      <template v-if="$slots.leading" #default><slot name="leading" /></template>
+    </FieldLeading>
     <NumberFieldDecrement
       v-if="steppers"
       :aria-label="text.decrease"
@@ -168,7 +174,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       :aria-describedby="describedBy"
       :aria-invalid="field.invalid || undefined"
       class="min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
-      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : 'px-3'"
+      :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : icon || $slots.leading ? 'pl-2 pr-3' : 'px-3'"
     />
     <!-- The unit sits between the value and the increment button, so a long one
          narrows the field rather than covering the digits. Not focusable and

package/src/components/LpPageScrollbar.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+/*
+ * The kit's overlay scrollbar for the document itself, for a page that scrolls
+ * the window (LpAppShell's default): the same bar as LpScrollArea's, drawn by
+ * the kit over the content instead of the browser's beside it.
+ *
+ *   <LpPageScrollbar top="4rem" />
+ *
+ * The browser's own bar is hidden while this is mounted, so the page no longer
+ * loses its width to a gutter, nor changes width when it starts to scroll. The
+ * scrolling stays the browser's: wheel, keyboard, touch, find-in-page, anchors,
+ * scroll restoration, sticky, a full-page screenshot and printing are untouched
+ * (the bar is not printed, and at rest it is not drawn). What the kit adds is
+ * the drawing, a thumb that drags, and a press beside it that pages.
+ *
+ * Where the browser's bars already float over the content (phones, macOS set
+ * to show them while scrolling) it draws nothing and leaves the browser's.
+ *
+ * `top` and `bottom` keep the bar clear of what covers the window's edges: a
+ * sticky header, a bottom bar. Any CSS length, a variable included, and a
+ * change eases.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { mergeClass } from "../composables/useMergedClass"
+import { nodeWindow } from "../composables/useView"
+import { BAR_FADE, BAR_Y, BAR_Y_SIZE, hideNativeBar, pageToward, SCROLL_HIDE_DELAY_MS, THUMB_Y, THUMB_Y_ROUND } from "./scrollbar"
+
+const props = withDefaults(defineProps<{ top?: string; bottom?: string }>(), { top: "0px", bottom: "0px" })
+
+/* Shorter than this the thumb is hard to catch; reka's bar holds the same floor. */
+const MIN_THUMB_PX = 18
+
+const barEl = ref<HTMLElement | null>(null)
+const active = ref(false)
+const thumb = ref({ top: 0, height: 0 })
+const scrollable = ref(false)
+const scrolling = ref(false)
+const hovered = ref(false)
+const dragging = ref(false)
+// Unset until the bar first shows: a bar mounting "hidden" would play its fade-out.
+const state = computed(() => (scrolling.value || hovered.value || dragging.value ? "visible" : shownOnce.value ? "hidden" : undefined))
+const shownOnce = ref(false)
+
+let releaseNative: (() => void) | undefined
+let doc: Document | undefined
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+let frame = 0
+let sizes: ResizeObserver | undefined
+
+function scroller(): HTMLElement | null {
+  return (doc?.scrollingElement as HTMLElement | null) ?? null
+}
+
+/* The width the browser's bar takes from the layout: 0 where it floats over the content. */
+function nativeBarWidth(d: Document): number {
+  const probe = d.createElement("div")
+  probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll"
+  d.body.append(probe)
+  const width = probe.offsetWidth - probe.clientWidth
+  probe.remove()
+  return width
+}
+
+function measure() {
+  frame = 0
+  const view = scroller()
+  const bar = barEl.value
+  if (!view || !bar) return
+  const range = view.scrollHeight - view.clientHeight
+  scrollable.value = range > 1
+  if (!scrollable.value) return
+  const track = bar.clientHeight
+  const height = Math.max(MIN_THUMB_PX, Math.round((track * view.clientHeight) / view.scrollHeight))
+  thumb.value = { height, top: Math.round(((track - height) * view.scrollTop) / range) }
+}
+function measureSoon() {
+  if (!frame && doc) frame = nodeWindow(doc).requestAnimationFrame(measure)
+}
+
+function onScroll() {
+  measureSoon()
+  scrolling.value = true
+  shownOnce.value = true
+  clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => (scrolling.value = false), SCROLL_HIDE_DELAY_MS)
+}
+function onEnter() {
+  hovered.value = true
+  shownOnce.value = true
+}
+function onLeave() {
+  hideTimer && clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    hovered.value = false
+    scrolling.value = false
+  }, SCROLL_HIDE_DELAY_MS)
+}
+
+/* A dialog that locks the page locks the bar with it. */
+function locked(): boolean {
+  return !!doc && nodeWindow(doc).getComputedStyle(doc.body).overflow === "hidden"
+}
+
+function onTrackPointerDown(event: PointerEvent) {
+  const view = scroller()
+  const thumbEl = barEl.value?.querySelector<HTMLElement>("[data-lp-thumb]")
+  if (!view || !thumbEl || event.button !== 0 || thumbEl.contains(event.target as Node) || locked()) return
+  event.preventDefault()
+  pageToward(view, "y", event.clientY < thumbEl.getBoundingClientRect().top)
+}
+
+function onThumbPointerDown(event: PointerEvent) {
+  const view = scroller()
+  const bar = barEl.value
+  if (!view || !bar || event.button !== 0 || locked()) return
+  // Not a text selection across the page, and the release is heard wherever it lands.
+  event.preventDefault()
+  const handle = event.currentTarget as HTMLElement
+  handle.setPointerCapture(event.pointerId)
+  dragging.value = true
+  const startY = event.clientY
+  const startTop = view.scrollTop
+  const perPixel = (view.scrollHeight - view.clientHeight) / Math.max(1, bar.clientHeight - thumb.value.height)
+  const move = (e: PointerEvent) => view.scrollTo({ top: startTop + (e.clientY - startY) * perPixel, behavior: "instant" })
+  const stop = () => {
+    dragging.value = false
+    handle.removeEventListener("pointermove", move)
+    handle.removeEventListener("pointerup", stop)
+    handle.removeEventListener("pointercancel", stop)
+    handle.removeEventListener("lostpointercapture", stop)
+  }
+  handle.addEventListener("pointermove", move)
+  handle.addEventListener("pointerup", stop)
+  handle.addEventListener("pointercancel", stop)
+  handle.addEventListener("lostpointercapture", stop)
+}
+
+onMounted(() => {
+  const host = barEl.value ?? undefined
+  doc = host?.ownerDocument
+  if (!doc || nativeBarWidth(doc) === 0) return
+  active.value = true
+  releaseNative = hideNativeBar(doc)
+  const win = nodeWindow(doc)
+  win.addEventListener("scroll", onScroll, { passive: true })
+  win.addEventListener("resize", measureSoon)
+  sizes = new win.ResizeObserver(measureSoon)
+  sizes.observe(doc.body)
+  if (host) sizes.observe(host)
+  measure()
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(hideTimer)
+  sizes?.disconnect()
+  if (!doc || !active.value) return
+  const win = nodeWindow(doc)
+  if (frame) win.cancelAnimationFrame(frame)
+  win.removeEventListener("scroll", onScroll)
+  win.removeEventListener("resize", measureSoon)
+  releaseNative?.()
+})
+
+const barClass = computed(() =>
+  mergeClass(
+    BAR_Y,
+    BAR_Y_SIZE.wall,
+    BAR_FADE,
+    "fixed right-0 z-(--z-sticky) transition-[top,bottom] duration-[var(--duration-medium)] ease-[var(--ease-settle)] print:hidden",
+  ),
+)
+</script>
+
+<template>
+  <!-- Always in the DOM, so it can be measured; drawn only where the kit owns the bar. -->
+  <div
+    ref="barEl"
+    aria-hidden="true"
+    data-lp-page-scrollbar
+    :class="barClass"
+    :data-state="active && scrollable ? state : undefined"
+    :style="{ top: props.top, bottom: props.bottom, visibility: active && scrollable ? undefined : 'hidden' }"
+    @pointerenter="onEnter"
+    @pointerleave="onLeave"
+    @pointerdown="onTrackPointerDown"
+  >
+    <div
+      data-lp-thumb
+      class="absolute right-px"
+      :class="[THUMB_Y, THUMB_Y_ROUND.wall]"
+      :style="{ top: `${thumb.top}px`, height: `${thumb.height}px` }"
+      @pointerdown.stop="onThumbPointerDown"
+    />
+  </div>
+</template>

package/src/components/LpScrollArea.vue

@@ -13,8 +13,20 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from "reka-ui"
-import { prefersReducedMotion } from "../composables/easing"
 import { nodeWindow } from "../composables/useView"
+import {
+  BAR_FADE,
+  BAR_X,
+  BAR_X_SIZE,
+  BAR_Y,
+  BAR_Y_SIZE,
+  pageToward,
+  SCROLL_HIDE_DELAY_MS,
+  THUMB_X,
+  THUMB_X_ROUND,
+  THUMB_Y,
+  THUMB_Y_ROUND,
+} from "./scrollbar"
 
 // `fade` softens whichever of the top/bottom edges currently has content beyond
 // it, so a clipped list reads as continuing rather than as cut off. On by
@@ -80,8 +92,7 @@ function onViewportBlur() {
 // `opacity-0` + the hidden-state fade is what keeps the bar invisible at rest:
 // with force-mount the element stays in the DOM, so a one-shot fade-out alone
 // would snap back to visible once the animation finished.
-const barFade =
-  "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
+const edge = computed(() => (props.floating ? "floating" : "wall"))
 
 // Dragging the thumb pulls the pointer off the bar and across the content, and
 // the browser reads that as a text selection — the rows highlight blue while
@@ -197,13 +208,9 @@ onBeforeUnmount(() => {
 })
 
 /*
- * A press on the bar beside the thumb. reka treats any press on the track as
- * "put the thumb's middle under the pointer" and sets the scroll in one go,
- * so a press that just missed the narrow thumb yanked the content by half a
- * thumb, and a press further away teleported it. Like a native bar, a press
- * off the thumb now pages one viewport towards the pointer, smoothly; the
- * thumb itself has a hit area as wide as the bar (see its `before:`), so a
- * press that meant to grab it does.
+ * A press on the bar beside the thumb pages towards the pointer (pageToward)
+ * instead of reka's jump; the thumb's hit area is as wide as the bar (its
+ * `before:`), so a press that meant to grab it does.
  */
 function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   const el = viewportEl.value
@@ -213,10 +220,7 @@ function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   event.preventDefault()
   event.stopImmediatePropagation()
   const rect = thumb.getBoundingClientRect()
-  const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left
-  const step = (axis === "y" ? el.clientHeight : el.clientWidth) * 0.85 * (before ? -1 : 1)
-  const behavior = prefersReducedMotion() ? "auto" : "smooth"
-  el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+  pageToward(el, axis, axis === "y" ? event.clientY < rect.top : event.clientX < rect.left)
 }
 
 let stopThumbDrag: (() => void) | null = null
@@ -253,7 +257,7 @@ function onThumbPointerDown(event: PointerEvent) {
     class="relative flex flex-col overflow-hidden"
     :class="dragging ? 'select-none' : undefined"
     type="hover"
-    :scroll-hide-delay="500"
+    :scroll-hide-delay="SCROLL_HIDE_DELAY_MS"
   >
     <!-- The bar itself is a pointer target far wider than it looks: the visible
          rail is the thumb, sized below, while the track pads it out to a
@@ -273,8 +277,8 @@ function onThumbPointerDown(event: PointerEvent) {
     <ScrollAreaScrollbar
       orientation="vertical"
       force-mount
-      class="group z-1 flex touch-none select-none justify-end pl-2.5"
-      :class="[barFade, floating ? 'w-4 py-1 pr-1' : 'w-3.5 py-px pr-px']"
+      class="z-1"
+      :class="[BAR_Y, BAR_FADE, BAR_Y_SIZE[edge]]"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
       @pointerdown.capture="onTrackPointerDown($event, 'y')"
     >
@@ -286,22 +290,22 @@ function onThumbPointerDown(event: PointerEvent) {
            the positioning reka owns. -->
       <ScrollAreaThumb
         data-lp-thumb
-        class="relative min-w-1 bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
-        :class="floating ? 'rounded-pill' : 'rounded-l-pill'"
+        class="relative"
+        :class="[THUMB_Y, THUMB_Y_ROUND[edge]]"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
 
     <ScrollAreaScrollbar
       orientation="horizontal"
-      class="group z-1 flex flex-col touch-none select-none justify-end pt-2.5"
-      :class="[barFade, floating ? 'h-4 px-1 pb-1' : 'h-3.5 px-px pb-px']"
+      class="z-1"
+      :class="[BAR_X, BAR_FADE, BAR_X_SIZE[edge]]"
       @pointerdown.capture="onTrackPointerDown($event, 'x')"
     >
       <ScrollAreaThumb
         data-lp-thumb
-        class="relative min-h-1 bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
-        :class="floating ? 'rounded-pill' : 'rounded-t-pill'"
+        class="relative"
+        :class="[THUMB_X, THUMB_X_ROUND[edge]]"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>

package/src/components/LpServiceNode.vue

@@ -5,7 +5,7 @@
  * depends_on edges connect these across host frames. Tailwind utilities only
  * (no scoped CSS) so styles reach consumer apps via @source.
  */
-import { Handle, Position } from "@vue-flow/core"
+import { Handle, Position, type NodeProps } from "@vue-flow/core"
 import { computed } from "vue"
 
 export interface ServiceNodeData {
@@ -16,7 +16,9 @@ export interface ServiceNodeData {
   dimmed?: boolean
 }
 
-const props = defineProps<{ data: ServiceNodeData; selected?: boolean }>()
+// Vue Flow hands a custom node all of NodeProps. Declared, they stop falling
+// through onto the node's root as attributes (position="[object Object]").
+const props = defineProps<Omit<NodeProps<ServiceNodeData>, "selected"> & { selected?: boolean }>()
 
 const kindVar: Record<string, string> = {
   service: "var(--color-brand)",

package/src/components/LpStat.vue

@@ -15,7 +15,7 @@ import LpSkeleton from "./LpSkeleton.vue"
 import LpStatus from "./LpStatus.vue"
 import { useFitScale } from "../composables/useFitScale"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { TONES } from "./tone"
+import { TONES, toneOf, type ToneName } from "./tone"
 
 const props = withDefaults(
   defineProps<{
@@ -59,10 +59,26 @@ const props = withDefaults(
      * (it names the tile, it is not data); an empty one pulses too.
      */
     loading?: boolean
+    /**
+     * Colour of the figure, from the kit's tones (`danger` for offenders,
+     * `success`, `warning`…). Unset, it is ink. The delta keeps its own colour.
+     */
+    tone?: ToneName
+    /** Size of the figure: `lg` (the tile's own, text-3xl), `md` or `sm` for a dense row. */
+    size?: "sm" | "md" | "lg"
   }>(),
-  { trend: "auto", decimals: 0, animateOnMount: true },
+  { trend: "auto", decimals: 0, animateOnMount: true, size: "lg" },
 )
 
+/* The figure's type, and the variable its fit to the tile scales from. */
+const FIGURE_SIZE = {
+  sm: { class: "text-lg", font: "var(--text-lg, 1.125rem)", line: "var(--text-lg--line-height, 1.55)" },
+  md: { class: "text-2xl", font: "var(--text-2xl, 1.5rem)", line: "var(--text-2xl--line-height, 1.33)" },
+  lg: { class: "text-3xl", font: "var(--text-3xl, 1.875rem)", line: "var(--text-3xl--line-height, 1.2)" },
+} as const
+const figureSize = computed(() => FIGURE_SIZE[props.size])
+const figureColor = computed(() => (props.tone ? TONES[toneOf(props.tone)].text : "text-ink"))
+
 // Resolve the trend direction: explicit wins; "auto" reads a numeric delta.
 const dir = computed<"up" | "down" | "flat">(() => {
   if (props.trend !== "auto") return props.trend
@@ -136,7 +152,11 @@ const FIT_MIN = 0.6
 const row = ref<HTMLElement | null>(null)
 const figure = ref<HTMLElement | null>(null)
 const fit = useFitScale(row, figure, FIT_MIN)
-const figureStyle = computed(() => (fit.scale.value < 1 ? { fontSize: `calc(var(--text-3xl, 1.875rem) * ${fit.scale.value})`, lineHeight: "calc(var(--text-3xl, 1.875rem) * var(--text-3xl--line-height, 1.2))" } : undefined))
+const figureStyle = computed(() => {
+  if (fit.scale.value >= 1) return undefined
+  const { font, line } = figureSize.value
+  return { fontSize: `calc(${font} * ${fit.scale.value})`, lineHeight: `calc(${font} * ${line})` }
+})
 const figureTitle = computed(() => (fit.clipped.value && !props.loading ? `${props.prefix ?? ""}${props.value}${props.valueSuffix ?? ""}` : undefined))
 
 // A stat tile spaces its label and value on a fixed gap; a dense KPI row needs that tighter.
@@ -168,8 +188,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
            is the real one: the tile cannot change height when the figure lands. -->
       <span
         ref="figure"
-        class="max-w-full whitespace-nowrap font-mono text-3xl font-medium tracking-tight text-ink"
-        :class="fit.clipped.value ? 'inline-block overflow-hidden text-ellipsis align-bottom' : ''"
+        class="max-w-full whitespace-nowrap font-mono font-medium tracking-tight"
+        :class="[figureSize.class, figureColor, fit.clipped.value ? 'inline-block overflow-hidden text-ellipsis align-bottom' : '']"
         :style="figureStyle"
         :title="figureTitle"
       >

package/src/components/LpTooltip.vue

@@ -296,6 +296,12 @@ const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
 // the page) is not "outside" for this layer.
 const guardOutside = useOutsideGuard()
+
+// Several roots (trigger and portal), so Vue cannot hand attributes on by
+// itself and dropped them: a trigger wrapped around this one from outside (an
+// LpPopover's, as-child) lost its id, ARIA state and click, and its popover
+// never opened. They go to the trigger, which merges them onto the slot's element.
+defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
@@ -318,6 +324,7 @@ const guardOutside = useOutsideGuard()
            lands on the real button rather than on a wrapper. -->
       <TooltipTrigger
         as-child
+        v-bind="$attrs"
         :aria-label="label ? content : undefined"
         @pointermove="onPointerMove"
       >

package/src/components/LpTopologyCanvas.vue

@@ -30,6 +30,7 @@ import { useResizeObserver } from "../composables/useResizeObserver"
 import { isHTMLElement, nodeWindow } from "../composables/useView"
 import { backgroundOf, resolveCssColor, svgToPng } from "./exportData"
 import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
 import LpInfraNode, { type InfraNodeData } from "./LpInfraNode.vue"
 import LpInput from "./LpInput.vue"
 import LpLaneNode from "./LpLaneNode.vue"
@@ -962,9 +963,10 @@ defineExpose({
         :key="action.id"
         size="sm"
         variant="outline"
-        :icon="action.icon"
         @click="emit('selection-action', { action: action.id, ids: selectedIds })"
       >
+        <!-- LpButton has no icon prop: an :icon here fell through and drew nothing. -->
+        <LpIcon v-if="action.icon" :name="action.icon" :size="14" />
         {{ action.label }}
       </LpButton>
     </Panel>

package/src/components/scrollbar.ts

@@ -0,0 +1,71 @@
+import { prefersReducedMotion } from "../composables/easing"
+import { nodeWindow } from "../composables/useView"
+
+/*
+ * The kit's overlay scrollbar, shared by LpScrollArea (reka's bar over its own
+ * viewport) and LpPageScrollbar (the document's, drawn by the kit), so the two
+ * look and answer alike.
+ *
+ * The bar is a pointer target far wider than it looks: the visible rail is the
+ * thumb, while the bar pads it out to a grabbable strip (a 4px-wide hit area is
+ * near-impossible to catch with a mouse). Padding, not width, carries the room
+ * so the thumb stays flush against the wall. The thumb is sized with
+ * min-width/min-height: reka sets an inline width from a variable it never
+ * defines for a vertical bar, and a minimum wins over that.
+ */
+export const BAR_Y = "group flex touch-none select-none justify-end pl-2.5"
+export const BAR_X = "group flex flex-col touch-none select-none justify-end pt-2.5"
+/* Against a wall, and inside a card or panel (a gap from the edge). */
+export const BAR_Y_SIZE = { wall: "w-3.5 py-px pr-px", floating: "w-4 py-1 pr-1" }
+export const BAR_X_SIZE = { wall: "h-3.5 px-px pb-px", floating: "h-4 px-1 pb-1" }
+
+export const THUMB_Y =
+  "min-w-1 bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
+export const THUMB_X =
+  "min-h-1 bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
+/* Rounded on the outer edge only against a wall; at both ends inside a card. */
+export const THUMB_Y_ROUND = { wall: "rounded-l-pill", floating: "rounded-pill" }
+export const THUMB_X_ROUND = { wall: "rounded-t-pill", floating: "rounded-pill" }
+
+/* In and out by the bar's `data-state` (visible | hidden), as reka sets it. */
+export const BAR_FADE =
+  "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
+
+/* How long the bar stays after the last scroll or the pointer leaving it. */
+export const SCROLL_HIDE_DELAY_MS = 500
+
+/* A press beside the thumb pages this much of the view towards the pointer. */
+const PAGE_FRACTION = 0.85
+
+/**
+ * A press on the bar beside the thumb. Like a native bar it pages one view
+ * towards the pointer, smoothly, rather than putting the thumb's middle under
+ * it (reka's own answer, which yanked the content by half a thumb on a near
+ * miss and teleported it on a far press).
+ */
+export function pageToward(scroller: Element, axis: "x" | "y", before: boolean): void {
+  const view = axis === "y" ? scroller.clientHeight : scroller.clientWidth
+  const step = view * PAGE_FRACTION * (before ? -1 : 1)
+  const behavior = prefersReducedMotion(nodeWindow(scroller)) ? "auto" : "smooth"
+  scroller.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+}
+
+/* Owners per document, so two page bars cannot give the browser's bar back early. */
+const nativeHidden = new WeakMap<Document, number>()
+
+/**
+ * Hide the document's own scrollbar (`lp-scrollbar-none` on <html>) while the
+ * kit draws one. Scrolling is untouched. Returns the release.
+ */
+export function hideNativeBar(doc: Document): () => void {
+  nativeHidden.set(doc, (nativeHidden.get(doc) ?? 0) + 1)
+  doc.documentElement.classList.add("lp-scrollbar-none")
+  let released = false
+  return () => {
+    if (released) return
+    released = true
+    const left = (nativeHidden.get(doc) ?? 1) - 1
+    nativeHidden.set(doc, left)
+    if (!left) doc.documentElement.classList.remove("lp-scrollbar-none")
+  }
+}

package/src/composables/propCheck.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, Plugin } from "vue"
+import { Teleport, type ComponentPublicInstance, type Plugin, type VNode } from "vue"
 
 /*
  * Development check for a misspelt prop on a kit component.
@@ -61,11 +61,26 @@ export function unknownAttributes(
   })
 }
 
+/*
+ * The elements a component rendered at its top. Not `$el`: with several roots
+ * (a trigger and its portal) that is the fragment's empty text anchor, which
+ * made every attribute look unknown. A teleport's content is left out, since
+ * nothing a caller passes lands there.
+ */
+function rootElements(vnode: VNode | null | undefined, out: Element[] = []): Element[] {
+  if (!vnode || vnode.type === Teleport) return out
+  if (vnode.component) return rootElements(vnode.component.subTree, out)
+  const el = vnode.el as Node | null
+  if (el?.nodeType === 1) {
+    out.push(el as Element)
+    return out
+  }
+  if (Array.isArray(vnode.children)) for (const child of vnode.children) if (child && typeof child === "object") rootElements(child as VNode, out)
+  return out
+}
+
 function renderedElements(instance: ComponentPublicInstance): Element[] {
-  const root = instance.$el as Node | null
-  if (root?.nodeType !== 1) return []
-  const el = root as Element
-  return [el, ...el.querySelectorAll(FORWARD_TARGETS)]
+  return rootElements(instance.$.subTree).flatMap((el) => [el, ...el.querySelectorAll(FORWARD_TARGETS)])
 }
 
 export const lpPropCheck: Plugin<[PropCheckOptions?]> = {

package/src/composables/usePaletteCommands.ts

@@ -218,8 +218,11 @@ export function usePaletteControl(options: {
           h(raw.label ? "h3" : "label", { id: `${editorId}-label`, for: raw.label ? undefined : editorId, class: "text-sm font-semibold text-ink" }, label()),
           h(instance.type as Component, {
             ...raw, id: undefined, name: undefined, form: undefined, autofocus: undefined, palette: false,
-            disabled: options.disabled?.() || !writable(), invalid: options.invalid?.(),
-            required: field?.value.required ?? instance.props.required,
+            disabled: options.disabled?.() || !writable(),
+            // Only to a control that declares them: elsewhere they fell through
+            // as attributes onto its root (a switch's button took `required`).
+            ...("invalid" in instance.props ? { invalid: options.invalid?.() } : {}),
+            ...("required" in instance.props ? { required: field?.value.required ?? instance.props.required } : {}),
             "aria-label": label(), class: "w-full", style: undefined,
           }, instance.slots),
           error() || hint() ? h("p", { id: `${editorId}-message`, class: error() ? "text-xs text-danger" : "text-xs text-muted", role: error() ? "alert" : undefined }, error() || hint()) : null,