@ims360/svelte-ivory 0.1.13 → 0.1.15

package/dist/components/inputs/FullscreenDropzone.svelte

@@ -2,7 +2,7 @@
     import { FileUp } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
     import { scale } from 'svelte/transition';
-    import { HiddenBackground, Portal } from '../layout';
+    import { HiddenBackground } from '../layout';
 
     export interface FullscreenDropzoneProps {
         ondrop: (files: File[]) => void;
@@ -64,11 +64,9 @@
 />
 
 {#if open}
-    <Portal>
-        <HiddenBackground class="flex items-center justify-center">
-            {@render children()}
-        </HiddenBackground>
-    </Portal>
+    <HiddenBackground class="flex items-center justify-center">
+        {@render children()}
+    </HiddenBackground>
 {/if}
 
 {#snippet defaultChildren()}

package/dist/components/inputs/FullscreenDropzone.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/FullscreenDropzone.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,MAAM,WAAW,uBAAuB;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAoEL,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"FullscreenDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/FullscreenDropzone.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,MAAM,WAAW,uBAAuB;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAkEL,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

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

@@ -63,8 +63,8 @@
     onclose={close}
     class={twMerge(
         clsx(
-            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-black/20',
-            theme.current.hiddenBackground?.class,
+            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
+            theme.current.dialog?.class,
             clazz
         )
     )}

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

@@ -5,7 +5,7 @@
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
-    import { HiddenBackground, Portal } from '..';
+    import { HiddenBackground } from '..';
     import Heading from '../Heading.svelte';
 
     export type DrawerPlacement = 'left' | 'right';
@@ -52,42 +52,40 @@
 </script>
 
 {#if currentlyOpen}
-    <Portal>
-        <HiddenBackground
-            onclose={() => {
-                if (closeOnOutsideClick) close();
-            }}
+    <HiddenBackground
+        onclose={() => {
+            if (closeOnOutsideClick) close();
+        }}
+    >
+        <div
+            class={twMerge(
+                clsx([
+                    'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
+                    placement === 'left' && 'left-0',
+                    placement === 'right' && 'right-0',
+                    clazz
+                ])
+            )}
+            onclick={(e) => e.stopPropagation()}
+            in:inTransition|global
+            out:outTransition|global
+            {...rest}
         >
-            <div
-                class={twMerge(
-                    clsx([
-                        'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
-                        placement === 'left' && 'left-0',
-                        placement === 'right' && 'right-0',
-                        clazz
-                    ])
-                )}
-                onclick={(e) => e.stopPropagation()}
-                in:inTransition|global
-                out:outTransition|global
-                {...rest}
-            >
-                <div class="flex flex-row items-center justify-between gap-8">
-                    {#if title}
-                        <Heading class="flex grow flex-row items-center gap-4">
-                            {#if typeof title === 'function'}
-                                {@render title()}
-                            {:else}
-                                {title}
-                            {/if}
-                        </Heading>
-                    {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
-                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
-                    </button>
-                </div>
-                {@render children()}
+            <div class="flex flex-row items-center justify-between gap-8">
+                {#if title}
+                    <Heading class="flex grow flex-row items-center gap-4">
+                        {#if typeof title === 'function'}
+                            {@render title()}
+                        {:else}
+                            {title}
+                        {/if}
+                    </Heading>
+                {/if}
+                <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                    <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                </button>
             </div>
-        </HiddenBackground>
-    </Portal>
+            {@render children()}
+        </div>
+    </HiddenBackground>
 {/if}

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;AAMtC,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;CACjC,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;AAMtC,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;CACjC,CAAC;AAqEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -1,51 +1,13 @@
-<script lang="ts" module>
-    import type { IvoryComponent, TransitionProps } from '../../../types';
-    import clsx from 'clsx';
-    import type { ClassValue } from 'svelte/elements';
-    import { fade } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
-    import { focusTrap, shortcut } from '../../../utils/actions/index';
-
-    let globalClass = $state<ClassValue>();
-
-    export function setClasses(value: ClassValue) {
-        globalClass = value;
-    }
-
-    export interface HiddenBackgroundProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
-        /** Gets called when the dialog is clicked */
-        onclose?: () => void;
-    }
-</script>
-
 <script lang="ts">
+    import { theme } from '../../../theme.svelte';
+    import type { DialogProps } from '../dialog';
+    import Dialog from '../dialog/Dialog.svelte';
+
     let {
         class: clazz,
-        onclose,
-        children,
-        inTransition = (e) => fade(e, { duration: 200 }),
-        outTransition = (e) => fade(e, { duration: 100 }),
+
         ...rest
-    }: HiddenBackgroundProps = $props();
+    }: DialogProps = $props();
 </script>
 
-<div
-    class={twMerge(
-        clsx(
-            'bg-surface-950-50/40 pointer-events-auto absolute top-0 left-0 m-0 h-full w-full p-0',
-            globalClass,
-            clazz
-        )
-    )}
-    use:focusTrap={true}
-    {@attach shortcut({
-        code: 'Escape',
-        callback: onclose ?? (() => {})
-    })}
-    onclick={onclose}
-    in:inTransition
-    out:outTransition
-    {...rest}
->
-    {@render children?.()}
-</div>
+<Dialog {...rest} class={['bg-surface-950-50/40', theme.current.hiddenBackground?.class, clazz]} />

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts

@@ -1,11 +1,5 @@
-import type { IvoryComponent, TransitionProps } from '../../../types';
-import type { ClassValue } from 'svelte/elements';
-export declare function setClasses(value: ClassValue): void;
-export interface HiddenBackgroundProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
-    /** Gets called when the dialog is clicked */
-    onclose?: () => void;
-}
-declare const HiddenBackground: import("svelte").Component<HiddenBackgroundProps, {}, "">;
+import type { DialogProps } from '../dialog';
+declare const HiddenBackground: import("svelte").Component<DialogProps, {}, "">;
 type HiddenBackground = ReturnType<typeof HiddenBackground>;
 export default HiddenBackground;
 //# sourceMappingURL=HiddenBackground.svelte.d.ts.map

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HiddenBackground.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/HiddenBackground.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,QAE3C;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,eAAe;IAC1F,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA8BL,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HiddenBackground.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/HiddenBackground.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmB7C,QAAA,MAAM,gBAAgB,iDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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

@@ -7,7 +7,7 @@
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { fade } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
-    import { Heading, HiddenBackground, Portal } from '..';
+    import { Heading, HiddenBackground } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
     export type ModalProps = TransitionProps & {
@@ -83,73 +83,65 @@
 	A modal, comes with a title, close button and different variants per default.
 -->
 {#if currentlyOpen}
-    <Portal>
-        <HiddenBackground
-            onclose={() => {
-                if (closeOnOutsideClick) close();
-            }}
-            class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
-        >
-            {#if modal}
-                <div {...rest} {onclick}>
-                    {@render modal()}
+    <HiddenBackground
+        onclose={() => {
+            if (closeOnOutsideClick) close();
+        }}
+        class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
+    >
+        {#if modal}
+            <div {...rest} {onclick}>
+                {@render modal()}
+            </div>
+        {:else}
+            <div
+                class={twMerge(
+                    clsx([
+                        'bg-surface-50-950 relative 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
+            >
+                <div
+                    class={[
+                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                        !variant && 'pb-0',
+                        variant === 'success' && 'preset-tonal-success',
+                        variant === 'warning' && 'preset-tonal-warning',
+                        variant === 'error' && 'preset-tonal-error',
+                        variant === 'info' && 'preset-tonal-primary'
+                    ]}
+                >
+                    {#if title}
+                        <Heading class="flex grow flex-row items-center gap-4">
+                            {#if typeof title === 'function'}
+                                {@render title()}
+                            {:else}
+                                {title}
+                            {/if}
+                        </Heading>
+                    {/if}
+                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                    </button>
                 </div>
-            {:else}
                 <div
                     class={twMerge(
-                        clsx([
-                            'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                            theme.current.modal?.class,
-                            clazz
-                        ])
+                        clsx(
+                            'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                            theme.current.modal?.innerClass,
+                            innerClass
+                        )
                     )}
-                    {...rest}
-                    {onclick}
-                    in:inTransition|global
-                    out:outTransition|global
                 >
-                    <div
-                        class={[
-                            'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                            !variant && 'pb-0',
-                            variant === 'success' && 'preset-tonal-success',
-                            variant === 'warning' && 'preset-tonal-warning',
-                            variant === 'error' && 'preset-tonal-error',
-                            variant === 'info' && 'preset-tonal-primary'
-                        ]}
-                    >
-                        {#if title}
-                            <Heading class="flex grow flex-row items-center gap-4">
-                                {#if typeof title === 'function'}
-                                    {@render title()}
-                                {:else}
-                                    {title}
-                                {/if}
-                            </Heading>
-                        {/if}
-                        <button
-                            class="group ml-auto flex justify-end"
-                            type="button"
-                            onclick={close}
-                        >
-                            <X
-                                class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
-                            />
-                        </button>
-                    </div>
-                    <div
-                        class={twMerge(
-                            clsx(
-                                'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                                theme.current.modal?.innerClass,
-                                innerClass
-                            )
-                        )}
-                    >
-                        {@render children?.()}
-                    </div>
+                    {@render children?.()}
                 </div>
-            {/if}
-        </HiddenBackground>
-    </Portal>
+            </div>
+        {/if}
+    </HiddenBackground>
 {/if}

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":"AAII,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,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAsGL,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":"AAII,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,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAoGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/layout/popover/Popover.svelte

@@ -13,7 +13,7 @@
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
     import { clickOutside } from '../../../utils/actions/clickOutside';
-    import Portal from '../portal/Portal.svelte';
+    import { Dialog } from '../dialog';
 
     /** Possible placements for the popover */
     export type PopoverPlacement = ComputePositionConfig['placement'];
@@ -31,8 +31,6 @@
          * Callback that is called when the user clicks outside the popover or the target element.
          */
         onClickOutside?: (e: MouseEvent) => void;
-        /** If set to `true`, the nested component will not be unmounted when the popover is closed */
-        keepMounted?: boolean;
         /**
          * Whether to place the popover automatically
          *
@@ -49,7 +47,6 @@
         target,
         placement = 'bottom-start',
         onClickOutside = close,
-        keepMounted = false,
         children,
         autoplacement,
         ...rest
@@ -101,17 +98,10 @@
     @component
     A popover, positions itself relative to a target element.
 -->
-{#if currentlyOpen || keepMounted}
-    <Portal>
+{#if currentlyOpen}
+    <Dialog>
         <div
-            class={twMerge(
-                clsx(
-                    'absolute',
-                    theme.current.popover?.class,
-                    !keepMounted && clazz,
-                    keepMounted && !currentlyOpen ? 'hidden' : clazz
-                )
-            )}
+            class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
             style={style + ' ' + externalStyle}
             bind:this={popover}
             use:clickOutside={{ callback: onClickOutside, target }}
@@ -119,5 +109,5 @@
         >
             {@render children?.()}
         </div>
-    </Portal>
+    </Dialog>
 {/if}

package/dist/components/layout/popover/Popover.svelte.d.ts

@@ -15,8 +15,6 @@ export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
      * Callback that is called when the user clicks outside the popover or the target element.
      */
     onClickOutside?: (e: MouseEvent) => void;
-    /** If set to `true`, the nested component will not be unmounted when the popover is closed */
-    keepMounted?: boolean;
     /**
      * Whether to place the popover automatically
      *

package/dist/components/layout/popover/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAM1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6EL,gEAAgE;AAChE,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAM1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqEL,gEAAgE;AAChE,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/table/VirtualList.svelte

@@ -38,7 +38,16 @@
     let viewport_height = $state(0);
 
     export function scrollTo(top?: number, left?: number) {
-        onscroll(top, left);
+        if (!viewport) return;
+        if (top !== undefined) {
+            scroll_top = top;
+            viewport.scrollTop = top;
+            b_scrollTop = top;
+        }
+        if (left !== undefined) {
+            scroll_left = left;
+            viewport.scrollLeft = left;
+        }
     }
 
     const start = $derived(Math.max(0, Math.floor(scroll_top / rowHeight) - overscan));
@@ -56,26 +65,16 @@
     const top = $derived(start * rowHeight);
     const bottom = $derived((data.length - end) * rowHeight);
 
-    async function onscroll(top?: number, left?: number, retry = true) {
+    async function onscroll() {
         if (!viewport) {
             viewportReactivity++;
             await tick();
-            if (retry) await onscroll(top, left, false);
+            onscroll();
             return;
         }
-        if (typeof top !== 'undefined') {
-            scroll_top = top;
-            viewport.scrollTop = top;
-        } else {
-            scroll_top = viewport.scrollTop;
-            b_scrollTop = scroll_top;
-        }
-        if (typeof left !== 'undefined') {
-            scroll_left = left;
-            viewport.scrollLeft = left;
-        } else {
-            scroll_left = viewport.scrollLeft;
-        }
+        scroll_top = viewport.scrollTop;
+        scroll_left = viewport.scrollLeft;
+        b_scrollTop = scroll_top;
     }
 
     // update the scrolltop when the prop value changes
@@ -88,7 +87,8 @@
         }
     });
 
-    onMount(() => {
+    onMount(async () => {
+        await tick();
         onscroll();
     });
 </script>
@@ -114,23 +114,20 @@
             class="flex min-w-full! grow overflow-auto [scrollbar-gutter:stable]"
             bind:this={viewport}
             bind:offsetHeight={viewport_height}
-            onscroll={() => onscroll()}
+            {onscroll}
         >
             <div
                 class="flex h-fit shrink-0 flex-col"
                 style="padding-top: {top}px; padding-bottom: {bottom}px; min-width: max(100%, {header_width}px) !important;"
             >
                 {#each visible as row, i (row.data.id)}
-                    <virtual-list-row
-                        class={finalRowClass}
-                        style="height: {rowHeight}px !important;"
-                    >
+                    <div class={finalRowClass} style="height: {rowHeight}px !important;">
                         {@render children({
                             row: row.data,
                             domIndex: i,
                             index: row.index
                         })}
-                    </virtual-list-row>
+                    </div>
                 {/each}
             </div>
         </div>

package/dist/theme.svelte.d.ts

@@ -6,6 +6,9 @@ export interface Theme {
     hiddenBackground?: {
         class?: ClassValue;
     };
+    dialog?: {
+        class?: ClassValue;
+    };
     tabs?: {
         tab?: {
             class?: (active: boolean) => ClassValue;

package/dist/theme.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;KAC3B,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}
+{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;KAC3B,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}

package/package.json

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

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

@@ -2,7 +2,7 @@
     import { FileUp } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
     import { scale } from 'svelte/transition';
-    import { HiddenBackground, Portal } from '../layout';
+    import { HiddenBackground } from '../layout';
 
     export interface FullscreenDropzoneProps {
         ondrop: (files: File[]) => void;
@@ -64,11 +64,9 @@
 />
 
 {#if open}
-    <Portal>
-        <HiddenBackground class="flex items-center justify-center">
-            {@render children()}
-        </HiddenBackground>
-    </Portal>
+    <HiddenBackground class="flex items-center justify-center">
+        {@render children()}
+    </HiddenBackground>
 {/if}
 
 {#snippet defaultChildren()}

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

@@ -63,8 +63,8 @@
     onclose={close}
     class={twMerge(
         clsx(
-            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-black/20',
-            theme.current.hiddenBackground?.class,
+            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
+            theme.current.dialog?.class,
             clazz
         )
     )}

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

@@ -5,7 +5,7 @@
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
-    import { HiddenBackground, Portal } from '..';
+    import { HiddenBackground } from '..';
     import Heading from '../Heading.svelte';
 
     export type DrawerPlacement = 'left' | 'right';
@@ -52,42 +52,40 @@
 </script>
 
 {#if currentlyOpen}
-    <Portal>
-        <HiddenBackground
-            onclose={() => {
-                if (closeOnOutsideClick) close();
-            }}
+    <HiddenBackground
+        onclose={() => {
+            if (closeOnOutsideClick) close();
+        }}
+    >
+        <div
+            class={twMerge(
+                clsx([
+                    'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
+                    placement === 'left' && 'left-0',
+                    placement === 'right' && 'right-0',
+                    clazz
+                ])
+            )}
+            onclick={(e) => e.stopPropagation()}
+            in:inTransition|global
+            out:outTransition|global
+            {...rest}
         >
-            <div
-                class={twMerge(
-                    clsx([
-                        'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
-                        placement === 'left' && 'left-0',
-                        placement === 'right' && 'right-0',
-                        clazz
-                    ])
-                )}
-                onclick={(e) => e.stopPropagation()}
-                in:inTransition|global
-                out:outTransition|global
-                {...rest}
-            >
-                <div class="flex flex-row items-center justify-between gap-8">
-                    {#if title}
-                        <Heading class="flex grow flex-row items-center gap-4">
-                            {#if typeof title === 'function'}
-                                {@render title()}
-                            {:else}
-                                {title}
-                            {/if}
-                        </Heading>
-                    {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
-                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
-                    </button>
-                </div>
-                {@render children()}
+            <div class="flex flex-row items-center justify-between gap-8">
+                {#if title}
+                    <Heading class="flex grow flex-row items-center gap-4">
+                        {#if typeof title === 'function'}
+                            {@render title()}
+                        {:else}
+                            {title}
+                        {/if}
+                    </Heading>
+                {/if}
+                <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                    <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                </button>
             </div>
-        </HiddenBackground>
-    </Portal>
+            {@render children()}
+        </div>
+    </HiddenBackground>
 {/if}

package/src/lib/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -1,51 +1,13 @@
-<script lang="ts" module>
-    import type { IvoryComponent, TransitionProps } from '$lib/types';
-    import clsx from 'clsx';
-    import type { ClassValue } from 'svelte/elements';
-    import { fade } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
-    import { focusTrap, shortcut } from '../../../utils/actions/index';
-
-    let globalClass = $state<ClassValue>();
-
-    export function setClasses(value: ClassValue) {
-        globalClass = value;
-    }
-
-    export interface HiddenBackgroundProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
-        /** Gets called when the dialog is clicked */
-        onclose?: () => void;
-    }
-</script>
-
 <script lang="ts">
+    import { theme } from '$lib/theme.svelte';
+    import type { DialogProps } from '../dialog';
+    import Dialog from '../dialog/Dialog.svelte';
+
     let {
         class: clazz,
-        onclose,
-        children,
-        inTransition = (e) => fade(e, { duration: 200 }),
-        outTransition = (e) => fade(e, { duration: 100 }),
+
         ...rest
-    }: HiddenBackgroundProps = $props();
+    }: DialogProps = $props();
 </script>
 
-<div
-    class={twMerge(
-        clsx(
-            'bg-surface-950-50/40 pointer-events-auto absolute top-0 left-0 m-0 h-full w-full p-0',
-            globalClass,
-            clazz
-        )
-    )}
-    use:focusTrap={true}
-    {@attach shortcut({
-        code: 'Escape',
-        callback: onclose ?? (() => {})
-    })}
-    onclick={onclose}
-    in:inTransition
-    out:outTransition
-    {...rest}
->
-    {@render children?.()}
-</div>
+<Dialog {...rest} class={['bg-surface-950-50/40', theme.current.hiddenBackground?.class, clazz]} />

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

@@ -7,7 +7,7 @@
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { fade } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
-    import { Heading, HiddenBackground, Portal } from '..';
+    import { Heading, HiddenBackground } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
     export type ModalProps = TransitionProps & {
@@ -83,73 +83,65 @@
 	A modal, comes with a title, close button and different variants per default.
 -->
 {#if currentlyOpen}
-    <Portal>
-        <HiddenBackground
-            onclose={() => {
-                if (closeOnOutsideClick) close();
-            }}
-            class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
-        >
-            {#if modal}
-                <div {...rest} {onclick}>
-                    {@render modal()}
+    <HiddenBackground
+        onclose={() => {
+            if (closeOnOutsideClick) close();
+        }}
+        class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
+    >
+        {#if modal}
+            <div {...rest} {onclick}>
+                {@render modal()}
+            </div>
+        {:else}
+            <div
+                class={twMerge(
+                    clsx([
+                        'bg-surface-50-950 relative 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
+            >
+                <div
+                    class={[
+                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                        !variant && 'pb-0',
+                        variant === 'success' && 'preset-tonal-success',
+                        variant === 'warning' && 'preset-tonal-warning',
+                        variant === 'error' && 'preset-tonal-error',
+                        variant === 'info' && 'preset-tonal-primary'
+                    ]}
+                >
+                    {#if title}
+                        <Heading class="flex grow flex-row items-center gap-4">
+                            {#if typeof title === 'function'}
+                                {@render title()}
+                            {:else}
+                                {title}
+                            {/if}
+                        </Heading>
+                    {/if}
+                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                    </button>
                 </div>
-            {:else}
                 <div
                     class={twMerge(
-                        clsx([
-                            'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                            theme.current.modal?.class,
-                            clazz
-                        ])
+                        clsx(
+                            'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                            theme.current.modal?.innerClass,
+                            innerClass
+                        )
                     )}
-                    {...rest}
-                    {onclick}
-                    in:inTransition|global
-                    out:outTransition|global
                 >
-                    <div
-                        class={[
-                            'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                            !variant && 'pb-0',
-                            variant === 'success' && 'preset-tonal-success',
-                            variant === 'warning' && 'preset-tonal-warning',
-                            variant === 'error' && 'preset-tonal-error',
-                            variant === 'info' && 'preset-tonal-primary'
-                        ]}
-                    >
-                        {#if title}
-                            <Heading class="flex grow flex-row items-center gap-4">
-                                {#if typeof title === 'function'}
-                                    {@render title()}
-                                {:else}
-                                    {title}
-                                {/if}
-                            </Heading>
-                        {/if}
-                        <button
-                            class="group ml-auto flex justify-end"
-                            type="button"
-                            onclick={close}
-                        >
-                            <X
-                                class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
-                            />
-                        </button>
-                    </div>
-                    <div
-                        class={twMerge(
-                            clsx(
-                                'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                                theme.current.modal?.innerClass,
-                                innerClass
-                            )
-                        )}
-                    >
-                        {@render children?.()}
-                    </div>
+                    {@render children?.()}
                 </div>
-            {/if}
-        </HiddenBackground>
-    </Portal>
+            </div>
+        {/if}
+    </HiddenBackground>
 {/if}

package/src/lib/components/layout/popover/Popover.svelte

@@ -13,7 +13,7 @@
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
     import { clickOutside } from '../../../utils/actions/clickOutside';
-    import Portal from '../portal/Portal.svelte';
+    import { Dialog } from '../dialog';
 
     /** Possible placements for the popover */
     export type PopoverPlacement = ComputePositionConfig['placement'];
@@ -31,8 +31,6 @@
          * Callback that is called when the user clicks outside the popover or the target element.
          */
         onClickOutside?: (e: MouseEvent) => void;
-        /** If set to `true`, the nested component will not be unmounted when the popover is closed */
-        keepMounted?: boolean;
         /**
          * Whether to place the popover automatically
          *
@@ -49,7 +47,6 @@
         target,
         placement = 'bottom-start',
         onClickOutside = close,
-        keepMounted = false,
         children,
         autoplacement,
         ...rest
@@ -101,17 +98,10 @@
     @component
     A popover, positions itself relative to a target element.
 -->
-{#if currentlyOpen || keepMounted}
-    <Portal>
+{#if currentlyOpen}
+    <Dialog>
         <div
-            class={twMerge(
-                clsx(
-                    'absolute',
-                    theme.current.popover?.class,
-                    !keepMounted && clazz,
-                    keepMounted && !currentlyOpen ? 'hidden' : clazz
-                )
-            )}
+            class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
             style={style + ' ' + externalStyle}
             bind:this={popover}
             use:clickOutside={{ callback: onClickOutside, target }}
@@ -119,5 +109,5 @@
         >
             {@render children?.()}
         </div>
-    </Portal>
+    </Dialog>
 {/if}

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

@@ -38,7 +38,16 @@
     let viewport_height = $state(0);
 
     export function scrollTo(top?: number, left?: number) {
-        onscroll(top, left);
+        if (!viewport) return;
+        if (top !== undefined) {
+            scroll_top = top;
+            viewport.scrollTop = top;
+            b_scrollTop = top;
+        }
+        if (left !== undefined) {
+            scroll_left = left;
+            viewport.scrollLeft = left;
+        }
     }
 
     const start = $derived(Math.max(0, Math.floor(scroll_top / rowHeight) - overscan));
@@ -56,26 +65,16 @@
     const top = $derived(start * rowHeight);
     const bottom = $derived((data.length - end) * rowHeight);
 
-    async function onscroll(top?: number, left?: number, retry = true) {
+    async function onscroll() {
         if (!viewport) {
             viewportReactivity++;
             await tick();
-            if (retry) await onscroll(top, left, false);
+            onscroll();
             return;
         }
-        if (typeof top !== 'undefined') {
-            scroll_top = top;
-            viewport.scrollTop = top;
-        } else {
-            scroll_top = viewport.scrollTop;
-            b_scrollTop = scroll_top;
-        }
-        if (typeof left !== 'undefined') {
-            scroll_left = left;
-            viewport.scrollLeft = left;
-        } else {
-            scroll_left = viewport.scrollLeft;
-        }
+        scroll_top = viewport.scrollTop;
+        scroll_left = viewport.scrollLeft;
+        b_scrollTop = scroll_top;
     }
 
     // update the scrolltop when the prop value changes
@@ -88,7 +87,8 @@
         }
     });
 
-    onMount(() => {
+    onMount(async () => {
+        await tick();
         onscroll();
     });
 </script>
@@ -114,23 +114,20 @@
             class="flex min-w-full! grow overflow-auto [scrollbar-gutter:stable]"
             bind:this={viewport}
             bind:offsetHeight={viewport_height}
-            onscroll={() => onscroll()}
+            {onscroll}
         >
             <div
                 class="flex h-fit shrink-0 flex-col"
                 style="padding-top: {top}px; padding-bottom: {bottom}px; min-width: max(100%, {header_width}px) !important;"
             >
                 {#each visible as row, i (row.data.id)}
-                    <virtual-list-row
-                        class={finalRowClass}
-                        style="height: {rowHeight}px !important;"
-                    >
+                    <div class={finalRowClass} style="height: {rowHeight}px !important;">
                         {@render children({
                             row: row.data,
                             domIndex: i,
                             index: row.index
                         })}
-                    </virtual-list-row>
+                    </div>
                 {/each}
             </div>
         </div>

package/src/lib/theme.svelte.ts

@@ -7,6 +7,9 @@ export interface Theme {
     hiddenBackground?: {
         class?: ClassValue;
     };
+    dialog?: {
+        class?: ClassValue;
+    };
     tabs?: {
         tab?: {
             class?: (active: boolean) => ClassValue;