@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/navigation-menu/NavigationMenu.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** `vertical` stacks the items and expands submenus in place, e.g. in a mobile menu. */
+    orientation?: 'horizontal' | 'vertical';
+    /** `NavigationMenuItem`s. */
+    children: Snippet;
+};
+declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;

package/dist/components/navigation-menu/NavigationMenuItem.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { scale, slide } from 'svelte/transition';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { getNavigationMenuContext } from './context.js';
+
+	type Props = {
+		/** Links the item. Ignored when the item has `items`. */
+		href?: string;
+		/** Marks the item as the current page, or the section containing it. */
+		active?: boolean;
+		/** `NavigationMenuLink`s, shown in a panel the item opens on hover or click, or expanded in place in a vertical menu. */
+		items?: Snippet;
+		/** Number of columns the panel lays its links out in. Ignored in a vertical menu. */
+		columns?: 1 | 2 | 3;
+		children: Snippet;
+	};
+
+	let { href, active = false, items, columns = 1, children }: Props = $props();
+
+	const id = $props.id();
+	const menu = getNavigationMenuContext();
+	const gap = 8;
+	const edge = 8;
+
+	let itemEl: HTMLLIElement;
+	let triggerEl: HTMLButtonElement | undefined = $state();
+	let contentEl: HTMLElement | undefined = $state();
+	let position = $state({ top: 0, left: 0 });
+	let open = $derived(menu.current === id);
+	let classes = $derived([
+		'navigation-menu-trigger',
+		{ 'navigation-menu-trigger--active': active }
+	]);
+
+	function links() {
+		return Array.from(contentEl?.querySelectorAll<HTMLElement>('a[href]') ?? []);
+	}
+
+	function hoverable(event: PointerEvent) {
+		return !menu.vertical && event.pointerType !== 'touch';
+	}
+
+	function close({ restoreFocus = false } = {}) {
+		menu.close();
+		if (restoreFocus) triggerEl?.focus();
+	}
+
+	async function handleTriggerKeydown(event: KeyboardEvent) {
+		if (menu.vertical || event.key !== 'ArrowDown') return;
+		event.preventDefault();
+		menu.open(id, true);
+		await tick();
+		links()[0]?.focus();
+	}
+
+	function handleContentKeydown(event: KeyboardEvent) {
+		if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+		event.preventDefault();
+		const list = links();
+		const index = list.indexOf(document.activeElement as HTMLElement);
+		const step = event.key === 'ArrowDown' ? 1 : -1;
+		list[(index + step + list.length) % list.length]?.focus();
+	}
+
+	function place() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		const max = window.innerWidth - contentEl.offsetWidth - edge;
+		position = { top: rect.bottom + gap, left: Math.max(Math.min(rect.left, max), edge) };
+	}
+
+	const popover: Attachment<HTMLDivElement> = (node) => {
+		node.showPopover();
+		place();
+	};
+
+	$effect(() => {
+		if (!open || menu.vertical) return;
+
+		function handlePointerDown(event: PointerEvent) {
+			if (!itemEl.contains(event.target as Node)) close();
+		}
+
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === 'Escape') close({ restoreFocus: itemEl.contains(document.activeElement) });
+		}
+
+		window.addEventListener('pointerdown', handlePointerDown);
+		window.addEventListener('keydown', handleKeydown);
+		window.addEventListener('scroll', place, true);
+		window.addEventListener('resize', place);
+
+		return () => {
+			window.removeEventListener('pointerdown', handlePointerDown);
+			window.removeEventListener('keydown', handleKeydown);
+			window.removeEventListener('scroll', place, true);
+			window.removeEventListener('resize', place);
+		};
+	});
+</script>
+
+<li
+	class={['navigation-menu-item', { 'navigation-menu-item--vertical': menu.vertical }]}
+	bind:this={itemEl}
+	onfocusout={(event) => {
+		if (open && !menu.vertical && !itemEl.contains(event.relatedTarget as Node | null))
+			menu.close();
+	}}
+>
+	{#if items}
+		<button
+			type="button"
+			class={classes}
+			aria-expanded={open}
+			aria-controls={open ? `${id}-content` : undefined}
+			bind:this={triggerEl}
+			onclick={() => (open ? close() : menu.open(id, true))}
+			onkeydown={handleTriggerKeydown}
+			onpointerenter={(event) => hoverable(event) && menu.open(id)}
+			onpointerleave={(event) => hoverable(event) && menu.leave()}
+		>
+			{@render children()}
+			<ChevronDown class="navigation-menu-chevron" aria-hidden="true" />
+		</button>
+
+		{#if open && menu.vertical}
+			<ul
+				id="{id}-content"
+				class="navigation-menu-sub"
+				bind:this={contentEl}
+				transition:slide={{ duration: prefersReducedMotion.current ? 0 : 200 }}
+			>
+				{@render items()}
+			</ul>
+		{:else if open}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				id="{id}-content"
+				popover="manual"
+				class="navigation-menu-content"
+				style:top="{position.top}px"
+				style:left="{position.left}px"
+				bind:this={contentEl}
+				onpointerenter={menu.stay}
+				onpointerleave={(event) => event.pointerType !== 'touch' && menu.leave()}
+				onkeydown={handleContentKeydown}
+				{@attach popover}
+				transition:scale={{ duration: prefersReducedMotion.current ? 0 : 140, start: 0.95 }}
+			>
+				<ul class="navigation-menu-links" style:--columns={columns}>
+					{@render items()}
+				</ul>
+			</div>
+		{/if}
+	{:else}
+		<!-- href comes from the consumer, who resolves it; this library has no routes -->
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a {href} aria-current={active ? 'page' : undefined} class={classes}>{@render children()}</a>
+	{/if}
+</li>
+
+<style>
+	.navigation-menu-item {
+		display: flex;
+	}
+
+	.navigation-menu-item--vertical {
+		flex-direction: column;
+	}
+
+	.navigation-menu-item--vertical .navigation-menu-trigger {
+		justify-content: space-between;
+		width: 100%;
+		text-align: left;
+	}
+
+	.navigation-menu-trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0;
+		background: none;
+		border: none;
+		border-radius: 4px;
+		font: inherit;
+		font-size: 14px;
+		line-height: 28px;
+		color: var(--color-text);
+		text-decoration: none;
+		outline: none;
+		cursor: pointer;
+		transition: opacity 200ms;
+	}
+
+	.navigation-menu-trigger:hover {
+		opacity: 0.6;
+	}
+
+	.navigation-menu-trigger:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.navigation-menu-trigger--active {
+		font-weight: 500;
+	}
+
+	.navigation-menu-item :global(.navigation-menu-chevron) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		transition: rotate 200ms ease;
+	}
+
+	.navigation-menu-trigger[aria-expanded='true'] :global(.navigation-menu-chevron) {
+		rotate: 180deg;
+	}
+
+	.navigation-menu-content {
+		position: fixed;
+		inset: auto;
+		box-sizing: border-box;
+		max-width: calc(100vw - 16px);
+		margin: 0;
+		padding: 6px;
+		overflow: visible;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 12px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		transform-origin: top left;
+		user-select: none;
+	}
+
+	.navigation-menu-links {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+		width: min(var(--columns) * 240px, 100vw - 30px);
+		gap: 2px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.navigation-menu-sub {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 4px 0 0;
+		padding: 0;
+		list-style: none;
+	}
+</style>

package/dist/components/navigation-menu/NavigationMenuItem.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    /** Links the item. Ignored when the item has `items`. */
+    href?: string;
+    /** Marks the item as the current page, or the section containing it. */
+    active?: boolean;
+    /** `NavigationMenuLink`s, shown in a panel the item opens on hover or click, or expanded in place in a vertical menu. */
+    items?: Snippet;
+    /** Number of columns the panel lays its links out in. Ignored in a vertical menu. */
+    columns?: 1 | 2 | 3;
+    children: Snippet;
+};
+declare const NavigationMenuItem: import("svelte").Component<Props, {}, "">;
+type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
+export default NavigationMenuItem;

package/dist/components/navigation-menu/NavigationMenuLink.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LucideIcon } from '@lucide/svelte';
+	import { getNavigationMenuContext } from './context.js';
+
+	type Props = {
+		href: string;
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		/** Short text below the title, clamped to two lines. */
+		description?: string;
+		/** Marks the link as the current page. */
+		active?: boolean;
+		/** The link's title. */
+		children: Snippet;
+	};
+
+	let { href, icon: Icon, description, active = false, children }: Props = $props();
+
+	const menu = getNavigationMenuContext();
+	let classes = $derived(['navigation-menu-link', { 'navigation-menu-link--active': active }]);
+</script>
+
+<li>
+	<!-- href comes from the consumer, who resolves it; this library has no routes -->
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+	<a {href} aria-current={active ? 'page' : undefined} class={classes} onclick={menu.close}>
+		{#if Icon}<Icon class="navigation-menu-link-icon" aria-hidden="true" />{/if}
+		<span class="navigation-menu-link-text">
+			<span class="navigation-menu-link-title">{@render children()}</span>
+			{#if description}
+				<span class="navigation-menu-link-description">{description}</span>
+			{/if}
+		</span>
+	</a>
+</li>
+
+<style>
+	.navigation-menu-link {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		padding: 8px 10px;
+		border-radius: 8px;
+		font-size: 13px;
+		line-height: 1.4;
+		color: var(--color-text);
+		text-decoration: none;
+		outline: none;
+		transition: background-color 150ms ease;
+	}
+
+	.navigation-menu-link:hover,
+	.navigation-menu-link:focus-visible,
+	.navigation-menu-link--active {
+		background-color: var(--color-surface);
+	}
+
+	.navigation-menu-link:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	.navigation-menu-link :global(.navigation-menu-link-icon) {
+		width: 16px;
+		height: 16px;
+		margin-top: 1px;
+		flex-shrink: 0;
+	}
+
+	.navigation-menu-link-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+	}
+
+	.navigation-menu-link-title {
+		font-weight: 500;
+	}
+
+	.navigation-menu-link-description {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow: hidden;
+		font-size: 12px;
+		color: var(--color-text-muted);
+	}
+</style>

package/dist/components/navigation-menu/NavigationMenuLink.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = {
+    href: string;
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    /** Short text below the title, clamped to two lines. */
+    description?: string;
+    /** Marks the link as the current page. */
+    active?: boolean;
+    /** The link's title. */
+    children: Snippet;
+};
+declare const NavigationMenuLink: import("svelte").Component<Props, {}, "">;
+type NavigationMenuLink = ReturnType<typeof NavigationMenuLink>;
+export default NavigationMenuLink;

package/dist/components/navigation-menu/context.d.ts

@@ -0,0 +1,15 @@
+export type NavigationMenuContext = {
+    /** Vertical menus expand submenus in place instead of opening a panel. */
+    readonly vertical: boolean;
+    /** Id of the item whose panel is open, or null. */
+    readonly current: string | null;
+    /** Opens an item's panel, after a short delay unless another one is already open. */
+    open: (id: string, immediate?: boolean) => void;
+    /** Closes the open panel after a short delay, e.g. when the pointer leaves it. */
+    leave: () => void;
+    /** Cancels a pending open or close. */
+    stay: () => void;
+    /** Closes the open panel right away. */
+    close: () => void;
+};
+export declare const getNavigationMenuContext: () => NavigationMenuContext, setNavigationMenuContext: (context: NavigationMenuContext) => NavigationMenuContext;

package/dist/components/navigation-menu/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getNavigationMenuContext, setNavigationMenuContext] = createContext();

package/dist/components/popover/Popover.svelte

@@ -0,0 +1,295 @@
+<script module lang="ts">
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+
+	export type PopoverTriggerProps = {
+		onclick?: () => void;
+		onpointerenter?: (event: PointerEvent) => void;
+		onpointerleave?: () => void;
+		onfocus?: () => void;
+		onblur?: (event: FocusEvent) => void;
+		'aria-haspopup'?: 'dialog';
+		'aria-expanded'?: boolean;
+		'aria-controls'?: string;
+		[key: symbol]: Attachment<HTMLElement>;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { scale } from 'svelte/transition';
+
+	type Side = 'top' | 'right' | 'bottom' | 'left';
+
+	type Props = {
+		/** Whether the popover is open. Bindable. */
+		open?: boolean;
+		/** Opens on hover and keyboard focus instead of on click, like a hover card. */
+		hover?: boolean;
+		/** Milliseconds to wait on hover before opening. Only used with `hover`. */
+		delay?: number;
+		/** Preferred side; flips to the opposite one when there is not enough room. */
+		side?: Side;
+		/** Alignment along the trigger's edge. */
+		align?: 'start' | 'center' | 'end';
+		title?: string;
+		description?: string;
+		/** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. */
+		trigger: Snippet<[PopoverTriggerProps]>;
+		children?: Snippet;
+	};
+
+	let {
+		open = $bindable(false),
+		hover = false,
+		delay = 500,
+		side = 'bottom',
+		align = 'center',
+		title,
+		description,
+		trigger,
+		children
+	}: Props = $props();
+
+	const id = $props.id();
+	const gap = 8;
+	const edge = 8;
+	const closeDelay = 200;
+	const opposite = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' } as const;
+
+	let wrapperEl: HTMLSpanElement;
+	let triggerEl: HTMLElement | undefined;
+	let contentEl: HTMLDivElement | undefined = $state();
+	let placement: Side = $state('bottom');
+	let position = $state({ top: 0, left: 0 });
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	function schedule(value: boolean, wait: number) {
+		clearTimeout(timer);
+		if (wait > 0) timer = setTimeout(() => (open = value), wait);
+		else open = value;
+	}
+
+	function close({ restoreFocus = false } = {}) {
+		clearTimeout(timer);
+		open = false;
+		if (restoreFocus) triggerEl?.focus();
+	}
+
+	function leftWrapper(event: FocusEvent) {
+		return !wrapperEl.contains(event.relatedTarget as Node | null);
+	}
+
+	const attach = createAttachmentKey();
+
+	const triggerProps: PopoverTriggerProps = $derived.by(() => {
+		const ref = (node: HTMLElement) => {
+			triggerEl = node;
+			return () => clearTimeout(timer);
+		};
+
+		if (hover) {
+			return {
+				onpointerenter: (event: PointerEvent) => {
+					if (event.pointerType !== 'touch') schedule(true, delay);
+				},
+				onpointerleave: () => schedule(false, closeDelay),
+				onfocus: () => {
+					if (triggerEl?.matches(':focus-visible')) schedule(true, 0);
+				},
+				onblur: (event: FocusEvent) => {
+					if (leftWrapper(event)) close();
+				},
+				[attach]: ref
+			};
+		}
+
+		return {
+			onclick: () => (open ? close() : (open = true)),
+			'aria-haspopup': 'dialog',
+			'aria-expanded': open,
+			'aria-controls': `${id}-popover`,
+			[attach]: ref
+		};
+	});
+
+	function fits(rect: DOMRect, width: number, height: number, s: Side) {
+		if (s === 'top') return rect.top - gap - height >= edge;
+		if (s === 'bottom') return rect.bottom + gap + height <= window.innerHeight - edge;
+		if (s === 'left') return rect.left - gap - width >= edge;
+		return rect.right + gap + width <= window.innerWidth - edge;
+	}
+
+	function aligned(start: number, length: number, size: number) {
+		if (align === 'start') return start;
+		if (align === 'end') return start + length - size;
+		return start + length / 2 - size / 2;
+	}
+
+	function place() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		const { offsetWidth: width, offsetHeight: height } = contentEl;
+		const s =
+			fits(rect, width, height, side) || !fits(rect, width, height, opposite[side])
+				? side
+				: opposite[side];
+		const clamp = (value: number, max: number) => Math.min(Math.max(value, edge), max - edge);
+
+		if (s === 'top' || s === 'bottom') {
+			position = {
+				top: s === 'top' ? rect.top - gap - height : rect.bottom + gap,
+				left: clamp(aligned(rect.left, rect.width, width), window.innerWidth - width)
+			};
+		} else {
+			position = {
+				top: clamp(aligned(rect.top, rect.height, height), window.innerHeight - height),
+				left: s === 'left' ? rect.left - gap - width : rect.right + gap
+			};
+		}
+		placement = s;
+	}
+
+	const popover: Attachment<HTMLDivElement> = (node) => {
+		node.showPopover();
+		place();
+		if (!hover) {
+			const first = node.querySelector<HTMLElement>(
+				'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])'
+			);
+			(first ?? node).focus();
+		}
+	};
+
+	$effect(() => {
+		if (!open) return;
+
+		function handlePointerDown(event: PointerEvent) {
+			if (!hover && !wrapperEl.contains(event.target as Node)) close();
+		}
+
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === 'Escape') close({ restoreFocus: !hover });
+		}
+
+		window.addEventListener('pointerdown', handlePointerDown);
+		window.addEventListener('keydown', handleKeydown);
+		window.addEventListener('scroll', place, true);
+		window.addEventListener('resize', place);
+
+		return () => {
+			window.removeEventListener('pointerdown', handlePointerDown);
+			window.removeEventListener('keydown', handleKeydown);
+			window.removeEventListener('scroll', place, true);
+			window.removeEventListener('resize', place);
+		};
+	});
+</script>
+
+<span class="popover" bind:this={wrapperEl}>
+	{@render trigger(triggerProps)}
+
+	{#if open}
+		<div
+			id="{id}-popover"
+			role={hover ? undefined : 'dialog'}
+			aria-labelledby={title ? `${id}-title` : undefined}
+			aria-describedby={description ? `${id}-description` : undefined}
+			tabindex="-1"
+			popover="manual"
+			class={['popover-content', `popover-content--${placement}`, `popover-content--${align}`]}
+			style:top="{position.top}px"
+			style:left="{position.left}px"
+			bind:this={contentEl}
+			onpointerenter={() => hover && clearTimeout(timer)}
+			onpointerleave={() => hover && schedule(false, closeDelay)}
+			onfocusout={(event) => {
+				if (leftWrapper(event)) close();
+			}}
+			{@attach popover}
+			transition:scale={{ duration: 140, start: 0.95 }}
+		>
+			{#if title}
+				<h3 id="{id}-title" class="popover-title">{title}</h3>
+			{/if}
+			{#if description}
+				<p id="{id}-description" class="popover-description">{description}</p>
+			{/if}
+			{#if children}
+				<div class="popover-body">{@render children()}</div>
+			{/if}
+		</div>
+	{/if}
+</span>
+
+<style>
+	.popover {
+		display: inline-flex;
+		height: fit-content;
+	}
+
+	.popover-content {
+		position: fixed;
+		inset: auto;
+		box-sizing: border-box;
+		width: 288px;
+		max-width: calc(100vw - 16px);
+		margin: 0;
+		padding: 16px;
+		overflow: visible;
+		font-size: 13px;
+		line-height: 1.5;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 12px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		outline: none;
+	}
+
+	.popover-title {
+		margin: 0;
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	.popover-description {
+		margin: 4px 0 0;
+		color: var(--color-text-muted);
+	}
+
+	:is(.popover-title, .popover-description) + .popover-body {
+		margin-top: 14px;
+	}
+
+	.popover-content--bottom {
+		transform-origin: top center;
+	}
+
+	.popover-content--top {
+		transform-origin: bottom center;
+	}
+
+	.popover-content--left {
+		transform-origin: center right;
+	}
+
+	.popover-content--right {
+		transform-origin: center left;
+	}
+
+	.popover-content--bottom.popover-content--start {
+		transform-origin: top left;
+	}
+
+	.popover-content--bottom.popover-content--end {
+		transform-origin: top right;
+	}
+
+	.popover-content--top.popover-content--start {
+		transform-origin: bottom left;
+	}
+
+	.popover-content--top.popover-content--end {
+		transform-origin: bottom right;
+	}
+</style>