diff --git a/src/lib/components/dialog/dialog.test.ts b/src/lib/components/dialog/dialog.test.ts
index 7beb7f8..84f6829 100644
--- a/src/lib/components/dialog/dialog.test.ts
+++ b/src/lib/components/dialog/dialog.test.ts
@@ -14,6 +14,8 @@ import {
   assertActiveElement,
   assertDialog,
   assertDialogDescription,
+  assertDialogOverlay,
+  assertDialogTitle,
   DialogState,
   getByText,
   getDialog,
@@ -24,6 +26,7 @@ import {
 import { click, Keys, press } from "$lib/test-utils/interactions";
 import Transition from "$lib/components/transitions/TransitionRoot.svelte";
 import { tick } from "svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock("../../hooks/use-id", () => {
@@ -105,41 +108,29 @@ describe("Rendering", () => {
       })
     );
 
-    // TODO: render prop tests!
+    it(
+      'Dialog should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <script>
+            let isOpen = false;
+          </script>
+          <button id="trigger" on:click={() => isOpen = (true)}>
+            Trigger
+          </button>
+          <Dialog open={isOpen} on:close={(e) => isOpen = e.detail} let:open>
+            <pre>{JSON.stringify({open})}</pre>
+            <TestTabSentinel />
+          </Dialog>
+        `)
 
-    // it(
-    //   'should be possible to render a Dialog using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     function Example() {
-    //       let [isOpen, setIsOpen] = useState(false)
+        assertDialog({ state: DialogState.InvisibleUnmounted })
 
-    //       return (
-    //         <>
-    //         <button id= "trigger" onClick = {() => setIsOpen(true)
-    //     }>
-    //       Trigger
-    //       < /button>
-    //       < Dialog open = { isOpen } onClose = { setIsOpen } >
-    //         { data => (
-    //           <>
-    //           <pre>{ JSON.stringify(data) } < /pre>
-    //           < TabSentinel />
-    //           </>
-    //         )
-    //   }
-    //           </Dialog>
-    //     < />
-    //   )
-    //     }
-    // render(<Example />)
+        await click(document.getElementById('trigger'))
 
-    //     assertDialog({ state: DialogState.InvisibleUnmounted })
-
-    //     await click(document.getElementById('trigger'))
-
-    //     assertDialog({ state: DialogState.Visible, textContent: JSON.stringify({ open: true }) })
-    //   })
-    // )
+        assertDialog({ state: DialogState.Visible, textContent: JSON.stringify({ open: true }) })
+      })
+    )
 
     it('should be possible to always render the Dialog if we provide it a `static` prop (and enable focus trapping based on `open`)', async () => {
       let focusCounter = jest.fn()
@@ -235,91 +226,85 @@ describe("Rendering", () => {
       })
     )
   })
-  // TODO: more render prop tests!
+  describe('DialogOverlay', () => {
+    it(
+      'DialogOverlay should have slot props',
+      suppressConsoleLogs(async () => {
+        let overlay = jest.fn().mockReturnValue(null)
+        render(svelte`
+          <script>
+            let isOpen = false;
+          </script>
+          <button id="trigger" on:click={() => isOpen = !isOpen}>
+            Trigger
+          </button>
+          <Dialog open={isOpen} on:close={(e) => isOpen = e.detail}>
+            <DialogOverlay let:open>{overlay({ open })}</DialogOverlay>
+            <TestTabSentinel />
+          </Dialog>
+        `)
 
-  // describe('Dialog.Overlay', () => {
-  //   it(
-  //     'should be possible to render Dialog.Overlay using a render prop',
-  //     suppressConsoleLogs(async () => {
-  //       let overlay = jest.fn().mockReturnValue(null)
-  //       function Example() {
-  //         let [isOpen, setIsOpen] = useState(false)
-  //         return (
-  //           <>
-  //             <button id="trigger" onClick={() => setIsOpen(v => !v)}>
-  //               Trigger
-  //             </button>
-  //             <Dialog open={isOpen} onClose={setIsOpen}>
-  //               <Dialog.Overlay>{overlay}</Dialog.Overlay>
-  //               <TabSentinel />
-  //             </Dialog>
-  //           </>
-  //         )
-  //       }
+        assertDialogOverlay({
+          state: DialogState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-dialog-overlay-2' },
+        })
 
-  //       render(<Example />)
+        await click(document.getElementById('trigger'))
 
-  //       assertDialogOverlay({
-  //         state: DialogState.InvisibleUnmounted,
-  //         attributes: { id: 'headlessui-dialog-overlay-2' },
-  //       })
+        assertDialogOverlay({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-overlay-2' },
+        })
+        expect(overlay).toHaveBeenCalledWith({ open: true })
+      })
+    )
+  })
 
-  //       await click(document.getElementById('trigger'))
+  describe('DialogTitle', () => {
+    it(
+      'DialogTitle should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+            <Dialog open={true} on:close={console.log}>
+              <DialogTitle let:open>{JSON.stringify({ open })}</DialogTitle>
+              <TestTabSentinel />
+            </Dialog>
+          `)
 
-  //       assertDialogOverlay({
-  //         state: DialogState.Visible,
-  //         attributes: { id: 'headlessui-dialog-overlay-2' },
-  //       })
-  //       expect(overlay).toHaveBeenCalledWith({ open: true })
-  //     })
-  //   )
-  // })
+        assertDialog({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-1' },
+        })
+        assertDialogTitle({
+          state: DialogState.Visible,
+          textContent: JSON.stringify({ open: true }),
+        })
+      })
+    )
+  })
 
-  // describe('Dialog.Title', () => {
-  //     it(
-  //       'should be possible to render Dialog.Title using a render prop',
-  //       suppressConsoleLogs(async () => {
-  //         render(
-  //           <Dialog open={true} onClose={console.log}>
-  //             <Dialog.Title>{JSON.stringify}</Dialog.Title>
-  //             <TabSentinel />
-  //           </Dialog>
-  //         )
+  describe('DialogDescription', () => {
+    it(
+      'DialogDescription should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Dialog open={true} on:close={console.log}>
+            <DialogDescription let:open>{JSON.stringify({ open })}</DialogDescription>
+            <TestTabSentinel />
+          </Dialog>
+        `)
 
-  //         assertDialog({
-  //           state: DialogState.Visible,
-  //           attributes: { id: 'headlessui-dialog-1' },
-  //         })
-  //         assertDialogTitle({
-  //           state: DialogState.Visible,
-  //           textContent: JSON.stringify({ open: true }),
-  //         })
-  //       })
-  //     )
-  //   })
-
-  //   describe('Dialog.Description', () => {
-  //     it(
-  //       'should be possible to render Dialog.Description using a render prop',
-  //       suppressConsoleLogs(async () => {
-  //         render(
-  //           <Dialog open={true} onClose={console.log}>
-  //             <Dialog.Description>{JSON.stringify}</Dialog.Description>
-  //             <TabSentinel />
-  //           </Dialog>
-  //         )
-
-  //         assertDialog({
-  //           state: DialogState.Visible,
-  //           attributes: { id: 'headlessui-dialog-1' },
-  //         })
-  //         assertDialogDescription({
-  //           state: DialogState.Visible,
-  //           textContent: JSON.stringify({ open: true }),
-  //         })
-  //       })
-  //     )
-  //   })
+        assertDialog({
+          state: DialogState.Visible,
+          attributes: { id: 'headlessui-dialog-1' },
+        })
+        assertDialogDescription({
+          state: DialogState.Visible,
+          textContent: JSON.stringify({ open: true }),
+        })
+      })
+    )
+  })
 })
 
 describe('Composition', () => {
@@ -469,7 +454,7 @@ describe('Keyboard interactions', () => {
 
 describe('Mouse interactions', () => {
   it(
-    'should be possible to close a Dialog using a click on the Dialog.Overlay',
+    'should be possible to close a Dialog using a click on the DialogOverlay',
     suppressConsoleLogs(async () => {
       render(
         TestRenderer, {
@@ -497,7 +482,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not close the Dialog when clicking on contents of the Dialog.Overlay',
+    'should not close the Dialog when clicking on contents of the DialogOverlay',
     suppressConsoleLogs(async () => {
       render(
         TestRenderer, {
@@ -588,7 +573,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should stop propagating click events when clicking on the Dialog.Overlay',
+    'should stop propagating click events when clicking on the DialogOverlay',
     suppressConsoleLogs(async () => {
       let wrapperFn = jest.fn()
       render(
@@ -610,7 +595,7 @@ describe('Mouse interactions', () => {
       // Verify that the wrapper function has not been called yet
       expect(wrapperFn).toHaveBeenCalledTimes(0)
 
-      // Click the Dialog.Overlay to close the Dialog
+      // Click the DialogOverlay to close the Dialog
       await click(getDialogOverlay())
 
       // Verify it is closed
@@ -688,7 +673,7 @@ describe('Nesting', () => {
     strategy                            | action
     ${'with `Escape`'}                  | ${() => press(Keys.Escape)}
     ${'with `Outside Click`'}           | ${() => click(document.body)}
-    ${'with `Click on Dialog.Overlay`'} | ${() => click(getDialogOverlays().pop()!)}
+    ${'with `Click on DialogOverlay`'} | ${() => click(getDialogOverlays().pop()!)}
   `(
     'should be possible to open nested Dialog components and close them $strategy',
     async ({ action }) => {
diff --git a/src/lib/components/disclosure/disclosure.test.ts b/src/lib/components/disclosure/disclosure.test.ts
index ef14e0b..70ee59c 100644
--- a/src/lib/components/disclosure/disclosure.test.ts
+++ b/src/lib/components/disclosure/disclosure.test.ts
@@ -14,6 +14,7 @@ import {
 import { click, Keys, MouseButton, press } from "$lib/test-utils/interactions";
 import { Transition, TransitionChild } from "../transitions";
 import TransitionDebug from "./_TransitionDebug.svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock("../../hooks/use-id", () => {
@@ -72,240 +73,178 @@ describe("Safe guards", () => {
 });
 
 describe("Rendering", () => {
-  // describe('Disclosure', () => {
-  //   it(
-  //     'should be possible to render a Disclosure using a render prop',
-  //     suppressConsoleLogs(async () => {
-  //       render(
-  //         <Disclosure>
-  //           {({ open }) => (
-  //             <>
-  //               <DisclosureButton>Trigger</DisclosureButton>
-  //               <DisclosurePanel>Panel is: {open ? 'open' : 'closed'}</DisclosurePanel>
-  //             </>
-  //           )}
-  //         </Disclosure>
-  //       )
+  describe('Disclosure', () => {
+    it(
+      'should render a Disclosure with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Disclosure let:open>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Panel is: {open ? 'open' : 'closed'}</DisclosurePanel>
+          </Disclosure>
+        `)
 
-  //       assertDisclosureButton({
-  //         state: DisclosureState.InvisibleUnmounted,
-  //         attributes: { id: 'headlessui-disclosure-button-1' },
-  //       })
-  //       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-  //       await click(getDisclosureButton())
+        await click(getDisclosureButton())
 
-  //       assertDisclosureButton({
-  //         state: DisclosureState.Visible,
-  //         attributes: { id: 'headlessui-disclosure-button-1' },
-  //       })
-  //       assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
-  //     })
-  //   )
+        assertDisclosureButton({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
+      })
+    )
 
-  //   it('should be possible to render a Disclosure in an open state by default', async () => {
-  //     render(
-  //       <Disclosure defaultOpen>
-  //         {({ open }) => (
-  //           <>
-  //             <DisclosureButton>Trigger</DisclosureButton>
-  //             <DisclosurePanel>Panel is: {open ? 'open' : 'closed'}</DisclosurePanel>
-  //           </>
-  //         )}
-  //       </Disclosure>
-  //     )
+    it('should be possible to render a Disclosure in an open state by default', async () => {
+      render(svelte`
+        <Disclosure defaultOpen let:open>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel>Panel is: {open ? 'open' : 'closed'}</DisclosurePanel>
+        </Disclosure>
+      `)
 
-  //     assertDisclosureButton({
-  //       state: DisclosureState.Visible,
-  //       attributes: { id: 'headlessui-disclosure-button-1' },
-  //     })
-  //     assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
+      assertDisclosureButton({
+        state: DisclosureState.Visible,
+        attributes: { id: 'headlessui-disclosure-button-1' },
+      })
+      assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
 
-  //     await click(getDisclosureButton())
+      await click(getDisclosureButton())
 
-  //     assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
-  //   })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+    })
 
-  //   it(
-  //     'should expose a close function that closes the disclosure',
-  //     suppressConsoleLogs(async () => {
-  //       render(
-  //         <Disclosure>
-  //           {({ close }) => (
-  //             <>
-  //               <DisclosureButton>Trigger</DisclosureButton>
-  //               <DisclosurePanel>
-  //                 <button onClick={() => close()}>Close me</button>
-  //               </DisclosurePanel>
-  //             </>
-  //           )}
-  //         </Disclosure>
-  //       )
+    it(
+      'should expose a close function that closes the disclosure',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Disclosure let:close>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>
+              <button on:click={() => close()}>Close me</button>
+            </DisclosurePanel>
+          </Disclosure>
+        `)
 
-  //       // Focus the button
-  //       getDisclosureButton()?.focus()
+        // Focus the button
+        getDisclosureButton()?.focus()
 
-  //       // Ensure the button is focused
-  //       assertActiveElement(getDisclosureButton())
+        // Ensure the button is focused
+        assertActiveElement(getDisclosureButton())
 
-  //       // Open the disclosure
-  //       await click(getDisclosureButton())
+        // Open the disclosure
+        await click(getDisclosureButton())
 
-  //       // Ensure we can click the close button
-  //       await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-  //       // Ensure the disclosure is closed
-  //       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        // Ensure the disclosure is closed
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-  //       // Ensure the DisclosureButton got the restored focus
-  //       assertActiveElement(getByText('Trigger'))
-  //     })
-  //   )
+        // Ensure the DisclosureButton got the restored focus
+        assertActiveElement(getByText('Trigger'))
+      })
+    )
 
-  //   it(
-  //     'should expose a close function that closes the disclosure and restores to a specific element',
-  //     suppressConsoleLogs(async () => {
-  //       render(
-  //         <>
-  //           <button id="test">restoreable</button>
-  //           <Disclosure>
-  //             {({ close }) => (
-  //               <>
-  //                 <DisclosureButton>Trigger</DisclosureButton>
-  //                 <DisclosurePanel>
-  //                   <button onClick={() => close(document.getElementById('test')!)}>
-  //                     Close me
-  //                   </button>
-  //                 </DisclosurePanel>
-  //               </>
-  //             )}
-  //           </Disclosure>
-  //         </>
-  //       )
+    it(
+      'should expose a close function that closes the disclosure and restores to a specific element',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <button id="test">restoreable</button>
+          <Disclosure let:close>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>
+              <button on:click={() => close(document.getElementById('test'))}>
+                Close me
+              </button>
+            </DisclosurePanel>
+          </Disclosure>
+        `)
 
-  //       // Focus the button
-  //       getDisclosureButton()?.focus()
+        // Focus the button
+        getDisclosureButton()?.focus()
 
-  //       // Ensure the button is focused
-  //       assertActiveElement(getDisclosureButton())
+        // Ensure the button is focused
+        assertActiveElement(getDisclosureButton())
 
-  //       // Open the disclosure
-  //       await click(getDisclosureButton())
+        // Open the disclosure
+        await click(getDisclosureButton())
 
-  //       // Ensure we can click the close button
-  //       await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-  //       // Ensure the disclosure is closed
-  //       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        // Ensure the disclosure is closed
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-  //       // Ensure the restoreable button got the restored focus
-  //       assertActiveElement(getByText('restoreable'))
-  //     })
-  //   )
-
-  //   it(
-  //     'should expose a close function that closes the disclosure and restores to a ref',
-  //     suppressConsoleLogs(async () => {
-  //       function Example() {
-  //         let elementRef = useRef(null)
-  //         return (
-  //           <>
-  //             <button ref={elementRef}>restoreable</button>
-  //             <Disclosure>
-  //               {({ close }) => (
-  //                 <>
-  //                   <DisclosureButton>Trigger</DisclosureButton>
-  //                   <DisclosurePanel>
-  //                     <button onClick={() => close(elementRef)}>Close me</button>
-  //                   </DisclosurePanel>
-  //                 </>
-  //               )}
-  //             </Disclosure>
-  //           </>
-  //         )
-  //       }
-
-  //       render(<Example />)
-
-  //       // Focus the button
-  //       getDisclosureButton()?.focus()
-
-  //       // Ensure the button is focused
-  //       assertActiveElement(getDisclosureButton())
-
-  //       // Open the disclosure
-  //       await click(getDisclosureButton())
-
-  //       // Ensure we can click the close button
-  //       await click(getByText('Close me'))
-
-  //       // Ensure the disclosure is closed
-  //       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
-
-  //       // Ensure the restoreable button got the restored focus
-  //       assertActiveElement(getByText('restoreable'))
-  //     })
-  //   )
-  // })
+        // Ensure the restoreable button got the restored focus
+        assertActiveElement(getByText('restoreable'))
+      })
+    )
+  })
 
   describe("DisclosureButton", () => {
-    // it(
-    //   'should be possible to render a DisclosureButton using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Disclosure>
-    //         <DisclosureButton>{JSON.stringify}</DisclosureButton>
-    //         <DisclosurePanel></DisclosurePanel>
-    //       </Disclosure>
-    //     )
+    it(
+      'should render a DisclosureButton with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Disclosure let:open>
+            <DisclosureButton>{JSON.stringify({ open })}</DisclosureButton>
+            <DisclosurePanel></DisclosurePanel>
+          </Disclosure>
+        `)
 
-    //     assertDisclosureButton({
-    //       state: DisclosureState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-disclosure-button-1' },
-    //       textContent: JSON.stringify({ open: false }),
-    //     })
-    //     assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+          textContent: JSON.stringify({ open: false }),
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-    //     await click(getDisclosureButton())
+        await click(getDisclosureButton())
 
-    //     assertDisclosureButton({
-    //       state: DisclosureState.Visible,
-    //       attributes: { id: 'headlessui-disclosure-button-1' },
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertDisclosurePanel({ state: DisclosureState.Visible })
-    //   })
-    // )
+        assertDisclosureButton({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+          textContent: JSON.stringify({ open: true }),
+        })
+        assertDisclosurePanel({ state: DisclosureState.Visible })
+      })
+    )
 
-    // it(
-    //   'should be possible to render a DisclosureButton using a render prop and an `as` prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Disclosure>
-    //         <DisclosureButton as="div" role="button">
-    //           {JSON.stringify}
-    //         </DisclosureButton>
-    //         <DisclosurePanel />
-    //       </Disclosure>
-    //     )
+    it(
+      'should be possible to render a DisclosureButton using a render prop and an `as` prop',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Disclosure>
+            <DisclosureButton as="div" role="button" let:open>
+              {JSON.stringify({ open })}
+            </DisclosureButton>
+            <DisclosurePanel />
+          </Disclosure>
+        `)
 
-    //     assertDisclosureButton({
-    //       state: DisclosureState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-disclosure-button-1' },
-    //       textContent: JSON.stringify({ open: false }),
-    //     })
-    //     assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+          textContent: JSON.stringify({ open: false }),
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-    //     await click(getDisclosureButton())
+        await click(getDisclosureButton())
 
-    //     assertDisclosureButton({
-    //       state: DisclosureState.Visible,
-    //       attributes: { id: 'headlessui-disclosure-button-1' },
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertDisclosurePanel({ state: DisclosureState.Visible })
-    //   })
-    // )
+        assertDisclosureButton({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+          textContent: JSON.stringify({ open: true }),
+        })
+        assertDisclosurePanel({ state: DisclosureState.Visible })
+      })
+    )
 
     describe('`type` attribute', () => {
       it('should set the `type` to "button" by default', async () => {
@@ -354,34 +293,34 @@ describe("Rendering", () => {
   })
 
   describe('DisclosurePanel', () => {
-    // it(
-    //   'should be possible to render DisclosurePanel using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Disclosure>
-    //         <DisclosureButton>Trigger</DisclosureButton>
-    //         <DisclosurePanel>{JSON.stringify}</DisclosurePanel>
-    //       </Disclosure>
-    //     )
+    it(
+      'should render a DisclosurePanel with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel let:open>{JSON.stringify({ open })}</DisclosurePanel>
+          </Disclosure>
+        `)
 
-    //     assertDisclosureButton({
-    //       state: DisclosureState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-disclosure-button-1' },
-    //     })
-    //     assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-    //     await click(getDisclosureButton())
+        await click(getDisclosureButton())
 
-    //     assertDisclosureButton({
-    //       state: DisclosureState.Visible,
-    //       attributes: { id: 'headlessui-disclosure-button-1' },
-    //     })
-    //     assertDisclosurePanel({
-    //       state: DisclosureState.Visible,
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //   })
-    // )
+        assertDisclosureButton({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({
+          state: DisclosureState.Visible,
+          textContent: JSON.stringify({ open: true }),
+        })
+      })
+    )
 
     it('should be possible to always render the DisclosurePanel if we provide it a `static` prop', () => {
       render(
@@ -427,114 +366,70 @@ describe("Rendering", () => {
       assertDisclosurePanel({ state: DisclosureState.InvisibleHidden })
     })
 
-    // it(
-    //   'should expose a close function that closes the disclosure',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Disclosure>
-    //         <DisclosureButton>Trigger</DisclosureButton>
-    //         <DisclosurePanel>
-    //           {({ close }) => <button onClick={() => close()}>Close me</button>}
-    //         </DisclosurePanel>
-    //       </Disclosure>
-    //     )
+    it(
+      'should expose a close function that closes the disclosure',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel let:close>
+              <button on:click={() => close()}>Close me</button>
+            </DisclosurePanel>
+          </Disclosure>
+        `)
 
-    //     // Focus the button
-    //     getDisclosureButton()?.focus()
+        // Focus the button
+        getDisclosureButton()?.focus()
 
-    //     // Ensure the button is focused
-    //     assertActiveElement(getDisclosureButton())
+        // Ensure the button is focused
+        assertActiveElement(getDisclosureButton())
 
-    //     // Open the disclosure
-    //     await click(getDisclosureButton())
+        // Open the disclosure
+        await click(getDisclosureButton())
 
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-    //     // Ensure the disclosure is closed
-    //     assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        // Ensure the disclosure is closed
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-    //     // Ensure the DisclosureButton got the restored focus
-    //     assertActiveElement(getByText('Trigger'))
-    //   })
-    // )
+        // Ensure the DisclosureButton got the restored focus
+        assertActiveElement(getByText('Trigger'))
+      })
+    )
 
-    // it(
-    //   'should expose a close function that closes the disclosure and restores to a specific element',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <>
-    //         <button id="test">restoreable</button>
-    //         <Disclosure>
-    //           <DisclosureButton>Trigger</DisclosureButton>
-    //           <DisclosurePanel>
-    //             {({ close }) => (
-    //               <button onClick={() => close(document.getElementById('test')!)}>Close me</button>
-    //             )}
-    //           </DisclosurePanel>
-    //         </Disclosure>
-    //       </>
-    //     )
+    it(
+      'should expose a close function that closes the disclosure and restores to a specific element',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <button id="test">restoreable</button>
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel let:close>
+                <button on:click={() => close(document.getElementById('test'))}>Close me</button>
+            </DisclosurePanel>
+          </Disclosure>
+        `)
 
-    //     // Focus the button
-    //     getDisclosureButton()?.focus()
+        // Focus the button
+        getDisclosureButton()?.focus()
 
-    //     // Ensure the button is focused
-    //     assertActiveElement(getDisclosureButton())
+        // Ensure the button is focused
+        assertActiveElement(getDisclosureButton())
 
-    //     // Open the disclosure
-    //     await click(getDisclosureButton())
+        // Open the disclosure
+        await click(getDisclosureButton())
 
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-    //     // Ensure the disclosure is closed
-    //     assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+        // Ensure the disclosure is closed
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-    //     // Ensure the restoreable button got the restored focus
-    //     assertActiveElement(getByText('restoreable'))
-    //   })
-    // )
-
-    // it(
-    //   'should expose a close function that closes the disclosure and restores to a ref',
-    //   suppressConsoleLogs(async () => {
-    //     function Example() {
-    //       let elementRef = useRef(null)
-    //       return (
-    //         <>
-    //           <button ref={elementRef}>restoreable</button>
-    //           <Disclosure>
-    //             <DisclosureButton>Trigger</DisclosureButton>
-    //             <DisclosurePanel>
-    //               {({ close }) => <button onClick={() => close(elementRef)}>Close me</button>}
-    //             </DisclosurePanel>
-    //           </Disclosure>
-    //         </>
-    //       )
-    //     }
-
-    //     render(<Example />)
-
-    //     // Focus the button
-    //     getDisclosureButton()?.focus()
-
-    //     // Ensure the button is focused
-    //     assertActiveElement(getDisclosureButton())
-
-    //     // Open the disclosure
-    //     await click(getDisclosureButton())
-
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
-
-    //     // Ensure the disclosure is closed
-    //     assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
-
-    //     // Ensure the restoreable button got the restored focus
-    //     assertActiveElement(getByText('restoreable'))
-    //   })
-    // )
+        // Ensure the restoreable button got the restored focus
+        assertActiveElement(getByText('restoreable'))
+      })
+    )
   })
 })
 
diff --git a/src/lib/components/listbox/listbox.test.ts b/src/lib/components/listbox/listbox.test.ts
index a3f94da..9cdd584 100644
--- a/src/lib/components/listbox/listbox.test.ts
+++ b/src/lib/components/listbox/listbox.test.ts
@@ -15,6 +15,8 @@ import {
   assertListboxButton,
   assertListboxButtonLinkedWithListbox,
   assertListboxButtonLinkedWithListboxLabel,
+  assertListboxLabel,
+  assertListboxLabelLinkedWithListbox,
   assertListboxOption,
   assertNoActiveListboxOption,
   assertNoSelectedListboxOption,
@@ -45,6 +47,7 @@ import ManagedListbox from "./_ManagedListbox.svelte";
 import Button from "$lib/internal/elements/Button.svelte";
 import Div from "$lib/internal/elements/Div.svelte";
 import Span from "$lib/internal/elements/Span.svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock('../../hooks/use-id', () => {
@@ -103,41 +106,37 @@ describe('safeguards', () => {
 
 describe('Rendering', () => {
   describe('Listbox', () => {
-    // it(
-    //   'should be possible to render a Listbox using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Listbox value={undefined} onChange={console.log}>
-    //         {({ open }) => (
-    //           <>
-    //             <ListboxButton>Trigger</ListboxButton>
-    //             {open && (
-    //               <ListboxOptions>
-    //                 <ListboxOption value="a">Option A</ListboxOption>
-    //                 <ListboxOption value="b">Option B</ListboxOption>
-    //                 <ListboxOption value="c">Option C</ListboxOption>
-    //               </ListboxOptions>
-    //             )}
-    //           </>
-    //         )}
-    //       </Listbox>
-    //     )
+    it(
+      'should render a Listbox using slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} on:change={console.log} let:open>
+            <ListboxButton>Trigger</ListboxButton>
+            {#if open}
+              <ListboxOptions>
+                <ListboxOption value="a">Option A</ListboxOption>
+                <ListboxOption value="b">Option B</ListboxOption>
+                <ListboxOption value="c">Option C</ListboxOption>
+              </ListboxOptions>
+            {/if}
+          </Listbox>
+        `)
 
-    //     assertListboxButton({
-    //       state: ListboxState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //     })
-    //     assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxButton({
+          state: ListboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-listbox-button-1' },
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-    //     await click(getListboxButton())
+        await click(getListboxButton())
 
-    //     assertListboxButton({
-    //       state: ListboxState.Visible,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //     })
-    //     assertListbox({ state: ListboxState.Visible })
-    //   })
-    // )
+        assertListboxButton({
+          state: ListboxState.Visible,
+          attributes: { id: 'headlessui-listbox-button-1' },
+        })
+        assertListbox({ state: ListboxState.Visible })
+      })
+    )
 
     it(
       'should be possible to disable a Listbox',
@@ -182,142 +181,142 @@ describe('Rendering', () => {
   })
 
   describe('ListboxLabel', () => {
-    // it(
-    //   'should be possible to render a ListboxLabel using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Listbox value={ undefined } onChange = { console.log } >
-    //       <ListboxLabel>{ JSON.stringify } < /ListboxLabel>
-    //       < ListboxButton > Trigger < /ListboxButton>
-    //       < ListboxOptions >
-    //       <ListboxOption value="a" > Option A < /ListboxOption>
-    //     < ListboxOption value = "b" > Option B < /ListboxOption>
-    //     < ListboxOption value = "c" > Option C < /ListboxOption>
-    //     < /ListboxOptions>
-    //     < /Listbox>
-    //     )
+    it(
+      'should be possible to render a ListboxLabel using a render prop',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} on:change={console.log}>
+            <ListboxLabel let:open let:disabled>{JSON.stringify({ open, disabled })}</ListboxLabel>
+            <ListboxButton>Trigger</ListboxButton>
+            <ListboxOptions>
+              <ListboxOption value="a"> Option A </ListboxOption>
+              <ListboxOption value="b"> Option B </ListboxOption>
+              <ListboxOption value="c"> Option C </ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+        `)
 
-    //     assertListboxButton({
-    //       state: ListboxState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-listbox-button-2' },
-    //     })
-    //     assertListboxLabel({
-    //       attributes: { id: 'headlessui-listbox-label-1' },
-    //       textContent: JSON.stringify({ open: false, disabled: false }),
-    //     })
-    //     assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxButton({
+          state: ListboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-listbox-button-2' },
+        })
+        assertListboxLabel({
+          attributes: { id: 'headlessui-listbox-label-1' },
+          textContent: JSON.stringify({ open: false, disabled: false }),
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-    //     await click(getListboxButton())
+        await click(getListboxButton())
 
-    //     assertListboxLabel({
-    //       attributes: { id: 'headlessui-listbox-label-1' },
-    //       textContent: JSON.stringify({ open: true, disabled: false }),
-    //     })
-    //     assertListbox({ state: ListboxState.Visible })
-    //     assertListboxLabelLinkedWithListbox()
-    //     assertListboxButtonLinkedWithListboxLabel()
-    //   })
-    // )
+        assertListboxLabel({
+          attributes: { id: 'headlessui-listbox-label-1' },
+          textContent: JSON.stringify({ open: true, disabled: false }),
+        })
+        assertListbox({ state: ListboxState.Visible })
+        assertListboxLabelLinkedWithListbox()
+        assertListboxButtonLinkedWithListboxLabel()
+      })
+    )
 
-    // it(
-    //   'should be possible to render a ListboxLabel using a render prop and an `as` prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Listbox value={ undefined } onChange = { console.log } >
-    //       <ListboxLabel as="p" > { JSON.stringify } < /ListboxLabel>
-    //       < ListboxButton > Trigger < /ListboxButton>
-    //       < ListboxOptions >
-    //     <ListboxOption value="a" > Option A < /ListboxOption>
-    //     < ListboxOption value = "b" > Option B < /ListboxOption>
-    //     < ListboxOption value = "c" > Option C < /ListboxOption>
-    //     < /ListboxOptions>
-    //     < /Listbox>
-    //     )
+    it(
+      'should be possible to render a ListboxLabel with slot props and an `as` prop',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} on:change={console.log}>
+            <ListboxLabel as="p" let:open let:disabled>{JSON.stringify({ open, disabled })}</ListboxLabel>
+            <ListboxButton>Trigger</ListboxButton>
+            <ListboxOptions>
+              <ListboxOption value="a">Option A</ListboxOption>
+              <ListboxOption value="b">Option B</ListboxOption>
+              <ListboxOption value="c">Option C</ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+        `)
 
-    //     assertListboxLabel({
-    //       attributes: { id: 'headlessui-listbox-label-1' },
-    //       textContent: JSON.stringify({ open: false, disabled: false }),
-    //       tag: 'p',
-    //     })
-    //     assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxLabel({
+          attributes: { id: 'headlessui-listbox-label-1' },
+          textContent: JSON.stringify({ open: false, disabled: false }),
+          tag: 'p',
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-    //     await click(getListboxButton())
-    //     assertListboxLabel({
-    //       attributes: { id: 'headlessui-listbox-label-1' },
-    //       textContent: JSON.stringify({ open: true, disabled: false }),
-    //       tag: 'p',
-    //     })
-    //     assertListbox({ state: ListboxState.Visible })
-    //   })
-    // )
+        await click(getListboxButton())
+        assertListboxLabel({
+          attributes: { id: 'headlessui-listbox-label-1' },
+          textContent: JSON.stringify({ open: true, disabled: false }),
+          tag: 'p',
+        })
+        assertListbox({ state: ListboxState.Visible })
+      })
+    )
   });
 
   describe("ListboxButton", () => {
-    // it(
-    //   'should be possible to render a ListboxButton using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Listbox value={ undefined } onChange = { console.log } >
-    //       <ListboxButton>{ JSON.stringify } < /ListboxButton>
-    //       < ListboxOptions >
-    //       <ListboxOption value="a" > Option A < /ListboxOption>
-    //     < ListboxOption value = "b" > Option B < /ListboxOption>
-    //     < ListboxOption value = "c" > Option C < /ListboxOption>
-    //     < /ListboxOptions>
-    //     < /Listbox>
-    //     )
+    it(
+      'should render a ListboxButton with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} on:change={console.log}>
+            <ListboxButton let:open let:disabled>{JSON.stringify({ open, disabled})}</ListboxButton>
+            <ListboxOptions>
+              <ListboxOption value="a">Option A </ListboxOption>
+              <ListboxOption value="b">Option B </ListboxOption>
+              <ListboxOption value="c">Option C </ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+        `)
 
-    //     assertListboxButton({
-    //       state: ListboxState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //       textContent: JSON.stringify({ open: false, disabled: false }),
-    //     })
-    //     assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxButton({
+          state: ListboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-listbox-button-1' },
+          textContent: JSON.stringify({ open: false, disabled: false }),
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-    //     await click(getListboxButton())
+        await click(getListboxButton())
 
-    //     assertListboxButton({
-    //       state: ListboxState.Visible,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //       textContent: JSON.stringify({ open: true, disabled: false }),
-    //     })
-    //     assertListbox({ state: ListboxState.Visible })
-    //   })
-    // )
+        assertListboxButton({
+          state: ListboxState.Visible,
+          attributes: { id: 'headlessui-listbox-button-1' },
+          textContent: JSON.stringify({ open: true, disabled: false }),
+        })
+        assertListbox({ state: ListboxState.Visible })
+      })
+    )
 
-    // it(
-    //   'should be possible to render a ListboxButton using a render prop and an `as` prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Listbox value={ undefined } onChange = { console.log } >
-    //       <ListboxButton as="div" role = "button" >
-    //       { JSON.stringify }
-    //       < /ListboxButton>
-    //       < ListboxOptions >
-    //       <ListboxOption value="a" > Option A < /ListboxOption>
-    //     < ListboxOption value = "b" > Option B < /ListboxOption>
-    //     < ListboxOption value = "c" > Option C < /ListboxOption>
-    //     < /ListboxOptions>
-    //     < /Listbox>
-    //     )
+    it(
+      'should be possible to render a ListboxButton using a render prop and an `as` prop',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} onChange={console.log}>
+            <ListboxButton as="div" role="button" let:open let:disabled>
+              {JSON.stringify({ open, disabled })}
+            </ListboxButton>
+            <ListboxOptions>
+              <ListboxOption value="a">Option A</ListboxOption>
+              <ListboxOption value="b">Option B</ListboxOption>
+              <ListboxOption value="c">Option C</ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+        `)
 
-    //     assertListboxButton({
-    //       state: ListboxState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //       textContent: JSON.stringify({ open: false, disabled: false }),
-    //     })
-    //     assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxButton({
+          state: ListboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-listbox-button-1' },
+          textContent: JSON.stringify({ open: false, disabled: false }),
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-    //     await click(getListboxButton())
+        await click(getListboxButton())
 
-    //     assertListboxButton({
-    //       state: ListboxState.Visible,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //       textContent: JSON.stringify({ open: true, disabled: false }),
-    //     })
-    //     assertListbox({ state: ListboxState.Visible })
-    //   })
-    // )
+        assertListboxButton({
+          state: ListboxState.Visible,
+          attributes: { id: 'headlessui-listbox-button-1' },
+          textContent: JSON.stringify({ open: true, disabled: false }),
+        })
+        assertListbox({ state: ListboxState.Visible })
+      })
+    )
 
     it(
       'should be possible to render a ListboxButton and a ListboxLabel and see them linked together',
@@ -393,41 +392,37 @@ describe('Rendering', () => {
   })
 
   describe('ListboxOptions', () => {
-    // it(
-    //   'should be possible to render ListboxOptions using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Listbox value={undefined} onChange={console.log}>
-    //         <ListboxButton>Trigger</ListboxButton>
-    //         <ListboxOptions>
-    //           {data => (
-    //             <>
-    //               <ListboxOption value="a">{JSON.stringify(data)}</ListboxOption>
-    //             </>
-    //           )}
-    //         </ListboxOptions>
-    //       </Listbox>
-    //     )
+    it(
+      'should render ListboxOptions with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} on:change={console.log}>
+            <ListboxButton>Trigger</ListboxButton>
+            <ListboxOptions let:open>
+              <ListboxOption value="a">{JSON.stringify({ open })}</ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+        `)
 
-    //     assertListboxButton({
-    //       state: ListboxState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //     })
-    //     assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxButton({
+          state: ListboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-listbox-button-1' },
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-    //     await click(getListboxButton())
+        await click(getListboxButton())
 
-    //     assertListboxButton({
-    //       state: ListboxState.Visible,
-    //       attributes: { id: 'headlessui-listbox-button-1' },
-    //     })
-    //     assertListbox({
-    //       state: ListboxState.Visible,
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertActiveElement(getListbox())
-    //   })
-    // )
+        assertListboxButton({
+          state: ListboxState.Visible,
+          attributes: { id: 'headlessui-listbox-button-1' },
+        })
+        assertListbox({
+          state: ListboxState.Visible,
+          textContent: JSON.stringify({ open: true }),
+        })
+        assertActiveElement(getListbox())
+      })
+    )
 
     it('should be possible to always render the ListboxOptions if we provide it a `static` prop', () => {
       render(
@@ -472,38 +467,40 @@ describe('Rendering', () => {
     })
   })
 
-  // describe('ListboxOption', () => {
-  //   it(
-  //     'should be possible to render a ListboxOption using a render prop',
-  //     suppressConsoleLogs(async () => {
-  //       render(
-  //         <Listbox value={undefined} onChange={console.log}>
-  //           <ListboxButton>Trigger</ListboxButton>
-  //           <ListboxOptions>
-  //             <ListboxOption value="a">{JSON.stringify}</ListboxOption>
-  //           </ListboxOptions>
-  //         </Listbox>
-  //       )
+  describe('ListboxOption', () => {
+    it(
+      'should render a ListboxOption with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Listbox value={undefined} on:change={console.log}>
+            <ListboxButton>Trigger</ListboxButton>
+            <ListboxOptions>
+              <ListboxOption value="a" let:active let:selected let:disabled>
+                {JSON.stringify({ active, selected, disabled })}
+              </ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+        `)
 
-  //       assertListboxButton({
-  //         state: ListboxState.InvisibleUnmounted,
-  //         attributes: { id: 'headlessui-listbox-button-1' },
-  //       })
-  //       assertListbox({ state: ListboxState.InvisibleUnmounted })
+        assertListboxButton({
+          state: ListboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-listbox-button-1' },
+        })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
 
-  //       await click(getListboxButton())
+        await click(getListboxButton())
 
-  //       assertListboxButton({
-  //         state: ListboxState.Visible,
-  //         attributes: { id: 'headlessui-listbox-button-1' },
-  //       })
-  //       assertListbox({
-  //         state: ListboxState.Visible,
-  //         textContent: JSON.stringify({ active: false, selected: false, disabled: false }),
-  //       })
-  //     })
-  //   )
-  // })
+        assertListboxButton({
+          state: ListboxState.Visible,
+          attributes: { id: 'headlessui-listbox-button-1' },
+        })
+        assertListbox({
+          state: ListboxState.Visible,
+          textContent: JSON.stringify({ active: false, selected: false, disabled: false }),
+        })
+      })
+    )
+  })
 })
 
 describe('Rendering composition', () => {
diff --git a/src/lib/components/menu/menu.test.ts b/src/lib/components/menu/menu.test.ts
index a2d9fde..87bcbe6 100644
--- a/src/lib/components/menu/menu.test.ts
+++ b/src/lib/components/menu/menu.test.ts
@@ -10,6 +10,7 @@ import Button from "$lib/internal/elements/Button.svelte";
 import Div from "$lib/internal/elements/Div.svelte";
 import Form from "$lib/internal/elements/Form.svelte";
 import Span from "$lib/internal/elements/Span.svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock('../../hooks/use-id', () => {
@@ -66,110 +67,106 @@ describe('Safe guards', () => {
 })
 
 describe('Rendering', () => {
-  // describe('Menu', () => {
-  // it(
-  //   'should be possible to render a Menu using a render prop',
-  //   suppressConsoleLogs(async () => {
-  //     render(
-  //       <Menu>
-  //         {({ open }) => (
-  //           <>
-  //             <Menu.Button>Trigger</Menu.Button>
-  //             {open && (
-  //               <Menu.Items>
-  //                 <Menu.Item as="a">Item A</Menu.Item>
-  //                 <Menu.Item as="a">Item B</Menu.Item>
-  //                 <Menu.Item as="a">Item C</Menu.Item>
-  //               </Menu.Items>
-  //             )}
-  //           </>
-  //         )}
-  //       </Menu>
-  //     )
+  describe('Menu', () => {
+    it(
+      'Menu should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+        <Menu let:open>
+          <MenuButton>Trigger</MenuButton>
+          {#if open}
+            <MenuItems>
+              <MenuItem as="a">Item A</MenuItem>
+              <MenuItem as="a">Item B</MenuItem>
+              <MenuItem as="a">Item C</MenuItem>
+            </MenuItems>
+          {/if}
+        </Menu>
+      `)
 
-  //     assertMenuButton({
-  //       state: MenuState.InvisibleUnmounted,
-  //       attributes: { id: 'headlessui-menu-button-1' },
-  //     })
-  //     assertMenu({ state: MenuState.InvisibleUnmounted })
+        assertMenuButton({
+          state: MenuState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-menu-button-1' },
+        })
+        assertMenu({ state: MenuState.InvisibleUnmounted })
 
-  //     await click(getMenuButton())
+        await click(getMenuButton())
 
-  //     assertMenuButton({
-  //       state: MenuState.Visible,
-  //       attributes: { id: 'headlessui-menu-button-1' },
-  //     })
-  //     assertMenu({ state: MenuState.Visible })
-  //   })
-  // )
-  // })
+        assertMenuButton({
+          state: MenuState.Visible,
+          attributes: { id: 'headlessui-menu-button-1' },
+        })
+        assertMenu({ state: MenuState.Visible })
+      })
+    )
+  })
 
-  describe('Menu.Button', () => {
-    // it(
-    //   'should be possible to render a Menu.Button using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Menu>
-    //         <Menu.Button>{JSON.stringify}</Menu.Button>
-    //         <Menu.Items>
-    //           <Menu.Item as="a">Item A</Menu.Item>
-    //           <Menu.Item as="a">Item B</Menu.Item>
-    //           <Menu.Item as="a">Item C</Menu.Item>
-    //         </Menu.Items>
-    //       </Menu>
-    //     )
+  describe('MenuButton', () => {
+    it(
+      'MenuButton should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Menu>
+            <MenuButton let:open>{open}</MenuButton>
+            <MenuItems>
+              <MenuItem as="a">Item A</MenuItem>
+              <MenuItem as="a">Item B</MenuItem>
+              <MenuItem as="a">Item C</MenuItem>
+            </MenuItems>
+          </Menu>
+        `)
 
-    //     assertMenuButton({
-    //       state: MenuState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-menu-button-1' },
-    //       textContent: JSON.stringify({ open: false }),
-    //     })
-    //     assertMenu({ state: MenuState.InvisibleUnmounted })
+        assertMenuButton({
+          state: MenuState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-menu-button-1' },
+          textContent: "false",
+        })
+        assertMenu({ state: MenuState.InvisibleUnmounted })
 
-    //     await click(getMenuButton())
+        await click(getMenuButton())
 
-    //     assertMenuButton({
-    //       state: MenuState.Visible,
-    //       attributes: { id: 'headlessui-menu-button-1' },
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertMenu({ state: MenuState.Visible })
-    //   })
-    // )
+        assertMenuButton({
+          state: MenuState.Visible,
+          attributes: { id: 'headlessui-menu-button-1' },
+          textContent: "true",
+        })
+        assertMenu({ state: MenuState.Visible })
+      })
+    )
 
-    // it(
-    //   'should be possible to render a Menu.Button using a render prop and an `as` prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Menu>
-    //         <Menu.Button as="div" role="button">
-    //           {JSON.stringify}
-    //         </Menu.Button>
-    //         <Menu.Items>
-    //           <Menu.Item as="a">Item A</Menu.Item>
-    //           <Menu.Item as="a">Item B</Menu.Item>
-    //           <Menu.Item as="a">Item C</Menu.Item>
-    //         </Menu.Items>
-    //       </Menu>
-    //     )
+    it(
+      'MenuButton should have slot props and support an `as` prop',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Menu>
+            <MenuButton as="div" role="button" let:open>
+              {open}
+            </MenuButton>
+            <MenuItems>
+              <MenuItem as="a">Item A</MenuItem>
+              <MenuItem as="a">Item B</MenuItem>
+              <MenuItem as="a">Item C</MenuItem>
+            </MenuItems>
+          </Menu>
+        `)
 
-    //     assertMenuButton({
-    //       state: MenuState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-menu-button-1' },
-    //       textContent: JSON.stringify({ open: false }),
-    //     })
-    //     assertMenu({ state: MenuState.InvisibleUnmounted })
+        assertMenuButton({
+          state: MenuState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-menu-button-1' },
+          textContent: "false",
+        })
+        assertMenu({ state: MenuState.InvisibleUnmounted })
 
-    //     await click(getMenuButton())
+        await click(getMenuButton())
 
-    //     assertMenuButton({
-    //       state: MenuState.Visible,
-    //       attributes: { id: 'headlessui-menu-button-1' },
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertMenu({ state: MenuState.Visible })
-    //   })
-    // )
+        assertMenuButton({
+          state: MenuState.Visible,
+          attributes: { id: 'headlessui-menu-button-1' },
+          textContent: "true",
+        })
+        assertMenu({ state: MenuState.Visible })
+      })
+    )
 
     describe('`type` attribute', () => {
       it('should set the `type` to "button" by default', async () => {
@@ -214,43 +211,39 @@ describe('Rendering', () => {
     })
   })
 
-  describe('Menu.Items', () => {
-    // it(
-    //   'should be possible to render Menu.Items using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Menu>
-    //         <Menu.Button>Trigger</Menu.Button>
-    //         <Menu.Items>
-    //           {data => (
-    //             <>
-    //               <Menu.Item as="a">{JSON.stringify(data)}</Menu.Item>
-    //             </>
-    //           )}
-    //         </Menu.Items>
-    //       </Menu>
-    //     )
+  describe('MenuItems', () => {
+    it(
+      'MenuItems should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Menu>
+            <MenuButton>Trigger</MenuButton>
+            <MenuItems let:open>
+              <MenuItem as="a">{open}</MenuItem>
+            </MenuItems>
+          </Menu>
+        `)
 
-    //     assertMenuButton({
-    //       state: MenuState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-menu-button-1' },
-    //     })
-    //     assertMenu({ state: MenuState.InvisibleUnmounted })
+        assertMenuButton({
+          state: MenuState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-menu-button-1' },
+        })
+        assertMenu({ state: MenuState.InvisibleUnmounted })
 
-    //     await click(getMenuButton())
+        await click(getMenuButton())
 
-    //     assertMenuButton({
-    //       state: MenuState.Visible,
-    //       attributes: { id: 'headlessui-menu-button-1' },
-    //     })
-    //     assertMenu({
-    //       state: MenuState.Visible,
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //   })
-    // )
+        assertMenuButton({
+          state: MenuState.Visible,
+          attributes: { id: 'headlessui-menu-button-1' },
+        })
+        assertMenu({
+          state: MenuState.Visible,
+          textContent: "true",
+        })
+      })
+    )
 
-    it('should be possible to always render the Menu.Items if we provide it a `static` prop', () => {
+    it('should be possible to always render the MenuItems if we provide it a `static` prop', () => {
       render(
         TestRenderer, {
         allProps: [
@@ -269,7 +262,7 @@ describe('Rendering', () => {
       expect(getMenu()).not.toBe(null)
     })
 
-    it('should be possible to use a different render strategy for the Menu.Items', async () => {
+    it('should be possible to use a different render strategy for the MenuItems', async () => {
       render(
         TestRenderer, {
         allProps: [
@@ -293,38 +286,38 @@ describe('Rendering', () => {
     })
   })
 
-  // describe('Menu.Item', () => {
-  // it(
-  //   'should be possible to render a Menu.Item using a render prop',
-  //   suppressConsoleLogs(async () => {
-  //     render(
-  //       <Menu>
-  //         <Menu.Button>Trigger</Menu.Button>
-  //         <Menu.Items>
-  //           <Menu.Item as="a">{JSON.stringify}</Menu.Item>
-  //         </Menu.Items>
-  //       </Menu>
-  //     )
+  describe('MenuItem', () => {
+    it(
+      'MenuItem should have slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+        <Menu>
+          <MenuButton>Trigger</MenuButton>
+          <MenuItems>
+            <MenuItem as="a" let:active let:disabled>{JSON.stringify({ active, disabled })}</MenuItem>
+          </MenuItems>
+        </Menu>
+      `)
 
-  //     assertMenuButton({
-  //       state: MenuState.InvisibleUnmounted,
-  //       attributes: { id: 'headlessui-menu-button-1' },
-  //     })
-  //     assertMenu({ state: MenuState.InvisibleUnmounted })
+        assertMenuButton({
+          state: MenuState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-menu-button-1' },
+        })
+        assertMenu({ state: MenuState.InvisibleUnmounted })
 
-  //     await click(getMenuButton())
+        await click(getMenuButton())
 
-  //     assertMenuButton({
-  //       state: MenuState.Visible,
-  //       attributes: { id: 'headlessui-menu-button-1' },
-  //     })
-  //     assertMenu({
-  //       state: MenuState.Visible,
-  //       textContent: JSON.stringify({ active: false, disabled: false }),
-  //     })
-  //   })
-  // )
-  // })
+        assertMenuButton({
+          state: MenuState.Visible,
+          attributes: { id: 'headlessui-menu-button-1' },
+        })
+        assertMenu({
+          state: MenuState.Visible,
+          textContent: JSON.stringify({ active: false, disabled: false }),
+        })
+      })
+    )
+  })
 })
 
 describe('Rendering composition', () => {
@@ -421,7 +414,7 @@ describe('Rendering composition', () => {
   )
 
   it(
-    'should mark all the elements between Menu.Items and Menu.Item with role none',
+    'should mark all the elements between MenuItems and MenuItem with role none',
     suppressConsoleLogs(async () => {
       render
       render(
@@ -472,7 +465,7 @@ describe('Rendering composition', () => {
 
 describe('Composition', () => {
   it.skip(
-    'should be possible to wrap the Menu.Items with a Transition component',
+    'should be possible to wrap the MenuItems with a Transition component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
       render(
@@ -525,7 +518,7 @@ describe('Composition', () => {
   )
 
   it.skip(
-    'should be possible to wrap the Menu.Items with a Transition.Child component',
+    'should be possible to wrap the MenuItems with a Transition.Child component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
       render(
diff --git a/src/lib/components/popover/popover.test.ts b/src/lib/components/popover/popover.test.ts
index aae567e..38f9b78 100644
--- a/src/lib/components/popover/popover.test.ts
+++ b/src/lib/components/popover/popover.test.ts
@@ -10,6 +10,7 @@ import Span from "$lib/internal/elements/Span.svelte";
 import { Transition, TransitionChild } from "$lib/components/transitions";
 import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
 import Portal from "$lib/components/portal/Portal.svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock('../../hooks/use-id', () => {
@@ -119,216 +120,158 @@ describe('Rendering', () => {
   })
 
   describe('Popover', () => {
-    // it(
-    //   'should be possible to render a Popover using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Popover>
-    //         {({ open }) => (
-    //           <>
-    //             <Popover.Button>Trigger</Popover.Button>
-    //             <Popover.Panel>Panel is: {open ? 'open' : 'closed'}</Popover.Panel>
-    //           </>
-    //         )}
-    //       </Popover>
-    //     )
+    it(
+      'should render a Popover with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Popover let:open>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel>Panel is: {open ? 'open' : 'closed'}</PopoverPanel>
+          </Popover>
+        `)
 
-    //     assertPopoverButton({
-    //       state: PopoverState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        assertPopoverButton({
+          state: PopoverState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-popover-button-1' },
+        })
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     await click(getPopoverButton())
+        await click(getPopoverButton())
 
-    //     assertPopoverButton({
-    //       state: PopoverState.Visible,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.Visible, textContent: 'Panel is: open' })
-    //   })
-    // )
+        assertPopoverButton({
+          state: PopoverState.Visible,
+          attributes: { id: 'headlessui-popover-button-1' },
+        })
+        assertPopoverPanel({ state: PopoverState.Visible, textContent: 'Panel is: open' })
+      })
+    )
 
-    // it(
-    //   'should expose a close function that closes the popover',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Popover>
-    //         {({ close }) => (
-    //           <>
-    //             <Popover.Button>Trigger</Popover.Button>
-    //             <Popover.Panel>
-    //               <button onClick={() => close()}>Close me</button>
-    //             </Popover.Panel>
-    //           </>
-    //         )}
-    //       </Popover>
-    //     )
+    it(
+      'should expose a close function that closes the popover',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Popover let:close>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel>
+              <button on:click={() => close()}>Close me</button>
+            </PopoverPanel>
+          </Popover>
+        `)
 
-    //     // Focus the button
-    //     getPopoverButton()?.focus()
+        // Focus the button
+        getPopoverButton()?.focus()
 
-    //     // Ensure the button is focused
-    //     assertActiveElement(getPopoverButton())
+        // Ensure the button is focused
+        assertActiveElement(getPopoverButton())
 
-    //     // Open the popover
-    //     await click(getPopoverButton())
+        // Open the popover
+        await click(getPopoverButton())
 
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-    //     // Ensure the popover is closed
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        // Ensure the popover is closed
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     // Ensure the Popover.Button got the restored focus
-    //     assertActiveElement(getByText('Trigger'))
-    //   })
-    // )
+        // Ensure the PopoverButton got the restored focus
+        assertActiveElement(getByText('Trigger'))
+      })
+    )
 
-    // it(
-    //   'should expose a close function that closes the popover and restores to a specific element',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <>
-    //         <button id="test">restoreable</button>
-    //         <Popover>
-    //           {({ close }) => (
-    //             <>
-    //               <Popover.Button>Trigger</Popover.Button>
-    //               <Popover.Panel>
-    //                 <button onClick={() => close(document.getElementById('test')!)}>
-    //                   Close me
-    //                 </button>
-    //               </Popover.Panel>
-    //             </>
-    //           )}
-    //         </Popover>
-    //       </>
-    //     )
+    it(
+      'should expose a close function that closes the popover and restores to a specific element',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+            <button id="test">restoreable</button>
+            <Popover let:close>
+              <PopoverButton>Trigger</PopoverButton>
+              <PopoverPanel>
+                <button on:click={() => close(document.getElementById('test'))}>
+                  Close me
+                </button>
+              </PopoverPanel>
+            </Popover>
+        `)
 
-    //     // Focus the button
-    //     getPopoverButton()?.focus()
+        // Focus the button
+        getPopoverButton()?.focus()
 
-    //     // Ensure the button is focused
-    //     assertActiveElement(getPopoverButton())
+        // Ensure the button is focused
+        assertActiveElement(getPopoverButton())
 
-    //     // Open the popover
-    //     await click(getPopoverButton())
+        // Open the popover
+        await click(getPopoverButton())
 
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-    //     // Ensure the popover is closed
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        // Ensure the popover is closed
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     // Ensure the restoreable button got the restored focus
-    //     assertActiveElement(getByText('restoreable'))
-    //   })
-    // )
-
-    // it(
-    //   'should expose a close function that closes the popover and restores to a ref',
-    //   suppressConsoleLogs(async () => {
-    //     function Example() {
-    //       let elementRef = useRef(null)
-    //       return (
-    //         <>
-    //           <button ref={elementRef}>restoreable</button>
-    //           <Popover>
-    //             {({ close }) => (
-    //               <>
-    //                 <Popover.Button>Trigger</Popover.Button>
-    //                 <Popover.Panel>
-    //                   <button onClick={() => close(elementRef)}>Close me</button>
-    //                 </Popover.Panel>
-    //               </>
-    //             )}
-    //           </Popover>
-    //         </>
-    //       )
-    //     }
-
-    //     render(<Example />)
-
-    //     // Focus the button
-    //     getPopoverButton()?.focus()
-
-    //     // Ensure the button is focused
-    //     assertActiveElement(getPopoverButton())
-
-    //     // Open the popover
-    //     await click(getPopoverButton())
-
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
-
-    //     // Ensure the popover is closed
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
-
-    //     // Ensure the restoreable button got the restored focus
-    //     assertActiveElement(getByText('restoreable'))
-    //   })
-    // )
+        // Ensure the restoreable button got the restored focus
+        assertActiveElement(getByText('restoreable'))
+      })
+    )
   })
 
-  describe('Popover.Button', () => {
-    // it(
-    //   'should be possible to render a Popover.Button using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Popover>
-    //         <Popover.Button>{JSON.stringify}</Popover.Button>
-    //         <Popover.Panel></Popover.Panel>
-    //       </Popover>
-    //     )
+  describe('PopoverButton', () => {
+    it(
+      'should render a PopoverButton with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Popover>
+            <PopoverButton let:open>{JSON.stringify({open})}</PopoverButton>
+            <PopoverPanel></PopoverPanel>
+          </Popover>
+        `)
 
-    //     assertPopoverButton({
-    //       state: PopoverState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //       textContent: JSON.stringify({ open: false }),
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        assertPopoverButton({
+          state: PopoverState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-popover-button-1' },
+          textContent: JSON.stringify({ open: false }),
+        })
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     await click(getPopoverButton())
+        await click(getPopoverButton())
 
-    //     assertPopoverButton({
-    //       state: PopoverState.Visible,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.Visible })
-    //   })
-    // )
+        assertPopoverButton({
+          state: PopoverState.Visible,
+          attributes: { id: 'headlessui-popover-button-1' },
+          textContent: JSON.stringify({ open: true }),
+        })
+        assertPopoverPanel({ state: PopoverState.Visible })
+      })
+    )
 
-    // it(
-    //   'should be possible to render a Popover.Button using a render prop and an `as` prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Popover>
-    //         <Popover.Button as="div" role="button">
-    //           {JSON.stringify}
-    //         </Popover.Button>
-    //         <Popover.Panel />
-    //       </Popover>
-    //     )
+    it(
+      'should render a PopoverButton with a slot prop and use an `as` prop',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Popover>
+            <PopoverButton as="div" role="button" let:open>
+              {JSON.stringify({ open })}
+            </PopoverButton>
+            <PopoverPanel />
+          </Popover>
+        `)
 
-    //     assertPopoverButton({
-    //       state: PopoverState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //       textContent: JSON.stringify({ open: false }),
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        assertPopoverButton({
+          state: PopoverState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-popover-button-1' },
+          textContent: JSON.stringify({ open: false }),
+        })
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     await click(getPopoverButton())
+        await click(getPopoverButton())
 
-    //     assertPopoverButton({
-    //       state: PopoverState.Visible,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.Visible })
-    //   })
-    // )
+        assertPopoverButton({
+          state: PopoverState.Visible,
+          attributes: { id: 'headlessui-popover-button-1' },
+          textContent: JSON.stringify({ open: true }),
+        })
+        assertPopoverPanel({ state: PopoverState.Visible })
+      })
+    )
 
     describe('`type` attribute', () => {
       it('should set the `type` to "button" by default', async () => {
@@ -370,37 +313,37 @@ describe('Rendering', () => {
     })
   })
 
-  describe('Popover.Panel', () => {
-    // it(
-    //   'should be possible to render Popover.Panel using a render prop',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Popover>
-    //         <Popover.Button>Trigger</Popover.Button>
-    //         <Popover.Panel>{JSON.stringify}</Popover.Panel>
-    //       </Popover>
-    //     )
+  describe('PopoverPanel', () => {
+    it(
+      'should render PopoverPanel with slot props',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Popover>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel let:open>{JSON.stringify({ open })}</PopoverPanel>
+          </Popover>
+        `)
 
-    //     assertPopoverButton({
-    //       state: PopoverState.InvisibleUnmounted,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //     })
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        assertPopoverButton({
+          state: PopoverState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-popover-button-1' },
+        })
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     await click(getPopoverButton())
+        await click(getPopoverButton())
 
-    //     assertPopoverButton({
-    //       state: PopoverState.Visible,
-    //       attributes: { id: 'headlessui-popover-button-1' },
-    //     })
-    //     assertPopoverPanel({
-    //       state: PopoverState.Visible,
-    //       textContent: JSON.stringify({ open: true }),
-    //     })
-    //   })
-    // )
+        assertPopoverButton({
+          state: PopoverState.Visible,
+          attributes: { id: 'headlessui-popover-button-1' },
+        })
+        assertPopoverPanel({
+          state: PopoverState.Visible,
+          textContent: JSON.stringify({ open: true }),
+        })
+      })
+    )
 
-    it('should be possible to always render the Popover.Panel if we provide it a `static` prop', () => {
+    it('should be possible to always render the PopoverPanel if we provide it a `static` prop', () => {
       render(
         TestRenderer, {
         allProps: [
@@ -415,7 +358,7 @@ describe('Rendering', () => {
       expect(getPopoverPanel()).not.toBe(null)
     })
 
-    it('should be possible to use a different render strategy for the Popover.Panel', async () => {
+    it('should be possible to use a different render strategy for the PopoverPanel', async () => {
       render(
         TestRenderer, {
         allProps: [
@@ -477,7 +420,7 @@ describe('Rendering', () => {
     // TODO: This test doesn't work but I'm also not totally sure it should... 
     // calling element.focus in the browser doesn't seem to call the window focus handler
     it.skip(
-      'should close the Popover, when Popover.Panel has the focus prop and you focus the open button',
+      'should close the Popover, when PopoverPanel has the focus prop and you focus the open button',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -573,120 +516,76 @@ describe('Rendering', () => {
       })
     )
 
-    // it(
-    //   'should expose a close function that closes the popover',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <Popover>
-    //         <Popover.Button>Trigger</Popover.Button>
-    //         <Popover.Panel>
-    //           {({ close }) => <button onClick={() => close()}>Close me</button>}
-    //         </Popover.Panel>
-    //       </Popover>
-    //     )
+    it(
+      'should expose a close function that closes the popover',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <Popover>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel let:close>
+              <button on:click={() => close()}>Close me</button>
+            </PopoverPanel>
+          </Popover>
+        `)
 
-    //     // Focus the button
-    //     getPopoverButton()?.focus()
+        // Focus the button
+        getPopoverButton()?.focus()
 
-    //     // Ensure the button is focused
-    //     assertActiveElement(getPopoverButton())
+        // Ensure the button is focused
+        assertActiveElement(getPopoverButton())
 
-    //     // Open the popover
-    //     await click(getPopoverButton())
+        // Open the popover
+        await click(getPopoverButton())
 
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-    //     // Ensure the popover is closed
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        // Ensure the popover is closed
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     // Ensure the Popover.Button got the restored focus
-    //     assertActiveElement(getByText('Trigger'))
-    //   })
-    // )
+        // Ensure the PopoverButton got the restored focus
+        assertActiveElement(getByText('Trigger'))
+      })
+    )
 
-    // it(
-    //   'should expose a close function that closes the popover and restores to a specific element',
-    //   suppressConsoleLogs(async () => {
-    //     render(
-    //       <>
-    //         <button id="test">restoreable</button>
-    //         <Popover>
-    //           <Popover.Button>Trigger</Popover.Button>
-    //           <Popover.Panel>
-    //             {({ close }) => (
-    //               <button onClick={() => close(document.getElementById('test')!)}>Close me</button>
-    //             )}
-    //           </Popover.Panel>
-    //         </Popover>
-    //       </>
-    //     )
+    it(
+      'should expose a close function that closes the popover and restores to a specific element',
+      suppressConsoleLogs(async () => {
+        render(svelte`
+          <button id="test">restoreable</button>
+          <Popover>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel let:close>
+              <button on:click={() => close(document.getElementById('test'))}>Close me</button>
+            </PopoverPanel>
+          </Popover>
+        `)
 
-    //     // Focus the button
-    //     getPopoverButton()?.focus()
+        // Focus the button
+        getPopoverButton()?.focus()
 
-    //     // Ensure the button is focused
-    //     assertActiveElement(getPopoverButton())
+        // Ensure the button is focused
+        assertActiveElement(getPopoverButton())
 
-    //     // Open the popover
-    //     await click(getPopoverButton())
+        // Open the popover
+        await click(getPopoverButton())
 
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
+        // Ensure we can click the close button
+        await click(getByText('Close me'))
 
-    //     // Ensure the popover is closed
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+        // Ensure the popover is closed
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-    //     // Ensure the restoreable button got the restored focus
-    //     assertActiveElement(getByText('restoreable'))
-    //   })
-    // )
-
-    // it(
-    //   'should expose a close function that closes the popover and restores to a ref',
-    //   suppressConsoleLogs(async () => {
-    //     function Example() {
-    //       let elementRef = useRef(null)
-    //       return (
-    //         <>
-    //           <button ref={elementRef}>restoreable</button>
-    //           <Popover>
-    //             <Popover.Button>Trigger</Popover.Button>
-    //             <Popover.Panel>
-    //               {({ close }) => <button onClick={() => close(elementRef)}>Close me</button>}
-    //             </Popover.Panel>
-    //           </Popover>
-    //         </>
-    //       )
-    //     }
-
-    //     render(<Example />)
-
-    //     // Focus the button
-    //     getPopoverButton()?.focus()
-
-    //     // Ensure the button is focused
-    //     assertActiveElement(getPopoverButton())
-
-    //     // Open the popover
-    //     await click(getPopoverButton())
-
-    //     // Ensure we can click the close button
-    //     await click(getByText('Close me'))
-
-    //     // Ensure the popover is closed
-    //     assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
-
-    //     // Ensure the restoreable button got the restored focus
-    //     assertActiveElement(getByText('restoreable'))
-    //   })
-    // )
+        // Ensure the restoreable button got the restored focus
+        assertActiveElement(getByText('restoreable'))
+      })
+    )
   })
 })
 
 describe('Composition', () => {
   it(
-    'should be possible to wrap the Popover.Panel with a Transition component',
+    'should be possible to wrap the PopoverPanel with a Transition component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
       render(
@@ -889,7 +788,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should close the Popover by pressing `Enter` on a Popover.Button inside a Popover.Panel',
+      'should close the Popover by pressing `Enter` on a PopoverButton inside a PopoverPanel',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -926,7 +825,7 @@ describe('Keyboard interactions', () => {
 
   describe('`Escape` key', () => {
     it(
-      'should close the Popover menu, when pressing escape on the Popover.Button',
+      'should close the Popover menu, when pressing escape on the PopoverButton',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -962,7 +861,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should close the Popover menu, when pressing escape on the Popover.Panel',
+      'should close the Popover menu, when pressing escape on the PopoverPanel',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1006,7 +905,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should be possible to close a sibling Popover when pressing escape on a sibling Popover.Button',
+      'should be possible to close a sibling Popover when pressing escape on a sibling PopoverButton',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1059,7 +958,7 @@ describe('Keyboard interactions', () => {
 
   describe('`Tab` key', () => {
     it(
-      'should be possible to Tab through the panel contents onto the next Popover.Button',
+      'should be possible to Tab through the panel contents onto the next PopoverButton',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1261,7 +1160,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should close the Popover when the Popover.Panel has a focus prop',
+      'should close the Popover when the PopoverPanel has a focus prop',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1297,7 +1196,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should close the Popover when the Popover.Panel has a focus prop (Popover.Panel uses a Portal)',
+      'should close the Popover when the PopoverPanel has a focus prop (PopoverPanel uses a Portal)',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1343,7 +1242,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should close the Popover when the Popover.Panel has a focus prop (Popover.Panel uses a Portal), and focus the next focusable item in line',
+      'should close the Popover when the PopoverPanel has a focus prop (PopoverPanel uses a Portal), and focus the next focusable item in line',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1473,7 +1372,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should focus the previous Popover.Button when Shift+Tab on the second Popover.Button',
+      'should focus the previous PopoverButton when Shift+Tab on the second PopoverButton',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1509,19 +1408,19 @@ describe('Keyboard interactions', () => {
         // Ensure the popover is now closed
         assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 2'))
 
-        // Ensure the second Popover.Button is focused
+        // Ensure the second PopoverButton is focused
         assertActiveElement(getByText('Trigger 2'))
 
         // Tab backwards
         await press(shift(Keys.Tab))
 
-        // Ensure the first Popover.Button is open
+        // Ensure the first PopoverButton is open
         assertActiveElement(getByText('Trigger 1'))
       })
     )
 
     it(
-      'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel',
+      'should focus the PopoverButton when pressing Shift+Tab when we focus inside the PopoverPanel',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1548,7 +1447,7 @@ describe('Keyboard interactions', () => {
         // Tab out of the Panel
         await press(shift(Keys.Tab))
 
-        // Ensure the Popover.Button is focused again
+        // Ensure the PopoverButton is focused again
         assertActiveElement(getPopoverButton())
 
         // Ensure the Popover is closed
@@ -1558,7 +1457,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (inside a Portal)',
+      'should focus the PopoverButton when pressing Shift+Tab when we focus inside the PopoverPanel (inside a Portal)',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1587,7 +1486,7 @@ describe('Keyboard interactions', () => {
         // Tab out of the Panel
         await press(shift(Keys.Tab))
 
-        // Ensure the Popover.Button is focused again
+        // Ensure the PopoverButton is focused again
         assertActiveElement(getPopoverButton())
 
         // Ensure the Popover is closed
@@ -1597,7 +1496,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should be possible to focus the last item in the Popover.Panel when pressing Shift+Tab on the next Popover.Button',
+      'should be possible to focus the last item in the PopoverPanel when pressing Shift+Tab on the next PopoverButton',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1637,7 +1536,7 @@ describe('Keyboard interactions', () => {
         assertPopoverButton({ state: PopoverState.Visible })
         assertPopoverPanel({ state: PopoverState.Visible })
 
-        // Press shift+tab, to move focus to the last item in the Popover.Panel
+        // Press shift+tab, to move focus to the last item in the PopoverPanel
         await press(shift(Keys.Tab), getByText('Trigger 2'))
 
         // Verify we are focusing the last link of the first Popover
@@ -1646,7 +1545,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      "should be possible to focus the last item in the Popover.Panel when pressing Shift+Tab on the next Popover.Button (using Portal's)",
+      "should be possible to focus the last item in the PopoverPanel when pressing Shift+Tab on the next PopoverButton (using Portal's)",
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -1690,7 +1589,7 @@ describe('Keyboard interactions', () => {
         assertPopoverButton({ state: PopoverState.Visible })
         assertPopoverPanel({ state: PopoverState.Visible })
 
-        // Press shift+tab, to move focus to the last item in the Popover.Panel
+        // Press shift+tab, to move focus to the last item in the PopoverPanel
         await press(shift(Keys.Tab), getByText('Trigger 2'))
 
         // Verify we are focusing the last link of the first Popover
@@ -1852,7 +1751,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should close the Popover by pressing `Space` on a Popover.Button inside a Popover.Panel',
+      'should close the Popover by pressing `Space` on a PopoverButton inside a PopoverPanel',
       suppressConsoleLogs(async () => {
         render(
           TestRenderer, {
@@ -2170,7 +2069,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to close the Popover by clicking on a Popover.Button inside a Popover.Panel',
+    'should be possible to close the Popover by clicking on a PopoverButton inside a PopoverPanel',
     suppressConsoleLogs(async () => {
       render(
         TestRenderer, {
@@ -2205,7 +2104,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not close the Popover when clicking on a focusable element inside a static Popover.Panel',
+    'should not close the Popover when clicking on a focusable element inside a static PopoverPanel',
     suppressConsoleLogs(async () => {
       let clickFn = jest.fn()
 
@@ -2236,7 +2135,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not close the Popover when clicking on a non-focusable element inside a static Popover.Panel',
+    'should not close the Popover when clicking on a non-focusable element inside a static PopoverPanel',
     suppressConsoleLogs(async () => {
       render(
         TestRenderer, {
@@ -2262,7 +2161,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should close the Popover when clicking outside of a static Popover.Panel',
+    'should close the Popover when clicking outside of a static PopoverPanel',
     suppressConsoleLogs(async () => {
       render(
         TestRenderer, {
diff --git a/src/lib/components/radio-group/radio-group.test.ts b/src/lib/components/radio-group/radio-group.test.ts
index c0516bb..d63a596 100644
--- a/src/lib/components/radio-group/radio-group.test.ts
+++ b/src/lib/components/radio-group/radio-group.test.ts
@@ -13,6 +13,7 @@ import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
 import { click, Keys, press, shift } from "$lib/test-utils/interactions";
 import Button from "$lib/internal/elements/Button.svelte";
 import ManagedRadioGroup from "./_ManagedRadioGroup.svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock('../../hooks/use-id', () => {
@@ -123,169 +124,159 @@ describe('Rendering', () => {
     assertNotFocusable(getByText('Dine in'))
   })
 
-  // it('should guarantee the radio option order after a few unmounts', async () => {
-  //   function Example() {
-  //     let [showFirst, setShowFirst] = useState(false)
-  //     let [active, setActive] = useState()
+  // TODO: fix this test!
+  it.skip('should guarantee the radio option order after a few unmounts', async () => {
+    render(svelte`
+      <script>
+        let showFirst = false;
+        let active;
+      </script>
+      <button on:click={() => showFirst = !showFirst}>Toggle</button>
+      <RadioGroup value={active} on:change={(e) => active = e.detail}>
+        <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+        {#if showFirst}
+          <RadioGroupOption value="pickup">Pickup</RadioGroupOption>
+        {/if}
+        <RadioGroupOption value="home-delivery">Home delivery</RadioGroupOption>
+        <RadioGroupOption value="dine-in">Dine in</RadioGroupOption>
+      </RadioGroup>
+    `)
 
-  //     return (
-  //       <>
-  //         <button onClick={() => setShowFirst(v => !v)}>Toggle</button>
-  //         <RadioGroup value={active} onChange={setActive}>
-  //           <RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
-  //           {showFirst && <RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>}
-  //           <RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
-  //           <RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
-  //         </RadioGroup>
-  //       </>
-  //     )
-  //   }
+    await click(getByText('Toggle')) // Render the pickup again
 
-  //   render(<Example />)
+    await press(Keys.Tab) // Focus first element
+    assertActiveElement(getByText('Pickup'))
 
-  //   await click(getByText('Toggle')) // Render the pickup again
+    await press(Keys.ArrowUp) // Loop around
+    assertActiveElement(getByText('Dine in'))
 
-  //   await press(Keys.Tab) // Focus first element
-  //   assertActiveElement(getByText('Pickup'))
+    await press(Keys.ArrowUp) // Up again
+    assertActiveElement(getByText('Home delivery'))
+  })
 
-  //   await press(Keys.ArrowUp) // Loop around
-  //   assertActiveElement(getByText('Dine in'))
+  it('should be possible to disable a RadioGroup', async () => {
+    let changeFn = jest.fn()
 
-  //   await press(Keys.ArrowUp) // Up again
-  //   assertActiveElement(getByText('Home delivery'))
-  // })
+    render(svelte`
+      <script>
+        let disabled = true;
+      </script>
+      <button on:click={() => disabled = !disabled}>Toggle</button>
+      <RadioGroup value={undefined} on:change={changeFn} {disabled}>
+        <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+        <RadioGroupOption value="pickup">Pickup</RadioGroupOption>
+        <RadioGroupOption value="home-delivery">Home delivery</RadioGroupOption>
+        <RadioGroupOption value="dine-in">Dine in</RadioGroupOption>
+        <RadioGroupOption value="slot-prop" data-value="slot-prop" let:checked let:disabled let:active>
+          {JSON.stringify({ checked, disabled, active })}
+        </RadioGroupOption>
+      </RadioGroup>
+    `)
 
-  // it('should be possible to disable a RadioGroup', async () => {
-  //   let changeFn = jest.fn()
 
-  //   function Example() {
-  //     let [disabled, setDisabled] = useState(true)
-  //     return (
-  //       <>
-  //         <button onClick={() => setDisabled(v => !v)}>Toggle</button>
-  //         <RadioGroup value={undefined} onChange={changeFn} disabled={disabled}>
-  //           <RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
-  //           <RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
-  //           <RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
-  //           <RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
-  //           <RadioGroup.Option value="render-prop" data-value="render-prop">
-  //             {JSON.stringify}
-  //           </RadioGroup.Option>
-  //         </RadioGroup>
-  //       </>
-  //     )
-  //   }
+    // Try to click one a few options
+    await click(getByText('Pickup'))
+    await click(getByText('Dine in'))
 
-  //   render(<Example />)
+    // Verify that the RadioGroupOption gets the disabled state
+    expect(document.querySelector('[data-value="slot-prop"]')).toHaveTextContent(
+      JSON.stringify({
+        checked: false,
+        disabled: true,
+        active: false,
+      })
+    )
 
-  //   // Try to click one a few options
-  //   await click(getByText('Pickup'))
-  //   await click(getByText('Dine in'))
+    // Make sure that the onChange handler never got called
+    expect(changeFn).toHaveBeenCalledTimes(0)
 
-  //   // Verify that the RadioGroup.Option gets the disabled state
-  //   expect(document.querySelector('[data-value="render-prop"]')).toHaveTextContent(
-  //     JSON.stringify({
-  //       checked: false,
-  //       disabled: true,
-  //       active: false,
-  //     })
-  //   )
+    // Make sure that all the options get an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) expect(option).toHaveAttribute('aria-disabled', 'true')
 
-  //   // Make sure that the onChange handler never got called
-  //   expect(changeFn).toHaveBeenCalledTimes(0)
+    // Toggle the disabled state
+    await click(getByText('Toggle'))
 
-  //   // Make sure that all the options get an `aria-disabled`
-  //   let options = getRadioGroupOptions()
-  //   expect(options).toHaveLength(4)
-  //   for (let option of options) expect(option).toHaveAttribute('aria-disabled', 'true')
+    // Verify that the RadioGroupOption gets the disabled state
+    expect(document.querySelector('[data-value="slot-prop"]')).toHaveTextContent(
+      JSON.stringify({
+        checked: false,
+        disabled: false,
+        active: false,
+      })
+    )
 
-  //   // Toggle the disabled state
-  //   await click(getByText('Toggle'))
+    // Try to click one a few options
+    await click(getByText('Pickup'))
 
-  //   // Verify that the RadioGroup.Option gets the disabled state
-  //   expect(document.querySelector('[data-value="render-prop"]')).toHaveTextContent(
-  //     JSON.stringify({
-  //       checked: false,
-  //       disabled: false,
-  //       active: false,
-  //     })
-  //   )
+    // Make sure that the onChange handler got called
+    expect(changeFn).toHaveBeenCalledTimes(1)
+  })
 
-  //   // Try to click one a few options
-  //   await click(getByText('Pickup'))
+  it('should be possible to disable a RadioGroupOption', async () => {
+    let changeFn = jest.fn()
 
-  //   // Make sure that the onChange handler got called
-  //   expect(changeFn).toHaveBeenCalledTimes(1)
-  // })
+    render(svelte`
+      <script>
+        let disabled = true;
+      </script>
+      <button on:click={() => disabled = !disabled}>Toggle</button>
+      <RadioGroup value={undefined} on:change={changeFn}>
+        <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+        <RadioGroupOption value="pickup">Pickup</RadioGroupOption>
+        <RadioGroupOption value="home-delivery">Home delivery</RadioGroupOption>
+        <RadioGroupOption value="dine-in">Dine in</RadioGroupOption>
+        <RadioGroupOption value="slot-prop" {disabled} data-value="slot-prop" let:checked let:disabled let:active>
+          {JSON.stringify({ checked, disabled, active })}
+        </RadioGroupOption>
+      </RadioGroup>
+    `)
 
-  // it('should be possible to disable a RadioGroup.Option', async () => {
-  //   let changeFn = jest.fn()
+    // Try to click the disabled option
+    await click(document.querySelector('[data-value="slot-prop"]'))
 
-  //   function Example() {
-  //     let [disabled, setDisabled] = useState(true)
-  //     return (
-  //       <>
-  //         <button onClick={() => setDisabled(v => !v)}>Toggle</button>
-  //         <RadioGroup value={undefined} onChange={changeFn}>
-  //           <RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
-  //           <RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
-  //           <RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
-  //           <RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
-  //           <RadioGroup.Option value="render-prop" disabled={disabled} data-value="render-prop">
-  //             {JSON.stringify}
-  //           </RadioGroup.Option>
-  //         </RadioGroup>
-  //       </>
-  //     )
-  //   }
+    // Verify that the RadioGroupOption gets the disabled state
+    expect(document.querySelector('[data-value="slot-prop"]')).toHaveTextContent(
+      JSON.stringify({
+        checked: false,
+        disabled: true,
+        active: false,
+      })
+    )
 
-  //   render(<Example />)
+    // Make sure that the onChange handler never got called
+    expect(changeFn).toHaveBeenCalledTimes(0)
 
-  //   // Try to click the disabled option
-  //   await click(document.querySelector('[data-value="render-prop"]'))
+    // Make sure that the option with value "slot-prop" gets an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) {
+      if (option.dataset.value) {
+        expect(option).toHaveAttribute('aria-disabled', 'true')
+      } else {
+        expect(option).not.toHaveAttribute('aria-disabled')
+      }
+    }
 
-  //   // Verify that the RadioGroup.Option gets the disabled state
-  //   expect(document.querySelector('[data-value="render-prop"]')).toHaveTextContent(
-  //     JSON.stringify({
-  //       checked: false,
-  //       disabled: true,
-  //       active: false,
-  //     })
-  //   )
+    // Toggle the disabled state
+    await click(getByText('Toggle'))
 
-  //   // Make sure that the onChange handler never got called
-  //   expect(changeFn).toHaveBeenCalledTimes(0)
+    // Verify that the RadioGroupOption gets the disabled state
+    expect(document.querySelector('[data-value="slot-prop"]')).toHaveTextContent(
+      JSON.stringify({
+        checked: false,
+        disabled: false,
+        active: false,
+      })
+    )
 
-  //   // Make sure that the option with value "render-prop" gets an `aria-disabled`
-  //   let options = getRadioGroupOptions()
-  //   expect(options).toHaveLength(4)
-  //   for (let option of options) {
-  //     if (option.dataset.value) {
-  //       expect(option).toHaveAttribute('aria-disabled', 'true')
-  //     } else {
-  //       expect(option).not.toHaveAttribute('aria-disabled')
-  //     }
-  //   }
+    // Try to click one a few options
+    await click(document.querySelector('[data-value="slot-prop"]'))
 
-  //   // Toggle the disabled state
-  //   await click(getByText('Toggle'))
-
-  //   // Verify that the RadioGroup.Option gets the disabled state
-  //   expect(document.querySelector('[data-value="render-prop"]')).toHaveTextContent(
-  //     JSON.stringify({
-  //       checked: false,
-  //       disabled: false,
-  //       active: false,
-  //     })
-  //   )
-
-  //   // Try to click one a few options
-  //   await click(document.querySelector('[data-value="render-prop"]'))
-
-  //   // Make sure that the onChange handler got called
-  //   expect(changeFn).toHaveBeenCalledTimes(1)
-  // })
-  // })
+    // Make sure that the onChange handler got called
+    expect(changeFn).toHaveBeenCalledTimes(1)
+  })
 
 })
 
diff --git a/src/lib/components/switch/switch.test.ts b/src/lib/components/switch/switch.test.ts
index 29ffbed..b29c05e 100644
--- a/src/lib/components/switch/switch.test.ts
+++ b/src/lib/components/switch/switch.test.ts
@@ -13,6 +13,7 @@ import Div from "$lib/internal/elements/Div.svelte";
 import Span from "$lib/internal/elements/Span.svelte";
 import ManagedSwitch from "./_ManagedSwitch.svelte";
 import { click, Keys, press } from "$lib/test-utils/interactions";
+import svelte from "svelte-inline-compile";
 jest.mock("../../hooks/use-id");
 
 describe("Safe guards", () => {
@@ -24,27 +25,25 @@ describe("Safe guards", () => {
 });
 
 describe("Rendering", () => {
-  // TODO: handle these render prop (slot prop) tests
+  it('(on) Switch should have a slot prop', () => {
+    render(svelte`
+      <Switch checked={true} on:change={console.log} let:checked>
+        <span>{checked ? 'On' : 'Off'}</span>
+      </Switch>
+    `)
 
-  // it('should be possible to render an (on) Switch using a render prop', () => {
-  //   render(TestRenderer, {
-  //     <Switch checked={true} onChange={console.log}>
-  //       {({ checked }) => <span>{checked ? 'On' : 'Off'}</span>}
-  //     </Switch>
-  //   )
+    assertSwitch({ state: SwitchState.On, textContent: 'On' })
+  })
 
-  //   assertSwitch({ state: SwitchState.On, textContent: 'On' })
-  // })
+  it('(off) Switch should have a slot prop', () => {
+    render(svelte`
+      <Switch checked={false} on:change={console.log} let:checked>
+        <span>{checked ? 'On' : 'Off'}</span>
+      </Switch>
+    `)
 
-  // it('should be possible to render an (off) Switch using a render prop', () => {
-  //   render(
-  //     <Switch checked={false} onChange={console.log}>
-  //       {({ checked }) => <span>{checked ? 'On' : 'Off'}</span>}
-  //     </Switch>
-  //   )
-
-  //   assertSwitch({ state: SwitchState.Off, textContent: 'Off' })
-  // })
+    assertSwitch({ state: SwitchState.Off, textContent: 'Off' })
+  })
 
   it("should be possible to render an (on) Switch using an `as` prop", () => {
     render(TestRenderer, {
diff --git a/src/lib/components/tabs/tabs.test.ts b/src/lib/components/tabs/tabs.test.ts
index f167413..1d13808 100644
--- a/src/lib/components/tabs/tabs.test.ts
+++ b/src/lib/components/tabs/tabs.test.ts
@@ -5,6 +5,7 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from ".";
 import { assertActiveElement, assertTabs, getByText, getTabs } from "$lib/test-utils/accessibility-assertions";
 import { click, Keys, press, shift } from "$lib/test-utils/interactions";
 import Button from "$lib/internal/elements/Button.svelte";
+import svelte from "svelte-inline-compile";
 
 let mockId = 0;
 jest.mock('../../hooks/use-id', () => {
@@ -59,7 +60,7 @@ describe('safeguards', () => {
 })
 
 describe('Rendering', () => {
-  it('should be possible to render the Tab.Panels first, then the Tab.List', async () => {
+  it('should be possible to render the TabPanels first, then the TabList', async () => {
     render(
       TestRenderer, {
       allProps: [
@@ -81,229 +82,192 @@ describe('Rendering', () => {
     assertTabs({ active: 0 })
   })
 
-  // describe('`renderProps`', () => {
-  //   it('should expose the `selectedIndex` on the `Tab.Group` component', async () => {
-  //     render(
-  //       <Tab.Group>
-  //         {data => (
-  //           <>
-  //             <pre id="exposed">{JSON.stringify(data)}</pre>
+  describe('`slot props`', () => {
+    it('should expose the `selectedIndex` on the `TabGroup` component', async () => {
+      render(svelte`
+        <TabGroup let:selectedIndex>
+          <pre id="exposed">{JSON.stringify({ selectedIndex })}</pre>
 
-  //             <Tab.List>
-  //               <Tab>Tab 1</Tab>
-  //               <Tab>Tab 2</Tab>
-  //               <Tab>Tab 3</Tab>
-  //             </Tab.List>
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
 
-  //             <Tab.Panels>
-  //               <Tab.Panel>Content 1</Tab.Panel>
-  //               <Tab.Panel>Content 2</Tab.Panel>
-  //               <Tab.Panel>Content 3</Tab.Panel>
-  //             </Tab.Panels>
-  //           </>
-  //         )}
-  //       </Tab.Group>
-  //     )
+          <TabPanels>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel>Content 2</TabPanel>
+            <TabPanel>Content 3</TabPanel>
+          </TabPanels>
+        </TabGroup>
+      `)
 
-  //     expect(document.getElementById('exposed')).toHaveTextContent(
-  //       JSON.stringify({ selectedIndex: 0 })
-  //     )
+      expect(document.getElementById('exposed')).toHaveTextContent(
+        JSON.stringify({ selectedIndex: 0 })
+      )
 
-  //     await click(getByText('Tab 2'))
+      await click(getByText('Tab 2'))
 
-  //     expect(document.getElementById('exposed')).toHaveTextContent(
-  //       JSON.stringify({ selectedIndex: 1 })
-  //     )
-  //   })
+      expect(document.getElementById('exposed')).toHaveTextContent(
+        JSON.stringify({ selectedIndex: 1 })
+      )
+    })
 
-  //   it('should expose the `selectedIndex` on the `Tab.List` component', async () => {
-  //     render(
-  //       <Tab.Group>
-  //         <Tab.List>
-  //           {data => (
-  //             <>
-  //               <pre id="exposed">{JSON.stringify(data)}</pre>
-  //               <Tab>Tab 1</Tab>
-  //               <Tab>Tab 2</Tab>
-  //               <Tab>Tab 3</Tab>
-  //             </>
-  //           )}
-  //         </Tab.List>
+    it('should expose the `selectedIndex` on the `TabList` component', async () => {
+      render(svelte`
+        <TabGroup>
+          <TabList let:selectedIndex>
+            <pre id="exposed">{ JSON.stringify({ selectedIndex }) }</pre>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel>Content 2</TabPanel>
+            <TabPanel>Content 3</TabPanel>
+          </TabPanels>
+        </TabGroup>
+      `)
 
-  //         <Tab.Panels>
-  //           <Tab.Panel>Content 1</Tab.Panel>
-  //           <Tab.Panel>Content 2</Tab.Panel>
-  //           <Tab.Panel>Content 3</Tab.Panel>
-  //         </Tab.Panels>
-  //       </Tab.Group>
-  //     )
+      expect(document.getElementById('exposed')).toHaveTextContent(
+        JSON.stringify({ selectedIndex: 0 })
+      )
 
-  //     expect(document.getElementById('exposed')).toHaveTextContent(
-  //       JSON.stringify({ selectedIndex: 0 })
-  //     )
+      await click(getByText('Tab 2'))
 
-  //     await click(getByText('Tab 2'))
+      expect(document.getElementById('exposed')).toHaveTextContent(
+        JSON.stringify({ selectedIndex: 1 })
+      )
+    })
 
-  //     expect(document.getElementById('exposed')).toHaveTextContent(
-  //       JSON.stringify({ selectedIndex: 1 })
-  //     )
-  //   })
+    it('should expose the `selectedIndex` on the `TabPanels` component', async () => {
+      render(svelte`
+        <TabGroup>
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
 
-  //   it('should expose the `selectedIndex` on the `Tab.Panels` component', async () => {
-  //     render(
-  //       <Tab.Group>
-  //         <Tab.List>
-  //           <Tab>Tab 1</Tab>
-  //           <Tab>Tab 2</Tab>
-  //           <Tab>Tab 3</Tab>
-  //         </Tab.List>
+          <TabPanels let:selectedIndex>
+            <pre id="exposed">{ JSON.stringify({ selectedIndex }) }</pre>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel>Content 2</TabPanel>
+            <TabPanel>Content 3</TabPanel>
+          </TabPanels>
+      </TabGroup>
+    `)
 
-  //         <Tab.Panels>
-  //           {data => (
-  //             <>
-  //               <pre id="exposed">{JSON.stringify(data)}</pre>
-  //               <Tab.Panel>Content 1</Tab.Panel>
-  //               <Tab.Panel>Content 2</Tab.Panel>
-  //               <Tab.Panel>Content 3</Tab.Panel>
-  //             </>
-  //           )}
-  //         </Tab.Panels>
-  //       </Tab.Group>
-  //     )
+      expect(document.getElementById('exposed')).toHaveTextContent(
+        JSON.stringify({ selectedIndex: 0 })
+      )
 
-  //     expect(document.getElementById('exposed')).toHaveTextContent(
-  //       JSON.stringify({ selectedIndex: 0 })
-  //     )
+      await click(getByText('Tab 2'))
 
-  //     await click(getByText('Tab 2'))
+      expect(document.getElementById('exposed')).toHaveTextContent(
+        JSON.stringify({ selectedIndex: 1 })
+      )
+    })
 
-  //     expect(document.getElementById('exposed')).toHaveTextContent(
-  //       JSON.stringify({ selectedIndex: 1 })
-  //     )
-  //   })
+    it('should expose the `selected` state on the `Tab` components', async () => {
+      render(svelte`
+        <TabGroup>
+          <TabList>
+            <Tab let:selected>
+              <pre data-tab={0}>{JSON.stringify({selected})}</pre>
+              <span>Tab 1</span>
+            </Tab>
+            <Tab let:selected>
+              <pre data-tab={1}>{JSON.stringify({selected})}</pre>
+              <span>Tab 2</span>
+            </Tab>
+            <Tab let:selected>
+              <pre data-tab={2}>{JSON.stringify({selected})}</pre>
+              <span>Tab 3</span>
+            </Tab>
+          </TabList>
 
-  //   it('should expose the `selected` state on the `Tab` components', async () => {
-  //     render(
-  //       <Tab.Group>
-  //         <Tab.List>
-  //           <Tab>
-  //             {data => (
-  //               <>
-  //                 <pre data-tab={0}>{JSON.stringify(data)}</pre>
-  //                 <span>Tab 1</span>
-  //               </>
-  //             )}
-  //           </Tab>
-  //           <Tab>
-  //             {data => (
-  //               <>
-  //                 <pre data-tab={1}>{JSON.stringify(data)}</pre>
-  //                 <span>Tab 2</span>
-  //               </>
-  //             )}
-  //           </Tab>
-  //           <Tab>
-  //             {data => (
-  //               <>
-  //                 <pre data-tab={2}>{JSON.stringify(data)}</pre>
-  //                 <span>Tab 3</span>
-  //               </>
-  //             )}
-  //           </Tab>
-  //         </Tab.List>
+          <TabPanels>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel>Content 2</TabPanel>
+            <TabPanel>Content 3</TabPanel>
+          </TabPanels>
+        </TabGroup>
+      `)
 
-  //         <Tab.Panels>
-  //           <Tab.Panel>Content 1</Tab.Panel>
-  //           <Tab.Panel>Content 2</Tab.Panel>
-  //           <Tab.Panel>Content 3</Tab.Panel>
-  //         </Tab.Panels>
-  //       </Tab.Group>
-  //     )
+      expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
+        JSON.stringify({ selected: true })
+      )
+      expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
+      expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
 
-  //     expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: true })
-  //     )
-  //     expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
-  //     expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
+      await click(getTabs()[1])
 
-  //     await click(getTabs()[1])
+      expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
+      expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
+        JSON.stringify({ selected: true })
+      )
+      expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
+    })
 
-  //     expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
-  //     expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: true })
-  //     )
-  //     expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
-  //   })
+    it('should expose the `selected` state on the `TabPanel` components', async () => {
+      render(svelte`
+        <TabGroup>
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
 
-  //   it('should expose the `selected` state on the `Tab.Panel` components', async () => {
-  //     render(
-  //       <Tab.Group>
-  //         <Tab.List>
-  //           <Tab>Tab 1</Tab>
-  //           <Tab>Tab 2</Tab>
-  //           <Tab>Tab 3</Tab>
-  //         </Tab.List>
+          <TabPanels>
+            <TabPanel unmount={false} let:selected>
+              <pre data-panel={0}>{JSON.stringify({ selected })}</pre>
+              <span> Content 1 </span>
+            </TabPanel>
+            <TabPanel unmount={false} let:selected>
+              <pre data-panel={1}>{JSON.stringify({ selected })}</pre>
+              <span> Content 2 </span>
+            </TabPanel>
+            <TabPanel unmount={false} let:selected>
+              <pre data-panel={2}>{JSON.stringify({ selected })}</pre>
+              <span> Content 3 </span>
+            </TabPanel>
+          </TabPanels>
+        </TabGroup>
+      `)
 
-  //         <Tab.Panels>
-  //           <Tab.Panel unmount={false}>
-  //             {data => (
-  //               <>
-  //                 <pre data-panel={0}>{JSON.stringify(data)}</pre>
-  //                 <span>Content 1</span>
-  //               </>
-  //             )}
-  //           </Tab.Panel>
-  //           <Tab.Panel unmount={false}>
-  //             {data => (
-  //               <>
-  //                 <pre data-panel={1}>{JSON.stringify(data)}</pre>
-  //                 <span>Content 2</span>
-  //               </>
-  //             )}
-  //           </Tab.Panel>
-  //           <Tab.Panel unmount={false}>
-  //             {data => (
-  //               <>
-  //                 <pre data-panel={2}>{JSON.stringify(data)}</pre>
-  //                 <span>Content 3</span>
-  //               </>
-  //             )}
-  //           </Tab.Panel>
-  //         </Tab.Panels>
-  //       </Tab.Group>
-  //     )
+      expect(document.querySelector('[data-panel="0"]')).toHaveTextContent(
+        JSON.stringify({ selected: true })
+      )
+      expect(document.querySelector('[data-panel="1"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
+      expect(document.querySelector('[data-panel="2"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
 
-  //     expect(document.querySelector('[data-panel="0"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: true })
-  //     )
-  //     expect(document.querySelector('[data-panel="1"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
-  //     expect(document.querySelector('[data-panel="2"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
+      await click(getByText('Tab 2'))
 
-  //     await click(getByText('Tab 2'))
-
-  //     expect(document.querySelector('[data-panel="0"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
-  //     expect(document.querySelector('[data-panel="1"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: true })
-  //     )
-  //     expect(document.querySelector('[data-panel="2"]')).toHaveTextContent(
-  //       JSON.stringify({ selected: false })
-  //     )
-  //   })
-  // })
+      expect(document.querySelector('[data-panel="0"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
+      expect(document.querySelector('[data-panel="1"]')).toHaveTextContent(
+        JSON.stringify({ selected: true })
+      )
+      expect(document.querySelector('[data-panel="2"]')).toHaveTextContent(
+        JSON.stringify({ selected: false })
+      )
+    })
+  })
 
   describe('`defaultIndex`', () => {
     it('should jump to the nearest tab when the defaultIndex is out of bounds (-2)', async () => {