@ims360/svelte-ivory 0.0.33 → 0.0.35

package/dist/components/basic/checkbox/Checkbox.svelte

@@ -1,5 +1,10 @@
 <script lang="ts" module>
     import type { IvoryComponent } from '../../../types';
+    import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { ClassValue } from 'svelte/elements';
+    import { scale } from 'svelte/transition';
+    import { twMerge } from 'tailwind-merge';
 
     export interface CheckboxProps extends IvoryComponent<HTMLElement> {
         class?: ClassValue;
@@ -11,8 +16,6 @@
         /** if true, the onclick handler will not be called */
         disabled?: boolean;
         onclick?: () => void;
-        /** data-testid */
-        testId?: string;
     }
 </script>
 
@@ -22,11 +25,6 @@
 -->
 
 <script lang="ts">
-    import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
-    import clsx from 'clsx';
-    import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
-
     let {
         class: clazz,
         checked = false,
@@ -76,6 +74,8 @@
     {...rest}
 >
     {#if Icon}
-        <Icon class="h-full w-full" size={16} strokeWidth={3} />
+        <div class="h-full w-full" transition:scale={{ duration: 150 }}>
+            <Icon class="h-full w-full" size={16} strokeWidth={3} />
+        </div>
     {/if}
 </svelte:element>

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { IvoryComponent } from '../../../types';
+import type { ClassValue } from 'svelte/elements';
 export interface CheckboxProps extends IvoryComponent<HTMLElement> {
     class?: ClassValue;
     /** `checked` has prioriy over `partial` */
@@ -9,10 +10,7 @@ export interface CheckboxProps extends IvoryComponent<HTMLElement> {
     /** if true, the onclick handler will not be called */
     disabled?: boolean;
     onclick?: () => void;
-    /** data-testid */
-    testId?: string;
 }
-import type { ClassValue } from 'svelte/elements';
 /** It's a checkbox */
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAKL,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA2DlD,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAuDL,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '../../../types';
+    import type { IvoryComponent, TransitionProps } from '../../../types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
@@ -11,7 +11,7 @@
 
     export type DrawerPlacement = 'left' | 'right';
 
-    export interface DrawerProps extends IvoryComponent<HTMLDivElement> {
+    export interface DrawerProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
         class?: string;
         b_open: boolean;
         title?: string;
@@ -27,6 +27,10 @@
         children,
         title,
         placement = 'right',
+        inTransition = (e) =>
+            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
+        outTransition = (e) =>
+            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         ...rest
     }: DrawerProps = $props();
 
@@ -49,8 +53,9 @@
                         clazz
                     ])
                 )}
-                transition:fly={{ x: placement === 'right' ? '100%' : '-100%', duration: 200 }}
                 onclick={(e) => e.stopPropagation()}
+                in:inTransition
+                out:outTransition
                 {...rest}
             >
                 <div class="flex flex-row items-center justify-between gap-8">

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

@@ -1,7 +1,7 @@
-import type { IvoryComponent } from '../../../types';
+import type { IvoryComponent, TransitionProps } from '../../../types';
 import type { Snippet } from 'svelte';
 export type DrawerPlacement = 'left' | 'right';
-export interface DrawerProps extends IvoryComponent<HTMLDivElement> {
+export interface DrawerProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
     class?: string;
     b_open: boolean;
     title?: string;

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,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAgDL,QAAA,MAAM,MAAM,uDAAwC,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,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,eAAe;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAoDL,QAAA,MAAM,MAAM,uDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '../../../types';
+    import type { IvoryComponent, TransitionProps } from '../../../types';
     import clsx from 'clsx';
     import type { ClassValue } from 'svelte/elements';
     import { fade } from 'svelte/transition';
@@ -12,12 +12,11 @@
         globalClass = value;
     }
 
-    export const TEST_ID = 'background';
-
-    export interface HiddenBackgroundProps extends IvoryComponent<HTMLDialogElement> {
+    export interface HiddenBackgroundProps
+        extends IvoryComponent<HTMLDialogElement>,
+            TransitionProps {
         /** Gets called when the dialog is clicked */
         onclose?: () => void;
-        duration?: number;
     }
 </script>
 
@@ -26,7 +25,8 @@
         class: clazz,
         onclose,
         children,
-        duration = 300,
+        inTransition = (e) => fade(e, { duration: 200 }),
+        outTransition = (e) => fade(e, { duration: 100 }),
         ...rest
     }: HiddenBackgroundProps = $props();
 </script>
@@ -34,7 +34,7 @@
 <dialog
     class={twMerge(
         clsx(
-            'bg-surface-950-50/40 absolute top-0 left-0 z-40 m-0 h-full w-full p-0',
+            'bg-surface-950-50/40 pointer-events-auto absolute top-0 left-0 z-40 m-0 h-full w-full p-0',
             globalClass,
             clazz
         )
@@ -46,8 +46,8 @@
         callback: onclose ?? (() => {})
     }}
     onclick={onclose}
-    transition:fade={{ duration }}
-    data-testid={TEST_ID}
+    in:inTransition
+    out:outTransition
     {...rest}
 >
     {@render children?.()}

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

@@ -1,11 +1,9 @@
-import type { IvoryComponent } from '../../../types';
+import type { IvoryComponent, TransitionProps } from '../../../types';
 import type { ClassValue } from 'svelte/elements';
 export declare function setClasses(value: ClassValue): void;
-export declare const TEST_ID = "background";
-export interface HiddenBackgroundProps extends IvoryComponent<HTMLDialogElement> {
+export interface HiddenBackgroundProps extends IvoryComponent<HTMLDialogElement>, TransitionProps {
     /** Gets called when the dialog is clicked */
     onclose?: () => void;
-    duration?: number;
 }
 declare const HiddenBackground: import("svelte").Component<HiddenBackgroundProps, {}, "">;
 type HiddenBackground = ReturnType<typeof HiddenBackground>;

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,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,QAE3C;AAED,eAAO,MAAM,OAAO,eAAe,CAAC;AAEpC,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IAC5E,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AA6BL,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":"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,qBACb,SAAQ,cAAc,CAAC,iBAAiB,CAAC,EACrC,eAAe;IACnB,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"}

package/dist/components/layout/hiddenBackground/index.d.ts

@@ -1,7 +1,7 @@
 import { setClasses } from './HiddenBackground.svelte';
 declare const HiddenBackground: import("svelte").Component<import("./HiddenBackground.svelte").HiddenBackgroundProps, {}, ""> & {
     setClasses: typeof setClasses;
-    TEST_ID: string;
 };
 export default HiddenBackground;
+export { type HiddenBackgroundProps } from './HiddenBackground.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/hiddenBackground/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,UAAU,EAAW,MAAM,2BAA2B,CAAC;AAErF,QAAA,MAAM,gBAAgB;;;CAGpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,QAAA,MAAM,gBAAgB;;CAEpB,CAAC;AAEH,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/layout/hiddenBackground/index.js

@@ -1,6 +1,6 @@
-import { default as HiddenBg, setClasses, TEST_ID } from './HiddenBackground.svelte';
+import { default as HiddenBg, setClasses } from './HiddenBackground.svelte';
 const HiddenBackground = Object.assign(HiddenBg, {
-    setClasses,
-    TEST_ID
+    setClasses
 });
 export default HiddenBackground;
+export {} from './HiddenBackground.svelte';

package/dist/components/layout/index.d.ts

@@ -1,14 +1,9 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './heading';
-export * from './hiddenBackground';
-export { default as HiddenBackground } from './hiddenBackground';
-export * from './modal/Modal.svelte';
-export { default as Modal } from './modal/Modal.svelte';
-export { default as Popover } from './popover/Popover.svelte';
-export * from './portal/Portal.svelte';
-export { default as Portal } from './portal/Portal.svelte';
-export * from './tabs';
-export { default as Tabs } from './tabs';
-export * from './tooltip/Tooltip.svelte';
-export { default as Tooltip } from './tooltip/Tooltip.svelte';
+export { default as HiddenBackground, type HiddenBackgroundProps } from './hiddenBackground';
+export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
+export { default as Popover, type PopoverPlacement, type PopoverProps } from './popover/Popover.svelte';
+export { default as Portal } from './portal';
+export { getTabContext, default as Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';
+export { default as Tooltip, type TooltipProps } from './tooltip/Tooltip.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAE9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACH,aAAa,EACb,OAAO,IAAI,IAAI,EACf,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/layout/index.js

@@ -1,13 +1,8 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './heading';
-export * from './hiddenBackground';
 export { default as HiddenBackground } from './hiddenBackground';
-export * from './modal/Modal.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as Popover } from './popover/Popover.svelte';
-export * from './portal/Portal.svelte';
-export { default as Portal } from './portal/Portal.svelte';
-export * from './tabs';
-export { default as Tabs } from './tabs';
-export * from './tooltip/Tooltip.svelte';
+export { default as Portal } from './portal';
+export { getTabContext, default as Tabs } from './tabs';
 export { default as Tooltip } from './tooltip/Tooltip.svelte';

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

@@ -1,14 +1,15 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '../../../types';
+    import type { IvoryComponent, TransitionProps } from '../../../types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
-    import type { Snippet } from 'svelte';
+    import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
+    import { fade } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
     import { Heading, HiddenBackground, Portal } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export interface ModalProps extends IvoryComponent<HTMLDivElement> {
+    export interface ModalProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -42,6 +43,11 @@
         preventClosing = false,
         variant,
         innerClass,
+        inTransition = (e) =>
+            fade(e, {
+                duration: 200
+            }),
+        outTransition = () => ({}),
         ...rest
     }: Props = $props();
 
@@ -84,6 +90,8 @@
                     )}
                     {...rest}
                     {onclick}
+                    in:inTransition|global
+                    out:outTransition|global
                 >
                     <div
                         class={[
@@ -101,7 +109,7 @@
                         <button
                             class="group ml-auto flex justify-end"
                             type="button"
-                            onclick={close}
+                            onclick={() => close()}
                         >
                             <X
                                 class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
@@ -111,7 +119,7 @@
                     <div
                         class={twMerge(
                             clsx(
-                                'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                                'flex flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
                                 innerClass
                             )
                         )}

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

@@ -1,8 +1,8 @@
-import type { IvoryComponent } from '../../../types';
-import type { Snippet } from 'svelte';
+import type { IvoryComponent, TransitionProps } from '../../../types';
+import { type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 /** Props for the modal, expose if you overwrite the defaults in a custom component */
-export interface ModalProps extends IvoryComponent<HTMLDivElement> {
+export interface ModalProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
     /** Class of the modal itself, does not apply to the inner div */
     class?: ClassValue;
     /** Class of the div wrapping the children */

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,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAIrE,sFAAsF;AACtF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC9D,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,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;AA+EL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,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,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,eAAe;IAC/E,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,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;AAoFL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/layout/portal/index.d.ts

@@ -0,0 +1,6 @@
+import { setConfig } from './Portal.svelte';
+declare const portal: import("svelte").Component<import("./Portal.svelte").PortalProps, {}, ""> & {
+    setConfig: typeof setConfig;
+};
+export default portal;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/portal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/index.ts"],"names":[],"mappings":"AAAA,OAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEpD,QAAA,MAAM,MAAM;;CAEV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/layout/portal/index.js

@@ -0,0 +1,5 @@
+import Portal, { setConfig } from './Portal.svelte';
+const portal = Object.assign(Portal, {
+    setConfig
+});
+export default portal;

package/dist/components/layout/tabs/Tab.svelte

@@ -8,6 +8,14 @@
     import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
+    let defaultClass = $state(
+        (selected: boolean): ClassValue => [selected ? 'text-primary-500' : '']
+    );
+
+    export function setDefaultClass(clazz: (selected: boolean) => ClassValue) {
+        defaultClass = clazz;
+    }
+
     export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
         class?: ClassValue | ((selected: boolean) => ClassValue);
         id?: string | undefined;
@@ -24,13 +32,7 @@
 </script>
 
 <script lang="ts">
-    let {
-        class: clazz = (selected: boolean) => [selected && 'text-primary-500 underline'],
-        id,
-        href,
-        children,
-        active
-    }: TabProps = $props();
+    let { class: clazz = defaultClass, id, href, children, active }: TabProps = $props();
 
     const tab = pseudoRandomId('tab-');
     const tabs = getTabContext();

package/dist/components/layout/tabs/Tab.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { IvoryComponent } from '../../../types';
 import { type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
+export declare function setDefaultClass(clazz: (selected: boolean) => ClassValue): void;
 export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
     class?: ClassValue | ((selected: boolean) => ClassValue);
     id?: string | undefined;

package/dist/components/layout/tabs/Tab.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQlD,wBAAgB,eAAe,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,QAEvE;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA+CL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/components/layout/tabs/index.d.ts

@@ -1,9 +1,11 @@
+import { setDefaultClass } from './Tab.svelte';
 declare const Tabs: import("svelte").Component<import("./Tabs.svelte").TabsProps, {
     forward: () => void;
     back: () => void;
 }, "b_index"> & {
     Tab: import("svelte").Component<import("./Tab.svelte").TabProps, {}, "">;
     Panel: import("svelte").Component<import("./TabPanel.svelte").TabPanelProps, {}, "">;
+    setDefaultTabClass: typeof setDefaultClass;
 };
 export default Tabs;
 export { type TabProps } from './Tab.svelte';

package/dist/components/layout/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/index.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,IAAI;;;;;;CAGR,CAAC;AAEH,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,QAAA,MAAM,IAAI;;;;;;;CAIR,CAAC;AAEH,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/layout/tabs/index.js

@@ -1,9 +1,10 @@
-import Tab from './Tab.svelte';
+import Tab, { setDefaultClass } from './Tab.svelte';
 import TabPanel from './TabPanel.svelte';
 import { default as TabsComponent } from './Tabs.svelte';
 const Tabs = Object.assign(TabsComponent, {
     Tab: Tab,
-    Panel: TabPanel
+    Panel: TabPanel,
+    setDefaultTabClass: setDefaultClass
 });
 export default Tabs;
 export {} from './Tab.svelte';

package/dist/components/layout/tooltip/Tooltip.svelte

@@ -7,7 +7,7 @@
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
     import Portal from '../portal/Portal.svelte';
 
-    export interface Props extends IvoryComponent<HTMLElement> {
+    export interface TooltipProps extends IvoryComponent<HTMLElement> {
         children?: Snippet;
         /** The content of the tooltip */
         tooltip: string | Snippet;
@@ -39,7 +39,7 @@
         tooltipClass,
         placement = 'top',
         ...rest
-    }: Props = $props();
+    }: TooltipProps = $props();
 
     let target = $state<HTMLElement>();
 

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts

@@ -2,7 +2,7 @@ import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 import { type PopoverPlacement } from '../popover/Popover.svelte';
-export interface Props extends IvoryComponent<HTMLElement> {
+export interface TooltipProps extends IvoryComponent<HTMLElement> {
     children?: Snippet;
     /** The content of the tooltip */
     tooltip: string | Snippet;
@@ -24,7 +24,7 @@ export interface Props extends IvoryComponent<HTMLElement> {
     placement?: PopoverPlacement;
 }
 /** Shows additional information when hovering over an element. */
-declare const Tooltip: import("svelte").Component<Props, {}, "">;
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;
 //# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA+DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA+DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/types.d.ts

@@ -1,4 +1,9 @@
 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;AAGtD,MAAM,WAAW,cAAc,CAAC,WAAW,SAAS,WAAW,CAC3D,SAAQ,cAAc,CAAC,WAAW,CAAC;CAAG"}
+{"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,CAAC,WAAW,SAAS,WAAW,CAC3D,SAAQ,cAAc,CAAC,WAAW,CAAC;CAAG;AAE1C,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"}

package/dist/utils/functions/transitionProps.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=transitionProps.d.ts.map

package/dist/utils/functions/transitionProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitionProps.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/functions/transitionProps.ts"],"names":[],"mappings":""}

package/dist/utils/functions/transitionProps.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

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

package/src/lib/components/basic/checkbox/Checkbox.svelte

@@ -1,5 +1,10 @@
 <script lang="ts" module>
     import type { IvoryComponent } from '$lib/types';
+    import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { ClassValue } from 'svelte/elements';
+    import { scale } from 'svelte/transition';
+    import { twMerge } from 'tailwind-merge';
 
     export interface CheckboxProps extends IvoryComponent<HTMLElement> {
         class?: ClassValue;
@@ -11,8 +16,6 @@
         /** if true, the onclick handler will not be called */
         disabled?: boolean;
         onclick?: () => void;
-        /** data-testid */
-        testId?: string;
     }
 </script>
 
@@ -22,11 +25,6 @@
 -->
 
 <script lang="ts">
-    import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
-    import clsx from 'clsx';
-    import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
-
     let {
         class: clazz,
         checked = false,
@@ -76,6 +74,8 @@
     {...rest}
 >
     {#if Icon}
-        <Icon class="h-full w-full" size={16} strokeWidth={3} />
+        <div class="h-full w-full" transition:scale={{ duration: 150 }}>
+            <Icon class="h-full w-full" size={16} strokeWidth={3} />
+        </div>
     {/if}
 </svelte:element>

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '$lib/types';
+    import type { IvoryComponent, TransitionProps } from '$lib/types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
@@ -11,7 +11,7 @@
 
     export type DrawerPlacement = 'left' | 'right';
 
-    export interface DrawerProps extends IvoryComponent<HTMLDivElement> {
+    export interface DrawerProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
         class?: string;
         b_open: boolean;
         title?: string;
@@ -27,6 +27,10 @@
         children,
         title,
         placement = 'right',
+        inTransition = (e) =>
+            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
+        outTransition = (e) =>
+            fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         ...rest
     }: DrawerProps = $props();
 
@@ -49,8 +53,9 @@
                         clazz
                     ])
                 )}
-                transition:fly={{ x: placement === 'right' ? '100%' : '-100%', duration: 200 }}
                 onclick={(e) => e.stopPropagation()}
+                in:inTransition
+                out:outTransition
                 {...rest}
             >
                 <div class="flex flex-row items-center justify-between gap-8">

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '$lib/types';
+    import type { IvoryComponent, TransitionProps } from '$lib/types';
     import clsx from 'clsx';
     import type { ClassValue } from 'svelte/elements';
     import { fade } from 'svelte/transition';
@@ -12,12 +12,11 @@
         globalClass = value;
     }
 
-    export const TEST_ID = 'background';
-
-    export interface HiddenBackgroundProps extends IvoryComponent<HTMLDialogElement> {
+    export interface HiddenBackgroundProps
+        extends IvoryComponent<HTMLDialogElement>,
+            TransitionProps {
         /** Gets called when the dialog is clicked */
         onclose?: () => void;
-        duration?: number;
     }
 </script>
 
@@ -26,7 +25,8 @@
         class: clazz,
         onclose,
         children,
-        duration = 300,
+        inTransition = (e) => fade(e, { duration: 200 }),
+        outTransition = (e) => fade(e, { duration: 100 }),
         ...rest
     }: HiddenBackgroundProps = $props();
 </script>
@@ -34,7 +34,7 @@
 <dialog
     class={twMerge(
         clsx(
-            'bg-surface-950-50/40 absolute top-0 left-0 z-40 m-0 h-full w-full p-0',
+            'bg-surface-950-50/40 pointer-events-auto absolute top-0 left-0 z-40 m-0 h-full w-full p-0',
             globalClass,
             clazz
         )
@@ -46,8 +46,8 @@
         callback: onclose ?? (() => {})
     }}
     onclick={onclose}
-    transition:fade={{ duration }}
-    data-testid={TEST_ID}
+    in:inTransition
+    out:outTransition
     {...rest}
 >
     {@render children?.()}

package/src/lib/components/layout/hiddenBackground/index.ts

@@ -1,8 +1,8 @@
-import { default as HiddenBg, setClasses, TEST_ID } from './HiddenBackground.svelte';
+import { default as HiddenBg, setClasses } from './HiddenBackground.svelte';
 
 const HiddenBackground = Object.assign(HiddenBg, {
-    setClasses,
-    TEST_ID
+    setClasses
 });
 
 export default HiddenBackground;
+export { type HiddenBackgroundProps } from './HiddenBackground.svelte';

package/src/lib/components/layout/index.ts

@@ -1,19 +1,18 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './heading';
-
-export * from './hiddenBackground';
-export { default as HiddenBackground } from './hiddenBackground';
-
-export * from './modal/Modal.svelte';
-export { default as Modal } from './modal/Modal.svelte';
-
-export { default as Popover } from './popover/Popover.svelte';
-
-export * from './portal/Portal.svelte';
-export { default as Portal } from './portal/Portal.svelte';
-
-export * from './tabs';
-export { default as Tabs } from './tabs';
-
-export * from './tooltip/Tooltip.svelte';
-export { default as Tooltip } from './tooltip/Tooltip.svelte';
+export { default as HiddenBackground, type HiddenBackgroundProps } from './hiddenBackground';
+export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
+export {
+    default as Popover,
+    type PopoverPlacement,
+    type PopoverProps
+} from './popover/Popover.svelte';
+export { default as Portal } from './portal';
+export {
+    getTabContext,
+    default as Tabs,
+    type TabPanelProps,
+    type TabProps,
+    type TabsProps
+} from './tabs';
+export { default as Tooltip, type TooltipProps } from './tooltip/Tooltip.svelte';

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

@@ -1,14 +1,15 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '$lib/types';
+    import type { IvoryComponent, TransitionProps } from '$lib/types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
-    import type { Snippet } from 'svelte';
+    import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
+    import { fade } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
     import { Heading, HiddenBackground, Portal } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export interface ModalProps extends IvoryComponent<HTMLDivElement> {
+    export interface ModalProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -42,6 +43,11 @@
         preventClosing = false,
         variant,
         innerClass,
+        inTransition = (e) =>
+            fade(e, {
+                duration: 200
+            }),
+        outTransition = () => ({}),
         ...rest
     }: Props = $props();
 
@@ -84,6 +90,8 @@
                     )}
                     {...rest}
                     {onclick}
+                    in:inTransition|global
+                    out:outTransition|global
                 >
                     <div
                         class={[
@@ -101,7 +109,7 @@
                         <button
                             class="group ml-auto flex justify-end"
                             type="button"
-                            onclick={close}
+                            onclick={() => close()}
                         >
                             <X
                                 class="h-full w-auto transition-[stroke-width] group-hover:stroke-3"
@@ -111,7 +119,7 @@
                     <div
                         class={twMerge(
                             clsx(
-                                'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                                'flex flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
                                 innerClass
                             )
                         )}

package/src/lib/components/layout/portal/index.ts

@@ -0,0 +1,7 @@
+import Portal, { setConfig } from './Portal.svelte';
+
+const portal = Object.assign(Portal, {
+    setConfig
+});
+
+export default portal;

package/src/lib/components/layout/tabs/Tab.svelte

@@ -8,6 +8,14 @@
     import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
+    let defaultClass = $state(
+        (selected: boolean): ClassValue => [selected ? 'text-primary-500' : '']
+    );
+
+    export function setDefaultClass(clazz: (selected: boolean) => ClassValue) {
+        defaultClass = clazz;
+    }
+
     export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
         class?: ClassValue | ((selected: boolean) => ClassValue);
         id?: string | undefined;
@@ -24,13 +32,7 @@
 </script>
 
 <script lang="ts">
-    let {
-        class: clazz = (selected: boolean) => [selected && 'text-primary-500 underline'],
-        id,
-        href,
-        children,
-        active
-    }: TabProps = $props();
+    let { class: clazz = defaultClass, id, href, children, active }: TabProps = $props();
 
     const tab = pseudoRandomId('tab-');
     const tabs = getTabContext();

package/src/lib/components/layout/tabs/index.ts

@@ -1,13 +1,15 @@
-import Tab from './Tab.svelte';
+import Tab, { setDefaultClass } from './Tab.svelte';
 import TabPanel from './TabPanel.svelte';
 import { default as TabsComponent } from './Tabs.svelte';
 
 const Tabs = Object.assign(TabsComponent, {
     Tab: Tab,
-    Panel: TabPanel
+    Panel: TabPanel,
+    setDefaultTabClass: setDefaultClass
 });
 
 export default Tabs;
 export { type TabProps } from './Tab.svelte';
 export { type TabPanelProps } from './TabPanel.svelte';
 export { getTabContext, type TabContext, type TabsProps } from './Tabs.svelte';
+

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -7,7 +7,7 @@
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
     import Portal from '../portal/Portal.svelte';
 
-    export interface Props extends IvoryComponent<HTMLElement> {
+    export interface TooltipProps extends IvoryComponent<HTMLElement> {
         children?: Snippet;
         /** The content of the tooltip */
         tooltip: string | Snippet;
@@ -39,7 +39,7 @@
         tooltipClass,
         placement = 'top',
         ...rest
-    }: Props = $props();
+    }: TooltipProps = $props();
 
     let target = $state<HTMLElement>();
 

package/src/lib/types.ts

@@ -1,5 +1,11 @@
 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;
+}

package/src/lib/utils/functions/transitionProps.ts

@@ -0,0 +1 @@
+