@ims360/svelte-ivory 0.3.2 → 0.3.4

package/dist/components/basic/Element.svelte

@@ -42,11 +42,11 @@
     }: ElementProps & { div?: HTMLElement } = $props();
 
     function isAnchor(props: ElementProps): props is AnchorAttributes {
-        return 'href' in props;
+        return 'href' in props && typeof props.href !== 'undefined';
     }
 
     function isButton(props: ElementProps): props is ButtonAttributes {
-        return 'onclick' in props || 'type' in props;
+        return ('onclick' in props && typeof props.onclick !== 'undefined') || 'type' in props;
     }
 </script>
 

package/dist/components/inputs/PasswordCreateInput.svelte

@@ -33,6 +33,8 @@
     style="min-width: {target?.getBoundingClientRect().width}px;"
     class="py-3"
     placement="top"
+    autoplacement
+    popover="manual"
 >
     <div class="bg-surface-50-950 flex w-full flex-col gap-2 rounded p-4 shadow-lg">
         {#each requirements as requirement (requirement.re)}

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

@@ -1,39 +1,36 @@
 <script lang="ts" module>
-    import { browser } from '$app/environment';
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
-    import { clickOutside } from '../../../utils/attachments';
-    import {
-        autoPlacement,
-        autoUpdate,
-        computePosition,
-        flip,
-        shift,
-        type ComputePositionConfig
-    } from '@floating-ui/dom';
+    import { pseudoRandomId } from '../../../utils/functions';
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
 
     /** Possible placements for the popover */
-    export type PopoverPlacement = ComputePositionConfig['placement'];
+    export type PopoverPlacement =
+        | 'top'
+        | 'top-start'
+        | 'top-end'
+        | 'right'
+        | 'right-start'
+        | 'right-end'
+        | 'bottom'
+        | 'bottom-start'
+        | 'bottom-end'
+        | 'left'
+        | 'left-start'
+        | 'left-end';
 
     export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
         /** The element the popover will be positioned relative to */
-        target: Element | undefined;
+        target: HTMLElement | undefined;
         /**
          * Where the popover should be positioned relative to the target.
          *
          * default: `bottom-start`
          */
         placement?: PopoverPlacement;
-        /**
-         * Callback that is called when the user clicks outside the popover or the target element.
-         */
-        onClickOutside?: (e: MouseEvent) => void;
         /**
          * Whether to place the popover automatically
-         *
-         * [Further reading](https://floating-ui.com/docs/autoPlacement)
          */
         autoplacement?: boolean;
     }
@@ -45,66 +42,139 @@
         style: externalStyle,
         target,
         placement = 'bottom-start',
-        onClickOutside = close,
         children,
         autoplacement,
+        popover = 'auto',
         ...rest
     }: PopoverProps = $props();
 
-    let style: string = $state('');
-    let popover: HTMLDivElement | undefined = $state();
+    let popoverEl: HTMLDivElement | undefined = $state();
+    const anchorName = `--${pseudoRandomId('anchor-')}`;
+
+    const getStyles = (
+        placement: PopoverPlacement,
+        anchorName: string,
+        autoplacement?: boolean
+    ) => {
+        let styles = `position-anchor: ${anchorName}; margin: 0; inset: auto;`;
+        if (autoplacement) {
+            styles += ` position-try: flip-block, flip-inline;`;
+        }
+
+        switch (placement) {
+            case 'top':
+                return (
+                    styles +
+                    ` bottom: anchor(${anchorName} top); left: anchor(${anchorName} center); translate: -50% 0;`
+                );
+            case 'top-start':
+                return (
+                    styles +
+                    ` bottom: anchor(${anchorName} top); left: anchor(${anchorName} start);`
+                );
+            case 'top-end':
+                return (
+                    styles + ` bottom: anchor(${anchorName} top); right: anchor(${anchorName} end);`
+                );
 
-    const postion = async (open: boolean) => {
-        if (!open || !popover || !browser || !target) return;
-        const { x, y } = await computePosition(target, popover, {
-            middleware: [shift(), ...(autoplacement ? [autoPlacement()] : [flip()])],
-            placement
-        });
-        style = `top: ${y}px; left: ${x}px;`;
+            case 'bottom':
+                return (
+                    styles +
+                    ` top: anchor(${anchorName} bottom); left: anchor(${anchorName} center); translate: -50% 0;`
+                );
+            case 'bottom-start':
+                return (
+                    styles +
+                    ` top: anchor(${anchorName} bottom); left: anchor(${anchorName} start);`
+                );
+            case 'bottom-end':
+                return (
+                    styles + ` top: anchor(${anchorName} bottom); right: anchor(${anchorName} end);`
+                );
+
+            case 'left':
+                return (
+                    styles +
+                    ` right: anchor(${anchorName} left); top: anchor(${anchorName} center); translate: 0 -50%;`
+                );
+            case 'left-start':
+                return (
+                    styles + ` right: anchor(${anchorName} left); top: anchor(${anchorName} top);`
+                );
+            case 'left-end':
+                return (
+                    styles +
+                    ` right: anchor(${anchorName} left); bottom: anchor(${anchorName} bottom);`
+                );
+
+            case 'right':
+                return (
+                    styles +
+                    ` left: anchor(${anchorName} right); top: anchor(${anchorName} center); translate: 0 -50%;`
+                );
+            case 'right-start':
+                return (
+                    styles + ` left: anchor(${anchorName} right); top: anchor(${anchorName} top);`
+                );
+            case 'right-end':
+                return (
+                    styles +
+                    ` left: anchor(${anchorName} right); bottom: anchor(${anchorName} bottom);`
+                );
+
+            default:
+                return (
+                    styles +
+                    ` top: anchor(${anchorName} bottom); left: anchor(${anchorName} start);`
+                );
+        }
     };
 
     let currentlyOpen = $state(false);
+    let style = $derived(getStyles(placement, anchorName, autoplacement));
+
+    $effect(() => {
+        if (target) {
+            target.style.setProperty('anchor-name', anchorName);
+            return () => {
+                target.style.removeProperty('anchor-name');
+            };
+        }
+    });
+
+    $effect(() => {
+        if (!popoverEl) return;
+
+        const handleToggle = (e: ToggleEvent) => {
+            const newState = e.newState === 'open';
+            currentlyOpen = newState;
+        };
+
+        popoverEl.addEventListener('toggle', handleToggle);
+        return () => popoverEl?.removeEventListener('toggle', handleToggle);
+    });
 
-    let cleanup: () => void = () => {};
     export function close() {
-        currentlyOpen = false;
-        cleanup();
+        popoverEl?.hidePopover();
     }
 
     export function open() {
-        currentlyOpen = true;
-        if (!target || !popover) return;
-        cleanup = autoUpdate(target, popover, () => postion(true));
+        if (popoverEl) popoverEl.showPopover();
     }
 
     export function toggle() {
-        currentlyOpen = !currentlyOpen;
+        if (currentlyOpen) close();
+        else open();
     }
 
+    // Now this is reactive!
     export function isOpen() {
         return currentlyOpen;
     }
-
-    // TODO: this is kinda hacky
-    $effect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        [popover, target];
-        postion(currentlyOpen);
-    });
 </script>
 
-<!-- 
-    @component
-    A popover, positions itself relative to a target element.
--->
-{#if currentlyOpen}
-    <div
-        class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
-        style={style + ' ' + externalStyle}
-        bind:this={popover}
-        {@attach clickOutside({ callback: onClickOutside, target })}
-        {...rest}
-    >
+<div bind:this={popoverEl} {style} {popover} class="bg-transparent">
+    <div class={twMerge(clsx(theme.current.popover?.class, clazz))} style={externalStyle} {...rest}>
         {@render children?.()}
     </div>
-{/if}
+</div>

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

@@ -1,28 +1,20 @@
 import type { IvoryComponent } from '../../../types';
-import { type ComputePositionConfig } from '@floating-ui/dom';
 /** Possible placements for the popover */
-export type PopoverPlacement = ComputePositionConfig['placement'];
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
     /** The element the popover will be positioned relative to */
-    target: Element | undefined;
+    target: HTMLElement | undefined;
     /**
      * Where the popover should be positioned relative to the target.
      *
      * default: `bottom-start`
      */
     placement?: PopoverPlacement;
-    /**
-     * Callback that is called when the user clicks outside the popover or the target element.
-     */
-    onClickOutside?: (e: MouseEvent) => void;
     /**
      * Whether to place the popover automatically
-     *
-     * [Further reading](https://floating-ui.com/docs/autoPlacement)
      */
     autoplacement?: boolean;
 }
-/** A popover, positions itself relative to a target element. */
 declare const Popover: import("svelte").Component<PopoverProps, {
     close: () => void;
     open: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAI1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmEL,gEAAgE;AAChE,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/table/Column.svelte

@@ -3,6 +3,7 @@
     import { merge } from '../../utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import Element from '../basic/Element.svelte';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -12,6 +13,7 @@
         /** If the type is incorrect pass the "row" property with the right type */
         children: Snippet;
         onclick?: (e: Event) => void | Promise<void>;
+        href?: string;
         /** Cannot be used with resizable columns*/
         ignoreWidth?: boolean;
         offsetNestingLevel?: number;
@@ -21,37 +23,38 @@
 <script lang="ts">
     let {
         class: clazz,
-        children,
         onclick,
+        href,
         ignoreWidth = false,
+        offsetNestingLevel = 0,
         // ColumnConfig
+        id,
+        width,
+        minWidth,
         resizable = true,
-        offsetNestingLevel = 0,
+        header,
         ...props
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
     const tableContext = getTableContext();
-    const column = tableContext.registerColumn({ resizable, ...props });
+    const column = tableContext.registerColumn({ id, width, minWidth, resizable, header });
     const rowContext = getRowContext();
 
     const finalOnClick = $derived(onclick || rowContext.onclick);
-    const allowClicking = $derived(!!(onclick || rowContext.onclick));
-
-    const element = $derived.by(() => {
-        if (finalOnClick) return 'button';
-        if (rowContext.href) return 'a';
-        return 'div';
+    const finalHref = $derived.by(() => {
+        if (finalOnClick) return undefined;
+        return href || rowContext.href;
     });
 
     // passes updated props to the column
     $effect(() => {
-        column.updateConfig({ resizable, ...props });
+        column.updateConfig({ resizable, minWidth, id, header });
     });
 
     // this must be separate to the above effect, since otherwise the width would be reset on every scroll
     $effect(() => {
-        if (!resizable && typeof props.width !== 'undefined') column.width = props.width;
+        if (!resizable && typeof width !== 'undefined') column.width = width;
     });
 
     const widthStyle = $derived(
@@ -60,11 +63,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={element}
-    onclick={allowClicking ? finalOnClick : undefined}
-    href={!allowClicking ? rowContext.href : undefined}
-    type={allowClicking ? 'button' : undefined}
+<Element
+    {...props}
+    onclick={finalOnClick}
+    href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
     class={merge([
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
@@ -72,6 +74,4 @@
         theme.current.table?.column?.class,
         clazz
     ])}
->
-    {@render children()}
-</svelte:element>
+/>

package/dist/components/table/Column.svelte.d.ts

@@ -6,6 +6,7 @@ export interface ColumnProps extends ColumnConfig {
     /** If the type is incorrect pass the "row" property with the right type */
     children: Snippet;
     onclick?: (e: Event) => void | Promise<void>;
+    href?: string;
     /** Cannot be used with resizable columns*/
     ignoreWidth?: boolean;
     offsetNestingLevel?: number;

package/dist/components/table/Column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAyDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAwDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.3.2",
+    "version": "0.3.4",
     "keywords": [
         "svelte"
     ],
@@ -71,7 +71,6 @@
         "test:unit": "vitest"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.7.4",
         "@lucide/svelte": "^0.553.0",
         "@oddbird/css-anchor-positioning": "^0.8.0",
         "@tailwindcss/forms": "^0.5.10",

package/src/lib/components/basic/Element.svelte

@@ -42,11 +42,11 @@
     }: ElementProps & { div?: HTMLElement } = $props();
 
     function isAnchor(props: ElementProps): props is AnchorAttributes {
-        return 'href' in props;
+        return 'href' in props && typeof props.href !== 'undefined';
     }
 
     function isButton(props: ElementProps): props is ButtonAttributes {
-        return 'onclick' in props || 'type' in props;
+        return ('onclick' in props && typeof props.onclick !== 'undefined') || 'type' in props;
     }
 </script>
 

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

@@ -33,6 +33,8 @@
     style="min-width: {target?.getBoundingClientRect().width}px;"
     class="py-3"
     placement="top"
+    autoplacement
+    popover="manual"
 >
     <div class="bg-surface-50-950 flex w-full flex-col gap-2 rounded p-4 shadow-lg">
         {#each requirements as requirement (requirement.re)}

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

@@ -1,39 +1,36 @@
 <script lang="ts" module>
-    import { browser } from '$app/environment';
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
-    import { clickOutside } from '$lib/utils/attachments';
-    import {
-        autoPlacement,
-        autoUpdate,
-        computePosition,
-        flip,
-        shift,
-        type ComputePositionConfig
-    } from '@floating-ui/dom';
+    import { pseudoRandomId } from '$lib/utils/functions';
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
 
     /** Possible placements for the popover */
-    export type PopoverPlacement = ComputePositionConfig['placement'];
+    export type PopoverPlacement =
+        | 'top'
+        | 'top-start'
+        | 'top-end'
+        | 'right'
+        | 'right-start'
+        | 'right-end'
+        | 'bottom'
+        | 'bottom-start'
+        | 'bottom-end'
+        | 'left'
+        | 'left-start'
+        | 'left-end';
 
     export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
         /** The element the popover will be positioned relative to */
-        target: Element | undefined;
+        target: HTMLElement | undefined;
         /**
          * Where the popover should be positioned relative to the target.
          *
          * default: `bottom-start`
          */
         placement?: PopoverPlacement;
-        /**
-         * Callback that is called when the user clicks outside the popover or the target element.
-         */
-        onClickOutside?: (e: MouseEvent) => void;
         /**
          * Whether to place the popover automatically
-         *
-         * [Further reading](https://floating-ui.com/docs/autoPlacement)
          */
         autoplacement?: boolean;
     }
@@ -45,66 +42,139 @@
         style: externalStyle,
         target,
         placement = 'bottom-start',
-        onClickOutside = close,
         children,
         autoplacement,
+        popover = 'auto',
         ...rest
     }: PopoverProps = $props();
 
-    let style: string = $state('');
-    let popover: HTMLDivElement | undefined = $state();
+    let popoverEl: HTMLDivElement | undefined = $state();
+    const anchorName = `--${pseudoRandomId('anchor-')}`;
+
+    const getStyles = (
+        placement: PopoverPlacement,
+        anchorName: string,
+        autoplacement?: boolean
+    ) => {
+        let styles = `position-anchor: ${anchorName}; margin: 0; inset: auto;`;
+        if (autoplacement) {
+            styles += ` position-try: flip-block, flip-inline;`;
+        }
+
+        switch (placement) {
+            case 'top':
+                return (
+                    styles +
+                    ` bottom: anchor(${anchorName} top); left: anchor(${anchorName} center); translate: -50% 0;`
+                );
+            case 'top-start':
+                return (
+                    styles +
+                    ` bottom: anchor(${anchorName} top); left: anchor(${anchorName} start);`
+                );
+            case 'top-end':
+                return (
+                    styles + ` bottom: anchor(${anchorName} top); right: anchor(${anchorName} end);`
+                );
 
-    const postion = async (open: boolean) => {
-        if (!open || !popover || !browser || !target) return;
-        const { x, y } = await computePosition(target, popover, {
-            middleware: [shift(), ...(autoplacement ? [autoPlacement()] : [flip()])],
-            placement
-        });
-        style = `top: ${y}px; left: ${x}px;`;
+            case 'bottom':
+                return (
+                    styles +
+                    ` top: anchor(${anchorName} bottom); left: anchor(${anchorName} center); translate: -50% 0;`
+                );
+            case 'bottom-start':
+                return (
+                    styles +
+                    ` top: anchor(${anchorName} bottom); left: anchor(${anchorName} start);`
+                );
+            case 'bottom-end':
+                return (
+                    styles + ` top: anchor(${anchorName} bottom); right: anchor(${anchorName} end);`
+                );
+
+            case 'left':
+                return (
+                    styles +
+                    ` right: anchor(${anchorName} left); top: anchor(${anchorName} center); translate: 0 -50%;`
+                );
+            case 'left-start':
+                return (
+                    styles + ` right: anchor(${anchorName} left); top: anchor(${anchorName} top);`
+                );
+            case 'left-end':
+                return (
+                    styles +
+                    ` right: anchor(${anchorName} left); bottom: anchor(${anchorName} bottom);`
+                );
+
+            case 'right':
+                return (
+                    styles +
+                    ` left: anchor(${anchorName} right); top: anchor(${anchorName} center); translate: 0 -50%;`
+                );
+            case 'right-start':
+                return (
+                    styles + ` left: anchor(${anchorName} right); top: anchor(${anchorName} top);`
+                );
+            case 'right-end':
+                return (
+                    styles +
+                    ` left: anchor(${anchorName} right); bottom: anchor(${anchorName} bottom);`
+                );
+
+            default:
+                return (
+                    styles +
+                    ` top: anchor(${anchorName} bottom); left: anchor(${anchorName} start);`
+                );
+        }
     };
 
     let currentlyOpen = $state(false);
+    let style = $derived(getStyles(placement, anchorName, autoplacement));
+
+    $effect(() => {
+        if (target) {
+            target.style.setProperty('anchor-name', anchorName);
+            return () => {
+                target.style.removeProperty('anchor-name');
+            };
+        }
+    });
+
+    $effect(() => {
+        if (!popoverEl) return;
+
+        const handleToggle = (e: ToggleEvent) => {
+            const newState = e.newState === 'open';
+            currentlyOpen = newState;
+        };
+
+        popoverEl.addEventListener('toggle', handleToggle);
+        return () => popoverEl?.removeEventListener('toggle', handleToggle);
+    });
 
-    let cleanup: () => void = () => {};
     export function close() {
-        currentlyOpen = false;
-        cleanup();
+        popoverEl?.hidePopover();
     }
 
     export function open() {
-        currentlyOpen = true;
-        if (!target || !popover) return;
-        cleanup = autoUpdate(target, popover, () => postion(true));
+        if (popoverEl) popoverEl.showPopover();
     }
 
     export function toggle() {
-        currentlyOpen = !currentlyOpen;
+        if (currentlyOpen) close();
+        else open();
     }
 
+    // Now this is reactive!
     export function isOpen() {
         return currentlyOpen;
     }
-
-    // TODO: this is kinda hacky
-    $effect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        [popover, target];
-        postion(currentlyOpen);
-    });
 </script>
 
-<!-- 
-    @component
-    A popover, positions itself relative to a target element.
--->
-{#if currentlyOpen}
-    <div
-        class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
-        style={style + ' ' + externalStyle}
-        bind:this={popover}
-        {@attach clickOutside({ callback: onClickOutside, target })}
-        {...rest}
-    >
+<div bind:this={popoverEl} {style} {popover} class="bg-transparent">
+    <div class={twMerge(clsx(theme.current.popover?.class, clazz))} style={externalStyle} {...rest}>
         {@render children?.()}
     </div>
-{/if}
+</div>

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

@@ -3,6 +3,7 @@
     import { merge } from '$lib/utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import Element from '../basic/Element.svelte';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -12,6 +13,7 @@
         /** If the type is incorrect pass the "row" property with the right type */
         children: Snippet;
         onclick?: (e: Event) => void | Promise<void>;
+        href?: string;
         /** Cannot be used with resizable columns*/
         ignoreWidth?: boolean;
         offsetNestingLevel?: number;
@@ -21,37 +23,38 @@
 <script lang="ts">
     let {
         class: clazz,
-        children,
         onclick,
+        href,
         ignoreWidth = false,
+        offsetNestingLevel = 0,
         // ColumnConfig
+        id,
+        width,
+        minWidth,
         resizable = true,
-        offsetNestingLevel = 0,
+        header,
         ...props
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
     const tableContext = getTableContext();
-    const column = tableContext.registerColumn({ resizable, ...props });
+    const column = tableContext.registerColumn({ id, width, minWidth, resizable, header });
     const rowContext = getRowContext();
 
     const finalOnClick = $derived(onclick || rowContext.onclick);
-    const allowClicking = $derived(!!(onclick || rowContext.onclick));
-
-    const element = $derived.by(() => {
-        if (finalOnClick) return 'button';
-        if (rowContext.href) return 'a';
-        return 'div';
+    const finalHref = $derived.by(() => {
+        if (finalOnClick) return undefined;
+        return href || rowContext.href;
     });
 
     // passes updated props to the column
     $effect(() => {
-        column.updateConfig({ resizable, ...props });
+        column.updateConfig({ resizable, minWidth, id, header });
     });
 
     // this must be separate to the above effect, since otherwise the width would be reset on every scroll
     $effect(() => {
-        if (!resizable && typeof props.width !== 'undefined') column.width = props.width;
+        if (!resizable && typeof width !== 'undefined') column.width = width;
     });
 
     const widthStyle = $derived(
@@ -60,11 +63,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={element}
-    onclick={allowClicking ? finalOnClick : undefined}
-    href={!allowClicking ? rowContext.href : undefined}
-    type={allowClicking ? 'button' : undefined}
+<Element
+    {...props}
+    onclick={finalOnClick}
+    href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
     class={merge([
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
@@ -72,6 +74,4 @@
         theme.current.table?.column?.class,
         clazz
     ])}
->
-    {@render children()}
-</svelte:element>
+/>