diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte
index 91509cb8c..9cc11b3f4 100644
--- a/packages/svelte-ux/src/lib/components/Pagination.svelte
+++ b/packages/svelte-ux/src/lib/components/Pagination.svelte
@@ -111,7 +111,7 @@
       {#if component === 'perPage'}
         <div class={cls('text-sm text-center', settingsClasses.perPage, classes.perPage)}>
           Per page:
-          <Toggle let:on={open} let:toggle>
+          <Toggle let:on={open} let:toggle let:toggleOff>
             <span>
               <Button on:click={toggle}>
                 {$pagination.perPage}
@@ -120,7 +120,7 @@
 
               <Menu
                 {open}
-                on:close={toggle}
+                on:close={toggleOff}
                 autoPlacement
                 offset={12}
                 classes={{ menu: 'group p-1' }}
diff --git a/packages/svelte-ux/src/routes/docs/components/ButtonGroup/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ButtonGroup/+page.svelte
index 06d57fc68..22366095e 100644
--- a/packages/svelte-ux/src/routes/docs/components/ButtonGroup/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/ButtonGroup/+page.svelte
@@ -241,10 +241,10 @@
   <div class="grid gap-2">
     <ButtonGroup>
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -256,10 +256,10 @@
 
     <ButtonGroup variant="outline">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -271,10 +271,10 @@
 
     <ButtonGroup variant="fill" color="primary">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -286,10 +286,10 @@
 
     <ButtonGroup variant="fill-light" color="primary">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -301,10 +301,10 @@
 
     <ButtonGroup variant="fill-outline" color="primary">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
diff --git a/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte
index d275a7301..22534c76f 100644
--- a/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte
@@ -26,9 +26,9 @@
 <h2>Basic (with Toggle)</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Close</Button>
@@ -96,9 +96,9 @@
 <h2>Confirmation dialog</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button icon={mdiTrashCan} on:click={toggle} color="danger">Delete</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">Are you sure?</div>
       <div class="px-6 py-3">This will permanently delete the item and can not be undone.</div>
       <div slot="actions">
@@ -169,9 +169,9 @@
 <h2>Loading</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle} loading>
+    <Dialog {open} on:close={toggleOff} loading>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Close</Button>
@@ -183,9 +183,9 @@
 <h2>Persistent</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle} persistent>
+    <Dialog {open} on:close={toggleOff} persistent>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Yes</Button>
@@ -198,9 +198,9 @@
 <h2>With autofocus TextField</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">How old are you?</div>
       <div class="p-2">
         <TextField label="Age" autofocus />
@@ -216,9 +216,9 @@
 <h2>Disabled action</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary" disabled>Don't touch</Button>
diff --git a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte
index 897872457..95c88c2f1 100644
--- a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte
@@ -98,9 +98,9 @@
   <Toggle let:on={open} let:toggle let:toggleOff>
     <Drawer {open} on:close={toggleOff} class="w-[400px]">
       <div class="p-2">
-        <Toggle let:on={open} let:toggle>
+        <Toggle let:on={open} let:toggle let:toggleOff>
           <Button on:click={toggle}>Show Dialog</Button>
-          <Dialog {open} on:close={toggle}>
+          <Dialog {open} on:close={toggleOff}>
             <div slot="title">Are you sure you want to do that?</div>
             <div slot="actions">
               <Button variant="fill" color="primary">Close</Button>
diff --git a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte
index ab8a30e43..79b3b973b 100644
--- a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte
@@ -10,10 +10,10 @@
 <h2>Basic</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle}>
+      <Menu {open} on:close={toggleOff}>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -27,10 +27,10 @@
 <h2>Explicit close</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} explicitClose let:close>
+      <Menu {open} on:close={toggleOff} explicitClose let:close>
         <div class="p-2">
           <TextField
             icon={mdiMagnify}
@@ -97,10 +97,10 @@
         <Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDrawer}>Open Drawer with another Menu...</MenuItem>
           <Drawer {open} on:close={toggleOff} class="w-[400px]">
-            <Toggle let:on={open} let:toggle>
+            <Toggle let:on={open} let:toggle let:toggleOff>
               <span>
                 <Button on:click={toggle}>Click me</Button>
-                <Menu {open} on:close={toggle}>
+                <Menu {open} on:close={toggleOff}>
                   <MenuItem>Refresh</MenuItem>
                   <MenuItem>Settings</MenuItem>
                   <MenuItem>Help</MenuItem>
@@ -121,10 +121,10 @@
 <h2>matchWidth</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} matchWidth>
+      <Menu {open} on:close={toggleOff} matchWidth>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -137,10 +137,10 @@
 <h2>autoPlacement</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} autoPlacement>
+      <Menu {open} on:close={toggleOff} autoPlacement>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -153,10 +153,10 @@
 <h2>explicit placement</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} placement="right-start">
+      <Menu {open} on:close={toggleOff} placement="right-start">
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -171,10 +171,10 @@
 <h3>Useful when menu will exceed window and need repositioned.</h3>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} disableTransition>
+      <Menu {open} on:close={toggleOff} disableTransition>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -187,10 +187,10 @@
 <h2>transition params</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} transitionParams={{ duration: 2000 }}>
+      <Menu {open} on:close={toggleOff} transitionParams={{ duration: 2000 }}>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
diff --git a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte
index c76fa8bc5..39e88021d 100644
--- a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte
@@ -108,10 +108,10 @@
         <Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDrawer}>Open Drawer with another Menu...</MenuItem>
           <Drawer {open} on:close={toggleOff} class="w-[400px]">
-            <Toggle let:on={open} let:toggle>
+            <Toggle let:on={open} let:toggle let:toggleOff>
               <span>
                 <Button on:click={toggle}>Click me</Button>
-                <ResponsiveMenu {open} on:close={toggle}>
+                <ResponsiveMenu {open} on:close={toggleOff}>
                   <MenuItem>Refresh</MenuItem>
                   <MenuItem>Settings</MenuItem>
                   <MenuItem>Help</MenuItem>
@@ -132,12 +132,12 @@
 <h2>menuProps</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
       <ResponsiveMenu
         {open}
-        on:close={toggle}
+        on:close={toggleOff}
         menuProps={{ autoPlacement: true, matchWidth: true }}
       >
         <MenuItem>Refresh</MenuItem>
@@ -152,12 +152,12 @@
 <h2>drawerProps</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
       <ResponsiveMenu
         {open}
-        on:close={toggle}
+        on:close={toggleOff}
         drawerProps={{ class: 'rounded-t-lg pb-[env(safe-area-inset-bottom)]' }}
       >
         <MenuItem>Refresh</MenuItem>
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index 0af37e3ca..8fa85da68 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -284,7 +284,7 @@
 <h2>`append` slot (field actions)</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <SelectField {options}>
       <span slot="append" on:click|stopPropagation>
         <Button icon={mdiPlus} class="text-surface-content/50 p-2" on:click={toggle} />
@@ -299,7 +299,7 @@
       let:commit
       let:revert
     >
-      <Dialog {open} on:close={toggle}>
+      <Dialog {open} on:close={toggleOff}>
         <div slot="title">Create new option</div>
         <div class="px-6 py-3 w-96 grid gap-2">
           <TextField
diff --git a/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte
index 8668d0be3..998253aca 100644
--- a/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte
@@ -15,10 +15,10 @@
       MenuItem: { classes: 'font-bold' },
     }}
   >
-    <Toggle let:on={open} let:toggle>
+    <Toggle let:on={open} let:toggle let:toggleOff>
       <Button on:click={toggle} variant="outline" color="primary">
         Click me
-        <Menu {open} on:close={toggle}>
+        <Menu {open} on:close={toggleOff}>
           <MenuItem>Refresh</MenuItem>
           <MenuItem>Settings</MenuItem>
           <MenuItem>Help</MenuItem>
diff --git a/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
index fc551d734..04af02277 100644
--- a/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
@@ -462,9 +462,9 @@
 
             <td use:tableCell={{ column, rowData, rowIndex, tableData: data }}>
               {#if column.name === 'actions'}
-                <Toggle let:on={open} let:toggle>
+                <Toggle let:on={open} let:toggle let:toggleOff>
                   <Button icon={mdiDotsVertical} iconOnly size="sm" on:click={toggle}>
-                    <Menu {open} on:close={toggle} placement="bottom-end">
+                    <Menu {open} on:close={toggleOff} placement="bottom-end">
                       <MenuItem>Edit</MenuItem>
                       <MenuItem class="text-danger">Delete</MenuItem>
                     </Menu>
diff --git a/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md b/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md
index 117268e21..57b9946e3 100644
--- a/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md
+++ b/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md
@@ -5,10 +5,10 @@
 <h1>Examples</h1>
 
 ```svelte
-<Toggle let:on={open} let:toggle>
+<Toggle let:on={open} let:toggle let:toggleOff>
   <Button on:click={toggle}>Show dialog</Button>
 
-  <Dialog {open} on:close={toggle}>
+  <Dialog {open} on:close={toggleOff}>
     <!-- render contents -->
   </Dialog>
 </Toggle>
diff --git a/packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.svelte
index 531e82c76..fa9dfa83d 100644
--- a/packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.svelte
@@ -13,7 +13,7 @@
 <Preview>
   <ToggleButton let:on={open}>
     Open Dialog
-    <Dialog slot="toggle" {open} on:close={toggle} let:toggle>
+    <Dialog slot="toggle" {open} on:close={toggleOff} let:toggle let:toggleOff>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Close</Button>
diff --git a/packages/svelte-ux/src/routes/theme/+page.svelte b/packages/svelte-ux/src/routes/theme/+page.svelte
index 5961c95c1..8409e61a7 100644
--- a/packages/svelte-ux/src/routes/theme/+page.svelte
+++ b/packages/svelte-ux/src/routes/theme/+page.svelte
@@ -256,10 +256,10 @@
         <CopyButton value={JSON.stringify(currentThemeSettings, null, 2)} />
       </Tooltip>
 
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <div class="grid">
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem
               on:click={() => {
                 const value = JSON.stringify(