@noahbaumgartner/svelte-ui 0.0.5 → 0.0.6

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

@@ -4,7 +4,8 @@ type Props = Omit<HTMLAnchorAttributes, 'children'> & {
     /** External (http) links open in a new tab. */
     href: string;
     children: Snippet;
+    ref?: HTMLAnchorElement | null;
 };
-declare const Link: import("svelte").Component<Props, {}, "">;
+declare const Link: import("svelte").Component<Props, {}, "ref">;
 type Link = ReturnType<typeof Link>;
 export default Link;

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

@@ -6,11 +6,10 @@
 		colors: string[];
 		/** Same seed gives the same layout; defaults to the joined colours. */
 		seed?: string;
-		/** Film grain overlay. */
-		grain?: boolean;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { colors, seed = '', grain = true, class: className, ...rest }: Props = $props();
+	let { colors, seed = '', class: className, ref = $bindable(null), ...rest }: Props = $props();
 
 	function hashSeed(str: string) {
 		let h = 0;
@@ -44,7 +43,8 @@
 
 <div
 	{...rest}
-	class={['mesh-gradient', grain && 'mesh-gradient--grain', className]}
+	bind:this={ref}
+	class={['mesh-gradient', className]}
 	style:background-color={colors[0]}
 	aria-hidden="true"
 >
@@ -62,25 +62,36 @@
 </div>
 
 <style>
-	.mesh-gradient {
-		position: relative;
-		overflow: hidden;
-	}
+	@layer svelte-ui {
+		/* Fills whatever it is placed in; size, shape and radius come from the container. */
+		.mesh-gradient {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+		}
 
-	.mesh-gradient-blob {
-		position: absolute;
-		border-radius: 50%;
-		transform: translate(-50%, -50%);
-	}
+		.mesh-gradient-blob {
+			position: absolute;
+			border-radius: 50%;
+			transform: translate(-50%, -50%);
+		}
 
-	.mesh-gradient--grain::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-		background-size: 160px 160px;
-		opacity: 0.55;
-		mix-blend-mode: overlay;
-		pointer-events: none;
+		.mesh-gradient::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+			background-size: 160px 160px;
+			opacity: 0.55;
+			mix-blend-mode: overlay;
+			pointer-events: none;
+		}
+
+		@media (forced-colors: active) {
+			.mesh-gradient {
+				forced-color-adjust: none;
+			}
+		}
 	}
 </style>

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

@@ -4,9 +4,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     colors: string[];
     /** Same seed gives the same layout; defaults to the joined colours. */
     seed?: string;
-    /** Film grain overlay. */
-    grain?: boolean;
+    ref?: HTMLDivElement | null;
 };
-declare const MeshGradient: import("svelte").Component<Props, {}, "">;
+declare const MeshGradient: import("svelte").Component<Props, {}, "ref">;
 type MeshGradient = ReturnType<typeof MeshGradient>;
 export default MeshGradient;

package/dist/components/navbar/Navbar.svelte

@@ -8,13 +8,14 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	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 = {
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		/** Whether the mobile menu is open. Bindable. */
 		open?: boolean;
 		/** Accessible name of the navigation landmark. */
@@ -30,6 +31,7 @@
 		trigger: Snippet<[NavbarTriggerProps, boolean]>;
 		/** `NavigationMenuItem`s, shown inline on desktop and stacked in the mobile menu. */
 		children: Snippet;
+		ref?: HTMLElement | null;
 	};
 
 	let {
@@ -38,7 +40,10 @@
 		logo,
 		actions,
 		trigger,
-		children
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
 	}: Props = $props();
 
 	const id = $props.id();
@@ -111,7 +116,7 @@
 	});
 </script>
 
-<header class="navbar" bind:offsetHeight={height}>
+<header {...rest} bind:this={ref} class={['navbar', className]} bind:offsetHeight={height}>
 	<div class="navbar-bar">
 		<div class="navbar-start">
 			{#if logo}{@render logo()}{/if}
@@ -144,123 +149,156 @@
 </header>
 
 <style>
-	.navbar {
-		position: sticky;
-		top: 0;
-		z-index: 50;
-		background-color: var(--color-bg);
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.navbar {
+			position: sticky;
+			top: 0;
+			z-index: 50;
+			background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
+			-webkit-backdrop-filter: blur(12px);
+			backdrop-filter: blur(12px);
+			user-select: none;
+		}
 
-	.navbar-bar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 16px;
-		padding: 14px 16px;
-	}
+		/* Without a blurred backdrop, translucent text-on-content would be hard to read */
+		@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+			.navbar {
+				background-color: var(--color-bg);
+			}
+		}
 
-	.navbar-start {
-		display: flex;
-		align-items: center;
-		gap: 40px;
-		min-width: 0;
-	}
+		@media (prefers-reduced-transparency: reduce) {
+			.navbar {
+				background-color: var(--color-bg);
+				-webkit-backdrop-filter: none;
+				backdrop-filter: none;
+			}
+		}
 
-	.navbar-end {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
+		.navbar-bar {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 16px;
+			padding: 14px var(--navbar-gutter, 16px);
+		}
 
-	.navbar-desktop {
-		display: none;
-	}
+		.navbar-start {
+			display: flex;
+			align-items: center;
+			gap: 40px;
+			min-width: 0;
+		}
 
-	.navbar-trigger {
-		display: flex;
-	}
+		.navbar-end {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+		}
 
-	/* 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-desktop {
+			display: none;
+		}
 
-	.navbar-panel :global(.navigation-menu) {
-		padding: 40px 16px 32px;
-	}
+		.navbar-trigger {
+			display: flex;
+		}
 
-	.navbar-panel :global(.navigation-menu-list) {
-		gap: 0;
-	}
+		/* 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);
+		}
 
-	/* 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(.navigation-menu) {
+			padding: 32px var(--navbar-gutter, 16px);
+		}
 
-	.navbar-panel :global(:is(.navigation-menu-trigger, .navigation-menu-link):focus-visible) {
-		outline: none;
-		background-color: var(--color-surface);
-	}
+		.navbar-panel :global(.navigation-menu-list) {
+			gap: 0;
+		}
 
-	.navbar-panel :global(.navigation-menu-chevron) {
-		width: 20px;
-		height: 20px;
-		color: var(--color-text-muted);
-	}
+		.navbar-panel :global(.navigation-menu-trigger) {
+			gap: 8px;
+			padding-block: 10px;
+			font-size: 22px;
+			font-weight: 600;
+			line-height: 1.2;
+		}
 
-	.navbar-panel :global(.navigation-menu-sub) {
-		gap: 0;
-		margin: 0 -10px;
-		padding-bottom: 8px;
-	}
+		.navbar-panel :global(.navigation-menu-chevron) {
+			width: 20px;
+			height: 20px;
+			color: var(--color-text-muted);
+		}
 
-	/* 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-sub) {
+			gap: 0;
+			margin: 0;
+			padding-bottom: 8px;
+		}
 
-	.navbar-panel :global(.navigation-menu-link-title) {
-		font-weight: 400;
-	}
+		/* Sub-items are plain rows that show only their title */
+		.navbar-panel :global(.navigation-menu-link) {
+			padding: 8px 0;
+			border-radius: 0;
+			background-color: transparent;
+			font-size: 17px;
+			color: var(--color-text-secondary);
+		}
 
-	.navbar-panel :global(.navigation-menu-link--active) {
-		background-color: transparent;
-		color: var(--color-text);
-	}
+		.navbar-panel :global(.navigation-menu-link:focus-visible) {
+			outline-offset: 2px;
+		}
 
-	.navbar-panel :global(.navigation-menu-link--active .navigation-menu-link-title) {
-		font-weight: 500;
-	}
+		.navbar-panel :global(.navigation-menu-link-title) {
+			font-weight: 400;
+		}
 
-	.navbar-panel :global(:is(.navigation-menu-link-icon, .navigation-menu-link-description)) {
-		display: none;
-	}
+		.navbar-panel :global(.navigation-menu-link--active) {
+			color: var(--color-text);
+		}
 
-	@media (min-width: 640px) {
-		.navbar-desktop {
-			display: flex;
+		.navbar-panel :global(.navigation-menu-link--active .navigation-menu-link-title) {
+			font-weight: 500;
 		}
 
-		.navbar-trigger,
-		.navbar-panel {
+		.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;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.navbar {
+				-webkit-backdrop-filter: none;
+				backdrop-filter: none;
+			}
+
+			.navbar-panel :global(.navigation-menu-link--active) {
+				text-decoration: underline;
+			}
+		}
+
+		@media (pointer: coarse) {
+			.navbar-panel :global(.navigation-menu-trigger) {
+				min-height: 0;
+			}
+		}
 	}
 </style>

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

@@ -4,7 +4,8 @@ export type NavbarTriggerProps = {
     'aria-controls': string;
 };
 import type { Snippet } from 'svelte';
-type Props = {
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** Whether the mobile menu is open. Bindable. */
     open?: boolean;
     /** Accessible name of the navigation landmark. */
@@ -20,7 +21,8 @@ type Props = {
     trigger: Snippet<[NavbarTriggerProps, boolean]>;
     /** `NavigationMenuItem`s, shown inline on desktop and stacked in the mobile menu. */
     children: Snippet;
+    ref?: HTMLElement | null;
 };
-declare const Navbar: import("svelte").Component<Props, {}, "open">;
+declare const Navbar: import("svelte").Component<Props, {}, "ref" | "open">;
 type Navbar = ReturnType<typeof Navbar>;
 export default Navbar;

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

@@ -1,17 +1,26 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { setNavigationMenuContext } from './context.js';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		/** 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;
+		ref?: HTMLElement | null;
 	};
 
-	let { label = 'Main', orientation = 'horizontal', children }: Props = $props();
+	let {
+		label = 'Main',
+		orientation = 'horizontal',
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 
 	const openDelay = 200;
 	const closeDelay = 200;
@@ -62,8 +71,14 @@
 </script>
 
 <nav
+	{...rest}
+	bind:this={ref}
 	aria-label={label}
-	class={['navigation-menu', { 'navigation-menu--vertical': orientation === 'vertical' }]}
+	class={[
+		'navigation-menu',
+		{ 'navigation-menu--vertical': orientation === 'vertical' },
+		className
+	]}
 >
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<ul class="navigation-menu-list" onkeydown={handleKeydown}>
@@ -72,24 +87,26 @@
 </nav>
 
 <style>
-	.navigation-menu {
-		display: flex;
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.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-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%;
+		.navigation-menu--vertical .navigation-menu-list {
+			flex-direction: column;
+			align-items: stretch;
+			gap: 4px;
+			width: 100%;
+		}
 	}
 </style>

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

@@ -1,12 +1,14 @@
 import type { Snippet } from 'svelte';
-type Props = {
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** 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;
+    ref?: HTMLElement | null;
 };
-declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
+declare const NavigationMenu: import("svelte").Component<Props, {}, "ref">;
 type NavigationMenu = ReturnType<typeof NavigationMenu>;
 export default NavigationMenu;