Refactor dropdown, modal, and theme-helper components

This commit refactors the dropdown, modal, and theme-helper components. It includes updates to the compiler options to include the 'dom' library. Additionally, it fixes some issues and adds new functionality to the components. The changes are made to improve the overall code structure and maintainability.

www/docs/src/content/docs/customizing/studiocms-ui/components/dropdown.mdx

@@ -100,6 +100,7 @@ You can change the dropdowns position by supplying the `align` prop.
     <!-- Other buttons omitted for simplicity -->
     ```
     ```ts twoslash
+    // @noErrors
     import { DropdownHelper } from '@studiocms/ui/components';
 
     const dropdown = new DropdownHelper('dropdown');
@@ -141,6 +142,7 @@ You can tell the dropdown wrapper to only show the dropdown when it's children a
     </Dropdown>
     ```
     ```ts twoslash
+    // @noErrors
     import { DropdownHelper } from '@studiocms/ui/components';
 
     const dropdown = new DropdownHelper('dropdown');
@@ -223,6 +225,7 @@ you to acces some built-in functions for programatically toggling, showing and h
 dropdowns options has been clicked!
 
 ```ts twoslash
+// @noErrors
 import { DropdownHelper } from '@studiocms/ui/components';
 
 const dropdown = new DropdownHelper('dropdown');

www/docs/src/content/docs/customizing/studiocms-ui/components/modal.mdx

@@ -200,6 +200,7 @@ Modals support both a `Cancel` and a `Confirm` button. You can use both at the s
     </Button>
     ```
     ```ts twoslash
+    // @noErrors
     import { ModalHelper } from '@studiocms/ui/components';
 
     const modal = new ModalHelper('modal', 'modal-trigger');
@@ -216,6 +217,7 @@ The order of the `button` prop array does not influence the order of the buttons
 If you want to implement functionality based on which of the buttons is clicked, you can register a callback on each of them. 
 
 ```ts twoslash ins={5-7,9-11}
+// @noErrors
 import { ModalHelper } from '@studiocms/ui/components';
 
 const modal = new ModalHelper('modal', 'modal-trigger');
@@ -237,6 +239,7 @@ This only changes their types, not their text.
 By using the `registerConfirmCallback` function, you can retrieve the `FormData` after the `Confirm` button is clicked. Any inputs in the modal will be included.
 
 ```ts twoslash "formData"
+// @noErrors
 import { ModalHelper } from '@studiocms/ui/components';
 
 const modal = new ModalHelper('modal', 'modal-trigger');
@@ -251,6 +254,7 @@ modal.registerConfirmCallback((formData) => {
 You can add multiple triggers to your modal by using the `bindTrigger` function in combination with an element's ID.
 
 ```ts twoslash ins={4-5}
+// @noErrors
 import { ModalHelper } from '@studiocms/ui/components';
 
 const modal = new ModalHelper('modal', 'modal-trigger');
@@ -263,6 +267,7 @@ modal.bindTrigger('modal-trigger-three');
 Similar to [dropdowns](/customizing/studiocms-ui/components/dropdown), modals can be shown and hidden programatically:
 
 ```ts twoslash ins={5-6}
+// @noErrors
 import { ModalHelper } from '@studiocms/ui/components';
 
 const modal = new ModalHelper('modal', 'modal-trigger');

www/docs/src/content/docs/customizing/studiocms-ui/components/theme-helper.mdx

@@ -14,6 +14,7 @@ you can provide callbacks for when the theme gets changed!
 The `ThemeHelper` can only be used client-side (in `<script>` tags).
 :::
 ```ts title="script.ts" twoslash
+// @noErrors
 import { ThemeHelper } from '@studiocms/ui/utils/ThemeHelper.ts';
 
 // Instanciate a new helper
@@ -23,7 +24,6 @@ const themeHelper = new ThemeHelper();
 const theme = themeHelper.getTheme();
 
 // Get the current theme but resolve the actual theme if `system` is selected
-// @noErrors
 const resolvedTheme = themeHelper.getTheme(true);
 
 // Set the theme to light
@@ -44,6 +44,7 @@ whenever the color scheme changes, for example in a `three.js` canvas where you
 (*\*cough cough\* our login page \*cough\**).
 
 ```ts title="script.ts" twoslash
+// @noErrors
 import { ThemeHelper } from '@studiocms/ui/utils/ThemeHelper.ts';
 
 // Instanciate a new helper
@@ -73,6 +74,7 @@ open the navbar and scroll all the way down. After you've changed the theme, che
     </span>
     ```
     ```ts twoslash
+    // @noErrors
     import { ThemeHelper, type Theme } from '@studiocms/ui/utils/ThemeHelper.ts';
 
     // Instanciate a new helper
@@ -81,7 +83,6 @@ open the navbar and scroll all the way down. After you've changed the theme, che
     const outputSpan = document.querySelector<HTMLSpanElement>('#theme-listener-output')!;
 
     // Add a callback that gets called when the theme changes
-    // @noErrors
     themeHelper.onThemeChange((newTheme: Theme, oldTheme: Theme) => {
       // Your logic here!
       outputSpan.textContent = `Theme is now: ${newTheme}! (Before: ${oldTheme})`;
@@ -99,6 +100,7 @@ One of the few things the `ThemeHelper` does not do is saving the users theme pr
 As a starting point, here's a barebones example of how to implement this:
 
 ```ts twoslash
+// @noErrors
 import { ThemeHelper, type Theme } from '@studiocms/ui/utils/ThemeHelper.ts';
 
 const themeHelper = new ThemeHelper();

www/docs/src/content/docs/customizing/studiocms-ui/components/toast.mdx

@@ -83,6 +83,7 @@ import { Toaster } from '@studiocms/ui/components';
 Or you can set it individually for every toast like this:
 
 ```ts twoslash
+// @noErrors
 import { toast } from '@studiocms/ui/components';
 
 toast({
@@ -99,6 +100,7 @@ Sometimes, you don't need a toast to expire after a set time. Instead of setting
 to be persistent by setting `persistent` to `true`:
 
 ```ts twoslash
+// @noErrors
 import { toast } from '@studiocms/ui/components';
 
 toast({
@@ -114,6 +116,7 @@ toast({
 Unless a toast is persistent, you can choose to hide the close button by setting the `closeButton` option to `false`:
 
 ```ts twoslash
+// @noErrors
 import { toast } from '@studiocms/ui/components';
 
 toast({