@ims360/svelte-ivory 0.4.11 → 0.4.12

package/dist/components/inputs/ColorInput.svelte

@@ -7,9 +7,7 @@
 
 <Input {...props}>
     {#snippet children({ id, class: inputClass })}
-        <div
-            class={merge([inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0'])}
-        >
+        <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
             <input
                 type="text"
                 bind:value={props.form.value, props.form.set}

package/dist/components/inputs/Input.svelte

@@ -72,12 +72,12 @@
         {@render children({ class: inputClass, id, ...inputProps })}
         {#if label}
             <label
-                class={merge([
+                class={merge(
                     'pointer-events-none absolute cursor-text px-1 transition-all select-none group-focus-within:top-0 group-focus-within:left-0 group-focus-within:text-sm focus:cursor-default',
                     hasValue ? 'top-0 left-0 cursor-default text-sm' : 'top-10 left-3',
                     hasIssues ? 'text-error-500' : 'text-surface-700-300',
                     theme.current.input?.label?.class?.(hasValue, hasIssues)
-                ])}
+                )}
                 for={id}
             >
                 {label}

package/dist/components/layout/dialog/Dialog.svelte

@@ -2,7 +2,6 @@
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
-    import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
 
     export interface DialogProps extends IvoryComponent<HTMLElement> {
@@ -14,49 +13,43 @@
 <script lang="ts">
     let {
         class: clazz,
-        onclose: close, // This is the prop from the parent
+        onclose: onclose, // This is the prop from the parent
         children,
         ...rest
     }: DialogProps = $props();
 
     let dialog = $state<HTMLDialogElement>();
 
-    /**
-     * This function "requests" a close.
-     * It tries to stop the native close and lets the parent decide.
-     */
-    async function requestClose(event: Event) {
-        event.preventDefault(); // Stop the native close
-        event.stopPropagation();
-        close?.(); // Ask the parent to close
-        await tick();
-        await tick();
+    let currentlyOpen = $state(false);
+
+    export const open = () => {
         dialog?.showModal();
-    }
+        currentlyOpen = true;
+    };
+
+    export const isOpen = () => currentlyOpen;
 
-    onMount(() => {
-        if (dialog && !dialog.open) {
-            dialog.showModal();
-        }
-        return () => {
-            if (dialog && dialog.open) {
-                dialog.close();
-            }
-        };
-    });
+    export const close = () => {
+        dialog?.close();
+        currentlyOpen = false;
+    };
 
     const handleBackdropClick: MouseEventHandler<HTMLElement> = (event) => {
-        if (event.target === dialog) {
-            requestClose(event);
-        }
+        if (event.target !== dialog) return;
+        onclose?.();
+    };
+
+    const handleClose = () => {
+        onclose?.();
+        currentlyOpen = false;
     };
 </script>
 
 <dialog
     bind:this={dialog}
     onclick={handleBackdropClick}
-    oncancel={requestClose}
-    onclose={close}
+    oncancel={handleClose}
+    onclose={handleClose}
     class={merge(
         'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full overflow-hidden bg-transparent',
         theme.current.dialog?.class,
@@ -68,12 +61,7 @@
 </dialog>
 
 <style>
-    dialog::backdrop {
-        animation: fade-in 200ms ease-out;
-    }
-    @keyframes fade-in {
-        from {
-            opacity: 0;
-        }
+    dialog:not([open]):not(:popover-open) {
+        display: none !important;
     }
 </style>

package/dist/components/layout/dialog/Dialog.svelte.d.ts

@@ -3,7 +3,11 @@ export interface DialogProps extends IvoryComponent<HTMLElement> {
     /** Gets called when the dialog requests to close (Escape, backdrop click) */
     onclose?: () => void;
 }
-declare const Dialog: import("svelte").Component<DialogProps, {}, "">;
+declare const Dialog: import("svelte").Component<DialogProps, {
+    open: () => void;
+    isOpen: () => boolean;
+    close: () => void;
+}, "">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;
 //# sourceMappingURL=Dialog.svelte.d.ts.map

package/dist/components/layout/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAyDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmDL,QAAA,MAAM,MAAM;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/drawer/Drawer.svelte

@@ -35,40 +35,33 @@
         ...rest
     }: DrawerProps = $props();
 
-    let currentlyOpen = $state(false);
-    export function close() {
-        currentlyOpen = false;
-    }
+    let dialog = $state<Dialog>();
 
-    export function open() {
-        currentlyOpen = true;
-    }
+    export const close = () => dialog?.close();
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
-    }
+    export const open = () => dialog?.open();
 
-    export function isOpen() {
-        return currentlyOpen;
-    }
+    export const isOpen = () => dialog?.isOpen();
+
+    export const toggle = () => {
+        if (isOpen()) close();
+        else open();
+    };
 </script>
 
-{#if currentlyOpen}
-    <Dialog
-        onclose={() => {
-            if (closeOnOutsideClick) close();
-        }}
-        class={[
-            'flex flex-row justify-start overflow-visible',
-            placement === 'left' && '',
-            placement === 'right' && 'justify-end'
-        ]}
-    >
+<Dialog
+    bind:this={dialog}
+    onclose={() => {
+        if (closeOnOutsideClick) close();
+    }}
+    class={['flex flex-row justify-start overflow-visible', placement === 'right' && 'justify-end']}
+>
+    {#if dialog?.isOpen()}
         <div
-            class={merge(['bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz])}
+            class={merge('bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz)}
             onclick={(e) => e.stopPropagation()}
-            in:inTransition|global
-            out:outTransition|global
+            in:inTransition
+            out:outTransition
             {...rest}
         >
             {#if inner}
@@ -91,5 +84,5 @@
                 {@render children()}
             {/if}
         </div>
-    </Dialog>
-{/if}
+    {/if}
+</Dialog>

package/dist/components/layout/drawer/Drawer.svelte.d.ts

@@ -11,10 +11,10 @@ export type DrawerProps = TransitionProps & {
     inner?: Snippet;
 };
 declare const Drawer: import("svelte").Component<DrawerProps, {
-    close: () => void;
-    open: () => void;
+    close: () => void | undefined;
+    open: () => void | undefined;
+    isOpen: () => boolean | undefined;
     toggle: () => void;
-    isOpen: () => boolean;
 }, "">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/layout/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA+DN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/modal/Modal.svelte

@@ -54,23 +54,18 @@
         ...rest
     }: Props = $props();
 
-    let currentlyOpen = $state(false);
+    let dialog = $state<Dialog>();
 
-    export function close() {
-        currentlyOpen = false;
-    }
+    export const close = () => dialog?.close();
 
-    export function open() {
-        currentlyOpen = true;
-    }
+    export const open = () => dialog?.open();
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
-    }
+    export const isOpen = () => dialog?.isOpen();
 
-    export function isOpen() {
-        return currentlyOpen;
-    }
+    export const toggle = () => {
+        if (isOpen()) close();
+        else open();
+    };
 
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
         e.stopPropagation();
@@ -82,31 +77,29 @@
 	@component
 	A modal, comes with a title, close button and different variants per default.
 -->
-{#if currentlyOpen}
-    <Dialog
-        onclose={() => {
-            if (closeOnOutsideClick) close();
-        }}
-        class={merge(
-            'flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16',
-            theme.current.modal?.dialog?.class
-        )}
-    >
+<Dialog
+    bind:this={dialog}
+    onclose={() => {
+        if (closeOnOutsideClick) close();
+    }}
+    class={merge('flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16')}
+>
+    {#if dialog?.isOpen()}
         {#if modal}
             <div {...rest} {onclick}>
                 {@render modal()}
             </div>
         {:else}
             <div
-                class={merge([
+                class={merge(
                     'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
                     theme.current.modal?.class,
                     clazz
-                ])}
+                )}
                 {...rest}
                 {onclick}
-                in:inTransition|global
-                out:outTransition|global
+                in:inTransition
+                out:outTransition
             >
                 <div
                     class={[
@@ -145,5 +138,5 @@
                 </div>
             </div>
         {/if}
-    </Dialog>
-{/if}
+    {/if}
+</Dialog>

package/dist/components/layout/modal/Modal.svelte.d.ts

@@ -27,10 +27,10 @@ interface Props extends ModalProps {
 }
 /** A modal, comes with a title, close button and different variants per default. */
 declare const Modal: import("svelte").Component<Props, {
-    close: () => void;
-    open: () => void;
+    close: () => void | undefined;
+    open: () => void | undefined;
+    isOpen: () => boolean | undefined;
     toggle: () => void;
-    isOpen: () => boolean;
 }, "">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/layout/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AA+FL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/table/Column.svelte

@@ -73,10 +73,10 @@
     onclick={finalOnClick}
     href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
-    class={merge([
+    class={merge(
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
         column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
         theme.current.table?.column?.class,
         clazz
-    ])}
+    )}
 />

package/dist/components/table/Table.svelte

@@ -200,11 +200,11 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={merge([
+    class={merge(
         'flex flex-col overflow-hidden border-transparent',
         theme.current.table?.class,
         clazz
-    ])}
+    )}
     rowClass={merge('pl-2 pr-4', theme.current.table?.row?.class, rowClass)}
     {rowHeight}
 >

package/dist/components/table/VirtualList.svelte

@@ -26,7 +26,7 @@
     }: Props<T> = $props();
 
     const finalRowClass = $derived(
-        merge(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass])
+        merge('flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass)
     );
 
     let viewportReactivity = $state(0);
@@ -92,7 +92,7 @@
     });
 </script>
 
-<div class={merge(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])}>
+<div class={merge('scroll relative flex grow flex-col overflow-hidden border-inherit', clazz)}>
     {#if header}
         <div class="h-fit w-full border-inherit">
             <div

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.4.11",
+    "version": "0.4.12",
     "keywords": [
         "svelte"
     ],

package/src/lib/components/inputs/ColorInput.svelte

@@ -7,9 +7,7 @@
 
 <Input {...props}>
     {#snippet children({ id, class: inputClass })}
-        <div
-            class={merge([inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0'])}
-        >
+        <div class={merge(inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0')}>
             <input
                 type="text"
                 bind:value={props.form.value, props.form.set}

package/src/lib/components/inputs/Input.svelte

@@ -72,12 +72,12 @@
         {@render children({ class: inputClass, id, ...inputProps })}
         {#if label}
             <label
-                class={merge([
+                class={merge(
                     'pointer-events-none absolute cursor-text px-1 transition-all select-none group-focus-within:top-0 group-focus-within:left-0 group-focus-within:text-sm focus:cursor-default',
                     hasValue ? 'top-0 left-0 cursor-default text-sm' : 'top-10 left-3',
                     hasIssues ? 'text-error-500' : 'text-surface-700-300',
                     theme.current.input?.label?.class?.(hasValue, hasIssues)
-                ])}
+                )}
                 for={id}
             >
                 {label}

package/src/lib/components/layout/dialog/Dialog.svelte

@@ -2,7 +2,6 @@
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { merge } from '$lib/utils/functions';
-    import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
 
     export interface DialogProps extends IvoryComponent<HTMLElement> {
@@ -14,49 +13,43 @@
 <script lang="ts">
     let {
         class: clazz,
-        onclose: close, // This is the prop from the parent
+        onclose: onclose, // This is the prop from the parent
         children,
         ...rest
     }: DialogProps = $props();
 
     let dialog = $state<HTMLDialogElement>();
 
-    /**
-     * This function "requests" a close.
-     * It tries to stop the native close and lets the parent decide.
-     */
-    async function requestClose(event: Event) {
-        event.preventDefault(); // Stop the native close
-        event.stopPropagation();
-        close?.(); // Ask the parent to close
-        await tick();
-        await tick();
+    let currentlyOpen = $state(false);
+
+    export const open = () => {
         dialog?.showModal();
-    }
+        currentlyOpen = true;
+    };
+
+    export const isOpen = () => currentlyOpen;
 
-    onMount(() => {
-        if (dialog && !dialog.open) {
-            dialog.showModal();
-        }
-        return () => {
-            if (dialog && dialog.open) {
-                dialog.close();
-            }
-        };
-    });
+    export const close = () => {
+        dialog?.close();
+        currentlyOpen = false;
+    };
 
     const handleBackdropClick: MouseEventHandler<HTMLElement> = (event) => {
-        if (event.target === dialog) {
-            requestClose(event);
-        }
+        if (event.target !== dialog) return;
+        onclose?.();
+    };
+
+    const handleClose = () => {
+        onclose?.();
+        currentlyOpen = false;
     };
 </script>
 
 <dialog
     bind:this={dialog}
     onclick={handleBackdropClick}
-    oncancel={requestClose}
-    onclose={close}
+    oncancel={handleClose}
+    onclose={handleClose}
     class={merge(
         'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full overflow-hidden bg-transparent',
         theme.current.dialog?.class,
@@ -68,12 +61,7 @@
 </dialog>
 
 <style>
-    dialog::backdrop {
-        animation: fade-in 200ms ease-out;
-    }
-    @keyframes fade-in {
-        from {
-            opacity: 0;
-        }
+    dialog:not([open]):not(:popover-open) {
+        display: none !important;
     }
 </style>

package/src/lib/components/layout/drawer/Drawer.svelte

@@ -35,40 +35,33 @@
         ...rest
     }: DrawerProps = $props();
 
-    let currentlyOpen = $state(false);
-    export function close() {
-        currentlyOpen = false;
-    }
+    let dialog = $state<Dialog>();
 
-    export function open() {
-        currentlyOpen = true;
-    }
+    export const close = () => dialog?.close();
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
-    }
+    export const open = () => dialog?.open();
 
-    export function isOpen() {
-        return currentlyOpen;
-    }
+    export const isOpen = () => dialog?.isOpen();
+
+    export const toggle = () => {
+        if (isOpen()) close();
+        else open();
+    };
 </script>
 
-{#if currentlyOpen}
-    <Dialog
-        onclose={() => {
-            if (closeOnOutsideClick) close();
-        }}
-        class={[
-            'flex flex-row justify-start overflow-visible',
-            placement === 'left' && '',
-            placement === 'right' && 'justify-end'
-        ]}
-    >
+<Dialog
+    bind:this={dialog}
+    onclose={() => {
+        if (closeOnOutsideClick) close();
+    }}
+    class={['flex flex-row justify-start overflow-visible', placement === 'right' && 'justify-end']}
+>
+    {#if dialog?.isOpen()}
         <div
-            class={merge(['bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz])}
+            class={merge('bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz)}
             onclick={(e) => e.stopPropagation()}
-            in:inTransition|global
-            out:outTransition|global
+            in:inTransition
+            out:outTransition
             {...rest}
         >
             {#if inner}
@@ -91,5 +84,5 @@
                 {@render children()}
             {/if}
         </div>
-    </Dialog>
-{/if}
+    {/if}
+</Dialog>

package/src/lib/components/layout/modal/Modal.svelte

@@ -54,23 +54,18 @@
         ...rest
     }: Props = $props();
 
-    let currentlyOpen = $state(false);
+    let dialog = $state<Dialog>();
 
-    export function close() {
-        currentlyOpen = false;
-    }
+    export const close = () => dialog?.close();
 
-    export function open() {
-        currentlyOpen = true;
-    }
+    export const open = () => dialog?.open();
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
-    }
+    export const isOpen = () => dialog?.isOpen();
 
-    export function isOpen() {
-        return currentlyOpen;
-    }
+    export const toggle = () => {
+        if (isOpen()) close();
+        else open();
+    };
 
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
         e.stopPropagation();
@@ -82,31 +77,29 @@
 	@component
 	A modal, comes with a title, close button and different variants per default.
 -->
-{#if currentlyOpen}
-    <Dialog
-        onclose={() => {
-            if (closeOnOutsideClick) close();
-        }}
-        class={merge(
-            'flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16',
-            theme.current.modal?.dialog?.class
-        )}
-    >
+<Dialog
+    bind:this={dialog}
+    onclose={() => {
+        if (closeOnOutsideClick) close();
+    }}
+    class={merge('flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16')}
+>
+    {#if dialog?.isOpen()}
         {#if modal}
             <div {...rest} {onclick}>
                 {@render modal()}
             </div>
         {:else}
             <div
-                class={merge([
+                class={merge(
                     'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
                     theme.current.modal?.class,
                     clazz
-                ])}
+                )}
                 {...rest}
                 {onclick}
-                in:inTransition|global
-                out:outTransition|global
+                in:inTransition
+                out:outTransition
             >
                 <div
                     class={[
@@ -145,5 +138,5 @@
                 </div>
             </div>
         {/if}
-    </Dialog>
-{/if}
+    {/if}
+</Dialog>

package/src/lib/components/table/Column.svelte

@@ -73,10 +73,10 @@
     onclick={finalOnClick}
     href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
-    class={merge([
+    class={merge(
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
         column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
         theme.current.table?.column?.class,
         clazz
-    ])}
+    )}
 />

package/src/lib/components/table/Table.svelte

@@ -200,11 +200,11 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={merge([
+    class={merge(
         'flex flex-col overflow-hidden border-transparent',
         theme.current.table?.class,
         clazz
-    ])}
+    )}
     rowClass={merge('pl-2 pr-4', theme.current.table?.row?.class, rowClass)}
     {rowHeight}
 >

package/src/lib/components/table/VirtualList.svelte

@@ -26,7 +26,7 @@
     }: Props<T> = $props();
 
     const finalRowClass = $derived(
-        merge(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass])
+        merge('flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass)
     );
 
     let viewportReactivity = $state(0);
@@ -92,7 +92,7 @@
     });
 </script>
 
-<div class={merge(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])}>
+<div class={merge('scroll relative flex grow flex-col overflow-hidden border-inherit', clazz)}>
     {#if header}
         <div class="h-fit w-full border-inherit">
             <div