@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/input-group/InputGroupAddon.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Placement relative to the input, independent of the order in the markup. */
+		align?: 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+		/** Text, icons or ghost Buttons; Buttons are shrunk to fit. */
+		children: Snippet;
+	};
+
+	let { align = 'inline-start', class: className, children, ...rest }: Props = $props();
+
+	function focusInput(event: MouseEvent) {
+		if ((event.target as HTMLElement).closest('button, a, input')) return;
+		(event.currentTarget as HTMLElement).parentElement?.querySelector('input')?.focus();
+	}
+</script>
+
+<div
+	{...rest}
+	class={['input-group-addon', `input-group-addon--${align}`, className]}
+	onclick={focusInput}
+>
+	{@render children()}
+</div>
+
+<style>
+	.input-group-addon {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		gap: 6px;
+		height: 100%;
+		font-size: 13px;
+		color: var(--color-text-muted);
+		white-space: nowrap;
+		cursor: text;
+		user-select: none;
+	}
+
+	.input-group-addon :global(svg) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	/* Buttons shrink to fit inside the 32px group */
+	.input-group-addon > :global(.button) {
+		height: 24px;
+		border-radius: 6px;
+	}
+
+	.input-group-addon > :global(.button--icon-only) {
+		width: 24px;
+	}
+
+	.input-group-addon--inline-start {
+		order: -1;
+		padding-left: 10px;
+	}
+
+	.input-group-addon--inline-end {
+		order: 1;
+		padding-right: 10px;
+	}
+
+	.input-group-addon--block-start {
+		order: -1;
+		height: auto;
+		padding: 8px 10px 0;
+	}
+
+	.input-group-addon--block-end {
+		order: 1;
+		height: auto;
+		padding: 0 10px 8px;
+	}
+
+	/* Buttons sit 4px from the border, like the Input's own controls */
+	.input-group-addon--inline-start:has(> :global(.button:first-child)) {
+		padding-left: 4px;
+	}
+
+	.input-group-addon--inline-end:has(> :global(.button:last-child)) {
+		padding-right: 4px;
+	}
+</style>

package/dist/components/input-group/InputGroupAddon.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Placement relative to the input, independent of the order in the markup. */
+    align?: 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+    /** Text, icons or ghost Buttons; Buttons are shrunk to fit. */
+    children: Snippet;
+};
+declare const InputGroupAddon: import("svelte").Component<Props, {}, "">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

package/dist/components/kbd/Kbd.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<kbd {...rest} class={['kbd', className]}>{@render children()}</kbd>
+
+<style>
+	.kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		box-sizing: border-box;
+		width: fit-content;
+		min-width: 20px;
+		height: 20px;
+		padding: 0 4px;
+		font-family: inherit;
+		font-size: 12px;
+		line-height: 1;
+		background-color: var(--color-surface);
+		color: var(--color-text-muted);
+		border-radius: 4px;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.kbd :global(svg) {
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+	}
+
+	:global(.button--primary) .kbd,
+	:global(.tooltip-content) .kbd {
+		background-color: color-mix(in srgb, currentColor 20%, transparent);
+		color: inherit;
+	}
+</style>

package/dist/components/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    children: Snippet;
+};
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/kbd/KbdGroup.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<kbd {...rest} class={['kbd-group', className]}>{@render children()}</kbd>
+
+<style>
+	.kbd-group {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-family: inherit;
+		font-size: 12px;
+		color: var(--color-text-muted);
+	}
+
+	:global(.tooltip-content) .kbd-group {
+		color: inherit;
+	}
+</style>

package/dist/components/kbd/KbdGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    children: Snippet;
+};
+declare const KbdGroup: import("svelte").Component<Props, {}, "">;
+type KbdGroup = ReturnType<typeof KbdGroup>;
+export default KbdGroup;

package/dist/components/label/Label.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLLabelAttributes, 'children'> & {
+		/** Set `for` to the control's id, or wrap the control. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<label {...rest} class={['label', className]}>
+	{@render children()}
+</label>
+
+<style>
+	.label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: fit-content;
+		font-size: 13px;
+		font-weight: 500;
+		line-height: 1.4;
+		color: var(--color-text);
+		user-select: none;
+	}
+
+	/* Checkboxes and switches toggle on a label click, so show it */
+	.label:has(:global(:is(.checkbox, .switch))),
+	:global(:is(.checkbox, .switch)) + .label {
+		cursor: pointer;
+	}
+
+	/* Dim with a disabled control, whether wrapped or placed right before the label */
+	.label:has(:global(:disabled)),
+	:global(:disabled) + .label,
+	:global(:is(.checkbox, .switch):has(:disabled)) + .label {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* A wrapped control is already dimmed by the label */
+	.label:has(:global(:disabled)) :global(:disabled) {
+		opacity: 1;
+	}
+</style>

package/dist/components/label/Label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = Omit<HTMLLabelAttributes, 'children'> & {
+    /** Set `for` to the control's id, or wrap the control. */
+    children: Snippet;
+};
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/link/Link.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAnchorAttributes, 'children'> & {
+		/** External (http) links open in a new tab. */
+		href: string;
+		children: Snippet;
+	};
+
+	let { href, target, rel, class: className, children, ...rest }: Props = $props();
+
+	let resolvedTarget = $derived(target ?? (href.startsWith('http') ? '_blank' : undefined));
+	let resolvedRel = $derived(rel ?? (resolvedTarget === '_blank' ? 'noopener' : undefined));
+</script>
+
+<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+<a {...rest} {href} target={resolvedTarget} rel={resolvedRel} class={['link', className]}>
+	{@render children()}
+</a>
+
+<style>
+	.link {
+		color: inherit;
+		text-decoration: underline;
+		text-decoration-thickness: max(1px, 0.0625em);
+		text-underline-offset: 4px;
+		outline: none;
+		cursor: pointer;
+		transition: opacity 200ms;
+	}
+
+	.link:hover {
+		opacity: 0.6;
+	}
+
+	.link:focus-visible {
+		text-decoration-thickness: max(2px, 0.125em);
+	}
+</style>

package/dist/components/link/Link.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAnchorAttributes, 'children'> & {
+    /** External (http) links open in a new tab. */
+    href: string;
+    children: Snippet;
+};
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/navbar/Navbar.svelte

@@ -0,0 +1,266 @@
+<script module lang="ts">
+	export type NavbarTriggerProps = {
+		onclick: () => void;
+		'aria-expanded': boolean;
+		'aria-controls': string;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+	import type { TransitionConfig } from 'svelte/transition';
+	import NavigationMenu from '../navigation-menu/NavigationMenu.svelte';
+
+	type Props = {
+		/** Whether the mobile menu is open. Bindable. */
+		open?: boolean;
+		/** Accessible name of the navigation landmark. */
+		label?: string;
+		/** Rendered at the start of the bar, e.g. a logo linking home. */
+		logo?: Snippet;
+		/** Rendered at the end of the bar on every screen size, e.g. a theme toggle. */
+		actions?: Snippet;
+		/**
+		 * Renders the button that opens the mobile menu below 640px. Spread the given props onto it,
+		 * e.g. `<Button {...props} icon={open ? X : Menu} label="Menu" />`.
+		 */
+		trigger: Snippet<[NavbarTriggerProps, boolean]>;
+		/** `NavigationMenuItem`s, shown inline on desktop and stacked in the mobile menu. */
+		children: Snippet;
+	};
+
+	let {
+		open = $bindable(false),
+		label = 'Main',
+		logo,
+		actions,
+		trigger,
+		children
+	}: Props = $props();
+
+	const id = $props.id();
+	let triggerEl: HTMLDivElement;
+	let height = $state(0);
+
+	const triggerProps: NavbarTriggerProps = $derived({
+		onclick: () => (open = !open),
+		'aria-expanded': open,
+		'aria-controls': `${id}-panel`
+	});
+
+	function close({ restoreFocus = false } = {}) {
+		open = false;
+		if (restoreFocus) triggerEl.querySelector<HTMLElement>('[aria-controls]')?.focus();
+	}
+
+	function handlePanelClick(event: MouseEvent) {
+		if ((event.target as Element).closest('a[href]')) close();
+	}
+
+	/** Makes everything outside the navbar inert, so focus stays in the open menu. */
+	function inertOutside(node: HTMLElement) {
+		const changed: HTMLElement[] = [];
+		for (let el = node; el.parentElement && el !== document.body; el = el.parentElement) {
+			for (const sibling of el.parentElement.children) {
+				if (sibling !== el && sibling instanceof HTMLElement && !sibling.inert) {
+					sibling.inert = true;
+					changed.push(sibling);
+				}
+			}
+		}
+		return () => changed.forEach((el) => (el.inert = false));
+	}
+
+	/** Uncovers the menu from the top while its content stays in place. */
+	const reveal: (node: Element) => TransitionConfig = () => ({
+		duration: prefersReducedMotion.current ? 0 : 250,
+		easing: cubicOut,
+		css: (t) => `clip-path: inset(0 0 ${(1 - t) * 100}% 0);`
+	});
+
+	const panel: Attachment<HTMLDivElement> = (node) => {
+		node.querySelector<HTMLElement>('a[href], button')?.focus();
+		return inertOutside(node.parentElement!);
+	};
+
+	$effect(() => {
+		const desktop = window.matchMedia('(min-width: 640px)');
+		const handleChange = () => desktop.matches && close();
+		handleChange();
+		desktop.addEventListener('change', handleChange);
+		return () => desktop.removeEventListener('change', handleChange);
+	});
+
+	$effect(() => {
+		if (!open) return;
+
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === 'Escape') close({ restoreFocus: true });
+		}
+
+		document.body.style.overflow = 'hidden';
+		window.addEventListener('keydown', handleKeydown);
+
+		return () => {
+			document.body.style.overflow = '';
+			window.removeEventListener('keydown', handleKeydown);
+		};
+	});
+</script>
+
+<header class="navbar" bind:offsetHeight={height}>
+	<div class="navbar-bar">
+		<div class="navbar-start">
+			{#if logo}{@render logo()}{/if}
+			<div class="navbar-desktop">
+				<NavigationMenu {label}>{@render children()}</NavigationMenu>
+			</div>
+		</div>
+
+		<div class="navbar-end">
+			{#if actions}{@render actions()}{/if}
+			<div class="navbar-trigger" bind:this={triggerEl}>
+				{@render trigger(triggerProps, open)}
+			</div>
+		</div>
+	</div>
+
+	{#if open}
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div
+			id="{id}-panel"
+			class="navbar-panel"
+			style:height="calc(100dvh - {height}px)"
+			onclick={handlePanelClick}
+			{@attach panel}
+			transition:reveal
+		>
+			<NavigationMenu {label} orientation="vertical">{@render children()}</NavigationMenu>
+		</div>
+	{/if}
+</header>
+
+<style>
+	.navbar {
+		position: sticky;
+		top: 0;
+		z-index: 50;
+		background-color: var(--color-bg);
+		user-select: none;
+	}
+
+	.navbar-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 14px 16px;
+	}
+
+	.navbar-start {
+		display: flex;
+		align-items: center;
+		gap: 40px;
+		min-width: 0;
+	}
+
+	.navbar-end {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.navbar-desktop {
+		display: none;
+	}
+
+	.navbar-trigger {
+		display: flex;
+	}
+
+	/* Mobile menu: full-height, left-aligned rows below the bar */
+	.navbar-panel {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		box-sizing: border-box;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		background-color: var(--color-bg);
+	}
+
+	.navbar-panel :global(.navigation-menu) {
+		padding: 40px 16px 32px;
+	}
+
+	.navbar-panel :global(.navigation-menu-list) {
+		gap: 0;
+	}
+
+	/* Rows are padded into the gutter so the focus background has room; the text stays aligned */
+	.navbar-panel :global(.navigation-menu-trigger) {
+		box-sizing: content-box;
+		gap: 8px;
+		margin-inline: -10px;
+		padding: 10px;
+		border-radius: 10px;
+		font-size: 22px;
+		font-weight: 600;
+		line-height: 1.2;
+	}
+
+	.navbar-panel :global(:is(.navigation-menu-trigger, .navigation-menu-link):focus-visible) {
+		outline: none;
+		background-color: var(--color-surface);
+	}
+
+	.navbar-panel :global(.navigation-menu-chevron) {
+		width: 20px;
+		height: 20px;
+		color: var(--color-text-muted);
+	}
+
+	.navbar-panel :global(.navigation-menu-sub) {
+		gap: 0;
+		margin: 0 -10px;
+		padding-bottom: 8px;
+	}
+
+	/* Sub-items show only their title */
+	.navbar-panel :global(.navigation-menu-link) {
+		font-size: 17px;
+		color: var(--color-text-secondary);
+	}
+
+	.navbar-panel :global(.navigation-menu-link-title) {
+		font-weight: 400;
+	}
+
+	.navbar-panel :global(.navigation-menu-link--active) {
+		background-color: transparent;
+		color: var(--color-text);
+	}
+
+	.navbar-panel :global(.navigation-menu-link--active .navigation-menu-link-title) {
+		font-weight: 500;
+	}
+
+	.navbar-panel :global(:is(.navigation-menu-link-icon, .navigation-menu-link-description)) {
+		display: none;
+	}
+
+	@media (min-width: 640px) {
+		.navbar-desktop {
+			display: flex;
+		}
+
+		.navbar-trigger,
+		.navbar-panel {
+			display: none;
+		}
+	}
+</style>

package/dist/components/navbar/Navbar.svelte.d.ts

@@ -0,0 +1,26 @@
+export type NavbarTriggerProps = {
+    onclick: () => void;
+    'aria-expanded': boolean;
+    'aria-controls': string;
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether the mobile menu is open. Bindable. */
+    open?: boolean;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** Rendered at the start of the bar, e.g. a logo linking home. */
+    logo?: Snippet;
+    /** Rendered at the end of the bar on every screen size, e.g. a theme toggle. */
+    actions?: Snippet;
+    /**
+     * Renders the button that opens the mobile menu below 640px. Spread the given props onto it,
+     * e.g. `<Button {...props} icon={open ? X : Menu} label="Menu" />`.
+     */
+    trigger: Snippet<[NavbarTriggerProps, boolean]>;
+    /** `NavigationMenuItem`s, shown inline on desktop and stacked in the mobile menu. */
+    children: Snippet;
+};
+declare const Navbar: import("svelte").Component<Props, {}, "open">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setNavigationMenuContext } from './context.js';
+
+	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;
+	};
+
+	let { label = 'Main', orientation = 'horizontal', children }: Props = $props();
+
+	const openDelay = 200;
+	const closeDelay = 200;
+
+	let current: string | null = $state(null);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	setNavigationMenuContext({
+		get vertical() {
+			return orientation === 'vertical';
+		},
+		get current() {
+			return current;
+		},
+		open(id, immediate = false) {
+			clearTimeout(timer);
+			if (immediate || current !== null) current = id;
+			else timer = setTimeout(() => (current = id), openDelay);
+		},
+		leave() {
+			clearTimeout(timer);
+			timer = setTimeout(() => (current = null), closeDelay);
+		},
+		stay() {
+			clearTimeout(timer);
+		},
+		close() {
+			clearTimeout(timer);
+			current = null;
+		}
+	});
+
+	$effect(() => () => clearTimeout(timer));
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (orientation === 'vertical') return;
+		if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+		const list = event.currentTarget as HTMLElement;
+		const triggers = Array.from(
+			list.querySelectorAll<HTMLElement>(':scope > li > .navigation-menu-trigger')
+		);
+		const index = triggers.indexOf(event.target as HTMLElement);
+		if (index === -1) return;
+		event.preventDefault();
+		const step = event.key === 'ArrowRight' ? 1 : -1;
+		triggers[(index + step + triggers.length) % triggers.length].focus();
+	}
+</script>
+
+<nav
+	aria-label={label}
+	class={['navigation-menu', { 'navigation-menu--vertical': orientation === 'vertical' }]}
+>
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<ul class="navigation-menu-list" onkeydown={handleKeydown}>
+		{@render children()}
+	</ul>
+</nav>
+
+<style>
+	.navigation-menu {
+		display: flex;
+		user-select: none;
+	}
+
+	.navigation-menu-list {
+		display: flex;
+		align-items: center;
+		gap: 24px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.navigation-menu--vertical .navigation-menu-list {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 4px;
+		width: 100%;
+	}
+</style>