npm - @ims360/svelte-ivory - Versions diffs - 0.0.56 → 0.0.60 - Mend

@ims360/svelte-ivory 0.0.56 → 0.0.60

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/layout/drawer/Drawer.svelte CHANGED Viewed

@@ -13,20 +13,20 @@
     export type DrawerProps = TransitionProps & {
         class?: string;
-        b_open: boolean;
         title?: string | Snippet;
         children: Snippet;
         placement?: DrawerPlacement;
+        closeOnOutsideClick?: boolean;
     };
 </script>
 <script lang="ts">
     let {
         class: clazz,
-        b_open = $bindable(false),
         children,
         title,
         placement = 'right',
+        closeOnOutsideClick = true,
         inTransition = (e) =>
             fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         outTransition = (e) =>
@@ -34,14 +34,31 @@
         ...rest
     }: DrawerProps = $props();
-    const onclose = () => {
-        b_open = false;
-    };
+    let currentlyOpen = $state(false);
+    export function close() {
+        currentlyOpen = false;
+    }
+    export function open() {
+        currentlyOpen = true;
+    }
+    export function toggle() {
+        currentlyOpen = !currentlyOpen;
+    }
+    export function isOpen() {
+        return currentlyOpen;
+    }
 </script>
-{#if b_open}
+{#if currentlyOpen}
     <Portal>
-        <HiddenBackground {onclose}>
+        <HiddenBackground
+            onclose={() => {
+                if (closeOnOutsideClick) close();
+            }}
+        >
             <div
                 class={twMerge(
                     clsx([
@@ -66,7 +83,7 @@
                             {/if}
                         </Heading>
                     {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={onclose}>
+                    <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>

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

@@ -3,12 +3,17 @@ import type { Snippet } from 'svelte';
 export type DrawerPlacement = 'left' | 'right';
 export type DrawerProps = TransitionProps & {
     class?: string;
-    b_open: boolean;
     title?: string | Snippet;
     children: Snippet;
     placement?: DrawerPlacement;
+    closeOnOutsideClick?: boolean;
 };
-declare const Drawer: import("svelte").Component<DrawerProps, {}, "b_open">;
+declare const Drawer: import("svelte").Component<DrawerProps, {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+    isOpen: () => boolean;
+}, "">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;
 //# sourceMappingURL=Drawer.svelte.d.ts.map

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;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,~~MAAM,EAAE,OAAO,CAAC;IAChB,~~KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;~~CAC/B~~,CAAC;~~AAwDN~~,QAAA,MAAM,MAAM,~~uDAAwC,~~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;AAOtC,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"}

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

@@ -14,12 +14,14 @@
         class?: ClassValue;
         /** Class of the div wrapping the children */
         innerClass?: ClassValue;
-        /** If `true`, the modal will be open */
-        b_open: boolean;
         /** Content of the modal */
         children?: Snippet;
-        /** If `true` the modal will not close when clicking outside of it */
-        preventClosing?: boolean;
+        /**
+         * If `true` the modal will not close when clicking outside of it
+         *
+         * Defaults to `true`
+         * */
+        closeOnOutsideClick?: boolean;
         /** Variant of the modal, applies styling to the header */
         variant?: ModalVariant;
         title?: string | Snippet;
@@ -38,10 +40,9 @@
     let {
         class: clazz = 'flex flex-col',
         title,
-        b_open = $bindable(),
         children,
         modal,
-        preventClosing = false,
+        closeOnOutsideClick = true,
         variant,
         innerClass,
         inTransition = (e) =>
@@ -52,8 +53,22 @@
         ...rest
     }: Props = $props();
-    function close() {
-        b_open = false;
+    let currentlyOpen = $state(false);
+    export function close() {
+        currentlyOpen = false;
+    }
+    export function open() {
+        currentlyOpen = true;
+    }
+    export function toggle() {
+        currentlyOpen = !currentlyOpen;
+    }
+    export function isOpen() {
+        return currentlyOpen;
     }
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
@@ -66,12 +81,11 @@
 	@component
 	A modal, comes with a title, close button and different variants per default.
 -->
-{#if b_open}
+{#if currentlyOpen}
     <Portal>
         <HiddenBackground
             onclose={() => {
-                if (preventClosing) return;
-                close();
+                if (closeOnOutsideClick) close();
             }}
             class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
         >

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

@@ -7,12 +7,14 @@ export type ModalProps = TransitionProps & {
     class?: ClassValue;
     /** Class of the div wrapping the children */
     innerClass?: ClassValue;
-    /** If `true`, the modal will be open */
-    b_open: boolean;
     /** Content of the modal */
     children?: Snippet;
-    /** If `true` the modal will not close when clicking outside of it */
-    preventClosing?: boolean;
+    /**
+     * If `true` the modal will not close when clicking outside of it
+     *
+     * Defaults to `true`
+     * */
+    closeOnOutsideClick?: boolean;
     /** Variant of the modal, applies styling to the header */
     variant?: ModalVariant;
     title?: string | Snippet;
@@ -24,7 +26,12 @@ interface Props extends ModalProps {
     modal?: Snippet;
 }
 /** A modal, comes with a title, close button and different variants per default. */
-declare const Modal: import("svelte").Component<Props, {}, "b_open">;
+declare const Modal: import("svelte").Component<Props, {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+    isOpen: () => boolean;
+}, "">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;
 //# sourceMappingURL=Modal.svelte.d.ts.map

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":"AAGI,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,~~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,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;~~AAwFL~~,oFAAoF;AACpF,QAAA,MAAM,KAAK,~~iDAAwC,~~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":"AAGI,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

@@ -12,13 +12,12 @@
     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'];
     export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
-        /** Whether the popover is open or not */
-        b_open: boolean;
         /** The element the popover will be positioned relative to */
         target: Element | undefined;
         /**
@@ -45,13 +44,10 @@
 <script lang="ts">
     let {
         class: clazz,
-        b_open = $bindable(false),
         style: externalStyle,
         target,
         placement = 'bottom-start',
-        onClickOutside = () => {
-            b_open = false;
-        },
+        onClickOutside = close,
         keepMounted = false,
         children,
         autoplacement,
@@ -70,21 +66,33 @@
         style = `top: ${y}px; left: ${x}px;`;
     };
+    let currentlyOpen = $state(false);
     let cleanup: () => void = () => {};
-    $effect(() => {
-        if (browser && popover && target)
-            if (b_open) {
-                cleanup = autoUpdate(target, popover, () => postion(b_open));
-            } else {
-                cleanup();
-            }
-    });
+    export function close() {
+        currentlyOpen = false;
+        cleanup();
+    }
+    export function open() {
+        currentlyOpen = true;
+        if (!target || !popover) return;
+        cleanup = autoUpdate(target, popover, () => postion(true));
+    }
+    export function toggle() {
+        currentlyOpen = !currentlyOpen;
+    }
+    export function isOpen() {
+        return currentlyOpen;
+    }
     // TODO: this is kinda hacky
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         [popover, target];
-        postion(b_open);
+        postion(currentlyOpen);
     });
 </script>
@@ -92,16 +100,22 @@
     @component
     A popover, positions itself relative to a target element.
 -->
-{#if b_open || keepMounted}
-    <div
-        class={twMerge(
-            clsx('absolute z-30', !keepMounted && clazz, keepMounted && !b_open ? 'hidden' : clazz)
-        )}
-        style={style + ' ' + externalStyle}
-        bind:this={popover}
-        use:clickOutside={{ callback: onClickOutside, target }}
-        {...rest}
-    >
-        {@render children?.()}
-    </div>
+{#if currentlyOpen || keepMounted}
+    <Portal>
+        <div
+            class={twMerge(
+                clsx(
+                    'absolute z-30',
+                    !keepMounted && clazz,
+                    keepMounted && !currentlyOpen ? 'hidden' : clazz
+                )
+            )}
+            style={style + ' ' + externalStyle}
+            bind:this={popover}
+            use:clickOutside={{ callback: onClickOutside, target }}
+            {...rest}
+        >
+            {@render children?.()}
+        </div>
+    </Portal>
 {/if}

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

@@ -3,8 +3,6 @@ import { type ComputePositionConfig } from '@floating-ui/dom';
 /** Possible placements for the popover */
 export type PopoverPlacement = ComputePositionConfig['placement'];
 export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
-    /** Whether the popover is open or not */
-    b_open: boolean;
     /** The element the popover will be positioned relative to */
     target: Element | undefined;
     /**
@@ -27,7 +25,12 @@ export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
     autoplacement?: boolean;
 }
 /** A popover, positions itself relative to a target element. */
-declare const Popover: import("svelte").Component<PopoverProps, {}, "b_open">;
+declare const Popover: import("svelte").Component<PopoverProps, {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+    isOpen: () => boolean;
+}, "">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;
 //# sourceMappingURL=Popover.svelte.d.ts.map

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":"AAII,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,~~yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,~~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;~~AA6DL~~,gEAAgE;AAChE,QAAA,MAAM,OAAO,~~wDAAwC,~~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":"AAII,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;AA4EL,gEAAgE;AAChE,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/layout/tabs/Tabs.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
     import { getContext, onDestroy, setContext } from 'svelte';
     export interface TabsProps extends IvoryComponent<HTMLDivElement> {
-        b_index?: number;
+        initialTab?: number;
     }
     export interface TabContext {
@@ -24,27 +24,30 @@
 </script>
 <script lang="ts">
-    let { children, b_index = $bindable(0), ...rest }: TabsProps = $props();
+    let { children, initialTab = 0, ...rest }: TabsProps = $props();
     let allTabs: string[] = $state([]);
     let panels: string[] = $state([]);
+    let index: number = $state(initialTab);
     export const forward = () => {
-        if (b_index >= panels.length - 1) {
-            b_index = 0;
+        if (index >= panels.length - 1) {
+            index = 0;
         } else {
-            b_index++;
+            index++;
         }
     };
     export const back = () => {
-        if (b_index === 0) {
-            b_index = panels.length - 1;
+        if (index === 0) {
+            index = panels.length - 1;
         } else {
-            b_index--;
+            index--;
         }
     };
+    export const currentTab = () => index;
     setTabContext({
         registerTab: (tab: string) => {
             allTabs.push(tab);
@@ -56,23 +59,23 @@
         registerPanel: (panel: string) => {
             panels.push(panel);
-            b_index = b_index;
+            index = index;
             onDestroy(() => {
                 panels.filter((p) => p !== panel);
             });
         },
         get selectedTab() {
-            return allTabs[b_index];
+            return allTabs[index];
         },
         set selectedTab(tab: string) {
-            b_index = allTabs.indexOf(tab);
+            index = allTabs.indexOf(tab);
         },
         get selectedPanel() {
-            return panels[b_index];
+            return panels[index];
         },
         set selectedPanel(panel: string) {
-            b_index = panels.indexOf(panel);
+            index = panels.indexOf(panel);
         },
         tabs: allTabs
     });

package/dist/components/layout/tabs/Tabs.svelte.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { IvoryComponent } from '../../../types';
 export interface TabsProps extends IvoryComponent<HTMLDivElement> {
-    b_index?: number;
+    initialTab?: number;
 }
 export interface TabContext {
     registerTab: (tab: string) => void;
@@ -13,7 +13,8 @@ export declare function getTabContext(): TabContext;
 declare const Tabs: import("svelte").Component<TabsProps, {
     forward: () => void;
     back: () => void;
-}, "b_index">;
+    currentTab: () => number;
+}, "">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;
 //# sourceMappingURL=Tabs.svelte.d.ts.map

package/dist/components/layout/tabs/Tabs.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7D,~~OAAO~~,CAAC,EAAE,MAAM,CAAC;~~CACpB~~;AAED,MAAM,WAAW,UAAU;IACvB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAMD,wBAAgB,aAAa,eAE5B;~~AAiEL~~,QAAA,MAAM,IAAI~~;;;aAAwC~~,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAMD,wBAAgB,aAAa,eAE5B;AAoEL,QAAA,MAAM,IAAI;;;;MAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -2,7 +2,8 @@ import { setDefaultClass } from './Tab.svelte';
 declare const Tabs: import("svelte").Component<import("./Tabs.svelte").TabsProps, {
     forward: () => void;
     back: () => void;
-}, "b_index"> & {
+    currentTab: () => number;
+}, ""> & {
     Tab: import("svelte").Component<import("./Tab.svelte").TabProps, {}, "">;
     Panel: import("svelte").Component<import("./TabPanel.svelte").TabPanelProps, {}, "">;
     setDefaultTabClass: typeof setDefaultClass;

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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/tooltip/Tooltip.svelte CHANGED Viewed

@@ -4,7 +4,6 @@
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
-    import Portal from '../portal/Portal.svelte';
     export interface TooltipProps {
         onclick?: MouseEventHandler<HTMLElement>;
@@ -44,23 +43,24 @@
     }: TooltipProps = $props();
     let target = $state<HTMLElement>();
-    let open = $state(false);
+    let popover = $state<Popover>();
     let currentTimeout: number;
     function onmouseenter() {
         clearTimeout(currentTimeout);
         if (timeout === 0) {
-            open = true;
+            popover?.open();
         } else {
             currentTimeout = setTimeout(() => {
-                open = true;
+                popover?.open();
             }, timeout) as unknown as number;
         }
     }
     function onmouseleave() {
         clearTimeout(currentTimeout);
-        open = false;
+        popover?.close();
     }
 </script>
@@ -80,24 +80,20 @@
     {@render children?.()}
 </svelte:element>
-{#if open}
-    <Portal>
-        <Popover
-            bind:b_open={open}
-            {target}
-            {placement}
-            class={twMerge(
-                clsx(
-                    'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
-                    tooltipClass
-                )
-            )}
-        >
-            {#if typeof tooltip === 'string'}
-                {tooltip}
-            {:else}
-                {@render tooltip()}
-            {/if}
-        </Popover>
-    </Portal>
-{/if}
+<Popover
+    bind:this={popover}
+    {target}
+    {placement}
+    class={twMerge(
+        clsx(
+            'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+            tooltipClass
+        )
+    )}
+>
+    {#if typeof tooltip === 'string'}
+        {tooltip}
+    {:else}
+        {@render tooltip()}
+    {/if}
+</Popover>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;~~AAG3E~~,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;~~AA4DL~~,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;AAyDL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/table/Table.svelte CHANGED Viewed

@@ -84,7 +84,38 @@
     let columns = $state<ColumnController[]>(externalColumns ?? []);
     let treeIndicatorColumn = $state<ColumnController>();
-    function toggleExpansion(id: string) {
+    setTableContext({
+        toggleExpansion,
+        registerColumn(config: ColumnConfig) {
+            let existingColumn: ColumnController | undefined = undefined;
+            if (config.id === treeIndicatorId) {
+                if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
+                return treeIndicatorColumn;
+            }
+            for (const column of existingColumn || columns) {
+                if (column.id !== config.id) continue;
+                existingColumn = column;
+                break;
+            }
+            if (existingColumn) return existingColumn;
+            const col = new ColumnController(config);
+            (externalColumns || columns).push(col);
+            return col;
+        },
+        get nestingInset() {
+            return nestingInset;
+        },
+        get rowHeight() {
+            return rowHeight;
+        },
+        scrollTo(top?: number, left?: number) {
+            list?.scrollTo(top, left);
+        }
+    });
+    export function toggleExpansion(id: string) {
         if (expanded.has(id)) expanded.delete(id);
         else expanded.add(id);
     }
@@ -151,37 +182,6 @@
         prevSearch = currentSearch;
     });
-    setTableContext({
-        toggleExpansion,
-        registerColumn(config: ColumnConfig) {
-            let existingColumn: ColumnController | undefined = undefined;
-            if (config.id === treeIndicatorId) {
-                if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
-                return treeIndicatorColumn;
-            }
-            for (const column of existingColumn || columns) {
-                if (column.id !== config.id) continue;
-                existingColumn = column;
-                break;
-            }
-            if (existingColumn) return existingColumn;
-            const col = new ColumnController(config);
-            (externalColumns || columns).push(col);
-            return col;
-        },
-        get nestingInset() {
-            return nestingInset;
-        },
-        get rowHeight() {
-            return rowHeight;
-        },
-        scrollTo(top?: number, left?: number) {
-            list?.scrollTo(top, left);
-        }
-    });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let list = $state<VirtualList<any>>();
     export function scrollTo(top?: number, left?: number) {

package/dist/components/table/Table.svelte.d.ts CHANGED Viewed

@@ -48,6 +48,7 @@ export declare function getTableContext<T extends TableRow<T>>(): TableContext<T
 declare function $$render<T extends TableRow<T>>(): {
     props: TableProps<T>;
     exports: {
+        toggleExpansion: (id: string) => void;
         scrollTo: (top?: number, left?: number) => void;
     };
     bindings: "b_scrollTop" | "b_columns";
@@ -60,6 +61,7 @@ declare class __sveltets_Render<T extends TableRow<T>> {
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "b_scrollTop" | "b_columns";
     exports(): {
+        toggleExpansion: (id: string) => void;
         scrollTo: (top?: number, left?: number) => void;
     };
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAmC,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKzD,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACvE,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,MAAM,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI;IAC9C,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,gBAAgB,CAAC;IACpE,QAAQ,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5D,CAAC;AAMF,wBAAgB,eAAe,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,CAExE;AAIH,iBAAS,QAAQ,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;WA+KZ,UAAU,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,~~SArD/C~~,MAAM,SAAS,MAAM,~~UAqD2C~~;KAAE;;;;EAAuF;~~AACtL~~,cAAM,iBAAiB,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IACzC,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;~~yBA3DkB~~,MAAM,SAAS,MAAM;;CA4DjD;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,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;IAChZ,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,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;IAC/I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,KAAK,EAAE,qBAAmC,CAAC;AAC/B,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACpE,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.0.56",
+    "version": "0.0.60",
     "keywords": [
         "svelte"
     ],
@@ -74,45 +74,45 @@
         "@floating-ui/dom": "^1.7.4",
         "@lucide/svelte": "^0.503.0",
         "@tailwindcss/forms": "^0.5.10",
-        "@tailwindcss/typography": "^0.5.18",
-        "@tailwindcss/vite": "^4.1.13",
+        "@tailwindcss/typography": "^0.5.19",
+        "@tailwindcss/vite": "^4.1.16",
         "clsx": "^2.1.1",
-        "dompurify": "^3.2.7",
+        "dompurify": "^3.3.0",
         "jsdom": "^26.1.0",
         "marked": "^15.0.12",
         "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.13"
+        "tailwindcss": "^4.1.16"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.3.2",
-        "@eslint/js": "^9.36.0",
+        "@eslint/compat": "^1.4.1",
+        "@eslint/js": "^9.39.1",
         "@sveltejs/adapter-auto": "^4.0.0",
-        "@sveltejs/package": "^2.5.3",
-        "@sveltejs/vite-plugin-svelte": "^5.1.1",
-        "@testing-library/jest-dom": "^6.8.0",
+        "@sveltejs/package": "^2.5.4",
+        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
-        "@vitest/browser": "^3.2.4",
-        "@vitest/coverage-v8": "^3.2.4",
-        "@vitest/spy": "^3.2.4",
-        "eslint": "^9.36.0",
+        "@vitest/browser": "^4.0.0",
+        "@vitest/coverage-v8": "^4.0.0",
+        "@vitest/spy": "^4.0.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^3.12.4",
-        "globals": "^16.4.0",
-        "playwright": "^1.55.0",
+        "eslint-plugin-svelte": "^3.13.0",
+        "globals": "^16.5.0",
+        "playwright": "^1.56.1",
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.6.14",
-        "publint": "^0.3.13",
-        "svelte-check": "^4.3.1",
-        "typescript": "^5.9.2",
-        "typescript-eslint": "^8.44.0",
-        "vite": "^6.3.6",
-        "vitest": "^3.2.4"
+        "prettier-plugin-tailwindcss": "^0.7.1",
+        "publint": "^0.3.15",
+        "svelte-check": "^4.3.3",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.46.3",
+        "vite": "^7.1.1",
+        "vitest": "^4.0.0"
     },
     "peerDependencies": {
         "@skeletonlabs/skeleton": "^3.1.1",
-        "@sveltejs/kit": "^2.16.0",
-        "svelte": "^5.0.0"
+        "@sveltejs/kit": "^2.48.0",
+        "svelte": "^5.43.0"
     }
 }

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

@@ -13,20 +13,20 @@
     export type DrawerProps = TransitionProps & {
         class?: string;
-        b_open: boolean;
         title?: string | Snippet;
         children: Snippet;
         placement?: DrawerPlacement;
+        closeOnOutsideClick?: boolean;
     };
 </script>
 <script lang="ts">
     let {
         class: clazz,
-        b_open = $bindable(false),
         children,
         title,
         placement = 'right',
+        closeOnOutsideClick = true,
         inTransition = (e) =>
             fly(e, { x: placement === 'right' ? '100%' : '-100%', duration: 200 }),
         outTransition = (e) =>
@@ -34,14 +34,31 @@
         ...rest
     }: DrawerProps = $props();
-    const onclose = () => {
-        b_open = false;
-    };
+    let currentlyOpen = $state(false);
+    export function close() {
+        currentlyOpen = false;
+    }
+    export function open() {
+        currentlyOpen = true;
+    }
+    export function toggle() {
+        currentlyOpen = !currentlyOpen;
+    }
+    export function isOpen() {
+        return currentlyOpen;
+    }
 </script>
-{#if b_open}
+{#if currentlyOpen}
     <Portal>
-        <HiddenBackground {onclose}>
+        <HiddenBackground
+            onclose={() => {
+                if (closeOnOutsideClick) close();
+            }}
+        >
             <div
                 class={twMerge(
                     clsx([
@@ -66,7 +83,7 @@
                             {/if}
                         </Heading>
                     {/if}
-                    <button class="group ml-auto flex justify-end" type="button" onclick={onclose}>
+                    <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>

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

@@ -14,12 +14,14 @@
         class?: ClassValue;
         /** Class of the div wrapping the children */
         innerClass?: ClassValue;
-        /** If `true`, the modal will be open */
-        b_open: boolean;
         /** Content of the modal */
         children?: Snippet;
-        /** If `true` the modal will not close when clicking outside of it */
-        preventClosing?: boolean;
+        /**
+         * If `true` the modal will not close when clicking outside of it
+         *
+         * Defaults to `true`
+         * */
+        closeOnOutsideClick?: boolean;
         /** Variant of the modal, applies styling to the header */
         variant?: ModalVariant;
         title?: string | Snippet;
@@ -38,10 +40,9 @@
     let {
         class: clazz = 'flex flex-col',
         title,
-        b_open = $bindable(),
         children,
         modal,
-        preventClosing = false,
+        closeOnOutsideClick = true,
         variant,
         innerClass,
         inTransition = (e) =>
@@ -52,8 +53,22 @@
         ...rest
     }: Props = $props();
-    function close() {
-        b_open = false;
+    let currentlyOpen = $state(false);
+    export function close() {
+        currentlyOpen = false;
+    }
+    export function open() {
+        currentlyOpen = true;
+    }
+    export function toggle() {
+        currentlyOpen = !currentlyOpen;
+    }
+    export function isOpen() {
+        return currentlyOpen;
     }
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
@@ -66,12 +81,11 @@
 	@component
 	A modal, comes with a title, close button and different variants per default.
 -->
-{#if b_open}
+{#if currentlyOpen}
     <Portal>
         <HiddenBackground
             onclose={() => {
-                if (preventClosing) return;
-                close();
+                if (closeOnOutsideClick) close();
             }}
             class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
         >

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

@@ -12,13 +12,12 @@
     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'];
     export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
-        /** Whether the popover is open or not */
-        b_open: boolean;
         /** The element the popover will be positioned relative to */
         target: Element | undefined;
         /**
@@ -45,13 +44,10 @@
 <script lang="ts">
     let {
         class: clazz,
-        b_open = $bindable(false),
         style: externalStyle,
         target,
         placement = 'bottom-start',
-        onClickOutside = () => {
-            b_open = false;
-        },
+        onClickOutside = close,
         keepMounted = false,
         children,
         autoplacement,
@@ -70,21 +66,33 @@
         style = `top: ${y}px; left: ${x}px;`;
     };
+    let currentlyOpen = $state(false);
     let cleanup: () => void = () => {};
-    $effect(() => {
-        if (browser && popover && target)
-            if (b_open) {
-                cleanup = autoUpdate(target, popover, () => postion(b_open));
-            } else {
-                cleanup();
-            }
-    });
+    export function close() {
+        currentlyOpen = false;
+        cleanup();
+    }
+    export function open() {
+        currentlyOpen = true;
+        if (!target || !popover) return;
+        cleanup = autoUpdate(target, popover, () => postion(true));
+    }
+    export function toggle() {
+        currentlyOpen = !currentlyOpen;
+    }
+    export function isOpen() {
+        return currentlyOpen;
+    }
     // TODO: this is kinda hacky
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         [popover, target];
-        postion(b_open);
+        postion(currentlyOpen);
     });
 </script>
@@ -92,16 +100,22 @@
     @component
     A popover, positions itself relative to a target element.
 -->
-{#if b_open || keepMounted}
-    <div
-        class={twMerge(
-            clsx('absolute z-30', !keepMounted && clazz, keepMounted && !b_open ? 'hidden' : clazz)
-        )}
-        style={style + ' ' + externalStyle}
-        bind:this={popover}
-        use:clickOutside={{ callback: onClickOutside, target }}
-        {...rest}
-    >
-        {@render children?.()}
-    </div>
+{#if currentlyOpen || keepMounted}
+    <Portal>
+        <div
+            class={twMerge(
+                clsx(
+                    'absolute z-30',
+                    !keepMounted && clazz,
+                    keepMounted && !currentlyOpen ? 'hidden' : clazz
+                )
+            )}
+            style={style + ' ' + externalStyle}
+            bind:this={popover}
+            use:clickOutside={{ callback: onClickOutside, target }}
+            {...rest}
+        >
+            {@render children?.()}
+        </div>
+    </Portal>
 {/if}

package/src/lib/components/layout/tabs/Tabs.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
     import { getContext, onDestroy, setContext } from 'svelte';
     export interface TabsProps extends IvoryComponent<HTMLDivElement> {
-        b_index?: number;
+        initialTab?: number;
     }
     export interface TabContext {
@@ -24,27 +24,30 @@
 </script>
 <script lang="ts">
-    let { children, b_index = $bindable(0), ...rest }: TabsProps = $props();
+    let { children, initialTab = 0, ...rest }: TabsProps = $props();
     let allTabs: string[] = $state([]);
     let panels: string[] = $state([]);
+    let index: number = $state(initialTab);
     export const forward = () => {
-        if (b_index >= panels.length - 1) {
-            b_index = 0;
+        if (index >= panels.length - 1) {
+            index = 0;
         } else {
-            b_index++;
+            index++;
         }
     };
     export const back = () => {
-        if (b_index === 0) {
-            b_index = panels.length - 1;
+        if (index === 0) {
+            index = panels.length - 1;
         } else {
-            b_index--;
+            index--;
         }
     };
+    export const currentTab = () => index;
     setTabContext({
         registerTab: (tab: string) => {
             allTabs.push(tab);
@@ -56,23 +59,23 @@
         registerPanel: (panel: string) => {
             panels.push(panel);
-            b_index = b_index;
+            index = index;
             onDestroy(() => {
                 panels.filter((p) => p !== panel);
             });
         },
         get selectedTab() {
-            return allTabs[b_index];
+            return allTabs[index];
         },
         set selectedTab(tab: string) {
-            b_index = allTabs.indexOf(tab);
+            index = allTabs.indexOf(tab);
         },
         get selectedPanel() {
-            return panels[b_index];
+            return panels[index];
         },
         set selectedPanel(panel: string) {
-            b_index = panels.indexOf(panel);
+            index = panels.indexOf(panel);
         },
         tabs: allTabs
     });

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

@@ -4,7 +4,6 @@
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
-    import Portal from '../portal/Portal.svelte';
     export interface TooltipProps {
         onclick?: MouseEventHandler<HTMLElement>;
@@ -44,23 +43,24 @@
     }: TooltipProps = $props();
     let target = $state<HTMLElement>();
-    let open = $state(false);
+    let popover = $state<Popover>();
     let currentTimeout: number;
     function onmouseenter() {
         clearTimeout(currentTimeout);
         if (timeout === 0) {
-            open = true;
+            popover?.open();
         } else {
             currentTimeout = setTimeout(() => {
-                open = true;
+                popover?.open();
             }, timeout) as unknown as number;
         }
     }
     function onmouseleave() {
         clearTimeout(currentTimeout);
-        open = false;
+        popover?.close();
     }
 </script>
@@ -80,24 +80,20 @@
     {@render children?.()}
 </svelte:element>
-{#if open}
-    <Portal>
-        <Popover
-            bind:b_open={open}
-            {target}
-            {placement}
-            class={twMerge(
-                clsx(
-                    'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
-                    tooltipClass
-                )
-            )}
-        >
-            {#if typeof tooltip === 'string'}
-                {tooltip}
-            {:else}
-                {@render tooltip()}
-            {/if}
-        </Popover>
-    </Portal>
-{/if}
+<Popover
+    bind:this={popover}
+    {target}
+    {placement}
+    class={twMerge(
+        clsx(
+            'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+            tooltipClass
+        )
+    )}
+>
+    {#if typeof tooltip === 'string'}
+        {tooltip}
+    {:else}
+        {@render tooltip()}
+    {/if}
+</Popover>

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

@@ -84,7 +84,38 @@
     let columns = $state<ColumnController[]>(externalColumns ?? []);
     let treeIndicatorColumn = $state<ColumnController>();
-    function toggleExpansion(id: string) {
+    setTableContext({
+        toggleExpansion,
+        registerColumn(config: ColumnConfig) {
+            let existingColumn: ColumnController | undefined = undefined;
+            if (config.id === treeIndicatorId) {
+                if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
+                return treeIndicatorColumn;
+            }
+            for (const column of existingColumn || columns) {
+                if (column.id !== config.id) continue;
+                existingColumn = column;
+                break;
+            }
+            if (existingColumn) return existingColumn;
+            const col = new ColumnController(config);
+            (externalColumns || columns).push(col);
+            return col;
+        },
+        get nestingInset() {
+            return nestingInset;
+        },
+        get rowHeight() {
+            return rowHeight;
+        },
+        scrollTo(top?: number, left?: number) {
+            list?.scrollTo(top, left);
+        }
+    });
+    export function toggleExpansion(id: string) {
         if (expanded.has(id)) expanded.delete(id);
         else expanded.add(id);
     }
@@ -151,37 +182,6 @@
         prevSearch = currentSearch;
     });
-    setTableContext({
-        toggleExpansion,
-        registerColumn(config: ColumnConfig) {
-            let existingColumn: ColumnController | undefined = undefined;
-            if (config.id === treeIndicatorId) {
-                if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
-                return treeIndicatorColumn;
-            }
-            for (const column of existingColumn || columns) {
-                if (column.id !== config.id) continue;
-                existingColumn = column;
-                break;
-            }
-            if (existingColumn) return existingColumn;
-            const col = new ColumnController(config);
-            (externalColumns || columns).push(col);
-            return col;
-        },
-        get nestingInset() {
-            return nestingInset;
-        },
-        get rowHeight() {
-            return rowHeight;
-        },
-        scrollTo(top?: number, left?: number) {
-            list?.scrollTo(top, left);
-        }
-    });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let list = $state<VirtualList<any>>();
     export function scrollTo(top?: number, left?: number) {