@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpThemeSwitcher.vue

@@ -11,13 +11,20 @@
  * and the choice survives a reload (anti-flash bootstrap). The component never
  * fetches; it just drives the theme engine.
  */
-import { computed, onMounted, ref } from "vue"
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from "reka-ui"
+import { computed, onMounted, ref, useId } from "vue"
 import { useLabels } from "../composables/useLpConfig"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 import { presets } from "../theme/presets"
+import { STUDIO_SYSTEM, useThemeStudio } from "../theme/studio"
 import type { TokenSet } from "../theme/tokens"
 import { useTheme } from "../theme/useTheme"
+import { POPOVER_PANEL } from "./dropdown"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
+import LpThemeStudio, { type ThemeStudioPart } from "./LpThemeStudio.vue"
 
 const props = withDefaults(
   defineProps<{
@@ -58,7 +65,19 @@ const props = withDefaults(
      */
     system?: { light: string | TokenSet; dark: string | TokenSet }
     /** Text overrides. `trigger` may contain `{name}`. */
-    labels?: Partial<{ trigger: string; system: string }>
+    labels?: Partial<{ trigger: string; system: string; studio: string; openStudio: string }>
+    /**
+     * The right-click menu ends with "Theme studio…", set apart from the
+     * themes, which opens LpThemeStudio by the trigger: the theme plus brand
+     * colour, corners, control size and motion, remembered under `studioKey`.
+     * Picks and left-click cycling go through the studio then, so a tuned
+     * brand or corner survives the next theme. Rows of the app's own go in
+     * the `#studio-start` / `#studio-end` slots, built-in ones leave with
+     * `studioHide`.
+     */
+    studio?: boolean
+    studioKey?: string
+    studioHide?: ThemeStudioPart[]
   }>(),
   {
     variant: "swatch",
@@ -73,10 +92,46 @@ const emit = defineEmits<{
 }>()
 
 const theme = useTheme()
+const systemNames = () => {
+  const pair = props.system
+  const name = (t: string | TokenSet) => (typeof t === "string" ? t : t.name)
+  return pair ? { light: name(pair.light), dark: name(pair.dark) } : undefined
+}
+const tuner = props.studio
+  ? useThemeStudio({ themes: props.themes, storageKey: props.studioKey, system: systemNames() })
+  : null
+const studioOpen = ref(false)
+const portalTo = usePortalTarget()
+const guardOutside = useOutsideGuard()
+// The trigger is not "outside" the studio: the menu hands focus back to it
+// as the studio opens, and a left-click on it while the studio is open is
+// the next theme, watched in the open panel. Found by a mark rather than a
+// template ref: PopoverAnchor's as-child puts its own ref on the element.
+// Neither is the menu that opened it: it is still fading out when the studio
+// appears, and a real pointer moving over it focuses it, which closed the
+// studio the moment it opened (a synthetic click never moves the pointer).
+const anchorId = `lp-theme-trigger-${useId()}`
+function keepForTrigger(event: Event) {
+  guardOutside(event)
+  const original = (event as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent
+  const target = (original ?? event).target as Element | null
+  if (
+    target &&
+    typeof target.closest === "function" &&
+    (target.closest(`[data-lp-theme-trigger="${anchorId}"]`) || target.closest('[data-dismissable-layer][data-state="closed"]'))
+  ) {
+    event.preventDefault()
+  }
+}
 
 const text = useLabels(
   "themeSwitcher",
-  { trigger: "Theme: {name}. Click to switch, right-click to choose.", system: "System" },
+  {
+    trigger: "Theme: {name}. Click to switch, right-click to choose.",
+    system: "System",
+    studio: "Theme studio",
+    openStudio: "Theme studio…",
+  },
   () => props.labels,
 )
 
@@ -87,7 +142,7 @@ const list = computed<TokenSet[]>(() =>
 // kit's self-managed `currentName` (so a consumer needs NO ref/bootstrap — the
 // kit remembers the theme like an i18n locale). Falls back to the first theme.
 const activeName = computed(
-  () => props.modelValue ?? (theme.currentName.value || list.value[0]?.name || ""),
+  () => props.modelValue ?? tuner?.state.value.theme ?? (theme.currentName.value || list.value[0]?.name || ""),
 )
 
 // Apply the consumer's default on mount when nothing is cached yet. init()
@@ -113,6 +168,12 @@ const wantsLabel = computed(() => props.showLabel || props.variant === "pill")
 // Apply a theme through the kit's self-managed setter (it persists + updates
 // the shared `current`), then notify. The reveal animates from the click point.
 function applyTheme(t: TokenSet, ev?: MouseEvent) {
+  if (tuner) {
+    tuner.pickTheme(t.name, ev ? { x: ev.clientX, y: ev.clientY } : undefined)
+    emit("update:modelValue", t.name)
+    emit("change", tuner.theme.value)
+    return
+  }
   if (props.transition) {
     theme.setTheme(t, ev ? { x: ev.clientX, y: ev.clientY } : undefined)
   } else {
@@ -163,6 +224,12 @@ const systemPair = computed(() => {
 function followSystem() {
   const pair = systemPair.value
   if (!pair) return
+  // With the studio, "System" is its base theme, so the tuning stays on top.
+  if (tuner) {
+    tuner.pickTheme(STUDIO_SYSTEM)
+    emit("change", tuner.theme.value)
+    return
+  }
   theme.setSystem(pair)
   const next = theme.current.value as TokenSet | null
   if (next) {
@@ -172,7 +239,7 @@ function followSystem() {
 }
 
 const menu = computed<ContextMenuItemDef[]>(() => {
-  const following = theme.system.value
+  const following = tuner ? tuner.state.value.theme === STUDIO_SYSTEM : theme.system.value
   const items: ContextMenuItemDef[] = list.value.map((t) => ({
     label: t.name,
     icon:
@@ -190,6 +257,15 @@ const menu = computed<ContextMenuItemDef[]>(() => {
       onSelect: followSystem,
     })
   }
+  // Apart from the themes, so it does not read as one more of them.
+  if (tuner) {
+    items.push({
+      label: text.value.openStudio,
+      icon: "lucide:sliders-horizontal",
+      separatorBefore: true,
+      onSelect: () => (studioOpen.value = true),
+    })
+  }
   return items
 })
 
@@ -212,7 +288,11 @@ onMounted(() => {
 })
 
 const labelName = computed(() =>
-  hydrated.value ? activeName.value : (list.value[0]?.name ?? ""),
+  hydrated.value
+    ? activeName.value === STUDIO_SYSTEM
+      ? text.value.system
+      : activeName.value
+    : (list.value[0]?.name ?? ""),
 )
 
 const triggerLabel = computed(
@@ -221,46 +301,75 @@ const triggerLabel = computed(
 </script>
 
 <template>
-  <LpContextMenu :items="menu">
-    <button
-      type="button"
-      :aria-label="triggerLabel"
-      :title="triggerLabel"
-      class="inline-flex shrink-0 items-center justify-center gap-2 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
-      :class="
-        wantsLabel
-          ? [
-              HEIGHTS[size],
-              'rounded-full border border-line bg-surface-raised pl-2 pr-3 text-ink hover:border-line-strong hover:bg-surface-soft',
-            ]
-          : [SIZES[size], 'rounded-control text-muted hover:bg-surface-soft hover:text-ink']
-      "
-      @click="cycle"
-    >
-      <!-- A preview of the applied theme: its surface and brand halves. Read from
-           the applied variables rather than the theme object, so the server's
-           render (painted from the cookie) and the client's agree. -->
-      <span
-        v-if="variant !== 'icon'"
-        class="shrink-0 rounded-full shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-ink)_22%,transparent)]"
-        :class="CHIP[size]"
-        style="background: linear-gradient(135deg, var(--color-surface) 50%, var(--color-brand) 50%)"
-      />
-      <!-- sun/moon by mode, chosen by CSS from the applied theme's mode -->
-      <span v-else class="grid shrink-0 place-items-center">
-        <LpIcon
-          name="lucide:moon"
-          :size="ICON_SIZE[size]"
-          class="in-data-[theme-mode=light]:hidden"
-        />
-        <LpIcon
-          name="lucide:sun"
-          :size="ICON_SIZE[size]"
-          class="hidden in-data-[theme-mode=light]:block"
-        />
-      </span>
+  <!-- The studio opens by the trigger, from the last item of its menu. -->
+  <PopoverRoot v-model:open="studioOpen">
+    <PopoverAnchor as-child>
+      <span :data-lp-theme-trigger="anchorId" class="inline-flex shrink-0">
+        <LpContextMenu :items="menu">
+        <button
+          type="button"
+          :aria-label="triggerLabel"
+          :title="triggerLabel"
+          class="inline-flex shrink-0 items-center justify-center gap-2 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+          :class="
+            wantsLabel
+              ? [
+                  HEIGHTS[size],
+                  'rounded-full border border-line bg-surface-raised pl-2 pr-3 text-ink hover:border-line-strong hover:bg-surface-soft',
+                ]
+              : [SIZES[size], 'rounded-control text-muted hover:bg-surface-soft hover:text-ink']
+          "
+          @click="cycle"
+        >
+          <!-- A preview of the applied theme: its surface and brand halves. Read from
+               the applied variables rather than the theme object, so the server's
+               render (painted from the cookie) and the client's agree. -->
+          <span
+            v-if="variant !== 'icon'"
+            class="shrink-0 rounded-full shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-ink)_22%,transparent)]"
+            :class="CHIP[size]"
+            style="background: linear-gradient(135deg, var(--color-surface) 50%, var(--color-brand) 50%)"
+          />
+          <!-- sun/moon by mode, chosen by CSS from the applied theme's mode -->
+          <span v-else class="grid shrink-0 place-items-center">
+            <LpIcon
+              name="lucide:moon"
+              :size="ICON_SIZE[size]"
+              class="in-data-[theme-mode=light]:hidden"
+            />
+            <LpIcon
+              name="lucide:sun"
+              :size="ICON_SIZE[size]"
+              class="hidden in-data-[theme-mode=light]:block"
+            />
+          </span>
 
-      <span v-if="wantsLabel" class="text-sm font-medium">{{ labelName }}</span>
-    </button>
-  </LpContextMenu>
+          <!-- The name rolls and the pill eases to its width: the studio hangs
+               from this button, and a jump here jumped the whole panel. -->
+          <LpShift v-if="wantsLabel" axis="width">
+            <LpRollingText class="text-sm font-medium" :value="labelName" align="start" />
+          </LpShift>
+        </button>
+        </LpContextMenu>
+      </span>
+    </PopoverAnchor>
+    <PopoverPortal v-if="tuner" :to="portalTo">
+      <PopoverContent
+        :collision-padding="8"
+        side="bottom"
+        align="end"
+        :side-offset="6"
+        :aria-label="text.studio"
+        :class="[POPOVER_PANEL, 'z-(--z-popover) w-96 max-w-[calc(100vw-24px)] rounded-card p-3 text-sm text-ink outline-none']"
+        data-lp-glide-position
+        @interact-outside="keepForTrigger"
+        @escape-key-down="guardOutside"
+      >
+        <LpThemeStudio :studio="tuner" :hide="studioHide">
+          <template #start="scope"><slot name="studio-start" v-bind="scope" /></template>
+          <template #end="scope"><slot name="studio-end" v-bind="scope" /></template>
+        </LpThemeStudio>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
 </template>

package/src/components/LpTimeField.vue

@@ -20,7 +20,7 @@ export default { inheritAttrs: false }
 import { Time } from "@internationalized/date"
 import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
 import { computed } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { focusLeft, useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
 
@@ -43,8 +43,13 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: string | undefined): void
+  (e: "blur", event: FocusEvent): void
 }>()
 
+function onFocusOut(event: FocusEvent) {
+  if (focusLeft(event)) emit("blur", event)
+}
+
 const value = computed(() => {
   const match = /^(\d{2}):(\d{2})/.exec(props.modelValue || "")
   return match ? new Time(Number(match[1]), Number(match[2])) : undefined
@@ -89,11 +94,14 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     :locale="locale"
     granularity="minute"
     :disabled="field.disabled"
+    :required="field.required"
     :aria-invalid="field.invalid || undefined"
     :aria-describedby="field.describedBy"
+    :aria-labelledby="field.labelId"
     :class="rootClass"
     v-bind="rest"
     @update:model-value="onUpdate"
+    @focusout="onFocusOut"
   >
     <LpIcon v-if="icon" name="lucide:clock" :size="15" class="mr-1.5 shrink-0 text-muted" />
     <!-- Indexed keys: in 12-hour mode the segments hold two "literal" parts

package/src/components/LpToaster.vue

@@ -13,11 +13,13 @@ import {
 } from "reka-ui"
 import { nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
-import { useClipboard } from "../composables/useClipboard"
 import { useLabels } from "../composables/useLpConfig"
 import { useToast, type ToastItem } from "../composables/useToast"
 import { CLOSE_ICON } from "./dropdown"
+import LpCopyButton from "./LpCopyButton.vue"
 import LpIcon from "./LpIcon.vue"
+import { toneLook } from "./tone"
+import { usePortalTarget } from "../composables/useView"
 
 const props = defineProps<{ labels?: Partial<{ dismiss: string; copy: string; copied: string }> }>()
 const text = useLabels("toast", { dismiss: "Dismiss", copy: "Copy message", copied: "Copied" }, () => props.labels)
@@ -110,78 +112,59 @@ const variantIcon: Record<ToastItem["variant"], string> = {
   error: "lucide:circle-x",
 }
 
-// One token color drives icon + progress per variant.
-const variantColor: Record<ToastItem["variant"], string> = {
-  info: "text-brand",
-  success: "text-action",
-  warning: "text-accent",
-  error: "text-danger",
-}
-const variantBar: Record<ToastItem["variant"], string> = {
-  info: "bg-brand",
-  success: "bg-action",
-  warning: "bg-accent",
-  error: "bg-danger",
-}
-
-// reka pauses its own auto-dismiss timer while a toast is hovered/focused; mirror
-// that on the visual bar by carrying each toast's dismissAt forward over the
-// paused span, so the countdown matches when it actually closes.
-const pausedAt = new Map<number, number>()
 
-// Ticking clock so the progress bar animates smoothly. Runs only while there's
-// at least one auto-dismissing toast on screen — no idle interval otherwise.
-const now = ref(Date.now())
-let timer: ReturnType<typeof setInterval> | null = null
+/*
+ * The countdown bar is the shared drain (.lp-drain): a CSS animation as long as
+ * the toast's duration. reka pauses its own auto-dismiss timer while a toast
+ * is hovered or focused and resumes it with the time that was left; pausing
+ * the animation alongside it does exactly the same, so the bar empties at the
+ * moment the toast actually closes, with no clock ticking in the meantime.
+ */
+const paused = ref<Set<string>>(new Set())
 
-function startTimer() {
-  if (timer === null) timer = setInterval(() => (now.value = Date.now()), 80)
-}
-function stopTimer() {
-  if (timer !== null) {
-    clearInterval(timer)
-    timer = null
+/*
+ * How far into its run a toast already was when its bar first rendered (a
+ * Toaster mounted after toasts were queued). Remembered per rendered toast,
+ * because the style is re-evaluated on every render and a delay that changed
+ * under a running animation would jump the bar.
+ */
+const startOffsets = new Map<string, number>()
+function drainStyle(t: ToastItem) {
+  const at = tag(t)
+  let offset = startOffsets.get(at)
+  if (offset === undefined) {
+    offset = t.dismissAt === null ? 0 : Math.max(0, t.duration - (t.dismissAt - Date.now()))
+    startOffsets.set(at, offset)
   }
+  return { animationDuration: `${t.duration}ms`, animationDelay: `${-offset}ms` }
 }
 
+// Keyed by every rendered toast, not the count: a toast replaced through its
+// `key` leaves the same length behind.
 watch(
-  () => queue.length,
+  () => queue.map(tag).join("|"),
   () => {
-    // Drop pause state for toasts that have left the queue (e.g. dismissed
-    // while hovered) so the map can't grow unbounded over a long session.
-    for (const id of pausedAt.keys()) {
-      if (!queue.some((t) => t.id === id)) pausedAt.delete(id)
-    }
-    // Same for the closing set — a toast evicted by the queue cap or clear()
-    // leaves without an animationend, so prune dead ids here.
+    // Drop per-toast state for toasts that have left the queue (e.g. dismissed
+    // while hovered) so it can't grow unbounded over a long session. A toast
+    // evicted by the queue cap or clear() leaves without an animationend, so
+    // the closing set is pruned here too.
+    const live = (at: string) => queue.some((t) => tag(t) === at)
+    for (const at of startOffsets.keys()) if (!live(at)) startOffsets.delete(at)
+    if ([...paused.value].some((at) => !live(at))) paused.value = new Set([...paused.value].filter(live))
     if (closing.value.size) {
-      const live = new Set([...closing.value].filter((at) => queue.some((t) => tag(t) === at)))
-      if (live.size !== closing.value.size) closing.value = live
+      const next = new Set([...closing.value].filter(live))
+      if (next.size !== closing.value.size) closing.value = next
     }
-    if (queue.some((t) => t.dismissAt !== null)) startTimer()
-    else stopTimer()
   },
-  { immediate: true },
 )
-onBeforeUnmount(stopTimer)
 
 function onPause(t: ToastItem) {
-  pausedAt.set(t.id, now.value)
+  paused.value = new Set(paused.value).add(tag(t))
 }
 function onResume(t: ToastItem) {
-  const since = pausedAt.get(t.id)
-  if (since !== undefined && t.dismissAt !== null) {
-    t.dismissAt += Date.now() - since
-  }
-  pausedAt.delete(t.id)
-}
-
-function progress(t: ToastItem): number {
-  if (!t.dismissAt || t.duration <= 0) return 0
-  // While paused, freeze the bar at the moment hover started.
-  const at = pausedAt.get(t.id) ?? now.value
-  const remaining = t.dismissAt - at
-  return Math.max(0, Math.min(100, (remaining / t.duration) * 100))
+  const next = new Set(paused.value)
+  next.delete(tag(t))
+  paused.value = next
 }
 
 /*
@@ -219,18 +202,9 @@ async function settle(t: ToastItem, run: () => void | Promise<void>) {
  * opts back into selection and keeps its presses from starting a swipe. A
  * click that ends a selection is not a click on the toast.
  */
-const { copy } = useClipboard()
-const copiedId = ref<string | null>(null)
-let copiedTimer: ReturnType<typeof setTimeout> | undefined
 const copyable = (t: ToastItem) => t.variant === "error" || t.variant === "warning"
-
-async function copyToast(t: ToastItem) {
-  if (!(await copy([t.title, t.message, t.details].filter(Boolean).join("\n")))) return
-  copiedId.value = tag(t)
-  clearTimeout(copiedTimer)
-  copiedTimer = setTimeout(() => (copiedId.value = null), 1500)
-}
-onBeforeUnmount(() => clearTimeout(copiedTimer))
+// Read on click rather than bound, so a toast whose text is updated in place copies what it now says.
+const toastText = (t: ToastItem) => () => [t.title, t.message, t.details].filter(Boolean).join("\n")
 
 function selecting(): boolean {
   return Boolean(window.getSelection()?.toString())
@@ -244,6 +218,9 @@ function runClick(t: ToastItem) {
 function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[number]) {
   return settle(t, action.onClick)
 }
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
 </script>
 
 <template>
@@ -269,7 +246,7 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
           :name="variantIcon[t.variant]"
           :size="18"
           class="mt-0.5 shrink-0"
-          :class="variantColor[t.variant]"
+          :class="toneLook(t.variant).text"
         />
         <div class="flex min-w-0 flex-1 flex-col gap-0.5">
           <ToastTitle v-if="t.title" class="text-sm font-semibold text-ink">
@@ -302,16 +279,18 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
           </div>
         </div>
 
-        <button
+        <!-- Sized to the dismiss button beside it rather than to LpButton's
+             scale; the click stays off the toast, whose own click would run
+             its action or close it. -->
+        <LpCopyButton
           v-if="copyable(t)"
-          type="button"
-          class="-mt-1 rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-          :aria-label="copiedId === tag(t) ? text.copied : text.copy"
-          :title="copiedId === tag(t) ? text.copied : text.copy"
-          @click.stop="copyToast(t)"
-        >
-          <LpIcon :name="copiedId === tag(t) ? 'lucide:check' : 'lucide:copy'" :size="15" />
-        </button>
+          :value="toastText(t)"
+          variant="muted"
+          :icon-size="15"
+          class="-mt-1 size-auto aspect-auto rounded-inner p-1 hover:bg-transparent"
+          :labels="{ copy: text.copy, copied: text.copied }"
+          @click.stop
+        />
         <button
           type="button"
           class="group -mr-1 -mt-1 rounded-inner p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
@@ -329,9 +308,10 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
       <!-- Countdown progress bar -->
       <div
         v-if="t.dismissAt"
-        class="absolute inset-x-0 bottom-0 h-0.5 origin-left transition-transform duration-100 ease-linear motion-reduce:transition-none"
-        :class="variantBar[t.variant]"
-        :style="{ transform: `scaleX(${progress(t) / 100})` }"
+        class="lp-drain absolute inset-x-0 bottom-0 h-0.5"
+        :class="toneLook(t.variant).bg"
+        :style="drainStyle(t)"
+        :data-paused="paused.has(tag(t)) || undefined"
       />
     </ToastRoot>
 
@@ -339,7 +319,7 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
          consumer's app root creates (e.g. an opaque `#app { z-index }` wrapper).
          Modals portal to body too, so both compare at the same root level and
          --z-toast (200) > --z-modal (110) wins as intended. -->
-    <Teleport to="body">
+    <Teleport :to="portalTo">
       <ToastViewport
         :data-lp-toasts="viewportId"
         class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"

package/src/components/LpTooltip.vue

@@ -43,6 +43,7 @@ import {
 } from "../composables/usePillTransition"
 import { PANEL_SURFACE, TOOLTIP_ANIM } from "./dropdown"
 import { prefersReducedMotion } from "../composables/easing"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
@@ -223,6 +224,12 @@ watch(
 onBeforeUnmount(() => {
   if (frame) cancelAnimationFrame(frame)
 })
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+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()
 </script>
 
 <template>
@@ -250,8 +257,10 @@ onBeforeUnmount(() => {
       >
         <slot />
       </TooltipTrigger>
-      <TooltipPortal>
+      <TooltipPortal :to="portalTo">
         <TooltipContent
+          @interact-outside="guardOutside"
+          @escape-key-down="guardOutside"
           :side="side"
           :side-offset="sideOffset ?? 6"
           :collision-padding="8"