npm - @ims360/svelte-ivory - Versions diffs - 0.1.13 → 0.1.14 - Mend

@ims360/svelte-ivory 0.1.13 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/components/inputs/FullscreenDropzone.svelte CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -13,7 +13,6 @@
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
     import { clickOutside } from '../../../utils/actions/clickOutside';
-    import Portal from '../portal/Portal.svelte';
     /** Possible placements for the popover */
     export type PopoverPlacement = ComputePositionConfig['placement'];
@@ -43,6 +42,8 @@
 </script>
 <script lang="ts">
+    import { Dialog } from '../dialog';
     let {
         class: clazz,
         style: externalStyle,
@@ -102,7 +103,7 @@
     A popover, positions itself relative to a target element.
 -->
 {#if currentlyOpen || keepMounted}
-    <Portal>
+    <Dialog>
         <div
             class={twMerge(
                 clsx(
@@ -119,5 +120,5 @@
         >
             {@render children?.()}
         </div>
-    </Portal>
+    </Dialog>
 {/if}

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

	@@ -1 +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"}
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;AAK1B,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;AAkFL,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 CHANGED Viewed

@@ -37,8 +37,21 @@
     let viewport = $state<HTMLElement>();
     let viewport_height = $state(0);
-    export function scrollTo(top?: number, left?: number) {
-        onscroll(top, left);
+    export async function scrollTo(top?: number, left?: number) {
+        if (!viewport) {
+            viewportReactivity++;
+            await tick();
+            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 +69,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
@@ -114,23 +117,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/components/table/VirtualList.svelte.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ declare function $$render<T extends {
 }>(): {
     props: Props<T>;
     exports: {
-        scrollTo: (top?: number, left?: number) => void;
+        scrollTo: (top?: number, left?: number) => Promise<void>;
     };
     bindings: "b_scrollTop";
     slots: {};
@@ -33,7 +33,7 @@ declare class __sveltets_Render<T extends {
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "b_scrollTop";
     exports(): {
-        scrollTo: (top?: number, left?: number) => void;
+        scrollTo: (top?: number, left?: number) => Promise<void>;
     };
 }
 interface $$IsomorphicComponent {

package/dist/components/table/VirtualList.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;~~WAkHpB~~,KAAK,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,~~SApF1C~~,MAAM,SAAS,MAAM,~~UAoFsC~~;KAAE;;;;EAA0E;AACpK,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;~~yBA1FkB~~,MAAM,SAAS,MAAM;;~~CA2FjD~~;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;WAqHpB,KAAK,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,SAvFpC,MAAM,SAAS,MAAM,mBAuFgC;KAAE;;;;EAA0E;AACpK,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;yBA7FwB,MAAM,SAAS,MAAM;;CA8FvD;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,eAAe,WAAW,CAAC"}

package/dist/theme.svelte.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -13,7 +13,6 @@
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
     import { clickOutside } from '../../../utils/actions/clickOutside';
-    import Portal from '../portal/Portal.svelte';
     /** Possible placements for the popover */
     export type PopoverPlacement = ComputePositionConfig['placement'];
@@ -43,6 +42,8 @@
 </script>
 <script lang="ts">
+    import { Dialog } from '../dialog';
     let {
         class: clazz,
         style: externalStyle,
@@ -102,7 +103,7 @@
     A popover, positions itself relative to a target element.
 -->
 {#if currentlyOpen || keepMounted}
-    <Portal>
+    <Dialog>
         <div
             class={twMerge(
                 clsx(
@@ -119,5 +120,5 @@
         >
             {@render children?.()}
         </div>
-    </Portal>
+    </Dialog>
 {/if}

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

@@ -37,8 +37,21 @@
     let viewport = $state<HTMLElement>();
     let viewport_height = $state(0);
-    export function scrollTo(top?: number, left?: number) {
-        onscroll(top, left);
+    export async function scrollTo(top?: number, left?: number) {
+        if (!viewport) {
+            viewportReactivity++;
+            await tick();
+            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 +69,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
@@ -114,23 +117,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 CHANGED Viewed

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