diff --git a/.changeset/hungry-things-retire.md b/.changeset/hungry-things-retire.md
new file mode 100644
index 0000000000..3b9ee38d99
--- /dev/null
+++ b/.changeset/hungry-things-retire.md
@@ -0,0 +1,55 @@
+---
+"@stackoverflow/stacks-svelte": minor
+---
+
+Migrate `Popover`, `PopoverReference`, `PopoverContent`, and `PopoverCloseButton` components to use Svelte 5 runes API
+
+BREAKING CHANGES:
+
+**Popover component:**
+- Slot props (`let:visible`, `let:open`, `let:close`) are not available anymore. Snippet parameters should be used instead: `{#snippet children({ visible, open, close })}...{/snippet}`
+- `on:open` and `on:close` events are not available anymore. The new callback props should be used instead: `onopen`, `onclose`.
+
+**PopoverCloseButton component:**
+- `on:click` event forwarding is not available anymore. The new callback prop should be used instead: `onclick`.
+
+**Migration examples:**
+
+```svelte
+<!-- Before (Svelte 4 API) -->
+<Popover 
+  id="my-popover"
+  on:open={() => console.log('opened')}
+  on:close={() => console.log('closed')}
+  let:visible
+  let:close
+>
+  <PopoverReference>
+    <button>Trigger</button>
+  </PopoverReference>
+  <PopoverContent>
+    <p>Content here</p>
+    <PopoverCloseButton on:click={handleClick} />
+  </PopoverContent>
+  <p>Visible: {visible}</p>
+</Popover>
+
+<!-- After (Svelte 5 API) -->
+<Popover 
+  id="my-popover"
+  onopen={() => console.log('opened')}
+  onclose={() => console.log('closed')}
+>
+  {#snippet children({ visible, close })}
+    <PopoverReference>
+        <button>Trigger</button>
+    </PopoverReference>
+    <PopoverContent>
+        <p>Content here</p>
+        <PopoverCloseButton onclick={handleClick} />
+    </PopoverContent>
+    <p>Visible: {visible}</p>
+  {/snippet}
+</Popover>
+```
+
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte b/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte
index 6a54ae26c7..21f3796304 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte
+++ b/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte
@@ -46,8 +46,8 @@
 </script>
 
 <script lang="ts">
-    let visible = false;
-    let lastEvent: string;
+    let visible = $state(false);
+    let lastEvent = $state("");
 
     const onToggle = (e: Event) => {
         const target = e.target as HTMLInputElement;
@@ -152,12 +152,13 @@
     <div class="hmn3 d-flex flex__center">
         <Popover id="inline" placement="top">
             <p class="ws3">
-                This is is a paragraph <PopoverReference
-                    ><span role="button" class="s-link"
+                This is is a paragraph <PopoverReference>
+                    <span role="button" class="s-link"
                         >containing a button styled as a link that wraps across
                         two lines</span
-                    ></PopoverReference
-                >. It shows the benefit of using floating ui inline middleware.
+                    >
+                </PopoverReference>. It shows the benefit of using floating ui
+                inline middleware.
             </p>
             <PopoverContent>Here I am</PopoverContent>
         </Popover>
@@ -170,7 +171,9 @@
             <PopoverReference>
                 <Button weight="filled">Trigger</Button>
             </PopoverReference>
-            <PopoverContent>Here I am<PopoverCloseButton /></PopoverContent>
+            <PopoverContent>
+                Here I am<PopoverCloseButton />
+            </PopoverContent>
         </Popover>
     </div>
 </Story>
@@ -182,27 +185,28 @@
             placement="right"
             dismissible={false}
             trapFocus={true}
-            let:close
         >
-            <PopoverReference>
-                <Button weight="filled">Trigger</Button>
-            </PopoverReference>
-            <PopoverContent>
-                <p class="d-flex fd-column g16">
-                    The focus is now trapped in the popover.
-                    <TextInput size="sm" id="name" label="Name"></TextInput>
-                    <TextInput size="sm" id="surname" label="Surname"
-                    ></TextInput>
-                    <Button
-                        type="submit"
-                        weight="filled"
-                        onclick={() => close()}
-                    >
-                        Submit
-                    </Button>
-                    <PopoverCloseButton />
-                </p>
-            </PopoverContent>
+            {#snippet children({ close })}
+                <PopoverReference>
+                    <Button weight="filled">Trigger</Button>
+                </PopoverReference>
+                <PopoverContent>
+                    <p class="d-flex fd-column g16">
+                        The focus is now trapped in the popover.
+                        <TextInput size="sm" id="name" label="Name"></TextInput>
+                        <TextInput size="sm" id="surname" label="Surname"
+                        ></TextInput>
+                        <Button
+                            type="submit"
+                            weight="filled"
+                            onclick={() => close()}
+                        >
+                            Submit
+                        </Button>
+                        <PopoverCloseButton />
+                    </p>
+                </PopoverContent>
+            {/snippet}
         </Popover>
     </div>
 </Story>
@@ -224,7 +228,7 @@
                 id="popover-visibility-control"
                 type="checkbox"
                 checked={visible}
-                on:click={onToggle}
+                onclick={onToggle}
             />
         </div>
     </div>
@@ -241,7 +245,9 @@
         </button>
         <Popover id="external-reference" placement="bottom">
             <PopoverReference elementId="external-reference-element" />
-            <PopoverContent>Here I am<PopoverCloseButton /></PopoverContent>
+            <PopoverContent>
+                Here I am<PopoverCloseButton />
+            </PopoverContent>
         </Popover>
     </div>
 </Story>
@@ -251,15 +257,16 @@
         <Popover
             id="events"
             placement="right"
-            on:open={() => (lastEvent = "opened")}
-            on:close={() => (lastEvent = "closed")}
-            let:visible
+            onopen={() => (lastEvent = "opened")}
+            onclose={() => (lastEvent = "closed")}
         >
-            <PopoverReference>
-                <Button weight="filled">Trigger</Button>
-            </PopoverReference>
-            <PopoverContent>Here I am</PopoverContent>
-            <p class="mt12">Visible: {visible}</p>
+            {#snippet children({ visible })}
+                <PopoverReference>
+                    <Button weight="filled">Trigger</Button>
+                </PopoverReference>
+                <PopoverContent>Here I am</PopoverContent>
+                <p class="mt12">Visible: {visible}</p>
+            {/snippet}
         </Popover>
         <p>Last Event: {lastEvent}</p>
     </div>
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.svelte b/packages/stacks-svelte/src/components/Popover/Popover.svelte
index 5d494c2dfb..151dfb6611 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.svelte
+++ b/packages/stacks-svelte/src/components/Popover/Popover.svelte
@@ -1,4 +1,9 @@
 <script lang="ts" module>
+    import type { Snippet } from "svelte";
+    import type { Writable } from "svelte/store";
+    import type { Placement } from "@floating-ui/core";
+    import { getContext } from "svelte";
+
     export interface PopoverState {
         id: string;
         controlled: boolean;
@@ -20,11 +25,9 @@
 
     const POPOVER_CONTEXT_NAME = "popover-context";
 
-    export function usePopoverContext(
-        component: string
-    ): Readable<PopoverState> {
+    export function usePopoverContext(component: string): PopoverState {
         let context = getContext(POPOVER_CONTEXT_NAME) as
-            | Writable<PopoverState>
+            | PopoverState
             | undefined;
         if (context === undefined) {
             throw new Error(
@@ -36,54 +39,84 @@
 </script>
 
 <script lang="ts">
-    import type { Placement, Strategy } from "@floating-ui/core";
-    import { createEventDispatcher, setContext, getContext } from "svelte";
-    import type { Writable, Readable } from "svelte/store";
+    import type { Strategy } from "@floating-ui/core";
+    import { setContext } from "svelte";
     import { writable } from "svelte/store";
     import { offset, inline, flip } from "@floating-ui/dom";
     import { createFloatingActions, arrow } from "svelte-floating-ui";
 
-    /**
-     * The html id attribute for the popover (required)
-     * @type {string}
-     */
-    export let id: string;
-
-    /**
-     * Whether or not the popover should be visible on mount
-     */
-    export let autoshow = false;
-    /**
-     * Boolean describing if the popover panel should be visible or not.
-     * If not specified, the component is uncontrolled and toggling behavior is automatically taken care of.
-     * When specified, the component is controlled by the consumer and the internal open/closed state is ignored.
-     * @type {boolean}
-     */
-    export let visible: boolean | undefined = undefined;
-    /**
-     * Dictates where to place the popover in relation to the reference element
-     * @type {Placement}
-     */
-    export let placement: Placement = "bottom";
-    /**
-     * The type of CSS position property to use for the popover content.
-     * See https://floating-ui.com/docs/computeposition#strategy
-     * @type {Strategy}
-     */
-    export let strategy: Strategy = "absolute";
-    /**
-     * Whether or not the popover should trap focus within itself
-     * When active make sure to include in the popover content a way for the user dismiss the popover (e.g. a cancel button or the PopoverCloseButton component)
-     */
-    export let trapFocus = false;
-    /**
-     * Whether or not the popover should close when clicking outside of it or in the reference element
-     */
-    export let dismissible = true;
-    /**
-     * Whether or not the popover should be an on-hover tooltip
-     */
-    export let tooltip = false;
+    interface Props {
+        /**
+         * The html id attribute for the popover (required)
+         */
+        id: string;
+        /**
+         * Whether or not the popover should be visible on mount
+         */
+        autoshow?: boolean;
+        /**
+         * Boolean describing if the popover panel should be visible or not.
+         * If not specified, the component is uncontrolled and toggling behavior is automatically taken care of.
+         * When specified, the component is controlled by the consumer and the internal open/closed state is ignored.
+         */
+        visible?: boolean | undefined;
+        /**
+         * Dictates where to place the popover in relation to the reference element
+         */
+        placement?: Placement;
+        /**
+         * The type of CSS position property to use for the popover content.
+         * See https://floating-ui.com/docs/computeposition#strategy
+         */
+        strategy?: Strategy;
+        /**
+         * Whether or not the popover should trap focus within itself
+         * When active make sure to include in the popover content a way for the user dismiss the popover (e.g. a cancel button or the PopoverCloseButton component)
+         */
+        trapFocus?: boolean;
+        /**
+         * Whether or not the popover should close when clicking outside of it or in the reference element
+         */
+        dismissible?: boolean;
+        /**
+         * Whether or not the popover should be an on-hover tooltip
+         */
+        tooltip?: boolean;
+        /**
+         * Callback fired when the popover is opened
+         */
+        onopen?: () => void;
+        /**
+         * Callback fired when the popover is closed
+         */
+        onclose?: () => void;
+        /**
+         * Children snippet with visible, open, and close parameters
+         */
+        children?: Snippet<
+            [
+                {
+                    visible: boolean | undefined;
+                    open: () => void;
+                    close: () => void;
+                },
+            ]
+        >;
+    }
+
+    let {
+        id,
+        autoshow = false,
+        visible = undefined,
+        placement = "bottom",
+        strategy = "absolute",
+        trapFocus = false,
+        dismissible = true,
+        tooltip = false,
+        onopen,
+        onclose,
+        children,
+    }: Props = $props();
 
     // These delays preserve the same behavior of Stacks Classic s-tooltip
     // https://github.com/StackExchange/Stacks/blob/develop/lib/components/popover/tooltip.ts
@@ -93,15 +126,17 @@
     let reference: HTMLElement;
     let activeTimeout: number;
     const arrowEl = writable<HTMLElement>();
+
     // if the visible prop is passed, the component is controlled
-    $: controlled = $$props.visible !== undefined;
+    const controlled = $derived(visible !== undefined);
 
     const [floatingRef, floatingContent, update] = createFloatingActions({
         placement,
         strategy,
         middleware: [offset(10), flip(), inline(), arrow({ element: arrowEl })],
-        onComputed({ placement, middlewareData }) {
-            $pstate.computedPlacement = placement;
+        onComputed({ placement: computedPlacement, middlewareData }) {
+            pstate.computedPlacement = computedPlacement;
+
             if (middlewareData.arrow && $arrowEl) {
                 const { x, y } = middlewareData.arrow;
 
@@ -113,16 +148,14 @@
         },
     });
 
-    const dispatch = createEventDispatcher<{ close: void; open: void }>();
-
     const open = (delay: number = 0) => {
         window.clearTimeout(activeTimeout);
         if (controlled) return;
-        if (!$pstate.visible) {
+        if (!pstate.visible) {
             activeTimeout = window.setTimeout(() => {
-                $pstate.visible = true;
+                pstate.visible = true;
                 // Fires when the popover is opened
-                dispatch("open");
+                onopen?.();
             }, delay);
         }
     };
@@ -140,20 +173,20 @@
     const close = (delay: number = 0) => {
         window.clearTimeout(activeTimeout);
         if (controlled) return;
-        if ($pstate.visible) {
+        if (pstate.visible) {
             activeTimeout = window.setTimeout(() => {
-                $pstate.visible = false;
+                pstate.visible = false;
                 if (!tooltip) {
                     reference.focus();
                 }
                 // Fires when the popover is closed
-                dispatch("close");
+                onclose?.();
             }, delay);
         }
     };
 
     const toggle = () => {
-        $pstate.visible ? close() : open();
+        pstate.visible ? close() : open();
     };
 
     const onOutclick = (e: CustomEvent<HTMLElement>) => {
@@ -170,9 +203,9 @@
         }
     };
 
-    const pstate = writable<PopoverState>({
+    const pstate = $state<PopoverState>({
         id,
-        controlled: $$props.visible !== undefined,
+        controlled: visible !== undefined,
         visible: autoshow,
         dismissible,
         trapFocus,
@@ -192,18 +225,26 @@
         toggle,
     });
 
-    $: if (controlled) {
-        $pstate.visible = visible;
-    }
+    $effect(() => {
+        pstate.controlled = controlled;
+    });
+
+    $effect(() => {
+        if (controlled) {
+            pstate.visible = visible;
+        }
+    });
 
     setContext(POPOVER_CONTEXT_NAME, pstate);
 
     // this is here for ensuring the storybook interactive playground
     // work as expected despite it is unlikely placement prop will be
     // changed dynamically in regular circumnstances
-    $: update({ placement });
+    $effect(() => {
+        update({ placement });
+    });
 </script>
 
-<svelte:window on:keydown={onKeypress} />
+<svelte:window onkeydown={onKeypress} />
 
-<slot visible={$pstate.visible} {open} {close} />
+{@render children?.({ visible: pstate.visible, open, close })}
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.test.ts b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
index 0a3388306b..8d81b8934b 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.test.ts
+++ b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
@@ -22,21 +22,17 @@ const defaultChildren = {
     reference: {
         component: PopoverReference,
         props: {
-            $$slots: {
-                default: createRawSnippet(() => ({
-                    render: () => "<button>Trigger</button>",
-                })),
-            },
+            children: createRawSnippet(() => ({
+                render: () => "<button>Trigger</button>",
+            })),
         },
     },
     content: {
         component: PopoverContent,
         props: {
-            $$slots: {
-                default: createRawSnippet(() => ({
-                    render: () => "<span>Popover Content</span>",
-                })),
-            },
+            children: createRawSnippet(() => ({
+                render: () => "<span>Popover Content</span>",
+            })),
         },
     },
     closeButton: {
@@ -52,12 +48,10 @@ describe("Popover", () => {
         render(Popover, {
             props: {
                 ...defaultProps,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
             },
         });
 
@@ -80,17 +74,15 @@ describe("Popover", () => {
                     target,
                     props: {
                         ...defaultProps,
-                        $$slots: {
-                            default: createSvelteComponentsSnippet([
-                                {
-                                    component: PopoverReference,
-                                    props: {
-                                        elementId: "external-reference",
-                                    },
+                        children: createSvelteComponentsSnippet([
+                            {
+                                component: PopoverReference,
+                                props: {
+                                    elementId: "external-reference",
                                 },
-                                defaultChildren.content,
-                            ]),
-                        },
+                            },
+                            defaultChildren.content,
+                        ]),
                     },
                 });
                 return () => {
@@ -117,12 +109,10 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
             },
         });
 
@@ -134,23 +124,18 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                role: "menu",
-                                $$slots: {
-                                    default: createRawSnippet(() => ({
-                                        render: () =>
-                                            "<span>Popover Content</span>",
-                                    })),
-                                },
-                            },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            role: "menu",
+                            children: createRawSnippet(() => ({
+                                render: () => "<span>Popover Content</span>",
+                            })),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -162,23 +147,18 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                class: "custom-class",
-                                $$slots: {
-                                    default: createRawSnippet(() => ({
-                                        render: () =>
-                                            "<span>Popover Content</span>",
-                                    })),
-                                },
-                            },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            class: "custom-class",
+                            children: createRawSnippet(() => ({
+                                render: () => "<span>Popover Content</span>",
+                            })),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -190,27 +170,23 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                $$slots: {
-                                    default: createSvelteComponentsSnippet([
-                                        {
-                                            component: PopoverCloseButton,
-                                            props: {
-                                                label: "Close",
-                                                class: "custom-class",
-                                            },
-                                        },
-                                    ]),
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            children: createSvelteComponentsSnippet([
+                                {
+                                    component: PopoverCloseButton,
+                                    props: {
+                                        label: "Close",
+                                        class: "custom-class",
+                                    },
                                 },
-                            },
+                            ]),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -224,12 +200,10 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
             },
         });
 
@@ -243,21 +217,17 @@ describe("Popover", () => {
         render(Popover, {
             props: {
                 ...defaultProps,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                $$slots: {
-                                    default: createSvelteComponentsSnippet([
-                                        defaultChildren.closeButton,
-                                    ]),
-                                },
-                            },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            children: createSvelteComponentsSnippet([
+                                defaultChildren.closeButton,
+                            ]),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -274,12 +244,10 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
             },
         });
 
@@ -294,12 +262,10 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 visible: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
             },
         });
 
@@ -316,29 +282,23 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 visible: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                $$slots: {
-                                    default: createSvelteComponentsSnippet([
-                                        {
-                                            component: PopoverCloseButton,
-                                            props: {
-                                                label: "Close",
-                                                $$events: {
-                                                    click: onCloseButtonClick,
-                                                },
-                                            },
-                                        },
-                                    ]),
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            children: createSvelteComponentsSnippet([
+                                {
+                                    component: PopoverCloseButton,
+                                    props: {
+                                        label: "Close",
+                                        onclick: onCloseButtonClick,
+                                    },
                                 },
-                            },
+                            ]),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -367,16 +327,12 @@ describe("Popover", () => {
         render(Popover, {
             props: {
                 ...defaultProps,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
-                $$events: {
-                    open: onOpenSpy,
-                    close: onCloseSpy,
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
+                onopen: onOpenSpy,
+                onclose: onCloseSpy,
             },
         });
 
@@ -393,21 +349,17 @@ describe("Popover", () => {
                 ...defaultProps,
                 autoshow: true,
                 dismissible: false,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                $$slots: {
-                                    default: createSvelteComponentsSnippet([
-                                        defaultChildren.closeButton,
-                                    ]),
-                                },
-                            },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            children: createSvelteComponentsSnippet([
+                                defaultChildren.closeButton,
+                            ]),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -428,36 +380,32 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 trapFocus: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        {
-                            component: PopoverContent,
-                            props: {
-                                $$slots: {
-                                    default: createRawSnippet(() => ({
-                                        render: () =>
-                                            '<span><input type="text" /></span>',
-                                        setup: (target) => {
-                                            const closeButton = mount(
-                                                PopoverCloseButton,
-                                                {
-                                                    target,
-                                                    props: {
-                                                        label: "Close",
-                                                    },
-                                                }
-                                            );
-                                            return () => {
-                                                unmount(closeButton);
-                                            };
-                                        },
-                                    })),
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    {
+                        component: PopoverContent,
+                        props: {
+                            children: createRawSnippet(() => ({
+                                render: () =>
+                                    '<span><input type="text" /></span>',
+                                setup: (target) => {
+                                    const closeButton = mount(
+                                        PopoverCloseButton,
+                                        {
+                                            target,
+                                            props: {
+                                                label: "Close",
+                                            },
+                                        }
+                                    );
+                                    return () => {
+                                        unmount(closeButton);
+                                    };
                                 },
-                            },
+                            })),
                         },
-                    ]),
-                },
+                    },
+                ]),
             },
         });
 
@@ -501,13 +449,10 @@ describe("Popover", () => {
                     props: {
                         ...defaultProps,
                         placement: "top",
-                        $$slots: {
-                            // @ts-expect-error $$slots is used to pass children while component is still using Svelte 4 syntax
-                            default: createSvelteComponentsSnippet([
-                                defaultChildren.reference,
-                                defaultChildren.content,
-                            ]),
-                        },
+                        children: createSvelteComponentsSnippet([
+                            defaultChildren.reference,
+                            defaultChildren.content,
+                        ]),
                     },
                 });
                 return () => {
@@ -531,12 +476,10 @@ describe("Popover", () => {
             props: {
                 ...defaultProps,
                 autoshow: true,
-                $$slots: {
-                    default: createSvelteComponentsSnippet([
-                        defaultChildren.reference,
-                        defaultChildren.content,
-                    ]),
-                },
+                children: createSvelteComponentsSnippet([
+                    defaultChildren.reference,
+                    defaultChildren.content,
+                ]),
             },
         });
 
@@ -555,12 +498,10 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     strategy,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -579,22 +520,18 @@ describe("Popover", () => {
                 render(Popover, {
                     props: {
                         ...defaultProps,
-                        $$slots: {
-                            default: createSvelteComponentsSnippet([
-                                {
-                                    component: PopoverReference,
-                                    props: {
-                                        $$slots: {
-                                            default: createRawSnippet(() => ({
-                                                render: () =>
-                                                    "<span>non-button-role element</span>",
-                                            })),
-                                        },
-                                    },
+                        children: createSvelteComponentsSnippet([
+                            {
+                                component: PopoverReference,
+                                props: {
+                                    children: createRawSnippet(() => ({
+                                        render: () =>
+                                            "<span>non-button-role element</span>",
+                                    })),
                                 },
-                                defaultChildren.content,
-                            ]),
-                        },
+                            },
+                            defaultChildren.content,
+                        ]),
                     },
                 })
             ).to.throw(
@@ -607,12 +544,10 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     autoshow: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -632,12 +567,10 @@ describe("Popover", () => {
             render(Popover, {
                 props: {
                     ...defaultProps,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -659,12 +592,10 @@ describe("Popover", () => {
                     ...defaultProps,
                     autoshow: true,
                     tooltip: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -680,22 +611,18 @@ describe("Popover", () => {
                     props: {
                         ...defaultProps,
                         tooltip: true,
-                        $$slots: {
-                            default: createSvelteComponentsSnippet([
-                                {
-                                    component: PopoverReference,
-                                    props: {
-                                        $$slots: {
-                                            default: createRawSnippet(() => ({
-                                                render: () =>
-                                                    "<span>non-button-role element</span>",
-                                            })),
-                                        },
-                                    },
+                        children: createSvelteComponentsSnippet([
+                            {
+                                component: PopoverReference,
+                                props: {
+                                    children: createRawSnippet(() => ({
+                                        render: () =>
+                                            "<span>non-button-role element</span>",
+                                    })),
                                 },
-                                defaultChildren.content,
-                            ]),
-                        },
+                            },
+                            defaultChildren.content,
+                        ]),
                     },
                 });
             } catch (e) {
@@ -715,12 +642,10 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     tooltip: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -751,12 +676,10 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     tooltip: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -784,12 +707,10 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     tooltip: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -814,12 +735,10 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     tooltip: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            defaultChildren.content,
-                        ]),
-                    },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
                 },
             });
 
@@ -852,22 +771,18 @@ describe("Popover", () => {
                 props: {
                     ...defaultProps,
                     tooltip: true,
-                    $$slots: {
-                        default: createSvelteComponentsSnippet([
-                            defaultChildren.reference,
-                            {
-                                component: PopoverContent,
-                                props: {
-                                    $$slots: {
-                                        default: createRawSnippet(() => ({
-                                            render: () =>
-                                                '<span><input type="text" /></span>',
-                                        })),
-                                    },
-                                },
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        {
+                            component: PopoverContent,
+                            props: {
+                                children: createRawSnippet(() => ({
+                                    render: () =>
+                                        '<span><input type="text" /></span>',
+                                })),
                             },
-                        ]),
-                    },
+                        },
+                    ]),
                 },
             });
 
diff --git a/packages/stacks-svelte/src/components/Popover/PopoverCloseButton.svelte b/packages/stacks-svelte/src/components/Popover/PopoverCloseButton.svelte
index f70e8103eb..791a0f8f60 100644
--- a/packages/stacks-svelte/src/components/Popover/PopoverCloseButton.svelte
+++ b/packages/stacks-svelte/src/components/Popover/PopoverCloseButton.svelte
@@ -3,26 +3,36 @@
     import { IconClear } from "@stackoverflow/stacks-icons/icons";
     import { usePopoverContext } from "./Popover.svelte";
 
-    const pstate = usePopoverContext("PopoverCloseButton");
+    interface Props {
+        /**
+         * The aria-label for the close button
+         */
+        label?: string;
+        /**
+         * Additional CSS classes added to the element
+         */
+        class?: string;
+        /**
+         * Callback fired when the close button is clicked
+         */
+        onclick?: (e: MouseEvent) => void;
+    }
+
+    let { label = "Close", class: className = "", onclick }: Props = $props();
 
-    /**
-     * The aria-label for the close button
-     */
-    export let label: string = "Close";
+    const pstate = usePopoverContext("PopoverCloseButton");
 
-    /**
-     * Additional CSS classes added to the element
-     */
-    let className = "";
-    export { className as class };
+    const handleClick = (e: MouseEvent) => {
+        pstate.close();
+        onclick?.(e);
+    };
 </script>
 
 <button
     aria-label={label}
     class={`s-popover--close s-btn s-btn__muted ps-absolute${className ? ` ${className}` : ""}`}
     type="button"
-    on:click={$pstate.close}
-    on:click
+    onclick={handleClick}
 >
     <Icon src={IconClear} />
 </button>
diff --git a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
index 9f601cbb60..1f2049b36d 100644
--- a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
+++ b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
@@ -1,52 +1,69 @@
 <script lang="ts">
+    import type { Snippet } from "svelte";
     import { usePopoverContext } from "./Popover.svelte";
     import { clickOutside, focusTrap } from "../../actions";
 
-    /**
-     * The aria role of the popover
-     * (if not specified, it will default to 'dialog' for popovers or 'tooltip' when in tooltip mode)
-     * @type {string}
-     */
-    export let role: string | null = null;
-    /**
-     * Additional CSS classes added to the element
-     */
-    let className = "";
-    export { className as class };
+    interface Props {
+        /**
+         * The aria role of the popover
+         * (if not specified, it will default to 'dialog' for popovers or 'tooltip' when in tooltip mode)
+         */
+        role?: string | null;
+        /**
+         * Additional CSS classes added to the element
+         */
+        class?: string;
+        /**
+         * Children snippet
+         */
+        children?: Snippet;
+    }
+
+    let { role = null, class: className = "", children }: Props = $props();
 
     let pstate = usePopoverContext("PopoverContent");
-    let classes = "s-popover";
 
-    const arrowEl = $pstate.arrowEl;
+    const arrowEl = pstate.arrowEl;
 
-    if ($pstate.tooltip) {
-        classes += " s-popover__tooltip";
-    }
+    let classes = $derived.by(() => {
+        let result = "s-popover";
+        if (pstate.tooltip) {
+            result += " s-popover__tooltip";
+        }
+        if (className) {
+            result += " " + className;
+        }
+        return result;
+    });
 
-    if (className) {
-        classes += " " + className;
-    }
+    let computedClass = $derived(
+        `${classes}${pstate.visible ? " is-visible" : ""}`
+    );
+
+    let computedRole = $derived(
+        role || (pstate.tooltip ? "tooltip" : "dialog")
+    );
 </script>
 
 <!-- data-popper-placement is needed for compatibility with stacks classic popover styles -->
 <div
-    id={`${$pstate.id}-popover`}
-    class={`${classes}${$pstate.visible ? " is-visible" : ""}`}
-    role={role || ($pstate.tooltip ? "tooltip" : "dialog")}
-    use:$pstate.floatingContent
-    use:focusTrap={{ active: $pstate.trapFocus && !!$pstate.visible }}
+    id={`${pstate.id}-popover`}
+    class={computedClass}
+    role={computedRole}
+    use:pstate.floatingContent
+    use:focusTrap={{ active: pstate.trapFocus && !!pstate.visible }}
     use:clickOutside
-    onoutclick={$pstate.onOutclick}
-    onmouseenter={$pstate.openTooltip}
-    onmouseleave={$pstate.closeTooltip}
-    onfocusin={$pstate.openTooltip}
-    onfocusout={$pstate.closeTooltip}
-    data-popper-placement={$pstate.computedPlacement}
+    onoutclick={pstate.onOutclick}
+    onmouseenter={pstate.openTooltip}
+    onmouseleave={pstate.closeTooltip}
+    onfocusin={pstate.openTooltip}
+    onfocusout={pstate.closeTooltip}
+    data-popper-placement={pstate.computedPlacement}
 >
     <div class="s-popover--arrow" bind:this={$arrowEl}></div>
     <div class="s-popover--content p12 mn12">
         <div class="ps-relative">
-            <slot />
+            {@render children?.()}
         </div>
     </div>
 </div>
diff --git a/packages/stacks-svelte/src/components/Popover/PopoverReference.svelte b/packages/stacks-svelte/src/components/Popover/PopoverReference.svelte
index 3bd0efb94a..57e11b52f4 100644
--- a/packages/stacks-svelte/src/components/Popover/PopoverReference.svelte
+++ b/packages/stacks-svelte/src/components/Popover/PopoverReference.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
+    import type { Snippet } from "svelte";
     import { onMount } from "svelte";
     import { usePopoverContext } from "./Popover.svelte";
     import type { PopoverState } from "./Popover.svelte";
 
-    /**
-     * The id of the reference element
-     * (this is an alternative to passing the element as a slot)
-     * @type {string}
-     */
-    export let elementId: string | null = null;
+    interface Props {
+        /**
+         * The id of the reference element
+         * (this is an alternative to passing the element as a slot)
+         */
+        elementId?: string | null;
+        /**
+         * Children snippet
+         */
+        children?: Snippet;
+    }
+
+    let { elementId = null, children }: Props = $props();
 
     let referenceWrapper: HTMLElement;
     let reference: HTMLElement;
@@ -59,26 +67,28 @@
     };
 
     onMount(() => {
-        reference = setupRef(elementId, referenceWrapper, $pstate);
+        reference = setupRef(elementId, referenceWrapper, pstate);
 
         // if the popover is controlled, we delegate all the behavior to the consumer
-        if ($pstate.controlled) return;
+        if (pstate.controlled) return;
 
-        $pstate.tooltip
-            ? setupTooltip(reference, $pstate)
-            : setupPopover(reference, $pstate);
+        pstate.tooltip
+            ? setupTooltip(reference, pstate)
+            : setupPopover(reference, pstate);
     });
 
-    $: if (!$pstate.controlled && !$pstate.tooltip) {
-        reference?.setAttribute(
-            "aria-expanded",
-            Boolean($pstate.visible).toString()
-        );
-    }
+    $effect(() => {
+        if (!pstate.controlled && !pstate.tooltip) {
+            reference?.setAttribute(
+                "aria-expanded",
+                Boolean(pstate.visible).toString()
+            );
+        }
+    });
 </script>
 
 <!-- Hack: there is not easy way in svelte to get the reference element from the slot -->
 <!-- https://stackoverflow.com/questions/56104899/how-do-i-access-the-value-of-a-slot-in-a-svelte-3-component -->
 <span bind:this={referenceWrapper}>
-    <slot />
+    {@render children?.()}
 </span>