@noahbaumgartner/svelte-ui 0.0.7 → 0.0.9

package/dist/components/table-of-contents/TableOfContents.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import ChevronDown from '../../internal/icons/ChevronDown.svelte';
+
+	let {
+		container,
+		variant = 'sidebar'
+	}: {
+		container: HTMLElement | undefined;
+		variant?: 'sidebar' | 'mobile';
+	} = $props();
+
+	type TocItem = { id: string; text: string; level: number };
+
+	let items: TocItem[] = $state([]);
+	let activeId: string | null = $state(null);
+	let expanded = $state(false);
+
+	let activeItem = $derived(items.find((item) => item.id === activeId) ?? items[0]);
+
+	function slugify(text: string) {
+		return text
+			.toLowerCase()
+			.trim()
+			.replace(/[äáàâ]/g, 'a')
+			.replace(/[öóòô]/g, 'o')
+			.replace(/[üúùû]/g, 'u')
+			.replace(/ß/g, 'ss')
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '');
+	}
+
+	$effect(() => {
+		if (!container) return;
+
+		const headings = Array.from(container.querySelectorAll('h1, h2')) as HTMLElement[];
+		const usedIds = new SvelteSet<string>();
+
+		items = headings.map((heading) => {
+			if (!heading.id) {
+				let id = slugify(heading.textContent ?? '');
+				let unique = id;
+				let i = 2;
+				while (usedIds.has(unique)) {
+					unique = `${id}-${i}`;
+					i++;
+				}
+				heading.id = unique;
+			}
+			usedIds.add(heading.id);
+			return {
+				id: heading.id,
+				text: heading.textContent ?? '',
+				level: heading.tagName === 'H1' ? 1 : 2
+			};
+		});
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						activeId = (entry.target as HTMLElement).id;
+						break;
+					}
+				}
+			},
+			{ rootMargin: '0px 0px -70% 0px', threshold: 0 }
+		);
+
+		headings.forEach((heading) => observer.observe(heading));
+
+		return () => observer.disconnect();
+	});
+
+	const scrollOffset = $derived(variant === 'mobile' ? 130 : 64);
+
+	async function handleClick(event: MouseEvent, id: string) {
+		event.preventDefault();
+		expanded = false;
+		// Wait for the mobile panel's collapse to actually reach the DOM before
+		// measuring the heading position, otherwise the still-expanded panel's
+		// extra height gets baked into the scroll target and it overshoots.
+		await tick();
+		const target = document.getElementById(id);
+		if (!target) return;
+		const top = target.getBoundingClientRect().top + window.scrollY - scrollOffset;
+
+		// Mobile Safari can silently drop a new smooth scroll if one is still
+		// animating, so snap to the current position first to clear it before
+		// requesting the next smooth scroll on the following frame.
+		window.scrollTo({ top: window.scrollY, behavior: 'instant' });
+		requestAnimationFrame(() => {
+			window.scrollTo({ top, behavior: 'smooth' });
+		});
+
+		history.replaceState(null, '', `#${id}`);
+	}
+</script>
+
+{#if items.length > 0}
+	{#if variant === 'mobile'}
+		<div class="toc-mobile">
+			{#if expanded}
+				<div class="toc-mobile-trigger">
+					<a
+						href="#{items[0].id}"
+						class="toc-item toc-mobile-title"
+						class:toc-item--sub={items[0].level === 2}
+						class:toc-item--active={activeId === items[0].id}
+						onclick={(event) => handleClick(event, items[0].id)}
+					>
+						{items[0].text}
+					</a>
+					<button
+						type="button"
+						class="toc-mobile-chevron-btn"
+						onclick={() => (expanded = !expanded)}
+						aria-expanded={expanded}
+						aria-label="Inhaltsverzeichnis einklappen"
+					>
+						<ChevronDown class="toc-mobile-chevron" style="transform: rotate(180deg)" />
+					</button>
+				</div>
+			{:else}
+				<button
+					type="button"
+					class="toc-mobile-trigger"
+					onclick={() => (expanded = !expanded)}
+					aria-expanded={expanded}
+					aria-label="Inhaltsverzeichnis ausklappen"
+				>
+					<span class="toc-mobile-title">{activeItem?.text}</span>
+					<ChevronDown class="toc-mobile-chevron" />
+				</button>
+			{/if}
+
+			{#if expanded}
+				<nav class="toc-mobile-panel" aria-label="Inhaltsverzeichnis">
+					{#each items.slice(1) as item (item.id)}
+						<a
+							href="#{item.id}"
+							class="toc-item"
+							class:toc-item--sub={item.level === 2}
+							class:toc-item--active={activeId === item.id}
+							onclick={(event) => handleClick(event, item.id)}
+						>
+							{item.text}
+						</a>
+					{/each}
+				</nav>
+			{/if}
+		</div>
+	{:else}
+		<nav class="toc" aria-label="Inhaltsverzeichnis">
+			{#each items as item (item.id)}
+				<a
+					href="#{item.id}"
+					class="toc-item"
+					class:toc-item--sub={item.level === 2}
+					class:toc-item--active={activeId === item.id}
+					onclick={(event) => handleClick(event, item.id)}
+				>
+					{item.text}
+				</a>
+			{/each}
+		</nav>
+	{/if}
+{/if}
+
+<style>
+	.toc {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		user-select: none;
+	}
+
+	.toc-item {
+		font-size: 12px;
+		color: var(--color-text-muted);
+		text-decoration: none;
+		line-height: 1.4;
+		border-radius: 4px;
+		outline: none;
+		transition: color 150ms ease;
+	}
+
+	.toc-item:hover {
+		color: var(--color-text);
+	}
+
+	.toc-item:focus-visible {
+		outline: 2px solid var(--color-ink);
+		outline-offset: 2px;
+	}
+
+	.toc-item--sub {
+		padding-left: 16px;
+	}
+
+	.toc-item--active {
+		color: var(--color-text);
+		font-weight: 600;
+	}
+
+	.toc-mobile {
+		background-color: var(--color-bg);
+		border-bottom: 1px solid var(--color-border);
+		user-select: none;
+	}
+
+	.toc-mobile-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		width: 100%;
+		padding: 14px 24px;
+		font-size: 14px;
+	}
+
+	button.toc-mobile-trigger {
+		background-color: transparent;
+		border: none;
+		font: inherit;
+		font-size: 14px;
+		color: var(--color-text);
+		text-align: left;
+		outline: none;
+		cursor: pointer;
+	}
+
+	button.toc-mobile-trigger:focus-visible {
+		outline: 2px solid var(--color-ink);
+		outline-offset: -2px;
+	}
+
+	.toc-mobile-title {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	a.toc-mobile-title {
+		font-size: 14px;
+	}
+
+	span.toc-mobile-title {
+		color: var(--color-text);
+	}
+
+	.toc-mobile-chevron-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		padding: 0;
+		background-color: transparent;
+		border: none;
+		border-radius: 4px;
+		color: var(--color-text);
+		outline: none;
+		cursor: pointer;
+	}
+
+	.toc-mobile-chevron-btn:focus-visible {
+		outline: 2px solid var(--color-ink);
+		outline-offset: 2px;
+	}
+
+	.toc-mobile-trigger :global(.toc-mobile-chevron) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		transition: transform 200ms ease;
+	}
+
+	.toc-mobile-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 4px 24px 20px;
+	}
+
+	.toc-mobile-panel .toc-item {
+		font-size: 14px;
+	}
+
+	@media (min-width: 640px) {
+		.toc-mobile {
+			display: none;
+		}
+	}
+</style>

package/dist/components/table-of-contents/TableOfContents.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    container: HTMLElement | undefined;
+    variant?: 'sidebar' | 'mobile';
+};
+declare const TableOfContents: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

package/dist/components/tabs/Tabs.svelte

@@ -23,7 +23,9 @@
 		options: TabsOption<T>[];
 		/** Accessible name for the tab list. */
 		label?: string;
-		size?: 'sm' | 'md';
+		size?: 'sm' | 'md' | 'lg';
+		/** `segmented` sits in a pill-shaped track; `text` is plain text where only the selected tab is emphasised. */
+		variant?: 'segmented' | 'text';
 		ref?: HTMLDivElement | null;
 		/** Optional panel below the tabs; receives the selected value. Omit to render the content yourself. */
 		children?: Snippet<[value: T]>;
@@ -37,6 +39,7 @@
 		options,
 		label,
 		size = 'md',
+		variant = 'segmented',
 		ref = $bindable(null),
 		class: className,
 		children,
@@ -100,7 +103,7 @@
 	}
 </script>
 
-<div {...rest} bind:this={ref} class={['tabs', `tabs--${size}`, className]}>
+<div {...rest} bind:this={ref} class={['tabs', `tabs--${size}`, `tabs--${variant}`, className]}>
 	<div
 		class={[
 			'tabs-scroller',
@@ -280,6 +283,63 @@
 			border-radius: 5px;
 		}
 
+		.tabs--lg .tabs-list {
+			border-radius: 12px;
+		}
+
+		.tabs--lg .tabs-tab {
+			height: 32px;
+			padding: 0 14px;
+			font-size: 14px;
+			border-radius: 9px;
+		}
+
+		/* Text: no track and no pill, the selected tab is only darker. Padding stays vertical so the first label lines up with the content below. */
+		.tabs--text .tabs-list {
+			gap: 20px;
+			padding: 0;
+			background-color: transparent;
+			border-radius: 0;
+		}
+
+		.tabs--text .tabs-tab {
+			height: auto;
+			padding: 4px 0;
+			font-size: 16px;
+			border-radius: 0;
+		}
+
+		.tabs--text.tabs--sm .tabs-list {
+			gap: 16px;
+		}
+
+		.tabs--text.tabs--sm .tabs-tab {
+			padding: 2px 0;
+			font-size: 14px;
+		}
+
+		.tabs--text.tabs--lg .tabs-list {
+			gap: 24px;
+		}
+
+		.tabs--text.tabs--lg .tabs-tab {
+			font-size: 18px;
+		}
+
+		.tabs--text .tabs-tab--selected {
+			background-color: transparent;
+			box-shadow: none;
+		}
+
+		/* An outline would be clipped by the scroller, so the focus ring is an underline. */
+		.tabs--text .tabs-tab:focus-visible {
+			outline: none;
+			text-decoration: underline;
+			text-decoration-color: var(--color-accent);
+			text-decoration-thickness: 2px;
+			text-underline-offset: 4px;
+		}
+
 		.tabs-panel {
 			font-size: 13px;
 			color: var(--color-text);
@@ -315,6 +375,16 @@
 				box-shadow: none;
 			}
 
+			/* Text has no track and no filled tab, so the selected tab is told apart by weight */
+			.tabs--text .tabs-list {
+				border: none;
+			}
+
+			.tabs--text .tabs-tab--selected {
+				color: ButtonText;
+				font-weight: 700;
+			}
+
 			.tabs-tab:disabled {
 				color: GrayText;
 			}

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -18,7 +18,9 @@ declare function $$render<T extends string>(): {
         options: TabsOption<T>[];
         /** Accessible name for the tab list. */
         label?: string;
-        size?: "sm" | "md";
+        size?: "sm" | "md" | "lg";
+        /** `segmented` sits in a pill-shaped track; `text` is plain text where only the selected tab is emphasised. */
+        variant?: "segmented" | "text";
         ref?: HTMLDivElement | null;
         /** Optional panel below the tabs; receives the selected value. Omit to render the content yourself. */
         children?: Snippet<[value: T]>;

package/dist/components/theme-toggle/ThemeToggle.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Sun from '../../internal/icons/Sun.svelte';
+	import Moon from '../../internal/icons/Moon.svelte';
+	import Button from '../button/Button.svelte';
+
+	type Theme = 'light' | 'dark';
+
+	/** Accessible name of the button for each current theme; the click switches to the other one. */
+	let {
+		labels = { light: 'Theme: Light', dark: 'Theme: Dark' }
+	}: { labels?: Record<Theme, string> } = $props();
+
+	let theme: Theme = $state('light');
+
+	const icons = { light: Sun, dark: Moon };
+
+	onMount(() => {
+		const query = window.matchMedia('(prefers-color-scheme: dark)');
+		const systemTheme = (): Theme => (query.matches ? 'dark' : 'light');
+
+		const stored = localStorage.getItem('theme');
+		theme = stored === 'light' || stored === 'dark' ? stored : systemTheme();
+
+		// Without an explicit choice the toggle keeps following the system.
+		const onSystemChange = () => {
+			if (!localStorage.getItem('theme')) theme = systemTheme();
+		};
+		query.addEventListener('change', onSystemChange);
+		return () => query.removeEventListener('change', onSystemChange);
+	});
+
+	function toggle() {
+		theme = theme === 'light' ? 'dark' : 'light';
+		document.documentElement.dataset.theme = theme;
+		localStorage.setItem('theme', theme);
+	}
+</script>
+
+<Button variant="ghost" size="lg" icon={icons[theme]} label={labels[theme]} onclick={toggle} />

package/dist/components/theme-toggle/ThemeToggle.svelte.d.ts

@@ -0,0 +1,7 @@
+type Theme = 'light' | 'dark';
+type $$ComponentProps = {
+    labels?: Record<Theme, string>;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/timeline/Timeline.svelte

@@ -0,0 +1,122 @@
+<script module lang="ts">
+	export type TimelineItem = {
+		/** Muted text left of the item, e.g. "2021 - 2025". */
+		period: string;
+		/** Rendered as an `<h3>`. */
+		title: string;
+		/** Muted line below the title, e.g. a company or institution. */
+		subtitle?: string;
+		/** Turns the subtitle into a Link. */
+		href?: string;
+		description?: string;
+	};
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Link from '../link/Link.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+		/** Rendered as an `<h2>` next to the list. */
+		title?: string;
+		items: TimelineItem[];
+		ref?: HTMLElement | null;
+	};
+
+	let { title, items, class: className, ref = $bindable(null), ...rest }: Props = $props();
+</script>
+
+<section {...rest} bind:this={ref} class={['timeline', className]}>
+	{#if title}
+		<h2 class="timeline-title">{title}</h2>
+	{/if}
+	<ol class="timeline-list">
+		{#each items as item (item.title + item.period)}
+			<li class="timeline-item">
+				<span class="timeline-period">{item.period}</span>
+				<div class="timeline-body">
+					<h3 class="timeline-item-title">{item.title}</h3>
+					{#if item.subtitle}
+						<p class="timeline-subtitle">
+							{#if item.href}
+								<Link href={item.href}>{item.subtitle}</Link>
+							{:else}
+								{item.subtitle}
+							{/if}
+						</p>
+					{/if}
+					{#if item.description}
+						<p class="timeline-description">{item.description}</p>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ol>
+</section>
+
+<style>
+	.timeline {
+		display: grid;
+		gap: 32px;
+	}
+
+	.timeline-title {
+		font-size: clamp(24px, 2vw + 16px, 32px);
+		font-weight: 500;
+		letter-spacing: -0.01em;
+	}
+
+	.timeline-list {
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.timeline-item {
+		display: grid;
+		gap: 8px;
+		padding-block: 24px;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.timeline-period {
+		font-size: 14px;
+		color: var(--color-text-muted);
+	}
+
+	.timeline-body {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.timeline-item-title {
+		font-size: 20px;
+		font-weight: 500;
+	}
+
+	.timeline-subtitle {
+		font-size: 15px;
+		color: var(--color-text-muted);
+	}
+
+	.timeline-description {
+		margin-top: 8px;
+		max-width: 640px;
+	}
+
+	@media (min-width: 768px) {
+		.timeline {
+			grid-template-columns: 1fr 2fr;
+			gap: 64px;
+		}
+
+		.timeline-item {
+			grid-template-columns: 180px 1fr;
+			gap: 32px;
+			padding-block: 32px;
+		}
+
+		.timeline-period {
+			padding-top: 4px;
+		}
+	}
+</style>

package/dist/components/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,21 @@
+export type TimelineItem = {
+    /** Muted text left of the item, e.g. "2021 - 2025". */
+    period: string;
+    /** Rendered as an `<h3>`. */
+    title: string;
+    /** Muted line below the title, e.g. a company or institution. */
+    subtitle?: string;
+    /** Turns the subtitle into a Link. */
+    href?: string;
+    description?: string;
+};
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    /** Rendered as an `<h2>` next to the list. */
+    title?: string;
+    items: TimelineItem[];
+    ref?: HTMLElement | null;
+};
+declare const Timeline: import("svelte").Component<Props, {}, "ref">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/icon.d.ts

@@ -1,12 +1,12 @@
-import type { Component } from 'svelte';
+import type { LucideIcon, LucideProps } from '@lucide/svelte';
+export type { LucideProps as IconProps };
 /**
- * A Svelte component that renders an icon, from any icon library
- * (`@lucide/svelte`, `phosphor-svelte`, an inline SVG component, …).
+ * A Svelte component that renders an icon and takes the props of a Lucide icon
+ * (`size`, `strokeWidth`, `class`, `aria-hidden`, …). Any `@lucide/svelte` icon
+ * qualifies, as does an inline SVG component typed with `IconProps` (see
+ * `icons/`).
  *
  * Components only pass `class` and `aria-hidden`; the size comes from CSS, so
  * the icon should fill its box (`width`/`height: 1em` or a fixed size is fine).
  */
-export type IconComponent = Component<{
-    class?: string;
-    'aria-hidden'?: boolean | 'true' | 'false';
-}>;
+export type IconComponent = LucideIcon;

package/dist/icons/GithubIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { IconProps } from '../icon.js';
+
+	// Lucide dropped its brand icons in v1, so the GitHub mark lives here. It
+	// takes the same props as a Lucide icon so it can be passed as `icon`.
+	let { size = 24, strokeWidth = 2, class: className, ...rest }: IconProps = $props();
+</script>
+
+<svg
+	{...rest}
+	class={className}
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width={strokeWidth}
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path
+		d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+	/>
+	<path d="M9 18c-4.51 2-5-2-7-2" />
+</svg>

package/dist/icons/GithubIcon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from '../icon.js';
+declare const GithubIcon: import("svelte").Component<IconProps, {}, "">;
+type GithubIcon = ReturnType<typeof GithubIcon>;
+export default GithubIcon;