@ims360/svelte-ivory 0.1.15 → 0.2.0

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

@@ -1,113 +1,130 @@
 <script lang="ts" module>
-    import { browser } from '$app/environment';
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
-    import {
-        autoPlacement,
-        autoUpdate,
-        computePosition,
-        flip,
-        shift,
-        type ComputePositionConfig
-    } from '@floating-ui/dom';
-    import clsx from 'clsx';
-    import { twMerge } from 'tailwind-merge';
-    import { clickOutside } from '../../../utils/actions/clickOutside';
-    import { Dialog } from '../dialog';
-
-    /** Possible placements for the popover */
+    import { pseudoRandomId } from '$lib/utils/functions';
+    import { merge } from '$lib/utils/merge';
+    import { type ComputePositionConfig } from '@floating-ui/dom';
+    import polyfill from '@oddbird/css-anchor-positioning/fn';
+
+    // ... (Your existing types remain unchanged)
+    type Alignment = 'start' | 'end';
+    type Side = 'top' | 'bottom' | 'left' | 'right';
+    type AlignedPlacement = `${Side}-${Alignment}` | Side;
     export type PopoverPlacement = ComputePositionConfig['placement'];
 
+    const ANCHOR_STYLES: Record<string, string> = {
+        // Bottom Placements
+        'bottom-start': 'top: anchor(bottom); left: anchor(left);',
+        bottom: 'top: anchor(bottom); left: anchor(center); translate: -50% 0;',
+        'bottom-end': 'top: anchor(bottom); right: anchor(right);',
+
+        // Top Placements
+        'top-start': 'bottom: anchor(top); left: anchor(left);',
+        top: 'bottom: anchor(top); left: anchor(center); translate: -50% 0;',
+        'top-end': 'bottom: anchor(top); right: anchor(right);',
+
+        // Left Placements
+        'left-start': 'right: anchor(left); top: anchor(top);',
+        left: 'right: anchor(left); top: anchor(center); translate: 0 -50%;',
+        'left-end': 'right: anchor(left); bottom: anchor(bottom);',
+
+        // Right Placements
+        'right-start': 'left: anchor(right); top: anchor(top);',
+        right: 'left: anchor(right); top: anchor(center); translate: 0 -50%;',
+        'right-end': 'left: anchor(right); bottom: anchor(bottom);'
+    };
+
     export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
-        /** The element the popover will be positioned relative to */
-        target: Element | 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)
-         */
+        target: HTMLElement | undefined;
+        placement?: AlignedPlacement;
         autoplacement?: boolean;
     }
 </script>
 
 <script lang="ts">
+    import { onMount, tick } from 'svelte';
+
     let {
         class: clazz,
         style: externalStyle,
         target,
         placement = 'bottom-start',
-        onClickOutside = close,
         children,
-        autoplacement,
+        popover = 'auto',
+        id = pseudoRandomId(),
         ...rest
     }: PopoverProps = $props();
 
-    let style: string = $state('');
-    let popover: HTMLDivElement | undefined = $state();
+    let popoverEl: HTMLDivElement | undefined = $state();
+    let currentlyOpen = $state(false);
 
-    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;`;
-    };
+    // 1. Load Polyfill
+    // We import the 'fn' version to manually control execution,
+    // ensuring it runs after the DOM is ready.
+    onMount(async () => {
+        if (!CSS.supports('position-anchor', '--foo')) {
+            await polyfill();
+            console.log('loaded polyfill');
+        }
+    });
 
-    let currentlyOpen = $state(false);
+    const anchorName = $derived(`--anchor-${id}`);
+
+    // 2. Anchor Association
+    $effect(() => {
+        if (!target) return;
+        const currentStyle = target.getAttribute('style') || '';
+        if (!currentStyle.includes(anchorName)) {
+            target.setAttribute('style', `anchor-name: ${anchorName}; ${currentStyle}`);
+        }
+        tick().then(() => polyfill());
+    });
+
+    $effect(() => {
+        if (!popoverEl) return;
+
+        // Use the explicit coordinates instead of position-area
+        const coords = ANCHOR_STYLES[placement] ?? ANCHOR_STYLES['bottom-start'];
+
+        // Important: We ensure position-area is NOT present
+        const polyfillStyles = `
+            position-anchor: ${anchorName}; 
+            ${coords}
+        `;
 
-    let cleanup: () => void = () => {};
-    export function close() {
-        currentlyOpen = false;
-        cleanup();
+        const combinedStyle = `${externalStyle ? externalStyle + '; ' : ''}${polyfillStyles}`;
+        popoverEl.setAttribute('style', combinedStyle);
+
+        tick().then(() => polyfill());
+    });
+
+    export async function close() {
+        popoverEl?.hidePopover();
     }
 
-    export function open() {
-        currentlyOpen = true;
-        if (!target || !popover) return;
-        cleanup = autoUpdate(target, popover, () => postion(true));
+    export async function open() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (popoverEl?.showPopover as any)();
     }
 
-    export function toggle() {
-        currentlyOpen = !currentlyOpen;
+    export async function toggle() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (popoverEl?.togglePopover as any)();
     }
 
     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}
-    <Dialog>
-        <div
-            class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
-            style={style + ' ' + externalStyle}
-            bind:this={popover}
-            use:clickOutside={{ callback: onClickOutside, target }}
-            {...rest}
-        >
-            {@render children?.()}
-        </div>
-    </Dialog>
-{/if}
+<div
+    {popover}
+    class={merge('absolute m-0', theme.current.popover?.class, clazz)}
+    bind:this={popoverEl}
+    ontoggle={(e) => {
+        currentlyOpen = e.newState === 'open';
+    }}
+    {...rest}
+>
+    {@render children?.()}
+</div>

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

@@ -3,10 +3,9 @@
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { pseudoRandomId } from '$lib/utils/functions/index';
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { onMount, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
     export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
@@ -52,12 +51,10 @@
 
 <svelte:element
     this={href ? 'a' : 'button'}
-    class={twMerge(
-        clsx(
-            'btn flex h-fit w-fit shrink-0 items-center justify-center px-0 text-xl font-bold select-none',
-            theme.current.tabs?.tab?.class?.(selected),
-            typeof clazz === 'function' ? clazz(selected) : clazz
-        )
+    class={merge(
+        'btn flex h-fit w-fit shrink-0 items-center justify-center px-0 text-xl font-bold select-none',
+        theme.current.tabs?.tab?.class?.(selected),
+        typeof clazz === 'function' ? clazz(selected) : clazz
     )}
     onclick={href
         ? undefined

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

@@ -1,8 +1,7 @@
 <script lang="ts" module>
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import type { Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
 
     export interface TooltipProps {
@@ -84,11 +83,9 @@
     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
-        )
+    class={merge(
+        'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+        tooltipClass
     )}
 >
     {#if typeof tooltip === 'string'}

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -67,14 +66,12 @@
     href={!allowClicking ? rowContext.href : undefined}
     type={allowClicking ? 'button' : undefined}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
-    class={twMerge(
-        clsx([
-            'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
-            column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
-            theme.current.table?.column?.class,
-            clazz
-        ])
-    )}
+    class={merge([
+        'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
+        column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
+        theme.current.table?.column?.class,
+        clazz
+    ])}
 >
     {@render children()}
 </svelte:element>

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
     import { getContext, setContext, type Snippet } from 'svelte';
-    import { resize } from '../../utils/actions';
+    import { resize } from '../../utils/attachments';
     import type { ColumnController } from './columnController.svelte';
 
     const CONTEXT = {};
@@ -53,12 +53,12 @@
     {@render children?.()}
     {#if column.resizable}
         <button
+            {@attach resize({ resized: onResize, dragging: onDragging })}
             type="button"
             class={[
                 'relative ml-auto h-full w-4 shrink-0 cursor-col-resize bg-inherit after:absolute after:top-0 after:right-2 after:h-full after:w-px',
                 dragging ? 'after:bg-primary-400-600' : 'group-hover:after:bg-surface-300-700'
             ]}
-            use:resize={{ resized: onResize, dragging: onDragging }}
             onmouseenter={onHoverStart}
             onmouseleave={onHoverEnd}
             onfocusin={onHoverStart}

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

@@ -1,10 +1,9 @@
 <script lang="ts" module>
+    import { merge } from '$lib/utils/merge';
     import { ChevronRight } from '@lucide/svelte';
-    import clsx from 'clsx';
     import { getContext, setContext, untrack, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { SvelteSet } from 'svelte/reactivity';
-    import { twMerge } from 'tailwind-merge';
     import ColumnComponent from './Column.svelte';
     import { ColumnController, type ColumnConfig } from './columnController.svelte';
     import ColumnHead from './ColumnHead.svelte';
@@ -200,17 +199,15 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
+    class={merge(['flex flex-col overflow-hidden border-transparent', clazz])}
     rowClass={['pl-2 pr-4', rowClass]}
     {rowHeight}
 >
     {#snippet header()}
         <div
-            class={twMerge(
-                clsx(
-                    'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
-                    headerClass
-                )
+            class={merge(
+                'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
+                headerClass
             )}
         >
             {#if results.someHaveChildren}

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

@@ -1,8 +1,7 @@
 <script lang="ts" generics="T extends { id: string }">
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { onMount, tick, untrack, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     type Props<T> = {
         class?: ClassValue;
@@ -27,7 +26,7 @@
     }: Props<T> = $props();
 
     const finalRowClass = $derived(
-        twMerge(clsx(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass]))
+        merge(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass])
     );
 
     let viewportReactivity = $state(0);
@@ -93,11 +92,7 @@
     });
 </script>
 
-<div
-    class={twMerge(
-        clsx(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])
-    )}
->
+<div class={merge(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])}>
     {#if header}
         <div class="h-fit w-full border-inherit">
             <div

package/src/lib/theme.svelte.ts

@@ -1,6 +1,10 @@
+import type { RemoteFormIssue } from '@sveltejs/kit';
 import type { ClassValue } from 'svelte/elements';
 
 export interface Theme {
+    checkbox?: {
+        class?: (checked: boolean, partial: boolean) => ClassValue;
+    };
     heading?: {
         class?: ClassValue;
     };
@@ -27,6 +31,20 @@ export interface Theme {
     popover?: {
         class?: ClassValue;
     };
+    input?: {
+        outerClass?: ClassValue;
+        class?: (value: boolean, issues?: boolean) => ClassValue;
+        label?: {
+            class?: (value: boolean, issues?: boolean) => ClassValue;
+        };
+        issues?: {
+            issue?: {
+                label?: (issue: RemoteFormIssue) => string;
+                class?: ClassValue;
+            };
+            class?: ClassValue;
+        };
+    };
 }
 
 function createTheme() {

package/src/lib/types.ts

@@ -2,8 +2,9 @@ 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 IvoryComponent<
+    RootElement extends EventTarget
+> extends HTMLAttributes<RootElement> {}
 
 export interface TransitionProps {
     inTransition?: (node: Element) => TransitionConfig;

package/src/lib/utils/attachments/clickOutside.ts

@@ -0,0 +1,36 @@
+import type { Attachment } from 'svelte/attachments';
+
+interface ClickOutsideParams {
+    /** Callback to be called when clicking outside of node */
+    callback: (e: MouseEvent) => void;
+    /** Callback is also not fired if the click target is inside this element */
+    target?: Element;
+}
+
+export const clickOutside =
+    (params: ((e: MouseEvent) => void) | ClickOutsideParams): Attachment =>
+    (node) => {
+        function handleClick(event: MouseEvent) {
+            if (
+                !(event.target instanceof Node) ||
+                !node ||
+                node.contains(event.target) ||
+                event.defaultPrevented
+            )
+                return;
+
+            if (typeof params === 'function') {
+                params(event);
+                return;
+            }
+
+            if (params.target?.contains(event.target)) return;
+            params.callback(event);
+        }
+
+        document.addEventListener('click', handleClick, true);
+
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+        };
+    };

package/src/lib/utils/attachments/focusTrap.ts

@@ -0,0 +1,67 @@
+import type { Attachment } from 'svelte/attachments';
+
+export const focusTrap =
+    (enabled: boolean): Attachment =>
+    (node) => {
+        const elementWhitelist =
+            'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+        let firstElement: HTMLElement;
+        let lastElement: HTMLElement;
+
+        function onFirstElemKeydown(e: KeyboardEvent): void {
+            if (e.shiftKey && e.code === 'Tab') {
+                e.preventDefault();
+                lastElement.focus();
+            }
+        }
+
+        function onLastElemKeydown(e: KeyboardEvent): void {
+            if (!e.shiftKey && e.code === 'Tab') {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+
+        function scanElements(fromObserver: boolean) {
+            if (enabled === false) return;
+            const focusableElems: HTMLElement[] = Array.from(
+                node.querySelectorAll(elementWhitelist)
+            );
+            if (focusableElems.length) {
+                // Set first/last focusable elements
+                firstElement = focusableElems[0];
+                lastElement = focusableElems[focusableElems.length - 1];
+                // Auto-focus first focusable element only when not called from mutation observer
+                if (!fromObserver) firstElement.focus();
+                // Listen for keydown on first & last element
+                firstElement.addEventListener('keydown', onFirstElemKeydown);
+                lastElement.addEventListener('keydown', onLastElemKeydown);
+            }
+        }
+        scanElements(false);
+
+        function cleanUp(): void {
+            if (firstElement) firstElement.removeEventListener('keydown', onFirstElemKeydown);
+            if (lastElement) lastElement.removeEventListener('keydown', onLastElemKeydown);
+        }
+
+        // Re-determine focusable elements when mutations are observed
+        const onObservationChange = (
+            mutationRecords: MutationRecord[],
+            observer: MutationObserver
+        ) => {
+            if (mutationRecords.length) {
+                cleanUp();
+                scanElements(true);
+            }
+            return observer;
+        };
+        const observer = new MutationObserver(onObservationChange);
+        observer.observe(node, { childList: true, subtree: true });
+
+        // Lifecycle
+        return () => {
+            cleanUp();
+            observer.disconnect();
+        };
+    };

package/src/lib/utils/{actions → attachments}/index.ts

@@ -1,6 +1,5 @@
 export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
-export { portal } from './portal';
 export { resize } from './resize';
 export { shortcut } from './shortcut.svelte';
 export { onFirstVisible } from './visible';

package/src/lib/utils/attachments/resize.ts

@@ -0,0 +1,38 @@
+import type { Attachment } from 'svelte/attachments';
+
+export const resize =
+    ({
+        resized,
+        dragging
+    }: {
+        resized: (mouseX: number) => void;
+        dragging: (dragging: boolean) => void;
+    }): Attachment =>
+    (node) => {
+        const onResize = (e: PointerEvent) => {
+            resized(e.clientX);
+        };
+
+        const onResizeEnd = () => {
+            dragging(false);
+            window.removeEventListener('pointermove', onResize);
+            window.removeEventListener('pointerup', onResizeEnd);
+            window.removeEventListener('pointercancel', onResizeEnd);
+
+            document.getElementsByTagName('html')[0].style.userSelect = '';
+        };
+
+        const onResizeStart = () => {
+            dragging(true);
+            window.addEventListener('pointermove', onResize);
+            window.addEventListener('pointerup', onResizeEnd);
+            window.addEventListener('pointercancel', onResizeEnd);
+
+            document.getElementsByTagName('html')[0].style.userSelect = 'none';
+        };
+        node.addEventListener('pointerdown', onResizeStart);
+
+        return () => {
+            node.removeEventListener('pointerdown', onResizeStart);
+        };
+    };

package/src/lib/utils/attachments/visible.ts

@@ -0,0 +1,22 @@
+import type { Attachment } from 'svelte/attachments';
+
+export const onFirstVisible =
+    (params: { callback: () => void; options?: Partial<IntersectionObserverInit> }): Attachment =>
+    (node) => {
+        const observer = new IntersectionObserver(
+            (e) => {
+                if (!e[0].isIntersecting) {
+                    return;
+                }
+
+                params.callback();
+            },
+            { root: null, threshold: 1, ...params.options }
+        );
+
+        observer.observe(node);
+
+        return () => {
+            observer.disconnect();
+        };
+    };

package/src/lib/utils/merge.ts

@@ -0,0 +1,7 @@
+import clsx, { type ClassArray } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** `twMerge(clsx(classes))` */
+export const merge = (...classes: ClassArray) => {
+    return twMerge(clsx(classes));
+};

package/dist/components/layout/portal/Portal.svelte

@@ -1,39 +0,0 @@
-<script lang="ts" module>
-    import type { IvoryComponent } from '../../../types';
-    import type { Snippet } from 'svelte';
-    import { portal } from '../../../utils/actions/index';
-
-    export interface PortalProps extends IvoryComponent<HTMLDivElement> {
-        children: Snippet;
-        target?: string | HTMLElement;
-    }
-
-    export interface PortalConfig {
-        defaultTarget: string;
-    }
-
-    const defaultConfig: PortalConfig = {
-        defaultTarget: 'body'
-    };
-
-    let config = $state<PortalConfig>(defaultConfig);
-    export function setConfig(newConfig: Partial<PortalConfig>) {
-        config = { ...defaultConfig, ...newConfig };
-    }
-</script>
-
-<script lang="ts">
-    let { children, target }: PortalProps = $props();
-</script>
-
-<!-- 
-    @component
-    A portal, renders its children in a different DOM element.
-
-    Wrapps the `use:portal` action.
-
-    **Use sparingy as it can make the DOM structure confusing**
--->
-<div use:portal={target ?? config.defaultTarget} hidden>
-    {@render children()}
-</div>