@noahbaumgartner/svelte-ui 0.0.7 → 0.0.9

package/dist/components/button/Button.svelte

@@ -246,16 +246,6 @@
 			background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
 		}
 
-		@media (pointer: coarse) {
-			.button {
-				min-height: 44px;
-			}
-
-			.button--icon-only {
-				min-width: 44px;
-			}
-		}
-
 		@media (forced-colors: active) {
 			.button {
 				border: 1px solid ButtonText;

package/dist/components/lightbox/Lightbox.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import X from '../../internal/icons/X.svelte';
+	import Button from '../button/Button.svelte';
+
+	let {
+		src,
+		alt = '',
+		aspect,
+		onclose,
+		label = 'Image',
+		closeLabel = 'Close'
+	}: {
+		src?: string;
+		alt?: string;
+		/** width / height of the image; needed for SVGs without intrinsic size */
+		aspect?: number;
+		onclose: () => void;
+		/** Accessible name of the dialog. */
+		label?: string;
+		/** Accessible name of the close button. */
+		closeLabel?: string;
+	} = $props();
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.key === 'Escape') onclose();
+	}}
+	onscroll={() => {
+		if (src) onclose();
+	}}
+/>
+
+{#if src}
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->
+	<div
+		class="lightbox-overlay"
+		role="dialog"
+		aria-modal="true"
+		aria-label={label}
+		onclick={onclose}
+		in:fade={{ duration: 200 }}
+		out:fade={{ duration: 100 }}
+	>
+		<div class="lightbox-frame">
+			<img {src} {alt} class="lightbox-img" style:--aspect={aspect} />
+			<Button
+				variant="overlay"
+				size="lg"
+				icon={X}
+				label={closeLabel}
+				class="lightbox-close"
+				onclick={(event) => {
+					event.stopPropagation();
+					onclose();
+				}}
+			/>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.lightbox-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-block: var(--lightbox-pad-block);
+		padding-inline: var(--lightbox-pad-inline);
+		background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border: none;
+		cursor: zoom-out;
+	}
+
+	@media (min-width: 640px) {
+		.lightbox-overlay {
+			--lightbox-pad-block: 64px;
+			--lightbox-pad-inline: 48px;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.lightbox-overlay {
+			--lightbox-pad-block: 96px;
+			--lightbox-pad-inline: 96px;
+		}
+	}
+
+	.lightbox-frame {
+		position: relative;
+		display: block;
+		width: fit-content;
+		max-width: 100%;
+		text-align: center;
+	}
+
+	.lightbox-img {
+		display: block;
+		margin-inline: auto;
+		max-width: 100%;
+		max-height: calc(100dvh - 2 * var(--lightbox-pad-block));
+		width: auto;
+		height: auto;
+		aspect-ratio: var(--aspect, auto);
+		/* images without intrinsic size (SVG with only a viewBox) need an explicit width */
+		min-width: min(
+			calc(100vw - 2 * var(--lightbox-pad-inline)),
+			calc((100dvh - 2 * var(--lightbox-pad-block)) * var(--aspect, 0))
+		);
+		border: 1px solid var(--color-border);
+		border-radius: 16px;
+		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
+	}
+
+	:global(.lightbox-close) {
+		position: absolute;
+		top: 12px;
+		right: 12px;
+		opacity: 0;
+	}
+
+	:global(.lightbox-close:focus-visible) {
+		opacity: 1;
+	}
+
+	@media (hover: hover) {
+		.lightbox-frame:hover :global(.lightbox-close) {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/lightbox/Lightbox.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    src?: string;
+    alt?: string;
+    /** width / height of the image; needed for SVGs without intrinsic size */
+    aspect?: number;
+    onclose: () => void;
+    /** Accessible name of the dialog. */
+    label?: string;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+};
+declare const Lightbox: import("svelte").Component<$$ComponentProps, {}, "">;
+type Lightbox = ReturnType<typeof Lightbox>;
+export default Lightbox;

package/dist/components/media-preview/MediaPreview.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import Pause from '../../internal/icons/Pause.svelte';
+	import Play from '../../internal/icons/Play.svelte';
+	import Button from '../button/Button.svelte';
+
+	let {
+		src,
+		alt = '',
+		aspectRatio = '15 / 8',
+		playLabel = 'Play',
+		pauseLabel = 'Pause'
+	}: {
+		src?: string;
+		alt?: string;
+		/** CSS aspect-ratio of the frame. */
+		aspectRatio?: string;
+		playLabel?: string;
+		pauseLabel?: string;
+	} = $props();
+
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let gifEl: HTMLImageElement | undefined = $state();
+	let canvasEl: HTMLCanvasElement | undefined = $state();
+	let playing = $state(true);
+
+	let mediaType = $derived(
+		/\.gif$/i.test(src ?? '')
+			? 'gif'
+			: /\.(png|jpe?g|webp|avif)$/i.test(src ?? '')
+				? 'image'
+				: 'video'
+	);
+
+	function toggle() {
+		if (mediaType === 'video') {
+			if (!videoEl) return;
+			if (playing) {
+				videoEl.pause();
+			} else {
+				videoEl.play();
+			}
+		} else if (mediaType === 'gif') {
+			if (playing && gifEl && canvasEl) {
+				canvasEl.width = gifEl.naturalWidth;
+				canvasEl.height = gifEl.naturalHeight;
+				canvasEl.getContext('2d')?.drawImage(gifEl, 0, 0);
+			}
+		}
+		playing = !playing;
+	}
+</script>
+
+<div class="media-preview" style:--media-preview-aspect-ratio={aspectRatio}>
+	{#if mediaType === 'image'}
+		<img class="media-preview-content" {src} {alt} />
+	{:else if mediaType === 'video'}
+		<video bind:this={videoEl} class="media-preview-content" {src} autoplay loop muted playsinline
+		></video>
+	{:else}
+		<img
+			bind:this={gifEl}
+			class="media-preview-content"
+			{src}
+			{alt}
+			style:display={playing ? 'block' : 'none'}
+		/>
+		<canvas
+			bind:this={canvasEl}
+			class="media-preview-content"
+			style:display={playing ? 'none' : 'block'}
+		></canvas>
+	{/if}
+
+	{#if mediaType !== 'image'}
+		<Button
+			variant="overlay"
+			size="lg"
+			icon={playing ? Pause : Play}
+			label={playing ? pauseLabel : playLabel}
+			onclick={toggle}
+			class="media-preview-toggle"
+		/>
+	{/if}
+</div>
+
+<style>
+	.media-preview {
+		position: relative;
+		width: 100%;
+		aspect-ratio: var(--media-preview-aspect-ratio);
+		overflow: hidden;
+		border: 1px solid var(--color-border);
+		border-radius: 10px;
+		background-color: var(--color-surface);
+		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
+	}
+
+	.media-preview-content {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	:global(.media-preview-toggle) {
+		position: absolute;
+		top: 12px;
+		right: 12px;
+	}
+</style>

package/dist/components/media-preview/MediaPreview.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    src?: string;
+    alt?: string;
+    /** CSS aspect-ratio of the frame. */
+    aspectRatio?: string;
+    playLabel?: string;
+    pauseLabel?: string;
+};
+declare const MediaPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type MediaPreview = ReturnType<typeof MediaPreview>;
+export default MediaPreview;

package/dist/components/mesh-gradient/MeshGradient.svelte

@@ -45,7 +45,7 @@
 	{...rest}
 	bind:this={ref}
 	class={['mesh-gradient', className]}
-	style:background-color={colors[0]}
+	style:--mesh-color={colors[0]}
 	aria-hidden="true"
 >
 	{#each blobs as blob, i (i)}
@@ -55,7 +55,7 @@
 			style:top="{blob.y}%"
 			style:width="{blob.size}%"
 			style:height="{blob.size}%"
-			style:background-color={blob.color}
+			style:--mesh-color={blob.color}
 			style:filter="blur({blob.blur}px)"
 		></div>
 	{/each}
@@ -69,12 +69,29 @@
 			width: 100%;
 			height: 100%;
 			overflow: hidden;
+			/* Keeps the overlay noise from blending with the page behind, which lights up the edge in dark mode. */
+			isolation: isolate;
+			background-color: var(--mesh-color);
 		}
 
 		.mesh-gradient-blob {
 			position: absolute;
 			border-radius: 50%;
 			transform: translate(-50%, -50%);
+			background-color: var(--mesh-color);
+		}
+
+		/* Pale colours would glare against a dark page, so they are mixed towards the page colour. */
+		@media (prefers-color-scheme: dark) {
+			:root:not([data-theme='light']) .mesh-gradient,
+			:root:not([data-theme='light']) .mesh-gradient-blob {
+				background-color: color-mix(in srgb, var(--mesh-color) 70%, var(--color-base));
+			}
+		}
+
+		:root[data-theme='dark'] .mesh-gradient,
+		:root[data-theme='dark'] .mesh-gradient-blob {
+			background-color: color-mix(in srgb, var(--mesh-color) 70%, var(--color-base));
 		}
 
 		.mesh-gradient::after {

package/dist/components/page-header/PageHeader.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Section from '../section/Section.svelte';
+
+	let {
+		eyebrow,
+		title,
+		description,
+		children,
+		footer
+	}: {
+		eyebrow?: string;
+		title: string | Snippet;
+		description?: string | Snippet;
+		/** Below the description, e.g. a media preview. */
+		children?: Snippet;
+		/** Below the header box, e.g. a divider with actions. */
+		footer?: Snippet;
+	} = $props();
+</script>
+
+<Section width="full" surface={false} padded={false}>
+	<div class="page-header-box">
+		{#if eyebrow}
+			<span class="page-header-eyebrow">{eyebrow}</span>
+		{/if}
+		<h1 class="page-header-title">
+			{#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+		</h1>
+		{#if description}
+			<p class="page-header-description">
+				{#if typeof description === 'string'}{description}{:else}{@render description()}{/if}
+			</p>
+		{/if}
+		{@render children?.()}
+	</div>
+	{@render footer?.()}
+</Section>
+
+<style>
+	.page-header-box {
+		margin-inline: auto;
+		max-width: 1280px;
+		padding: 56px 0 30px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		user-select: none;
+	}
+
+	.page-header-eyebrow {
+		font-size: 14px;
+		font-weight: 500;
+		margin-bottom: 4px;
+	}
+
+	.page-header-title {
+		/* Tighter lines for multi-line titles; the margin gives back the half-leading
+		   of the default 1.5, so the gaps above and below stay the same. */
+		line-height: 1.15;
+		margin-block: 0.175em;
+		text-align: center;
+	}
+
+	.page-header-description {
+		margin-top: 8px;
+		max-width: 440px;
+		text-align: center;
+		color: var(--color-text-secondary);
+	}
+
+	@media (min-width: 640px) {
+		.page-header-box {
+			padding: 72px 0 40px;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.page-header-box {
+			padding-bottom: 64px;
+		}
+	}
+</style>

package/dist/components/page-header/PageHeader.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    eyebrow?: string;
+    title: string | Snippet;
+    description?: string | Snippet;
+    /** Below the description, e.g. a media preview. */
+    children?: Snippet;
+    /** Below the header box, e.g. a divider with actions. */
+    footer?: Snippet;
+};
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/section/Section.svelte

@@ -6,8 +6,8 @@
 		/** The root element. Bindable. */
 		ref?: HTMLElement | null;
 		/**
-		 * `contained` is an inset, rounded grey box; `full` is a grey band that runs edge to edge
-		 * and keeps its content at `--section-max-width`.
+		 * `contained` is an inset, rounded grey box with the page background to its left and right;
+		 * `full` is a band that runs edge to edge and keeps its content at `--section-max-width`.
 		 */
 		width?: 'contained' | 'full';
 		/**
@@ -15,7 +15,10 @@
 		 * `contained` (give the box your own padding via `class`).
 		 */
 		padded?: boolean;
-		/** Fills the section with `--color-surface`. Off, it sits on the page background. */
+		/**
+		 * Fills the section with `--color-surface` (grey). On by default for `contained`, off for
+		 * `full`.
+		 */
 		surface?: boolean;
 		children?: Snippet;
 	};
@@ -24,13 +27,14 @@
 		ref = $bindable(null),
 		width = 'contained',
 		padded,
-		surface = true,
+		surface,
 		class: className,
 		children,
 		...rest
 	}: Props = $props();
 
 	let hasPadding = $derived(padded ?? width === 'full');
+	let hasSurface = $derived(surface ?? width === 'contained');
 </script>
 
 <section
@@ -39,7 +43,7 @@
 	class={[
 		'section',
 		`section--${width}`,
-		{ 'section--padded': hasPadding, 'section--surface': surface },
+		{ 'section--padded': hasPadding, 'section--surface': hasSurface },
 		className
 	]}
 >

package/dist/components/section/Section.svelte.d.ts

@@ -4,8 +4,8 @@ type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** The root element. Bindable. */
     ref?: HTMLElement | null;
     /**
-     * `contained` is an inset, rounded grey box; `full` is a grey band that runs edge to edge
-     * and keeps its content at `--section-max-width`.
+     * `contained` is an inset, rounded grey box with the page background to its left and right;
+     * `full` is a band that runs edge to edge and keeps its content at `--section-max-width`.
      */
     width?: 'contained' | 'full';
     /**
@@ -13,7 +13,10 @@ type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
      * `contained` (give the box your own padding via `class`).
      */
     padded?: boolean;
-    /** Fills the section with `--color-surface`. Off, it sits on the page background. */
+    /**
+     * Fills the section with `--color-surface` (grey). On by default for `contained`, off for
+     * `full`.
+     */
     surface?: boolean;
     children?: Snippet;
 };

package/dist/components/select/Select.svelte.d.ts

@@ -6,7 +6,7 @@ export type SelectOption<T extends string | number | null = string> = {
 import { type Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 declare function $$render<T extends string | number | null>(): {
-    props: Omit<HTMLButtonAttributes, "children" | "role" | "onchange" | "name" | "type" | "value"> & {
+    props: Omit<HTMLButtonAttributes, "name" | "type" | "role" | "children" | "onchange" | "value"> & {
         /** Value of the chosen option. Bindable. */
         value?: T;
         options: SelectOption<T>[];