@delightstack/components 0.1.0

package/dist/actions/Modal.svelte

@@ -0,0 +1,474 @@
+<script lang="ts" module>
+	let lastClickedElement = undefined as HTMLElement | undefined;
+	let lastClickedListenerCount = 0;
+	function onDocumentClick(event: MouseEvent) {
+		lastClickedElement = event.target as HTMLElement;
+	}
+	/** Listen for the last clicked element while at least one modal is mounted. Returns a cleanup */
+	function listenForLastClickedElement() {
+		if (!document) return;
+		lastClickedListenerCount++;
+		if (lastClickedListenerCount === 1) {
+			document.addEventListener('pointerdown', onDocumentClick);
+		}
+		return () => {
+			lastClickedListenerCount--;
+			if (lastClickedListenerCount === 0) {
+				document.removeEventListener('pointerdown', onDocumentClick);
+			}
+		};
+	}
+</script>
+
+<script lang="ts">
+	import { crossfade, fade, scale } from 'svelte/transition';
+	import { quartOut } from 'svelte/easing';
+	import { type Snippet } from 'svelte';
+	import { focusTrap, generateID, ripple } from '@delightstack/utilities';
+	import Button from './Button.svelte';
+	import { scrollbar } from './scrollbar';
+
+	let {
+		/** Title text displayed as the dialog header */
+		title = '',
+
+		/** Determines whether the dialog is open or not */
+		open = $bindable(false) as boolean,
+
+		/** Determines whether the dialog can be conventially closed using the escape key or backdrop click. */
+		closable = true,
+
+		/** Whether the close icon should be hidden or not */
+		disable_close_icon = false,
+
+		/** The ID of the modal - used to set/unset transition targets automatically */
+		modal_id = '',
+
+		/** The CSS string width of the modal (when on desktop) */
+		width = '',
+
+		/** The CSS string height of the modal (when on desktop) */
+		height = '',
+
+		/** The CSS string maximum width of the modal */
+		max_width = 'calc(100vw - 2rem)',
+
+		/** The CSS string maximum height of the modal */
+		max_height = 'calc(100svh - 2rem)',
+
+		/** The element that the modal will be animated from  when opening */
+		transition_target = undefined as HTMLElement | Element | undefined,
+
+		/** The css style string added to the component from the parent */
+		style = '',
+
+		/** Specifies a custom class name for the dialog */
+		class: class_name = '',
+
+		/** The snippet used to render the modal body */
+		children = undefined as undefined | Snippet,
+
+		/** The snippet used to render the header bar */
+		header = undefined as undefined | Snippet,
+
+		/** The snippet used to render a child at the start of the header bar. Can't be used if 'header' is supplied */
+		header_start = undefined as undefined | Snippet,
+
+		/** The snippet used to render a child at the end of the header bar. Can't be used if 'header' is supplied */
+		header_end = undefined as undefined | Snippet,
+
+		/** The snippet used to render the modal footer */
+		footer = undefined as undefined | Snippet,
+
+		/** The snippet used to render the modal footer at the start. Can't be used if 'footer' is supplied */
+		footer_start = undefined as undefined | Snippet,
+
+		/** The snippet used to render the modal footer at the end. Can't be used if 'footer' is supplied */
+		footer_end = undefined as undefined | Snippet,
+
+		/** The function to call when the dialog is closed. If false is returned, the modal will not be closed */
+		onclose = undefined as undefined | (() => boolean | undefined | void),
+
+		/** The function to call when the dialog is opened */
+		onopen = undefined as undefined | (() => void),
+
+		/** The function to call when the backdrop is clicked */
+		onbackdropclick = undefined as undefined | (() => void),
+
+		...rest
+	} = $props();
+
+	const titleId = `modal-title-${generateID({ length: 6 })}`;
+	const bodyId = `modal-body-${generateID({ length: 6 })}`;
+	const easing = (t: number, factor = 0.5) => quartOut(t) * factor + (1 - factor);
+	let _open = $state(open);
+	$effect(() => listenForLastClickedElement());
+	$effect(() => {
+		if (open === _open) return;
+		const target = transition_target || lastClickedElement;
+		if (target && open) send(target, { key: 'modal' });
+		_open = open;
+	});
+
+	// Setup the send/receive animation so the modal body can be animated into existence
+	const [send, receive] = crossfade({
+		duration: 300,
+		easing,
+		fallback: (node) => {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+			return {
+				duration: 300,
+				easing,
+				css: (t) => `transform: ${transform} translateZ(0px) scale(${t}); opacity: ${t}`,
+			};
+		},
+	});
+
+	function close() {
+		if (closable && _open) {
+			const accepted = onclose?.() ?? true;
+			if (accepted) {
+				_open = false;
+				open = false;
+			}
+		}
+	}
+	function handleEscapeKey({ key }: KeyboardEvent) {
+		if (key === 'Escape') close();
+	}
+
+	function mountModal(node: HTMLElement) {
+		if (onopen) onopen();
+		if (transition_target) transition_target = undefined;
+		return {
+			destroy: () => {
+				if (_open) return;
+				if (onclose) onclose();
+			},
+		};
+	}
+</script>
+
+<svelte:window onkeyup={handleEscapeKey} />
+
+{#if _open}
+	<div
+		class={['modal', class_name].filter(Boolean).join(' ')}
+		{style}
+		in:receive={{ key: 'modal' }}
+		out:scale={{ duration: 100, start: 0.75 }}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={titleId}
+		aria-describedby={bodyId}
+		{@attach focusTrap({
+			escapeDeactivates: false,
+			allowOutsideClick: true,
+			returnFocusOnDeactivate: true,
+			initialFocus: false,
+		})}
+		use:mountModal
+		{...rest}>
+		<div
+			class="body"
+			class:has-footer={!!(footer || footer_start || footer_end)}
+			id={bodyId}
+			style:width
+			style:height
+			style:max-width={max_width}
+			style:max-height={max_height}
+			{@attach scrollbar()}>
+			{#if (closable && !disable_close_icon) || title || header || header_start || header_end}
+				<header
+					class:bar={title || header || header_start || header_end}
+					class:no-close={!closable || disable_close_icon}>
+					{#if closable && !disable_close_icon}
+						<div class="close">
+							<Button transparent icon onclick={close} size="0">
+								<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+									<path
+										d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+								</svg>
+							</Button>
+						</div>
+					{/if}
+					{#if title}<h2>{title}</h2>{/if}
+					{#if header}
+						{@render header()}
+					{:else}
+						{#if header_start}{@render header_start()}{/if}
+						<div class="spacer"></div>
+						{#if header_end}{@render header_end()}{/if}
+					{/if}
+				</header>
+			{/if}
+			{#if children}{@render children()}{/if}
+			{#if footer || footer_start || footer_end}
+				<footer>
+					{#if footer}
+						{@render footer()}
+					{:else}
+						{#if footer_start}{@render footer_start()}{/if}
+						<div class="spacer"></div>
+						{#if footer_end}{@render footer_end()}{/if}
+					{/if}
+				</footer>
+			{/if}
+		</div>
+		<div class="modal-fg"></div>
+	</div>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="modal-bg"
+		style:cursor={closable ? 'pointer' : ''}
+		style:pointer-events={closable ? '' : 'none'}
+		role="button"
+		tabindex="-1"
+		{@attach ripple()}
+		onclick={() => {
+			if (onbackdropclick) onbackdropclick();
+			close();
+		}}
+		in:fade={{ duration: 250, delay: 50 }}
+		out:fade={{ duration: 120 }}>
+	</div>
+{/if}
+
+<style>
+	:global(html:has(.modal)) {
+		overflow: hidden;
+	}
+	:global(::view-transition-old(modal-fg)),
+	:global(::view-transition-new(modal-fg)) {
+		/* Prevent the default animation,
+		so both views remain opacity:1 throughout the transition */
+		animation: none;
+		/* Use normal blending,
+		so the new view sits on top and obscures the old view */
+		mix-blend-mode: normal;
+		/* Make the height the same as the group,
+		meaning the view size might not match its aspect-ratio. */
+		height: 100%;
+		/* Clip any overflow of the view */
+		overflow: clip;
+	}
+	.modal {
+		/* panel sits one above the backdrop, which is at --layer-modal */
+		--layer: calc(var(--layer-modal) + 1);
+		/* Private tokens: the panel wants a bigger radius/shadow than the shared
+		   defaults, but redefining --radius-lg/--shadow-md here would leak into
+		   every component rendered inside the modal. The radius is clamped so an
+		   over-rounded --radius-2xl can't turn this large panel into a blob — see
+		   --radius-cap. Every panel surface (.body/.modal-fg/.close) inherits it. */
+		--_radius: min(var(--radius-2xl), var(--radius-cap, 40px));
+		--_shadow: var(--shadow-lg);
+		display: grid;
+		position: fixed;
+		z-index: var(--layer);
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		grid-template-columns: 100%;
+		grid-template-rows: 100%;
+		width: 100%;
+		height: 100%;
+		align-content: center;
+		justify-content: center;
+		pointer-events: none;
+
+		@media (min-width: 768px) {
+			overflow: hidden;
+			grid-template-rows: max-content;
+			grid-template-columns: max-content;
+			border-radius: var(--_radius);
+			@supports (corner-shape: squircle) {
+				corner-shape: squircle;
+				border-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+			}
+		}
+
+		header {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			background-color: var(--color-bg);
+			z-index: 2;
+			gap: 0.5rem;
+			padding: 0.5rem 0.5rem 0.5rem 0;
+			overflow-x: auto;
+			@media (max-width: 767px) {
+				width: 100%;
+				:global(> *) {
+					flex-shrink: 0;
+				}
+				h2 {
+					font-size: 1.15rem;
+				}
+			}
+			@media (min-width: 768px) {
+				&.bar {
+					padding: 0;
+					position: sticky;
+					margin: -1.5rem -1rem 0.5rem -1.25rem;
+					height: 4rem;
+					top: calc(-2rem - 1px);
+					bottom: unset;
+					left: unset;
+					overflow-x: hidden;
+					/* Without a close button the title sits on the edge of the bar;
+					   pad it so its distance from the panel's left edge matches its
+					   distance from the top. */
+					&.no-close {
+						padding-inline-start: 1.25rem;
+						/*padding-block-start: 0.5rem;*/
+						margin-block-start: -1rem;
+					}
+				}
+			}
+			@media (max-width: 767px) {
+				&.no-close {
+					padding-inline-start: 0.75rem;
+				}
+			}
+			&:not(.bar) {
+				background-color: transparent;
+				position: sticky;
+				left: 0;
+				top: -1rem;
+				bottom: unset;
+				height: 4rem;
+				width: 4rem;
+				margin: -3rem 0 0 -2rem;
+				overflow: hidden;
+				@media (min-width: 768px) {
+					left: -1rem;
+					top: -2rem;
+					margin: -2rem 0 0 -2rem;
+				}
+			}
+			.close {
+				position: sticky;
+				left: 0;
+				background-color: var(--color-bg);
+				border-radius: var(--_radius);
+				@supports (corner-shape: squircle) {
+					corner-shape: squircle;
+					border-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+				}
+			}
+			.spacer {
+				flex: 1;
+			}
+		}
+	}
+	.body {
+		grid-column: 1 / 1;
+		grid-row: 1 / 1;
+		height: 100%;
+		z-index: 1;
+		padding: 1rem 0.5rem;
+		view-transition-name: modal-body;
+		overflow-y: auto;
+		overflow-x: hidden;
+		overscroll-behavior: contain;
+		pointer-events: auto;
+		/* The overlay scrollbar takes no layout space (the native gutter that
+		   scrollbar-gutter: stable both-edges used to reserve is gone), so the
+		   inline padding carries the full edge distance itself. */
+		scrollbar-gutter: stable both-edges;
+		@media (max-width: 767px) {
+			min-width: 100vw;
+			padding-bottom: 4rem;
+		}
+		@media (min-width: 768px) {
+			padding: 2rem 2.5rem;
+			/* The body is the scroll container, so its own rounded clip is what
+			   actually crops the sticky header/footer. Match the panel's squircle
+			   corners — without this their square boxes bleed over the curve. */
+			border-radius: var(--_radius);
+			@supports (corner-shape: squircle) {
+				corner-shape: squircle;
+				border-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+			}
+			/* The footer carries its own bottom spacing (and must end flush with
+			   the body's content box for sticky positioning to leave it at the
+			   bottom edge — a negative margin over padding gets clamped back up,
+			   overlapping the content above). */
+			&.has-footer {
+				padding-bottom: 0;
+			}
+		}
+		/* Corner inset for the styled-native fallback (pre-JS / no overlay) */
+		--scrollbar-track-inset: calc(var(--_radius, 10px) / 2);
+	}
+	footer {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		justify-content: flex-end;
+		background-color: var(--color-bg);
+		border-top: 1px solid var(--color-border, rgb(from var(--color-text) r g b / 0.1));
+		/* Full-bleed: negative inline margins cancel the body's padding so the
+		   divider spans edge to edge, like the header bar. */
+		margin: 1rem -0.5rem 0;
+		padding: 0.75rem 1rem;
+		@media (min-width: 768px) {
+			/* The body drops its bottom padding when a footer is present (see
+			   .body.has-footer), so the footer ends flush with the modal's
+			   bottom edge and sticks there while long content scrolls underneath.
+			   Actions sit closer to the edge than body content would (1rem vs the
+			   body's 2rem) — a chrome row, not content. */
+			position: sticky;
+			bottom: 0;
+			z-index: 2;
+			margin: 1.5rem -2.5rem 0;
+			/* Inline padding matches the block padding, so the action buttons sit
+			   the same distance from the bottom and side edges. */
+			padding: 1.5rem;
+		}
+		/* On mobile the footer stays in flow: the header bar is pinned to the
+		   bottom of the screen there, and the body's 4rem bottom padding keeps
+		   the footer clear of it. */
+	}
+	.modal-fg {
+		view-transition-name: modal-fg;
+		z-index: -1;
+		grid-column: 1 / 1;
+		grid-row: 1 / 1;
+		height: 100%;
+		background-color: var(--color-bg);
+		z-index: -1;
+		box-shadow: var(--_shadow);
+		@media (min-width: 768px) {
+			border-radius: var(--_radius);
+			@supports (corner-shape: squircle) {
+				corner-shape: squircle;
+				border-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+			}
+		}
+	}
+	.modal-bg {
+		--layer: var(--layer-modal);
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		backdrop-filter: blur(15px);
+		z-index: var(--layer);
+		&::after {
+			content: '';
+			background-color: var(--color-text);
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			opacity: 0.2;
+		}
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import { type Snippet } from 'svelte';
+declare const Modal: import("svelte").Component<{
+    title?: string;
+    open?: boolean;
+    closable?: boolean;
+    disable_close_icon?: boolean;
+    modal_id?: string;
+    width?: string;
+    height?: string;
+    max_width?: string;
+    max_height?: string;
+    transition_target?: HTMLElement | Element | undefined;
+    style?: string;
+    class?: string;
+    children?: undefined | Snippet;
+    header?: undefined | Snippet;
+    header_start?: undefined | Snippet;
+    header_end?: undefined | Snippet;
+    footer?: undefined | Snippet;
+    footer_start?: undefined | Snippet;
+    footer_end?: undefined | Snippet;
+    onclose?: undefined | (() => boolean | undefined | void);
+    onopen?: undefined | (() => void);
+    onbackdropclick?: undefined | (() => void);
+} & Record<string, any>, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

package/dist/actions/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/Modal.svelte.ts"],"names":[],"mappings":"AA0BA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAmMtC,QAAA,MAAM,KAAK;YAxL2C,MAAM;WAAS,OAAO;eAAa,OAAO;yBAAuB,OAAO;eAAa,MAAM;YAAU,MAAM;aAAW,MAAM;gBAAc,MAAM;iBAAe,MAAM;wBAAsB,WAAW,GAAG,OAAO,GAAG,SAAS;YAAU,MAAM;YAAU,MAAM;eAAa,SAAS,GAAG,OAAO;aAAW,SAAS,GAAG,OAAO;mBAAiB,SAAS,GAAG,OAAO;iBAAe,SAAS,GAAG,OAAO;aAAW,SAAS,GAAG,OAAO;mBAAiB,SAAS,GAAG,OAAO;iBAAe,SAAS,GAAG,OAAO;cAAY,SAAS,GAAG,CAAC,MAAM,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;aAAW,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC;sBAAoB,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC;oCAwLhnB,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}