@leavepulse/ui 0.77.3 → 0.78.1

package/src/components/LpShift.vue

@@ -25,6 +25,7 @@
  * The mechanism — measure the natural size, pin it in pixels, tween — lives in
  * `useShift`, and LpModal drives its panel with the same composable.
  */
+import { isElement, isHTMLElement, nodeWindow } from "../composables/useView"
 import { computed, onBeforeUnmount, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useShift, type ShiftAxis } from "../composables/useShift"
@@ -99,6 +100,7 @@ const transitionClass = computed(() => TRANSITION_CLASS[props.axis])
 const PRESENCE_MS = 200
 const MOVE_MS = 160
 const EASE = "cubic-bezier(0.2, 0, 0, 1)"
+const SVG_NS = "http://www.w3.org/2000/svg"
 const GHOST = "data-lp-shift-ghost"
 
 interface Seen {
@@ -120,7 +122,7 @@ function rememberSoon(box: HTMLElement, wait = PRESENCE_MS + 80) {
 }
 
 function elementsOf(box: HTMLElement): Element[] {
-  return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node instanceof SVGElement && !(node instanceof SVGSVGElement)))
+  return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node.namespaceURI === SVG_NS && node.localName !== "svg"))
 }
 
 function remember(box: HTMLElement) {
@@ -142,7 +144,7 @@ function remember(box: HTMLElement) {
 // override that animation's transform, and the marker would pop instead of
 // sliding.
 function inFlow(node: Element): boolean {
-  const position = getComputedStyle(node).position
+  const position = nodeWindow(node).getComputedStyle(node).position
   return position !== "absolute" && position !== "fixed"
 }
 
@@ -150,7 +152,7 @@ function inFlow(node: Element): boolean {
 // actions, a list re-keyed after a reload) is not a change anyone sees, so the
 // pair is left alone rather than flashing out and in.
 function signature(node: Node): string | undefined {
-  return node instanceof Element ? node.outerHTML : undefined
+  return isElement(node) ? node.outerHTML : undefined
 }
 
 function unchanged(records: MutationRecord[]): Set<Node> {
@@ -172,7 +174,7 @@ const offset = () => (props.anchor === "end" ? -6 : 6)
 
 function ghost(box: HTMLElement, node: Element) {
   const at = seen.get(node)
-  if (!at || !at.flow || !(node instanceof HTMLElement) || node.hasAttribute(GHOST) || at.width === 0) return
+  if (!at || !at.flow || !isHTMLElement(node) || node.hasAttribute(GHOST) || at.width === 0) return
   const copy = node.cloneNode(true) as HTMLElement
   copy.setAttribute(GHOST, "")
   copy.setAttribute("aria-hidden", "true")
@@ -207,7 +209,7 @@ function ghost(box: HTMLElement, node: Element) {
 }
 
 function arrive(node: Element) {
-  if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST) || !inFlow(node)) return
+  if (!isHTMLElement(node) || node.hasAttribute(GHOST) || !inFlow(node)) return
   node.animate(
     [
       { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
@@ -219,7 +221,7 @@ function arrive(node: Element) {
 
 function glide(node: Element) {
   const was = seen.get(node)
-  if (!was || !(node instanceof HTMLElement)) return
+  if (!was || !isHTMLElement(node)) return
   const now = node.getBoundingClientRect()
   const dx = was.x - now.left
   const dy = was.y - now.top
@@ -236,25 +238,26 @@ watch(
     presenceSize = undefined
     if (!box || !on) return
     remember(box)
-    presenceObserver = new MutationObserver((records) => {
+    const win = nodeWindow(box)
+    presenceObserver = new win.MutationObserver((records) => {
       const real = records.filter(
         (r) =>
-          ![...r.addedNodes, ...r.removedNodes].every((n) => n instanceof Element && n.hasAttribute(GHOST)),
+          ![...r.addedNodes, ...r.removedNodes].every((n) => isElement(n) && n.hasAttribute(GHOST)),
       )
-      if (real.length && !prefersReducedMotion()) {
+      if (real.length && !prefersReducedMotion(win)) {
         const added = new Set<Node>()
         const same = unchanged(real)
         for (const record of real) {
-          record.removedNodes.forEach((node) => node instanceof Element && !same.has(node) && ghost(box, node))
+          record.removedNodes.forEach((node) => isElement(node) && !same.has(node) && ghost(box, node))
           record.addedNodes.forEach((node) => {
             added.add(node)
-            if (node instanceof Element && !same.has(node)) arrive(node)
+            if (isElement(node) && !same.has(node)) arrive(node)
           })
         }
         // Measured in the next frame, which still comes before the paint: by
         // then the box has taken the classes the change gave it (held to its
         // edge), and the place an element lands is the one it will keep.
-        const parents = real.map((r) => r.target).filter((t): t is Element => t instanceof Element && !t.hasAttribute(GHOST))
+        const parents = real.map((r) => r.target).filter((t): t is Element => isElement(t) && !t.hasAttribute(GHOST))
         requestAnimationFrame(() => {
           for (const parent of parents) for (const child of parent.children) if (!added.has(child)) glide(child)
         })
@@ -262,9 +265,9 @@ watch(
       rememberSoon(box)
     })
     presenceObserver.observe(box, { childList: true, subtree: true })
-    presenceSize = new ResizeObserver(() => rememberSoon(box, 60))
+    presenceSize = new win.ResizeObserver(() => rememberSoon(box, 60))
     presenceSize.observe(box)
-    void document.fonts?.ready.then(() => rememberSoon(box, 0))
+    void box.ownerDocument.fonts?.ready.then(() => rememberSoon(box, 0))
   },
   { flush: "post" },
 )
@@ -274,7 +277,7 @@ watch(
 // resize, every child glides from where it was last seen.
 watch(resizing, (now) => {
   const box = el.value
-  if (!now || !box || !presenceObserver || prefersReducedMotion()) return
+  if (!now || !box || !presenceObserver || prefersReducedMotion(nodeWindow(box))) return
   requestAnimationFrame(() => {
     for (const child of box.children) if (!child.hasAttribute(GHOST)) glide(child)
   })

package/src/components/LpSidebar.vue

@@ -13,8 +13,10 @@
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
  */
-import { computed, nextTick, ref, useId } from "vue"
+import { clamp } from "../composables/clamp"
+import { computed, nextTick, onBeforeUnmount, ref, useId } from "vue"
 import { parseCombo, useHotkeys } from "../composables/useHotkeys"
+import { startPointerDrag } from "../composables/pointerDrag"
 import { usePersisted } from "../composables/usePersisted"
 import { useLabels } from "../composables/useLpConfig"
 import LpDrawer from "./LpDrawer.vue"
@@ -123,7 +125,7 @@ const props = withDefaults(
     persist?: string
     /**
      * Fold collapsible groups automatically once the nav has more than this
-     * many rows, counting headings and items alike.
+     * many rows, counting headings, items and the pages under them alike.
      *
      * The reason is the reader, not the pixels: a short nav is taken in at a
      * glance, a long one has to be searched, and searching a list you did not
@@ -310,9 +312,12 @@ const ownCollapsed = usePersisted<string[] | null>(
   { validate: (value): value is string[] | null => value === null || (Array.isArray(value) && value.every((k) => typeof k === "string")) },
 )
 
-/** Headings + items: what the eye actually has to walk past. */
-const navLength = computed(
-  () => groups.value.reduce((n, g) => n + g.items.length + (g.title ? 1 : 0), 0),
+/** Headings, items and their pages: what the eye actually has to walk past. */
+const navLength = computed(() =>
+  groups.value.reduce(
+    (n, g) => n + (g.title ? 1 : 0) + g.items.reduce((rows, i) => rows + 1 + (i.children?.length ?? 0), 0),
+    0,
+  ),
 )
 
 /*
@@ -340,7 +345,9 @@ function toggleSection(key: string, collapsed: boolean) {
   const next = collapsed
     ? [...new Set([...collapsedKeys.value, key])]
     : collapsedKeys.value.filter((k) => k !== key)
-  ownCollapsed.value = next
+  // A bound value is the app's: storing it too would surface a stale choice
+  // the day the binding goes. The same goes for compact and pins below.
+  if (props.collapsed === undefined) ownCollapsed.value = next
   emit("update:collapsed", next)
 }
 
@@ -351,7 +358,7 @@ function toggleSection(key: string, collapsed: boolean) {
 const ownCompact = usePersisted<boolean>(() => props.persist && `lp-sidebar:${props.persist}:compact`, false)
 const isCompact = computed(() => props.compact ?? ownCompact.value)
 function setCompact(value: boolean) {
-  ownCompact.value = value
+  if (props.compact === undefined) ownCompact.value = value
   emit("update:compact", value)
 }
 
@@ -370,12 +377,20 @@ const env = computed(() => {
 
 const DEFAULT_WIDTH = 240
 const COMPACT_WIDTH = 64
-const ownWidth = usePersisted<number>(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH)
+const ownWidth = usePersisted<number>(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH, {
+  validate: (value): value is number => typeof value === "number" && Number.isFinite(value),
+})
 const dragging = ref(false)
 
+/*
+ * The bounds apply to what is drawn, not to what is kept: a width remembered
+ * under other bounds fits today's, and comes back if they widen again.
+ */
+const boundedWidth = (width: number) => clamp(width, props.minWidth, props.maxWidth)
+
 const railWidth = computed(() => {
   if (isCompact.value) return `${COMPACT_WIDTH}px`
-  if (props.resizable) return `${ownWidth.value}px`
+  if (props.resizable) return `${boundedWidth(ownWidth.value)}px`
   return props.width
 })
 
@@ -385,34 +400,32 @@ const railWidth = computed(() => {
  * useful, and the icon rail is the honest form of "narrow".
  */
 const FOLD_AT = 132
+let stopResize: (() => void) | null = null
+onBeforeUnmount(() => stopResize?.())
+
 function startResize(event: PointerEvent) {
   if (event.button !== 0) return
-  const handle = event.currentTarget as HTMLElement
-  handle.setPointerCapture(event.pointerId)
   const from = event.clientX
-  const start = isCompact.value ? COMPACT_WIDTH : ownWidth.value
+  const start = isCompact.value ? COMPACT_WIDTH : boundedWidth(ownWidth.value)
   dragging.value = true
-  const move = (e: PointerEvent) => {
-    const wanted = start + (e.clientX - from)
-    if (wanted < FOLD_AT) {
-      // Folded by dragging: the width it unfolds to is the one it had, not
-      // the narrowest the drag passed through on its way down.
-      if (!isCompact.value) setCompact(true)
-      if (start !== COMPACT_WIDTH) ownWidth.value = start
-      return
-    }
-    if (isCompact.value) setCompact(false)
-    ownWidth.value = Math.round(Math.min(props.maxWidth, Math.max(props.minWidth, wanted)))
-  }
-  const stop = () => {
-    dragging.value = false
-    handle.removeEventListener("pointermove", move)
-    handle.removeEventListener("pointerup", stop)
-    handle.removeEventListener("pointercancel", stop)
-  }
-  handle.addEventListener("pointermove", move)
-  handle.addEventListener("pointerup", stop)
-  handle.addEventListener("pointercancel", stop)
+  stopResize = startPointerDrag(event, {
+    move(e) {
+      const wanted = start + (e.clientX - from)
+      if (wanted < FOLD_AT) {
+        // Folded by dragging: the width it unfolds to is the one it had, not
+        // the narrowest the drag passed through on its way down.
+        if (!isCompact.value) setCompact(true)
+        if (start !== COMPACT_WIDTH) ownWidth.value = start
+        return
+      }
+      if (isCompact.value) setCompact(false)
+      ownWidth.value = Math.round(boundedWidth(wanted))
+    },
+    end() {
+      dragging.value = false
+      stopResize = null
+    },
+  })
 }
 const railEl = ref<HTMLElement | null>(null)
 async function searchFromCompact() {
@@ -451,7 +464,7 @@ const pinnedItems = computed<SidebarItem[]>(() =>
 )
 function togglePin(id: string) {
   const next = pinnedIds.value.includes(id) ? pinnedIds.value.filter((k) => k !== id) : [...pinnedIds.value, id]
-  ownPinned.value = next
+  if (props.pinned === undefined) ownPinned.value = next
   emit("update:pinned", next)
 }
 
@@ -495,6 +508,32 @@ const chromeClass = computed(() =>
 // Vue can't auto-inherit a consumer-passed `class`. Take attrs over manually and
 // land them on the desktop rail (where a layout class like `shrink-0` belongs).
 defineOptions({ inheritAttrs: false })
+
+// The rail and the drawer draw the same list and the same search over it.
+const navBinds = computed(() => ({
+  groups: groups.value,
+  pinnable: props.pinnable,
+  pinned: pinnedItems.value,
+  previewDelay: props.previewDelay,
+  labels: text.value,
+  itemActive,
+  loading: props.loading,
+  skeletonRows: props.skeletonRows,
+  skeletonHeader: props.skeletonHeader,
+  collapsedKeys: collapsedKeys.value,
+  hoverFollow: props.hoverFollow,
+  onActivate: activate,
+  onToggleSection: toggleSection,
+  onTogglePin: togglePin,
+}))
+const searchField = computed(() => ({
+  size: "sm" as const,
+  icon: "lucide:search",
+  clearable: true,
+  class: "mb-2 shrink-0",
+  placeholder: placeholder.value,
+  "aria-label": placeholder.value,
+}))
 </script>
 
 <template>
@@ -558,30 +597,12 @@ defineOptions({ inheritAttrs: false })
     <LpInput
       v-if="searchable && !isCompact"
       v-model="query"
-      size="sm"
-      icon="lucide:search"
-      clearable
-      class="mb-2 shrink-0"
-      :placeholder="placeholder"
-      :aria-label="placeholder"
+      v-bind="searchField"
     />
     <LpSidebarNav
-      :groups="groups"
+      v-bind="navBinds"
       :pill-id="railPillId"
       :compact="isCompact"
-      :pinnable="pinnable"
-      :pinned="pinnedItems"
-      :preview-delay="previewDelay"
-      :labels="text"
-      :item-active="itemActive"
-      :loading="loading"
-      :skeleton-rows="skeletonRows"
-      :skeleton-header="skeletonHeader"
-      :collapsed-keys="collapsedKeys"
-      :hover-follow="hoverFollow"
-      @activate="activate"
-      @toggle-section="toggleSection"
-      @toggle-pin="togglePin"
     >
       <template v-if="$slots.item" #item="slotProps">
         <slot name="item" v-bind="slotProps" />
@@ -660,29 +681,11 @@ defineOptions({ inheritAttrs: false })
       <LpInput
         v-if="searchable"
         v-model="query"
-        size="sm"
-        icon="lucide:search"
-        clearable
-        class="mb-2 shrink-0"
-        :placeholder="placeholder"
-        :aria-label="placeholder"
+        v-bind="searchField"
       />
       <LpSidebarNav
-        :groups="groups"
+        v-bind="navBinds"
         :pill-id="drawerPillId"
-        :pinnable="pinnable"
-        :pinned="pinnedItems"
-        :preview-delay="previewDelay"
-        :labels="text"
-        :item-active="itemActive"
-        :loading="loading"
-        :skeleton-rows="skeletonRows"
-        :skeleton-header="skeletonHeader"
-        :collapsed-keys="collapsedKeys"
-        :hover-follow="hoverFollow"
-        @activate="activate"
-        @toggle-section="toggleSection"
-        @toggle-pin="togglePin"
       >
         <template v-if="$slots.item" #item="slotProps">
           <slot name="item" v-bind="slotProps" />

package/src/components/LpSidebarNav.vue

@@ -149,7 +149,8 @@ let typedAt = 0
 function onKey(event: KeyboardEvent) {
   const box = event.currentTarget as HTMLElement
   const list = [...box.querySelectorAll<HTMLElement>("[data-lp-nav-row]")].filter((r) => r.offsetParent !== null)
-  const at = list.indexOf(document.activeElement as HTMLElement)
+  // The rows' own document: inside an LpFrame the page's only knows the iframe.
+  const at = list.indexOf(box.ownerDocument.activeElement as HTMLElement)
   if (at < 0) return
   const row = list[at]!
   const go = (i: number) => {
@@ -270,7 +271,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         @activate="activate"
       />
     </div>
-    <template v-for="(section, si) in groups" :key="si">
+    <template v-for="(section, si) in groups" :key="sectionKey(section) || si">
     <!-- Compact, a group that folds is one icon: its pages open in the card
          beside it, as a page's own pages do. A hundred initials in a column
          would be no nav at all. -->

package/src/components/LpSidebarRow.vue

@@ -9,6 +9,7 @@
  * sidebar it is the row's name (and the pages under it), since the row shows
  * only an icon; with a `preview` it is a glance at the page before going there.
  */
+import { clamp } from "../composables/clamp"
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { useLocale } from "../composables/useLocale"
@@ -164,7 +165,7 @@ const delay = computed(() => (props.compact && !props.item.preview ? 250 : props
             <span
               v-if="typeof item.busy === 'number'"
               class="block h-full rounded-pill bg-brand transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)]"
-              :style="{ width: `${Math.round(Math.min(1, Math.max(0, item.busy)) * 100)}%` }"
+              :style="{ width: `${Math.round(clamp(item.busy, 0, 1) * 100)}%` }"
             />
             <span v-else class="lp-sweep absolute inset-y-0 left-0 w-2/5 rounded-pill bg-brand" />
           </span>

package/src/components/LpSlider.vue

@@ -6,11 +6,12 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import SliderRail from "./SliderRail.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Single-value slider (reka Slider). reka models value as an array; we expose
 // a plain number for the common single-thumb case. Themed via tokens.
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
-import { useFieldControl } from "../composables/useField"
+import { SliderRoot, SliderThumb } from "reka-ui"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
@@ -68,14 +69,12 @@ usePaletteControl({ disabled: () => field.value.disabled })
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >
-    <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
-      <SliderRange class="absolute h-full rounded-pill bg-brand" />
-    </SliderTrack>
+    <SliderRail />
     <SliderThumb
       :id="field.id"
       :aria-label="ariaLabel"
       :aria-labelledby="ariaLabel ? undefined : field.labelId"
-      :aria-describedby="field.describedBy"
+      :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
       class="block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
     />
   </SliderRoot>

package/src/components/LpSpotlight.vue

@@ -14,6 +14,7 @@ export default { inheritAttrs: false }
  * that is not a card. Mouse only; reduced motion draws nothing. The glow is
  * painted by `.lp-spotlight` in tokens/effects.css.
  */
+import { clamp } from "../composables/clamp"
 import { computed } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useSpotlight } from "../composables/useSpotlight"
@@ -39,7 +40,7 @@ const { class: classes, attrs: rest } = useMergedAttrs(() => "lp-spotlight round
 
 const style = computed(() => ({
   "--lp-spot-size": `${props.size}px`,
-  "--lp-spot-strength": `${Math.min(100, Math.max(0, props.strength))}%`,
+  "--lp-spot-strength": `${clamp(props.strength, 0, 100)}%`,
   ...(props.color ? { "--lp-spot-color": props.color } : {}),
 }))
 </script>

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/LpSwitch.vue

@@ -9,7 +9,7 @@ export default { inheritAttrs: false }
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
-import { useFieldControl } from "../composables/useField"
+import { mergeDescribedBy, useFieldControl } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
 import LpLoader from "./LpLoader.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -49,6 +49,8 @@ const emit = defineEmits<{
 
 const { pending, set } = useOptimisticToggle(() => props.action, emit)
 
+// A given default slot counts as the name whether or not it renders anything:
+// a slot that may come out empty leaves the switch unnamed, so pass `aria-label`.
 const slots = useSlots()
 const labelled = computed(() => Boolean(props.label || props.description || slots.default))
 
@@ -75,8 +77,8 @@ const field = useFieldControl(() => ({
   disabled: props.disabled,
 }))
 const descriptionId = `${useId()}-description`
-const describedBy = computed(
-  () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || undefined,
+const describedBy = computed(() =>
+  mergeDescribedBy(rest.value["aria-describedby"], props.description && labelled.value ? descriptionId : undefined, field.value.describedBy),
 )
 
 function onUpdate(value: boolean) {