lutra 0.1.32 → 0.1.34

package/README.md

@@ -1,6 +1,6 @@
 # Lutra
 
-UI library for Svelte 5.
+UI library for Svelte 5 currently under active development.
 
 ## Installation
 

package/dist/components/Dialog.svelte

@@ -1,52 +1,55 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { slidefade } from "../util/transitions.js";
 
     /**
-     * @description
-     * A dialog component that follows the HTML dialog element spec.
-     * Provides a modal dialog with a backdrop and proper focus management.
+     * A simple dialog component using the native `<dialog>` element.
+     * For more features (buttons, scrim control, etc.), use `<Modal>` instead.
      */
     let {
         open = $bindable(false),
         title,
         children,
-        onClose,
+        onclose,
     }: {
-        /** [Bindable] Whether the dialog is open */
+        /** Whether the dialog is open (bindable) */
         open?: boolean;
-        /** The title of the dialog */
+        /** Optional title for the dialog header */
         title?: string;
-        /** The content of the dialog */
+        /** Dialog content */
         children: Snippet;
-        /** Callback when the dialog is closed */
-        onClose?: () => void;
+        /** Callback when dialog closes */
+        onclose?: () => void;
     } = $props();
 
-    let dialog: HTMLDialogElement;
-
-    $effect(() => {
-        if (open && dialog) {
-            dialog.showModal();
-        } else if (dialog) {
-            dialog.close();
-        }
-    });
+    let dialogEl: HTMLDialogElement | null = $state(null);
 
     function handleClose() {
-        if (onClose) onClose();
+        open = false;
+        onclose?.();
     }
 
+    function handleCancel(e: Event) {
+        handleClose();
+    }
+
+    $effect(() => {
+        if (open && dialogEl && !dialogEl.open) {
+            dialogEl.showModal();
+        } else if (!open && dialogEl?.open) {
+            dialogEl.close();
+        }
+    });
 </script>
 
 <dialog
-    bind:this={dialog}
+    bind:this={dialogEl}
     class="Dialog"
-    transition:slidefade
+    onclose={handleClose}
+    oncancel={handleCancel}
 >
     {#if title}
         <header class="DialogHeader">
-            <h6>{title}</h6>
+            <h4>{title}</h4>
         </header>
     {/if}
     <div class="DialogContent">
@@ -57,22 +60,34 @@
 <style>
     .Dialog {
         padding: 0;
-        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-        border-radius: var(--field-radius);
-        background: var(--bg-surface);
-        color: var(--fg-surface);
+        border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
+        border-radius: var(--modal-border-radius);
+        background: var(--modal-background);
+        color: var(--text-color-p);
         max-width: min(calc(100vw - 2rem), 32rem);
-        max-height: min(calc(100vh - 2rem), 32rem);
+        max-height: min(calc(100vh - 2rem), 80vh);
+        box-shadow: 0 0.5rem 1rem var(--modal-shadow-color);
     }
+
     .Dialog::backdrop {
-        background: var(--bg-scrim);
-        backdrop-filter: blur(2px);
+        background: var(--scrim-background);
+        backdrop-filter: var(--scrim-backdrop-filter);
     }
+
     .DialogHeader {
-        padding: var(--pad-m);
-        border-bottom: var(--field-border-size) var(--field-border-style) var(--field-border-color);
+        padding: var(--modal-padding-block) var(--modal-padding-inline);
+        border-bottom: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
     }
+
+    .DialogHeader h4 {
+        margin: 0;
+        font-size: var(--font-size-h5);
+        font-weight: var(--font-weight-semibold);
+        color: var(--text-color-heading);
+    }
+
     .DialogContent {
-        padding: var(--pad-m);
+        padding: var(--modal-padding-block) var(--modal-padding-inline);
+        overflow: auto;
     }
-</style>
+</style>

package/dist/components/Dialog.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    /** [Bindable] Whether the dialog is open */
+    /** Whether the dialog is open (bindable) */
     open?: boolean;
-    /** The title of the dialog */
+    /** Optional title for the dialog header */
     title?: string;
-    /** The content of the dialog */
+    /** Dialog content */
     children: Snippet;
-    /** Callback when the dialog is closed */
-    onClose?: () => void;
+    /** Callback when dialog closes */
+    onclose?: () => void;
 };
 declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;

package/dist/components/Layout.svelte

@@ -1,33 +1,34 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-    import "../css/lutra.css";
+	import "../css/lutra.css";
 	import Theme from "./Theme.svelte";
-    import OverlayContainer from "./OverlayContainer.svelte";
-    /**
-     * @description
-     * Default layout component that imports default styles and wraps the entire application in a theme.
-     */
-    let {
-        theme,
-        children,
-    }: { 
-        /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
-        theme?: 'light' | 'dark' | undefined;
-        /** The content to display. */
-        children: Snippet;
-    } = $props();
+	import ToastContainer from "./ToastContainer.svelte";
+
+	/**
+	 * Default layout component that imports styles and provides theming.
+	 * Includes ToastContainer for toast notifications.
+	 */
+	let {
+		theme,
+		children,
+	}: { 
+		/** The theme to use. Leave empty for auto-detection. */
+		theme?: 'light' | 'dark' | undefined;
+		/** The content to display. */
+		children: Snippet;
+	} = $props();
 </script>
 
 <Theme theme={theme}>
-    <div class="Layout">
-        {@render children()}
-    </div>
-    <OverlayContainer />
+	<div class="Layout">
+		{@render children()}
+	</div>
+	<ToastContainer />
 </Theme>
 
 <style>
-    .Layout {
-        min-height: 100dvh;
-        height: 100dvh;
-    }
-</style>
+	.Layout {
+		min-height: 100dvh;
+		height: 100dvh;
+	}
+</style>

package/dist/components/Layout.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
 import "../css/lutra.css";
 type $$ComponentProps = {
-    /** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
+    /** The theme to use. Leave empty for auto-detection. */
     theme?: 'light' | 'dark' | undefined;
     /** The content to display. */
     children: Snippet;

package/dist/components/MenuDropdown.svelte

@@ -1,202 +1,183 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-    import type { MenuItem as Item } from "./MenuTypes.js";
+	import type { MenuItem as Item } from "./MenuTypes.js";
 	import MenuItem from "./MenuItem.svelte";
+	import Popover from "./Popover.svelte";
 	import UiContent from "./UIContent.svelte";
-	import { arrowNavigation, getNextFocusableElement, matchOnType } from "../util/keyboard.svelte.js";
-	import { findContainingBlock, getPossiblyContainedPosition } from "../util/dom.js";
-	import Overlay from "./Overlay.svelte";
-
-    /**
-     * @description
-     * A menu component that can be used to create dropdown menus.
-     */
-    let {
-        open = $bindable(false),
-        items,
-        trigger,
-        width,
-        maxWidth,
-    }: {
-        /** Whether the menu is open */
-        open?: boolean;
-        /** The items to display in the menu */
-        items: Item[];
-        /** The trigger for the menu */
-        trigger: string | Snippet<[{ toggle: () => void, isOpen: boolean }]>;
-        /** The width of the menu */
-        width?: string;
-        /** The max width of the menu */
-        maxWidth?: string;
-    } = $props();
-
-    let _open = $state(open);
-    let triggerEl: HTMLDivElement | null = $state(null);
-    let contentEl: HTMLDivElement | null = $state(null);
-    let menuEl: HTMLDivElement | null = $state(null);
-    let currentIndex: number = $state(-1);
-    let keyboardHasFocus: boolean = $state(false);
-
-    const id = crypto.randomUUID();
-
-    $effect(() => {
-        if(_open) {
-            window.addEventListener('click', clickoutside);
-            window.addEventListener('keydown', onkeydown);
-        } else {
-            window.removeEventListener('click', clickoutside);
-            window.removeEventListener('keydown', onkeydown);
-        }
-    });
-
-    function toggle() {
-        _open = !_open;
-    }
-
-    let scrollable = $derived.by(() => {
-        if(!contentEl) return false;
-        return contentEl.scrollHeight > contentEl.clientHeight;
-    });
-
-    function onclick(e: MouseEvent) {
-        e.preventDefault();
-        _open = !_open;
-    }
-
-    function clickoutside(e: MouseEvent) {
-        if(!_open) return;
-        if(contentEl && !contentEl.contains(e.target as Node) && !triggerEl?.contains(e.target as Node)) {
-            _open = false;
-        }
-    }
-
-    function onkeydown(e: KeyboardEvent) {
-        if(!_open) return;
-        const active = document.activeElement as HTMLButtonElement | HTMLAnchorElement;
-        switch(e.key) {
-            case "Escape":
-                e.preventDefault();
-                _open = false;
-                break;
-            case "Tab":
-                // try to open the next menu if it exists
-                e.preventDefault();
-                e.stopPropagation();
-                _open = false;
-                setTimeout(() => {
-                    const nextEl = getNextFocusableElement(menuEl, triggerEl, e.shiftKey ? "previous" : "next");
-                    console.log('nextEl', nextEl)
-                    if(nextEl) {
-                        nextEl.focus();
-                        if(nextEl.tagName === "BUTTON" || nextEl.tagName === "A" && nextEl.parentElement?.classList.contains("Trigger")) {
-                            nextEl.click();
-                        }
-                    }
-                }, 0);
-                break;
-            case "ArrowDown":
-                e.preventDefault();
-                arrowNavigation(contentEl, "down");
-                matchOnType(contentEl, e); // call to reset the search
-                keyboardHasFocus = true;
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                arrowNavigation(contentEl, "up");
-                matchOnType(contentEl, e); // call to reset the search
-                keyboardHasFocus = true;
-                break;
-            case "Enter":
-            case "Space":
-                e.preventDefault();
-                active.click();
-                break;
-            default:
-                matchOnType(contentEl, e);
-        }
-    }
-
-    function mouseover(e: MouseEvent, item: Item, index: number) {
-        if(item.type === "item") {
-            currentIndex = index;
-        }
-    }
-
+	import { arrowNavigation, matchOnType } from "../util/keyboard.svelte.js";
+
+	/**
+	 * A dropdown menu using the base Popover component.
+	 * Handles menu-specific keyboard navigation and item rendering.
+	 */
+	let {
+		open = $bindable(false),
+		items,
+		trigger: triggerProp,
+		width,
+		maxWidth,
+	}: {
+		/** Whether the menu is open */
+		open?: boolean;
+		/** The items to display in the menu */
+		items: Item[];
+		/** The trigger snippet or string */
+		trigger: string | Snippet<[{ toggle: () => void; isOpen: boolean; triggerAttrs?: Record<string, string> }]>;
+		/** The width of the menu */
+		width?: string;
+		/** The max width of the menu */
+		maxWidth?: string;
+	} = $props();
+
+	let menuEl: HTMLDivElement | null = $state(null);
+	let keyboardHasFocus: boolean = $state(false);
+
+	function handleOpen() {
+		window.addEventListener("keydown", onkeydown);
+	}
+
+	function handleClose() {
+		window.removeEventListener("keydown", onkeydown);
+		keyboardHasFocus = false;
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (!open || !menuEl) return;
+		
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				arrowNavigation(menuEl, "down");
+				matchOnType(menuEl, e);
+				keyboardHasFocus = true;
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				arrowNavigation(menuEl, "up");
+				matchOnType(menuEl, e);
+				keyboardHasFocus = true;
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				(document.activeElement as HTMLElement)?.click();
+				break;
+			case "Tab":
+				e.preventDefault();
+				open = false;
+				break;
+			default:
+				matchOnType(menuEl, e);
+		}
+	}
+
+	function handleMouseover(e: MouseEvent, item: Item, index: number) {
+		if (item.type === "item") {
+			keyboardHasFocus = false;
+		}
+	}
+
+	function handleSelect(item: Item, index: number) {
+		open = false;
+	}
+
+	let scrollable = $derived.by(() => {
+		if (!menuEl) return false;
+		return menuEl.scrollHeight > menuEl.clientHeight;
+	});
+
+	const isStringTrigger = $derived(typeof triggerProp === "string");
 </script>
 
-
 <UiContent>
-    <div class="MenuDropdown" class:open={_open} bind:this={menuEl}>
-        <div
-            class="Trigger"
-            bind:this={triggerEl}
-        >
-            {#if typeof trigger === "string"}
-                <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
-                    {trigger}
-                </button>
-            {:else}
-                {@render trigger({ toggle: toggle, isOpen: _open })}
-            {/if}
-        </div>
-        {#if _open && triggerEl}
-            <Overlay position="anchor" id="o-{id}" anchor={triggerEl} layer="menu">
-                <div {id}
-                    class="MenuDropdownContent"
-                    style="--menu-width: {width}; --menu-max-width: {maxWidth};"
-                    class:scrollable={scrollable}
-                    role="menu"
-                    bind:this={contentEl}
-                >
-                    <ul>
-                        {#each items as item, index}
-                            <MenuItem {keyboardHasFocus} onmouseover={mouseover} item={item} {index} />
-                        {/each}
-                    </ul>
-                </div>
-            </Overlay>
-        {/if}
-    </div>
+	<Popover
+		bind:open
+		position="block-end span-inline-end"
+		fallbacks={["flip-block", "flip-inline", "flip-block flip-inline"]}
+		offset="0.5rem 0 0 0"
+		{width}
+		{maxWidth}
+		onopen={handleOpen}
+		onclose={handleClose}
+		class="MenuDropdownPopover"
+	>
+		{#snippet trigger(popoverArgs)}
+			<span class="MenuDropdownTrigger" style={popoverArgs.anchorAttrs.style}>
+				{#if isStringTrigger}
+					<button
+						type="button"
+						class="button"
+						{...popoverArgs.triggerAttrs}
+						aria-haspopup="menu"
+					>
+						{triggerProp}
+					</button>
+				{:else if typeof triggerProp !== "string"}
+					{@render triggerProp({ 
+						toggle: popoverArgs.toggle, 
+						isOpen: popoverArgs.isOpen,
+						triggerAttrs: popoverArgs.triggerAttrs,
+					})}
+				{/if}
+			</span>
+		{/snippet}
+
+		<div
+			class="MenuDropdownContent"
+			class:scrollable
+			role="menu"
+			bind:this={menuEl}
+		>
+			<ul>
+				{#each items as item, index}
+					<MenuItem
+						{keyboardHasFocus}
+						onmouseover={handleMouseover}
+						onselect={handleSelect}
+						{item}
+						{index}
+					/>
+				{/each}
+			</ul>
+		</div>
+	</Popover>
 </UiContent>
 
 <style>
-    .MenuDropdown {
-        position: relative;
-    }
-
-    .Trigger {
-        position: relative;
-    }
-
-    .MenuDropdownContent {
-        max-height: calc(50vh - 2rem);
-        margin: 0;
-        z-index: 1000;
-        margin: 0;
-        border: var(--menu-border-size) var(--menu-border-style) var(--menu-border-color);
-        border-radius: var(--menu-border-radius);
-        box-shadow: 0 0.5rem 1rem var(--shadow-color);
-        background-color: var(--menu-background-color);
-        width: var(--menu-width, fit-content);
-        max-width: var(--menu-max-width, 50ch);
-        overflow-x: clip;
-        overflow-y: auto;
-        scrollbar-width: thin;
-        scrollbar-color: var(--scrollbar-color);
-    }
-    
-    .MenuDropdownContent.scrollable {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .MenuDropdownContent :global(:has(li:last-of-type[data-type="item"])) {
-        padding-block-end: 0.5rem;
-    }
-
-    ul {
-        margin: 0;
-        list-style: none;
-        padding: 0;
-    }
+	.MenuDropdownTrigger {
+		display: inline-block;
+	}
+
+	:global(.MenuDropdownPopover) {
+		/* Override Popover defaults for menu styling */
+		border: var(--menu-border-size) var(--menu-border-style) var(--menu-border-color);
+		border-radius: var(--menu-border-radius);
+		box-shadow: 0 0.5rem 1rem var(--shadow-color);
+		background-color: var(--menu-background-color);
+	}
+
+	.MenuDropdownContent {
+		width: var(--popover-width, fit-content);
+		max-width: var(--popover-max-width, 50ch);
+		max-height: calc(50vh - 2rem);
+		overflow-x: clip;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-color);
+	}
+
+	.MenuDropdownContent.scrollable {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	.MenuDropdownContent :global(:has(li:last-of-type[data-type="item"])) {
+		padding-block-end: 0.5rem;
+	}
+
+	ul {
+		margin: 0;
+		list-style: none;
+		padding: 0;
+	}
 </style>

package/dist/components/MenuDropdown.svelte.d.ts

@@ -5,10 +5,11 @@ type $$ComponentProps = {
     open?: boolean;
     /** The items to display in the menu */
     items: Item[];
-    /** The trigger for the menu */
+    /** The trigger snippet or string */
     trigger: string | Snippet<[{
         toggle: () => void;
         isOpen: boolean;
+        triggerAttrs?: Record<string, string>;
     }]>;
     /** The width of the menu */
     width?: string;

package/dist/components/MenuItem.svelte

@@ -7,12 +7,14 @@
         item,
         index,
         onmouseover,
+        onselect,
         keyboardHasFocus,
         shape = 'default',
     }: {
         item: Item;
         index: number;
         onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+        onselect?: (item: Item, index: number) => void;
         keyboardHasFocus?: boolean;
         shape?: 'default' | 'rounded' | 'pill';
     } = $props();
@@ -25,6 +27,13 @@
             el?.focus();
         }
     }
+
+    function handleClick(e: MouseEvent | KeyboardEvent) {
+        if(item.type === 'item' && item.onclick) {
+            item.onclick(e as MouseEvent, item);
+            onselect?.(item, index);
+        }
+    }
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
@@ -59,7 +68,7 @@
                 {/if}
             </a>
         {:else if item.onclick}
-            <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item" bind:this={el}>
+            <button type="button" onclick={handleClick} class="Item" bind:this={el}>
                 <span class="Content">
                     <MenuItemContent {...item} />
                 </span>
@@ -67,7 +76,7 @@
                     <span class="Shortcut">{item.shortcut}</span>
                 {/if}
             </button>
-        {:else if item.component}
+        {:else if item.component || item.render || item.snippet}
             <div class="Item Custom">
                 <MenuItemContent {...item} />
             </div>