lutra 0.1.29 → 0.1.30

package/dist/components/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import UiContent from "./UIContent.svelte";
+	import ModalContent from "./ModalContent.svelte";
     import { getContext, type Snippet } from "svelte";
-    import { slidefade } from "../util/transitions.js";
     import { attr } from "../util/attr.js";
 
     /**
@@ -17,7 +17,6 @@
      *   <div>bar</div>
      * {/snippet}
      * <Modal trigger={trigger} content={content} />
-     * <Modal trigger={trigger} content={content} hover />
      * </div>
      */
     let {
@@ -25,7 +24,15 @@
         content,
         buttons,
         trigger,
+        title,
         shape = "rounded",
+        unstyled = false,
+        showScrim = true,
+        closeOnScrim = true,
+        trapFocus = true,
+        dismissOnEsc = true,
+        maxWidth,
+        maxHeight,
     }: {
         /** Whether the modal should be contained with a border */
         contained?: boolean;
@@ -35,8 +42,24 @@
         trigger: Snippet<[attrs: (node: Element) => void]>;
         /** Buttons to be displayed in the modal */
         buttons?: Snippet<[close: () => void]>;
+        /** Optional title for the modal (improves a11y) */
+        title?: string;
         /** The shape of the modal */
         shape?: "rounded" | "sharp";
+        /** Whether to remove default styling */
+        unstyled?: boolean;
+        /** Whether to show the backdrop scrim */
+        showScrim?: boolean;
+        /** Whether clicking the scrim closes the modal */
+        closeOnScrim?: boolean;
+        /** Whether to trap focus within the modal */
+        trapFocus?: boolean;
+        /** Whether pressing Escape closes the modal */
+        dismissOnEsc?: boolean;
+        /** Maximum width of the modal */
+        maxWidth?: string;
+        /** Maximum height of the modal */
+        maxHeight?: string;
     } = $props();
 
     if(contained === undefined) { contained = getContext('lutra.modal.contained') ?? getContext('lutra.contained') ?? false; }
@@ -44,20 +67,20 @@
     const id = `po-${Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)}`;
     let isOpen = $state(false);
 
-    function closeModal() { document.getElementById(id)!.hidePopover(); isOpen = false; }
-    function toggleModal() { isOpen = !isOpen; }
-
-    function clickElsewhere(e: MouseEvent) {
-        if (e.target instanceof HTMLElement && !e.target.closest('.ModalContent')) {
-            closeModal();
-        }
+    function closeModal() { 
+        document.getElementById(id)?.hidePopover(); 
+        isOpen = false;
+    }
+    
+    function toggleModal() { 
+        isOpen = !isOpen; 
     }
 
     $effect(() => {
         if(isOpen) {
-            document.getElementsByTagName("html")[0].style.overflow = "hidden";
+            document.documentElement.style.overflow = "hidden";
         } else {
-            document.getElementsByTagName("html")[0].style.overflow = "auto";
+            document.documentElement.style.overflow = "";
         }
     });
 
@@ -77,19 +100,22 @@
     </div>
     {#if isOpen}
         <UiContent>
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div {id} onclick={clickElsewhere} popover="auto" class="ModalContainer">
-                <div class="ModalContent {shape}" class:contained>
-                    <div class="ModalContentInside">
-                        {@render content(closeModal)}
-                        {#if buttons}
-                            <div class="ModalActions">
-                                {@render buttons(closeModal)}
-                            </div>
-                        {/if}
-                    </div>
-                </div>
+            <div {id} popover="auto" class="ModalContainer">
+                <ModalContent
+                    {shape}
+                    {contained}
+                    {unstyled}
+                    {showScrim}
+                    {closeOnScrim}
+                    {trapFocus}
+                    {dismissOnEsc}
+                    {maxWidth}
+                    {maxHeight}
+                    {title}
+                    {buttons}
+                    children={content}
+                    close={closeModal}
+                />
             </div>
         </UiContent>
     {/if}
@@ -100,44 +126,21 @@
         position: relative;
         display: inline-block;
     }
+    
     .ModalContainer {
         border: 0;
-        width: 100vw;
-        height: 100vh;
-        background-color: var(--bg-overlay);
-        backdrop-filter: var(--overlay-filter);
+        width: 100svw;
+        height: 100svh;
         overflow-y: auto;
-    }
-    .ModalContent {
-        background: var(--bg, var(--background-main));
-        box-shadow: var(--shadow);
-        opacity: 1;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        box-shadow: 0 0.25rem 1rem 0 var(--shadow);
-    }
-    .ModalContentInsize {
-        container-type: inline-size;
-    }
-    .ModalContent.rounded {
-        border-radius: var(--border-radius);
-    }
-    .ModalContent.contained {
-        border: var(--border);
-    }
-    .ModalActions {
         display: flex;
-        gap: 1rem;
-        border-top: var(--border);
-        justify-content: flex-end;
-        padding: 1rem;
-        background: var(--bg-subtle) linear-gradient(0deg, transparent, 95%, color-mix(in hsl, transparent 95%, var(--mix-target)));
+        align-items: center;
+        justify-content: center;
     }
+    
     [popover] {
         animation: fadeIn 0.2s;
     }
+    
     @keyframes fadeIn {
         from {
             opacity: 0;

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

@@ -8,8 +8,24 @@ type $$ComponentProps = {
     trigger: Snippet<[attrs: (node: Element) => void]>;
     /** Buttons to be displayed in the modal */
     buttons?: Snippet<[close: () => void]>;
+    /** Optional title for the modal (improves a11y) */
+    title?: string;
     /** The shape of the modal */
     shape?: "rounded" | "sharp";
+    /** Whether to remove default styling */
+    unstyled?: boolean;
+    /** Whether to show the backdrop scrim */
+    showScrim?: boolean;
+    /** Whether clicking the scrim closes the modal */
+    closeOnScrim?: boolean;
+    /** Whether to trap focus within the modal */
+    trapFocus?: boolean;
+    /** Whether pressing Escape closes the modal */
+    dismissOnEsc?: boolean;
+    /** Maximum width of the modal */
+    maxWidth?: string;
+    /** Maximum height of the modal */
+    maxHeight?: string;
 };
 declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/ModalContent.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
+
+	let {
+		children,
+		buttons,
+		close,
+		title,
+		shape = 'rounded',
+		contained = true,
+		unstyled = false,
+		showScrim = true,
+		closeOnScrim = true,
+		trapFocus = true,
+		dismissOnEsc = true,
+		maxWidth,
+		maxHeight,
+	}: {
+		children: Snippet<[close: () => void]>;
+		buttons?: Snippet<[close: () => void]>;
+		close: () => void;
+		title?: string;
+		shape?: 'rounded' | 'sharp';
+		contained?: boolean;
+		unstyled?: boolean;
+		showScrim?: boolean;
+		closeOnScrim?: boolean;
+		trapFocus?: boolean;
+		dismissOnEsc?: boolean;
+		maxWidth?: string;
+		maxHeight?: string;
+	} = $props();
+
+	let dialogEl: HTMLDivElement | null = $state(null);
+	let previousActiveElement: HTMLElement | null = null;
+	const titleId = title ? `modal-title-${crypto.randomUUID()}` : undefined;
+
+	onMount(() => {
+		previousActiveElement = document.activeElement as HTMLElement;
+		if (dialogEl && trapFocus) {
+			// Focus first focusable element
+			const focusableElements = getFocusableElements();
+			if (focusableElements.length > 0) {
+				focusableElements[0].focus();
+			}
+		}
+	});
+
+	onDestroy(() => {
+		// Restore focus on unmount
+		previousActiveElement?.focus();
+	});
+
+	function getFocusableElements(): HTMLElement[] {
+		if (!dialogEl) return [];
+		const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+		return Array.from(dialogEl.querySelectorAll(selector));
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (dismissOnEsc && e.key === 'Escape') {
+			e.preventDefault();
+			close();
+			return;
+		}
+
+		if (trapFocus && e.key === 'Tab') {
+			const focusableElements = getFocusableElements();
+			if (focusableElements.length === 0) return;
+
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+			const activeElement = document.activeElement;
+
+			if (e.shiftKey) {
+				// Shift+Tab
+				if (activeElement === firstElement) {
+					e.preventDefault();
+					lastElement.focus();
+				}
+			} else {
+				// Tab
+				if (activeElement === lastElement) {
+					e.preventDefault();
+					firstElement.focus();
+				}
+			}
+		}
+	}
+
+	function handleScrimClick(e: MouseEvent) {
+		if (closeOnScrim && e.target === e.currentTarget) {
+			close();
+		}
+	}
+</script>
+
+{#if showScrim}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="ModalScrim" onclick={handleScrimClick}></div>
+{/if}
+
+<div
+	class="ModalContent {shape}"
+	class:contained
+	class:unstyled
+	role="dialog"
+	aria-modal="true"
+	aria-labelledby={titleId}
+	tabindex="-1"
+	bind:this={dialogEl}
+	onkeydown={handleKeydown}
+	style="--modal-max-width: {maxWidth}; --modal-max-height: {maxHeight};"
+>
+	<div class="ModalContentArea">
+		{#if title}
+			<h2 id={titleId} class="ModalTitle">{title}</h2>
+		{/if}
+		{@render children(close)}
+	</div>
+	{#if buttons}
+		<div class="ModalActions">
+			{@render buttons(close)}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.ModalScrim {
+		background: var(--scrim-background);
+		backdrop-filter: var(--scrim-backdrop-filter);
+		position: fixed;
+		inset: 0;
+		z-index: -1;
+	}
+
+	.ModalContent {
+		display: grid;
+		grid-template-rows: 1fr auto;
+		gap: var(--modal-gap);
+		max-width: min(var(--modal-max-width, 40rem), calc(100svw - 2rem));
+		max-height: min(var(--modal-max-height, 80svh), calc(100svh - 2rem));
+		background: var(--modal-background);
+		border: var(--modal-border);
+		border-radius: var(--modal-border-radius);
+		box-shadow: 0 0.5rem 1rem var(--modal-shadow-color);
+		overflow: hidden;
+		position: relative;
+	}
+
+	.ModalContent.sharp {
+		border-radius: 0;
+	}
+
+	.ModalContent:not(.contained) {
+		border: none;
+	}
+
+	.ModalContent.unstyled {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		max-width: none;
+		max-height: none;
+		display: block;
+	}
+
+	.ModalContentArea {
+		overflow: auto;
+		scrollbar-gutter: stable;
+		scrollbar-width: thin;
+		padding: var(--modal-padding);
+		text-wrap: pretty;
+	}
+
+	.ModalContent.unstyled .ModalContentArea {
+		padding: 0;
+		overflow: visible;
+	}
+
+	.ModalTitle {
+		margin-block-start: 0;
+		margin-block-end: var(--space-md);
+		font-size: var(--font-size-h4);
+		font-weight: var(--font-weight-semibold);
+		color: var(--text-color-heading);
+		line-height: var(--font-line-height-heading);
+	}
+
+	.ModalContent.unstyled .ModalTitle {
+		margin: 0;
+	}
+
+	.ModalActions {
+		background: var(--modal-actions-background);
+		border-top: var(--modal-border-size) var(--modal-border-style) var(--modal-actions-border-color);
+		padding: var(--modal-actions-padding);
+		display: flex;
+		gap: var(--space-sm);
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.ModalContent.unstyled .ModalActions {
+		background: transparent;
+		border: none;
+		padding: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ModalContent {
+			transition: none;
+		}
+	}
+</style>
+

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet<[close: () => void]>;
+    buttons?: Snippet<[close: () => void]>;
+    close: () => void;
+    title?: string;
+    shape?: 'rounded' | 'sharp';
+    contained?: boolean;
+    unstyled?: boolean;
+    showScrim?: boolean;
+    closeOnScrim?: boolean;
+    trapFocus?: boolean;
+    dismissOnEsc?: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+};
+declare const ModalContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModalContent = ReturnType<typeof ModalContent>;
+export default ModalContent;

package/dist/components/ModalTypes.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { OverlayPosition } from './overlays.svelte.js';
+export type ModalButton = {
+    text: string;
+    variant?: 'action' | 'success' | 'danger' | 'ghost' | 'outline' | 'default';
+    onclick?: (close: () => void) => void | Promise<void>;
+    disabled?: boolean;
+    loading?: boolean;
+};
+export type ModalOptions = {
+    content: string | Snippet<[close: () => void]>;
+    title?: string;
+    buttons?: ModalButton[] | 'ok-cancel' | 'none';
+    position?: OverlayPosition;
+    width?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    shape?: 'rounded' | 'sharp';
+    contained?: boolean;
+    unstyled?: boolean;
+    showScrim?: boolean;
+    closeOnScrim?: boolean;
+    trapFocus?: boolean;
+    dismissOnEsc?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+};
+export declare const cancelButton: ModalButton;
+export declare const okButton: ModalButton;

package/dist/components/ModalTypes.js

@@ -0,0 +1,3 @@
+// Optional button presets
+export const cancelButton = { text: 'Cancel', variant: 'outline' };
+export const okButton = { text: 'OK', variant: 'action' };

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { default as MenuDropdown } from './MenuDropdown.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
 export { default as MenuItemContent } from './MenuItemContent.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as ModalContent } from './ModalContent.svelte';
 export { default as Notification } from './Notification.svelte';
 export { default as Overlay } from './Overlay.svelte';
 export { default as OverlayContainer } from './OverlayContainer.svelte';
@@ -24,5 +25,7 @@ export { default as Theme } from './Theme.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as UIContent } from './UIContent.svelte';
 export * from './MenuTypes.js';
+export * from './ModalTypes.js';
 export * from './notifications.svelte.js';
+export * from './modals.svelte.js';
 export * from './overlays.svelte.js';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export { default as MenuDropdown } from './MenuDropdown.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
 export { default as MenuItemContent } from './MenuItemContent.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as ModalContent } from './ModalContent.svelte';
 export { default as Notification } from './Notification.svelte';
 export { default as Overlay } from './Overlay.svelte';
 export { default as OverlayContainer } from './OverlayContainer.svelte';
@@ -25,5 +26,7 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as UIContent } from './UIContent.svelte';
 // Export TypeScript files and stores
 export * from './MenuTypes.js';
+export * from './ModalTypes.js';
 export * from './notifications.svelte.js';
+export * from './modals.svelte.js';
 export * from './overlays.svelte.js';

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

@@ -0,0 +1,5 @@
+import type { ModalOptions } from './ModalTypes.js';
+export declare function openModal(opts: ModalOptions | string): {
+    id: string;
+    close: () => void;
+};

package/dist/components/modals.svelte.js

@@ -0,0 +1,107 @@
+import { addOverlay, removeOverlay } from './overlays.svelte.js';
+import ModalContent from './ModalContent.svelte';
+import { cancelButton, okButton } from './ModalTypes.js';
+let modalCount = $state(0);
+let activeElement = null;
+function lockScroll() {
+    if (modalCount === 0) {
+        activeElement = document.activeElement;
+        document.documentElement.style.overflow = 'hidden';
+    }
+    modalCount++;
+}
+function unlockScroll() {
+    modalCount--;
+    if (modalCount === 0) {
+        document.documentElement.style.overflow = '';
+        activeElement?.focus();
+        activeElement = null;
+    }
+}
+export function openModal(opts) {
+    const id = crypto.randomUUID();
+    if (typeof opts === 'string') {
+        opts = { content: opts };
+    }
+    const close = () => {
+        removeOverlay(id);
+        unlockScroll();
+        opts.onClose?.();
+    };
+    lockScroll();
+    opts.onOpen?.();
+    // Handle defaultButtons shortcut
+    let buttons;
+    if (opts.buttons === 'ok-cancel') {
+        buttons = [cancelButton, okButton];
+    }
+    else if (opts.buttons === 'none' || opts.buttons === undefined) {
+        buttons = undefined;
+    }
+    else {
+        buttons = opts.buttons;
+    }
+    const buttonsSnippet = buttons ? createButtonsSnippet(buttons, close) : undefined;
+    addOverlay({
+        id,
+        z: 200,
+        component: ModalContent,
+        props: {
+            close,
+            children: wrapContent(opts.content, close),
+            buttons: buttonsSnippet,
+            title: opts.title,
+            showScrim: opts.showScrim ?? true,
+            closeOnScrim: opts.closeOnScrim ?? true,
+            trapFocus: opts.trapFocus ?? true,
+            dismissOnEsc: opts.dismissOnEsc ?? true,
+            unstyled: opts.unstyled ?? false,
+            shape: opts.shape ?? 'rounded',
+            contained: opts.contained ?? true,
+            maxWidth: opts.maxWidth,
+            maxHeight: opts.maxHeight,
+        },
+        position: opts.position || 'center',
+        layer: 'modals',
+    });
+    return { id, close };
+}
+function wrapContent(content, close) {
+    if (typeof content === 'string') {
+        // Return a snippet that renders the string
+        return () => content;
+    }
+    return content;
+}
+function createButtonsSnippet(buttons, close) {
+    // Create a snippet that renders the buttons
+    return (closeParam) => {
+        // We need to return actual DOM elements, not strings
+        // This will be rendered by Svelte's snippet system
+        const fragment = document.createDocumentFragment();
+        buttons.forEach((btn) => {
+            const button = document.createElement('button');
+            button.className = `button ${btn.variant || 'default'}`;
+            button.textContent = btn.text;
+            button.disabled = btn.disabled || btn.loading || false;
+            if (btn.onclick) {
+                button.addEventListener('click', async () => {
+                    const result = btn.onclick?.(close);
+                    if (result instanceof Promise) {
+                        button.disabled = true;
+                        button.classList.add('loading');
+                        try {
+                            await result;
+                        }
+                        finally {
+                            button.disabled = false;
+                            button.classList.remove('loading');
+                        }
+                    }
+                });
+            }
+            fragment.appendChild(button);
+        });
+        return fragment;
+    };
+}

package/dist/css/1-props.css

@@ -460,4 +460,33 @@
 @property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
 @property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
 
-@property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+
+/**
+ * Modal
+ */
+
+@property --modal-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --modal-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --modal-shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
+
+@property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 40rem; }
+@property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 80svh; }
+@property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
+
+@property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+@property --modal-actions-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
+
+/**
+ * Scrim/Backdrop (shared across overlays)
+ */
+
+@property --scrim-background { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.5); }
+@property --scrim-backdrop-filter { syntax: "<string>"; inherits: true; initial-value: blur(2px); }

package/dist/css/2-base.css

@@ -119,6 +119,11 @@
     --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
     --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
 
+    /* Modal compound variables */
+    --modal-border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
+    --modal-padding: var(--modal-padding-block) var(--modal-padding-inline);
+    --modal-actions-padding: var(--modal-actions-padding-block) var(--modal-actions-padding-inline);
+
     --mix-target: light-dark(black, white);
 }
 

package/dist/css/themes/DefaultTheme.css

@@ -233,6 +233,26 @@
         --table-row-background-even: transparent;
         --table-row-background-hover: color-mix(in srgb, var(--theme-surface-interactive) 60%, transparent);
         --table-cell-color: var(--text-color-p);
+
+        /**
+         * Modals
+         */
+
+        --modal-background: var(--background-body);
+        --modal-border-color: var(--border-color);
+        --modal-shadow-color: var(--shadow-color);
+        --modal-actions-background: var(--theme-surface-subtlest);
+        --modal-actions-border-color: var(--border-color);
+
+        /**
+         * Scrim/Backdrop
+         */
+
+        --scrim-background: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 0.2) calc(c * 0.01) h / 0.5),
+            oklch(from var(--lutra-primary-color) calc(l * 0.1) calc(c * 0.01) h / 0.7)
+        );
+        --scrim-backdrop-filter: blur(2px);
         
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.29",
+	"version": "0.1.30",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",