@ims360/svelte-ivory 0.4.12 → 0.4.14

package/dist/components/basic/toggle/Toggle.svelte

@@ -18,7 +18,7 @@
 <svelte:element
     this={rest.onclick ? 'button' : 'div'}
     class={merge(
-        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
+        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors ',
         value ? 'bg-primary-500' : 'bg-surface-300-700',
         clazz
     )}

package/dist/components/inputs/Input.svelte

@@ -65,7 +65,7 @@
             'group flex h-full grow flex-col overflow-hidden rounded border-2',
             hasIssues
                 ? 'bg-error-500/20 border-error-500'
-                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color] duration-300',
+                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color]',
             theme.current.input?.class?.(hasValue, hasIssues)
         )}
     >

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

@@ -61,6 +61,33 @@
 </dialog>
 
 <style>
+    dialog {
+        transition:
+            display var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            overlay var(--tw-duration, var(--default-transition-duration)) allow-discrete;
+    }
+
+    /* Dialog backdrop fade-in animation */
+    dialog::backdrop {
+        opacity: 0;
+        transition:
+            display var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            overlay var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            opacity var(--tw-duration, var(--default-transition-duration))
+                cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    dialog[open]::backdrop {
+        opacity: 1;
+    }
+
+    /* Starting style for entry animation */
+    @starting-style {
+        dialog[open]::backdrop {
+            opacity: 0;
+        }
+    }
+
     dialog:not([open]):not(:popover-open) {
         display: none !important;
     }

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

@@ -1,15 +1,13 @@
 <script lang="ts" module>
-    import type { TransitionProps } from '../../../types';
     import { merge } from '../../../utils/functions';
     import { X } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
-    import { fly } from 'svelte/transition';
     import Heading from '../Heading.svelte';
     import { Dialog } from '../dialog';
 
     export type DrawerPlacement = 'left' | 'right';
 
-    export type DrawerProps = TransitionProps & {
+    export type DrawerProps = {
         class?: string;
         title?: string | Snippet;
         children: Snippet;
@@ -27,10 +25,6 @@
         title,
         placement = 'right',
         closeOnOutsideClick = true,
-        inTransition = (e) =>
-            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
-        outTransition = (e) =>
-            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         inner,
         ...rest
     }: DrawerProps = $props();
@@ -56,33 +50,55 @@
     }}
     class={['flex flex-row justify-start overflow-visible', placement === 'right' && 'justify-end']}
 >
-    {#if dialog?.isOpen()}
-        <div
-            class={merge('bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz)}
-            onclick={(e) => e.stopPropagation()}
-            in:inTransition
-            out:outTransition
-            {...rest}
-        >
-            {#if inner}
-                {@render inner()}
-            {:else}
-                <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()}
-            {/if}
-        </div>
-    {/if}
+    <div
+        data-placement={placement}
+        class={merge(
+            'drawer bg-surface-50-950 flex h-full flex-col gap-4 p-4 transition-transform ease-in-out',
+            clazz
+        )}
+        onclick={(e) => e.stopPropagation()}
+        {...rest}
+    >
+        {#if inner}
+            {@render inner()}
+        {:else}
+            <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()}
+        {/if}
+    </div>
 </Dialog>
+
+<style>
+    .drawer[data-placement='right'] {
+        transform: translateX(100%);
+    }
+    .drawer[data-placement='left'] {
+        transform: translateX(-100%);
+    }
+
+    :global(dialog[open]) .drawer {
+        transform: translateX(0);
+    }
+
+    @starting-style {
+        :global(dialog[open]) .drawer[data-placement='right'] {
+            transform: translateX(100%);
+        }
+        :global(dialog[open]) .drawer[data-placement='left'] {
+            transform: translateX(-100%);
+        }
+    }
+</style>

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

@@ -1,7 +1,6 @@
-import type { TransitionProps } from '../../../types';
 import type { Snippet } from 'svelte';
 export type DrawerPlacement = 'left' | 'right';
-export type DrawerProps = TransitionProps & {
+export type DrawerProps = {
     class?: string;
     title?: string | Snippet;
     children: Snippet;

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

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

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

@@ -1,17 +1,15 @@
 <script lang="ts" module>
     import type { Variant } from '../../..';
     import { theme } from '../../../theme.svelte';
-    import type { TransitionProps } from '../../../types';
     import { merge } from '../../../utils/functions';
     import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { scale } from 'svelte/transition';
     import { Heading } from '..';
     import { Dialog } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export type ModalProps = TransitionProps & {
+    export type ModalProps = {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -34,32 +32,24 @@
 <script lang="ts">
     interface Props extends ModalProps {
         /** If you don't want the title and close button to be included you can overwrite the default modal */
-        modal?: Snippet;
+        inner?: Snippet;
     }
 
     let {
         class: clazz = 'flex flex-col',
         title,
         children,
-        modal,
+        inner,
         closeOnOutsideClick = true,
         variant,
         innerClass,
-        inTransition = (e) =>
-            scale(e, {
-                duration: 200,
-                start: 0.8
-            }),
-        outTransition = () => ({}),
         ...rest
     }: Props = $props();
 
     let dialog = $state<Dialog>();
 
     export const close = () => dialog?.close();
-
     export const open = () => dialog?.open();
-
     export const isOpen = () => dialog?.isOpen();
 
     export const toggle = () => {
@@ -82,61 +72,76 @@
     onclose={() => {
         if (closeOnOutsideClick) close();
     }}
-    class={merge('flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16')}
+    class="flex h-full w-full flex-col items-center justify-center p-2 sm:p-4 md:p-8 lg:p-12 xl:p-16"
 >
-    {#if dialog?.isOpen()}
-        {#if modal}
-            <div {...rest} {onclick}>
-                {@render modal()}
+    {#if inner}
+        <div {...rest} {onclick} class={merge('modal-content transition-all ease-in-out', clazz)}>
+            {@render inner()}
+        </div>
+    {:else}
+        <div
+            class={merge(
+                'modal-content bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded transition-all ease-in-out',
+                theme.current.modal?.class,
+                clazz
+            )}
+            {...rest}
+            {onclick}
+        >
+            <div
+                class={[
+                    'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                    !variant && 'pb-0',
+                    variant === 'primary' && 'preset-tonal-primary',
+                    variant === 'secondary' && 'preset-tonal-secondary',
+                    variant === 'tertiary' && 'preset-tonal-tertiary',
+                    variant === 'success' && 'preset-tonal-success',
+                    variant === 'warning' && 'preset-tonal-warning',
+                    variant === 'error' && 'preset-tonal-error',
+                    variant === 'surface' && 'preset-tonal-surface'
+                ]}
+            >
+                {#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={merge(
-                    'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                    theme.current.modal?.class,
-                    clazz
+                    'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                    theme.current.modal?.innerClass,
+                    innerClass
                 )}
-                {...rest}
-                {onclick}
-                in:inTransition
-                out:outTransition
             >
-                <div
-                    class={[
-                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                        !variant && 'pb-0',
-                        variant === 'primary' && 'preset-tonal-primary',
-                        variant === 'secondary' && 'preset-tonal-secondary',
-                        variant === 'tertiary' && 'preset-tonal-tertiary',
-                        variant === 'success' && 'preset-tonal-success',
-                        variant === 'warning' && 'preset-tonal-warning',
-                        variant === 'error' && 'preset-tonal-error',
-                        variant === 'surface' && 'preset-tonal-surface'
-                    ]}
-                >
-                    {#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={merge(
-                        '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}
+        </div>
     {/if}
 </Dialog>
+
+<style>
+    .modal-content {
+        opacity: 0;
+        transform: scale(0.97);
+    }
+
+    :global(dialog[open]) .modal-content {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    @starting-style {
+        :global(dialog[open]) .modal-content {
+            opacity: 0;
+            transform: scale(0.97);
+        }
+    }
+</style>

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

@@ -1,9 +1,8 @@
 import type { Variant } from '../../..';
-import type { TransitionProps } from '../../../types';
 import { type Snippet } from 'svelte';
 import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 /** Props for the modal, expose if you overwrite the defaults in a custom component */
-export type ModalProps = TransitionProps & {
+export type ModalProps = {
     /** Class of the modal itself, does not apply to the inner div */
     class?: ClassValue;
     /** Class of the div wrapping the children */
@@ -23,7 +22,7 @@ export type ModalProps = TransitionProps & {
 };
 interface Props extends ModalProps {
     /** If you don't want the title and close button to be included you can overwrite the default modal */
-    modal?: Snippet;
+    inner?: Snippet;
 }
 /** A modal, comes with a title, close button and different variants per default. */
 declare const Modal: import("svelte").Component<Props, {

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

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

@@ -1,9 +1,7 @@
 <script lang="ts" module>
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
-    import { pseudoRandomId } from '../../../utils/functions';
-    import clsx from 'clsx';
-    import { twMerge } from 'tailwind-merge';
+    import { merge, pseudoRandomId } from '../../../utils/functions';
 
     /** Possible placements for the popover */
     export type PopoverPlacement =
@@ -177,7 +175,7 @@
     bind:this={popoverEl}
     style="{style} {externalStyle}"
     {popover}
-    class={twMerge(clsx('bg-transparent', theme.current.popover?.class, clazz))}
+    class={merge('bg-transparent not-open:hidden!', theme.current.popover?.class, clazz)}
     {...rest}
 >
     {@render children?.()}

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":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmJL,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":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/theme.svelte.d.ts

@@ -34,6 +34,9 @@ export interface Theme {
             class?: ClassValue;
         };
     };
+    drawer?: {
+        class?: ClassValue;
+    };
     popover?: {
         class?: 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,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,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,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;QACF,IAAI,CAAC,EAAE;YACH,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;QACF,GAAG,CAAC,EAAE;YACF,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;QACxB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,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,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,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,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;QACF,IAAI,CAAC,EAAE;YACH,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;QACF,GAAG,CAAC,EAAE;YACF,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;QACxB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}

package/dist/types.d.ts

@@ -1,9 +1,4 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { TransitionConfig } from 'svelte/transition';
 export interface IvoryComponent<RootElement extends EventTarget> extends HTMLAttributes<RootElement> {
 }
-export interface TransitionProps {
-    inTransition?: (node: Element) => TransitionConfig;
-    outTransition?: (node: Element) => TransitionConfig;
-}
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,WAAW,cAAc,CAC3B,WAAW,SAAS,WAAW,CACjC,SAAQ,cAAc,CAAC,WAAW,CAAC;CAAG;AAExC,MAAM,WAAW,eAAe;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,gBAAgB,CAAC;IACnD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,gBAAgB,CAAC;CACvD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,WAAW,cAAc,CAC3B,WAAW,SAAS,WAAW,CACjC,SAAQ,cAAc,CAAC,WAAW,CAAC;CAAG"}

package/package.json

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

package/src/lib/components/basic/toggle/Toggle.svelte

@@ -18,7 +18,7 @@
 <svelte:element
     this={rest.onclick ? 'button' : 'div'}
     class={merge(
-        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
+        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors ',
         value ? 'bg-primary-500' : 'bg-surface-300-700',
         clazz
     )}

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

@@ -65,7 +65,7 @@
             'group flex h-full grow flex-col overflow-hidden rounded border-2',
             hasIssues
                 ? 'bg-error-500/20 border-error-500'
-                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color] duration-300',
+                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color]',
             theme.current.input?.class?.(hasValue, hasIssues)
         )}
     >

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

@@ -61,6 +61,33 @@
 </dialog>
 
 <style>
+    dialog {
+        transition:
+            display var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            overlay var(--tw-duration, var(--default-transition-duration)) allow-discrete;
+    }
+
+    /* Dialog backdrop fade-in animation */
+    dialog::backdrop {
+        opacity: 0;
+        transition:
+            display var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            overlay var(--tw-duration, var(--default-transition-duration)) allow-discrete,
+            opacity var(--tw-duration, var(--default-transition-duration))
+                cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    dialog[open]::backdrop {
+        opacity: 1;
+    }
+
+    /* Starting style for entry animation */
+    @starting-style {
+        dialog[open]::backdrop {
+            opacity: 0;
+        }
+    }
+
     dialog:not([open]):not(:popover-open) {
         display: none !important;
     }

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

@@ -1,15 +1,13 @@
 <script lang="ts" module>
-    import type { TransitionProps } from '$lib/types';
     import { merge } from '$lib/utils/functions';
     import { X } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
-    import { fly } from 'svelte/transition';
     import Heading from '../Heading.svelte';
     import { Dialog } from '../dialog';
 
     export type DrawerPlacement = 'left' | 'right';
 
-    export type DrawerProps = TransitionProps & {
+    export type DrawerProps = {
         class?: string;
         title?: string | Snippet;
         children: Snippet;
@@ -27,10 +25,6 @@
         title,
         placement = 'right',
         closeOnOutsideClick = true,
-        inTransition = (e) =>
-            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
-        outTransition = (e) =>
-            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         inner,
         ...rest
     }: DrawerProps = $props();
@@ -56,33 +50,55 @@
     }}
     class={['flex flex-row justify-start overflow-visible', placement === 'right' && 'justify-end']}
 >
-    {#if dialog?.isOpen()}
-        <div
-            class={merge('bg-surface-50-950 flex h-full flex-col gap-4 p-4', clazz)}
-            onclick={(e) => e.stopPropagation()}
-            in:inTransition
-            out:outTransition
-            {...rest}
-        >
-            {#if inner}
-                {@render inner()}
-            {:else}
-                <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()}
-            {/if}
-        </div>
-    {/if}
+    <div
+        data-placement={placement}
+        class={merge(
+            'drawer bg-surface-50-950 flex h-full flex-col gap-4 p-4 transition-transform ease-in-out',
+            clazz
+        )}
+        onclick={(e) => e.stopPropagation()}
+        {...rest}
+    >
+        {#if inner}
+            {@render inner()}
+        {:else}
+            <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()}
+        {/if}
+    </div>
 </Dialog>
+
+<style>
+    .drawer[data-placement='right'] {
+        transform: translateX(100%);
+    }
+    .drawer[data-placement='left'] {
+        transform: translateX(-100%);
+    }
+
+    :global(dialog[open]) .drawer {
+        transform: translateX(0);
+    }
+
+    @starting-style {
+        :global(dialog[open]) .drawer[data-placement='right'] {
+            transform: translateX(100%);
+        }
+        :global(dialog[open]) .drawer[data-placement='left'] {
+            transform: translateX(-100%);
+        }
+    }
+</style>

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

@@ -1,17 +1,15 @@
 <script lang="ts" module>
     import type { Variant } from '$lib';
     import { theme } from '$lib/theme.svelte';
-    import type { TransitionProps } from '$lib/types';
     import { merge } from '$lib/utils/functions';
     import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { scale } from 'svelte/transition';
     import { Heading } from '..';
     import { Dialog } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export type ModalProps = TransitionProps & {
+    export type ModalProps = {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -34,32 +32,24 @@
 <script lang="ts">
     interface Props extends ModalProps {
         /** If you don't want the title and close button to be included you can overwrite the default modal */
-        modal?: Snippet;
+        inner?: Snippet;
     }
 
     let {
         class: clazz = 'flex flex-col',
         title,
         children,
-        modal,
+        inner,
         closeOnOutsideClick = true,
         variant,
         innerClass,
-        inTransition = (e) =>
-            scale(e, {
-                duration: 200,
-                start: 0.8
-            }),
-        outTransition = () => ({}),
         ...rest
     }: Props = $props();
 
     let dialog = $state<Dialog>();
 
     export const close = () => dialog?.close();
-
     export const open = () => dialog?.open();
-
     export const isOpen = () => dialog?.isOpen();
 
     export const toggle = () => {
@@ -82,61 +72,76 @@
     onclose={() => {
         if (closeOnOutsideClick) close();
     }}
-    class={merge('flex h-full w-full flex-col items-center justify-center p-8 lg:p-12 xl:p-16')}
+    class="flex h-full w-full flex-col items-center justify-center p-2 sm:p-4 md:p-8 lg:p-12 xl:p-16"
 >
-    {#if dialog?.isOpen()}
-        {#if modal}
-            <div {...rest} {onclick}>
-                {@render modal()}
+    {#if inner}
+        <div {...rest} {onclick} class={merge('modal-content transition-all ease-in-out', clazz)}>
+            {@render inner()}
+        </div>
+    {:else}
+        <div
+            class={merge(
+                'modal-content bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded transition-all ease-in-out',
+                theme.current.modal?.class,
+                clazz
+            )}
+            {...rest}
+            {onclick}
+        >
+            <div
+                class={[
+                    'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                    !variant && 'pb-0',
+                    variant === 'primary' && 'preset-tonal-primary',
+                    variant === 'secondary' && 'preset-tonal-secondary',
+                    variant === 'tertiary' && 'preset-tonal-tertiary',
+                    variant === 'success' && 'preset-tonal-success',
+                    variant === 'warning' && 'preset-tonal-warning',
+                    variant === 'error' && 'preset-tonal-error',
+                    variant === 'surface' && 'preset-tonal-surface'
+                ]}
+            >
+                {#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={merge(
-                    'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                    theme.current.modal?.class,
-                    clazz
+                    'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                    theme.current.modal?.innerClass,
+                    innerClass
                 )}
-                {...rest}
-                {onclick}
-                in:inTransition
-                out:outTransition
             >
-                <div
-                    class={[
-                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                        !variant && 'pb-0',
-                        variant === 'primary' && 'preset-tonal-primary',
-                        variant === 'secondary' && 'preset-tonal-secondary',
-                        variant === 'tertiary' && 'preset-tonal-tertiary',
-                        variant === 'success' && 'preset-tonal-success',
-                        variant === 'warning' && 'preset-tonal-warning',
-                        variant === 'error' && 'preset-tonal-error',
-                        variant === 'surface' && 'preset-tonal-surface'
-                    ]}
-                >
-                    {#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={merge(
-                        '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}
+        </div>
     {/if}
 </Dialog>
+
+<style>
+    .modal-content {
+        opacity: 0;
+        transform: scale(0.97);
+    }
+
+    :global(dialog[open]) .modal-content {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    @starting-style {
+        :global(dialog[open]) .modal-content {
+            opacity: 0;
+            transform: scale(0.97);
+        }
+    }
+</style>

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

@@ -1,9 +1,7 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
-    import { pseudoRandomId } from '$lib/utils/functions';
-    import clsx from 'clsx';
-    import { twMerge } from 'tailwind-merge';
+    import { merge, pseudoRandomId } from '$lib/utils/functions';
 
     /** Possible placements for the popover */
     export type PopoverPlacement =
@@ -177,7 +175,7 @@
     bind:this={popoverEl}
     style="{style} {externalStyle}"
     {popover}
-    class={twMerge(clsx('bg-transparent', theme.current.popover?.class, clazz))}
+    class={merge('bg-transparent not-open:hidden!', theme.current.popover?.class, clazz)}
     {...rest}
 >
     {@render children?.()}

package/src/lib/theme.svelte.ts

@@ -35,6 +35,9 @@ export interface Theme {
             class?: ClassValue;
         };
     };
+    drawer?: {
+        class?: ClassValue;
+    };
     popover?: {
         class?: ClassValue;
     };

package/src/lib/types.ts

@@ -1,12 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { TransitionConfig } from 'svelte/transition';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface IvoryComponent<
     RootElement extends EventTarget
 > extends HTMLAttributes<RootElement> {}
-
-export interface TransitionProps {
-    inTransition?: (node: Element) => TransitionConfig;
-    outTransition?: (node: Element) => TransitionConfig;
-}