From a6874bcc5d6f8be7449bbf9690e46f849483310b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 12 Jul 2025 13:17:22 +0530
Subject: [PATCH 1/3] update: optimize logic for lesser elements in dom for
 tooltips.

---
 v2/pink-sb/src/lib/Popover.svelte | 46 +++++++++++-----
 v2/pink-sb/src/lib/Tooltip.svelte | 90 +++++++++++++++----------------
 2 files changed, 78 insertions(+), 58 deletions(-)

diff --git a/v2/pink-sb/src/lib/Popover.svelte b/v2/pink-sb/src/lib/Popover.svelte
index e4299eaa62..65c05be9dd 100644
--- a/v2/pink-sb/src/lib/Popover.svelte
+++ b/v2/pink-sb/src/lib/Popover.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { onMount, hasContext } from 'svelte';
+    import { fade } from 'svelte/transition';
     import { activePopover } from './context.js';
     import type { Placement } from '@floating-ui/dom';
+    import { hasContext, tick, onDestroy } from 'svelte';
     import { computePosition, autoUpdate, shift, offset, flip } from '@floating-ui/dom';
 
     export let portal: boolean = false;
@@ -15,6 +16,9 @@
     let referenceElement: HTMLSpanElement;
     let tooltipElement: HTMLDivElement;
 
+    /* for autoUpdate */
+    let cleanup: null | (() => void) = null;
+
     $: showTooltip = $activeInstance === id;
 
     function toggle(e?: Event) {
@@ -60,10 +64,12 @@
 
     async function update() {
         if (!referenceElement || !tooltipElement) return;
+
         const firstChild = referenceElement.firstElementChild;
         if (!(firstChild instanceof HTMLElement)) {
             return;
         }
+
         const { x, y } = await computePosition(firstChild, tooltipElement, {
             placement,
             middleware: [offset(2), flip(), shift()]
@@ -96,7 +102,17 @@
         };
     }
 
-    onMount(() => autoUpdate(referenceElement, tooltipElement, update));
+    $: {
+        if (showTooltip && referenceElement && tooltipElement) {
+            if (cleanup) cleanup();
+            cleanup = autoUpdate(referenceElement, tooltipElement, update);
+        } else if (cleanup) {
+            cleanup();
+            cleanup = null;
+        }
+    }
+
+    onDestroy(() => cleanup?.());
 </script>
 
 <svelte:window on:click={onBlur} on:keydown={onKeyDown} on:resize={update} />
@@ -104,17 +120,21 @@
 <span aria-describedby={id} bind:this={referenceElement}>
     <slot showing={showTooltip} {toggle} {update} {show} {hide} />
 </span>
-<div
-    {id}
-    role="tooltip"
-    aria-hidden={!showTooltip}
-    bind:this={tooltipElement}
-    class:padding-m={padding === 'm'}
-    class:padding-none={padding === 'none'}
-    use:portalPopover
->
-    <slot showing={showTooltip} {toggle} {update} {show} {hide} name="tooltip" />
-</div>
+
+{#if showTooltip}
+    <div
+        {id}
+        role="tooltip"
+        aria-hidden="false"
+        bind:this={tooltipElement}
+        class:padding-m={padding === 'm'}
+        class:padding-none={padding === 'none'}
+        use:portalPopover
+        transition:fade={{ duration: 150 }}
+    >
+        <slot showing={showTooltip} {toggle} {update} {show} {hide} name="tooltip" />
+    </div>
+{/if}
 
 <style lang="scss">
     span {
diff --git a/v2/pink-sb/src/lib/Tooltip.svelte b/v2/pink-sb/src/lib/Tooltip.svelte
index cf7081264e..a0bc476414 100644
--- a/v2/pink-sb/src/lib/Tooltip.svelte
+++ b/v2/pink-sb/src/lib/Tooltip.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+    import { onDestroy } from 'svelte';
     import type { Placement } from '@floating-ui/dom';
     import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-    import { onMount } from 'svelte';
 
     export let placement: Placement | undefined = undefined;
     export let padding: 'none' | 'm' = 'm';
@@ -15,6 +15,9 @@
     let referenceElement: HTMLSpanElement;
     let tooltipElement: HTMLDivElement;
 
+    /* for autoUpdate */
+    let cleanup: null | (() => void) = null;
+
     async function showTooltip() {
         await update();
         showing = show = !disabled;
@@ -25,10 +28,13 @@
     }
 
     async function update() {
+        if (!referenceElement || !tooltipElement) return;
+
         const firstChild = referenceElement.firstElementChild;
         if (!(firstChild instanceof HTMLElement)) {
             return;
         }
+
         const { x, y } = await computePosition(firstChild, tooltipElement, {
             placement,
             middleware: [offset(offsetAmount), flip(), shift()]
@@ -40,7 +46,27 @@
         });
     }
 
-    onMount(() => autoUpdate(referenceElement, tooltipElement, update));
+    function fadeSlide(_: Node, { y = 8, duration = 200 } = {}) {
+        return {
+            duration,
+            css: (time: number) => `
+                opacity: ${time};
+                transform: translateY(${(1 - time) * y}px);
+             `
+        };
+    }
+
+    $: {
+        if (show && referenceElement && tooltipElement) {
+            if (cleanup) cleanup();
+            cleanup = autoUpdate(referenceElement, tooltipElement, update);
+        } else if (cleanup) {
+            cleanup();
+            cleanup = null;
+        }
+    }
+
+    onDestroy(() => cleanup?.());
 </script>
 
 <svelte:window on:resize={update} />
@@ -57,19 +83,23 @@
 >
     <slot {showing} {update} />
 </span>
-<div
-    {id}
-    on:transitionend={() => (showing = false)}
-    bind:this={tooltipElement}
-    aria-hidden={!show}
-    class:padding-none={padding === 'none'}
-    class:padding-m={padding === 'm'}
-    role="tooltip"
-    style:max-inline-size={maxWidth}
-    data-state={!show ? 'closed' : 'open'}
->
-    <slot {showing} {update} name="tooltip" />
-</div>
+
+{#if show}
+    <div
+        {id}
+        transition:fadeSlide
+        on:transitionend={() => (showing = false)}
+        bind:this={tooltipElement}
+        aria-hidden={!show}
+        class:padding-none={padding === 'none'}
+        class:padding-m={padding === 'm'}
+        role="tooltip"
+        style:max-inline-size={maxWidth}
+        data-state={!show ? 'closed' : 'open'}
+    >
+        <slot {showing} {update} name="tooltip" />
+    </div>
+{/if}
 
 <style lang="scss">
     [role='note'] {
@@ -88,7 +118,6 @@
         color: var(--fgcolor-on-invert);
         visibility: hidden;
         opacity: 0;
-        transition: visibility 0s linear 0.2s;
         z-index: 9002;
 
         &[aria-hidden='false'] {
@@ -104,34 +133,5 @@
                 padding: var(--space-2) var(--space-4);
             }
         }
-
-        &[data-state='open'] {
-            animation: pink-tooltip-enter 0.2s ease-out;
-        }
-
-        &[data-state='closed'] {
-            animation: pink-tooltip-exit 0.2s ease-out;
-        }
-    }
-    @keyframes pink-tooltip-enter {
-        from {
-            opacity: 0;
-            transform: translateY(0.5rem);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes pink-tooltip-exit {
-        from {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        to {
-            opacity: 0;
-            transform: translateY(0.5rem);
-        }
     }
 </style>

From 2f1e67d2ab50372e03dc1e3ccee5125916175bfb Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 12 Jul 2025 13:29:44 +0530
Subject: [PATCH 2/3] fix: lint.

---
 v2/pink-sb/src/lib/Popover.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/Popover.svelte b/v2/pink-sb/src/lib/Popover.svelte
index 65c05be9dd..db9e663bb2 100644
--- a/v2/pink-sb/src/lib/Popover.svelte
+++ b/v2/pink-sb/src/lib/Popover.svelte
@@ -2,7 +2,7 @@
     import { fade } from 'svelte/transition';
     import { activePopover } from './context.js';
     import type { Placement } from '@floating-ui/dom';
-    import { hasContext, tick, onDestroy } from 'svelte';
+    import { hasContext, onDestroy } from 'svelte';
     import { computePosition, autoUpdate, shift, offset, flip } from '@floating-ui/dom';
 
     export let portal: boolean = false;

From d6705b9435320a9913b454aa04ad98d5e7c88fcf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 14 Jul 2025 19:31:22 +0530
Subject: [PATCH 3/3] update: use action directives.

---
 v2/pink-sb/src/lib/Popover.svelte | 23 +++++++++--------------
 v2/pink-sb/src/lib/Tooltip.svelte | 23 +++++++++--------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/v2/pink-sb/src/lib/Popover.svelte b/v2/pink-sb/src/lib/Popover.svelte
index db9e663bb2..74028a5720 100644
--- a/v2/pink-sb/src/lib/Popover.svelte
+++ b/v2/pink-sb/src/lib/Popover.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
+    import { hasContext, tick } from 'svelte';
     import { activePopover } from './context.js';
     import type { Placement } from '@floating-ui/dom';
-    import { hasContext, onDestroy } from 'svelte';
     import { computePosition, autoUpdate, shift, offset, flip } from '@floating-ui/dom';
 
     export let portal: boolean = false;
@@ -16,9 +16,6 @@
     let referenceElement: HTMLSpanElement;
     let tooltipElement: HTMLDivElement;
 
-    /* for autoUpdate */
-    let cleanup: null | (() => void) = null;
-
     $: showTooltip = $activeInstance === id;
 
     function toggle(e?: Event) {
@@ -102,17 +99,14 @@
         };
     }
 
-    $: {
-        if (showTooltip && referenceElement && tooltipElement) {
-            if (cleanup) cleanup();
-            cleanup = autoUpdate(referenceElement, tooltipElement, update);
-        } else if (cleanup) {
-            cleanup();
-            cleanup = null;
-        }
-    }
+    function autoUpdateAction(_: HTMLDivElement) {
+        tick().then(() => {
+            if (!referenceElement || !tooltipElement) return;
 
-    onDestroy(() => cleanup?.());
+            const cleanup = autoUpdate(referenceElement, tooltipElement, update);
+            return { destroy: cleanup };
+        });
+    }
 </script>
 
 <svelte:window on:click={onBlur} on:keydown={onKeyDown} on:resize={update} />
@@ -130,6 +124,7 @@
         class:padding-m={padding === 'm'}
         class:padding-none={padding === 'none'}
         use:portalPopover
+        use:autoUpdateAction
         transition:fade={{ duration: 150 }}
     >
         <slot showing={showTooltip} {toggle} {update} {show} {hide} name="tooltip" />
diff --git a/v2/pink-sb/src/lib/Tooltip.svelte b/v2/pink-sb/src/lib/Tooltip.svelte
index a0bc476414..f9c52d8a57 100644
--- a/v2/pink-sb/src/lib/Tooltip.svelte
+++ b/v2/pink-sb/src/lib/Tooltip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
+    import { tick } from 'svelte';
     import type { Placement } from '@floating-ui/dom';
     import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 
@@ -15,9 +15,6 @@
     let referenceElement: HTMLSpanElement;
     let tooltipElement: HTMLDivElement;
 
-    /* for autoUpdate */
-    let cleanup: null | (() => void) = null;
-
     async function showTooltip() {
         await update();
         showing = show = !disabled;
@@ -56,17 +53,14 @@
         };
     }
 
-    $: {
-        if (show && referenceElement && tooltipElement) {
-            if (cleanup) cleanup();
-            cleanup = autoUpdate(referenceElement, tooltipElement, update);
-        } else if (cleanup) {
-            cleanup();
-            cleanup = null;
-        }
-    }
+    function autoUpdateAction(_: HTMLDivElement) {
+        tick().then(() => {
+           if (!referenceElement || !tooltipElement) return;
 
-    onDestroy(() => cleanup?.());
+           const cleanup = autoUpdate(referenceElement, tooltipElement, update);
+           return { destroy: cleanup };
+        });
+    }
 </script>
 
 <svelte:window on:resize={update} />
@@ -88,6 +82,7 @@
     <div
         {id}
         transition:fadeSlide
+        use:autoUpdateAction
         on:transitionend={() => (showing = false)}
         bind:this={tooltipElement}
         aria-hidden={!show}