@x33025/sveltely 0.1.18 → 0.1.19

package/dist/components/Library/Image/Image.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
+	import { ImageOffIcon } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { loader as loaderAction } from '../../../actions/loader';
 	import type { ImageFit, ImageLoading } from '../../../style/media';
-	import ImagePlaceholder from './ImagePlaceholder.svelte';
 
 	type Props = {
 		src?: string | null;
 		alt?: string;
 		fit?: ImageFit;
 		busy?: boolean;
-		placeholderKey?: string;
 		loading?: ImageLoading;
 		decoding?: HTMLImgAttributes['decoding'];
+		aspectRatio?: string;
 		children?: Snippet;
-		class?: string;
 	};
 
 	let {
@@ -21,28 +21,57 @@
 		alt = '',
 		fit = 'contain',
 		busy = false,
-		placeholderKey = 'default',
 		loading = 'lazy',
 		decoding = 'async',
-		children,
-		class: className = ''
+		aspectRatio,
+		children
 	}: Props = $props();
 
-	const showImage = $derived(Boolean(src) && !busy);
+	let imageLoaded = $state(false);
+	let imageFailed = $state(false);
+
+	$effect(() => {
+		src;
+		busy;
+		imageLoaded = false;
+		imageFailed = false;
+	});
+
+	const canRenderImage = $derived(Boolean(src) && !busy && !imageFailed);
+	const showLoader = $derived(busy || (Boolean(src) && !imageLoaded && !imageFailed));
+	const showMissingImage = $derived(!showLoader && (!src || imageFailed));
 </script>
 
-<div class={`image relative overflow-hidden bg-zinc-100 ${className}`}>
-	{#if showImage}
+<div
+	class="image relative overflow-hidden bg-zinc-100"
+	style={aspectRatio ? `aspect-ratio: ${aspectRatio}; height: auto;` : ''}
+	use:loaderAction={{
+		loading: showLoader,
+		background: 'color-mix(in oklab, var(--sveltely-text-secondary-color) 8%, transparent)',
+		color: 'color-mix(in oklab, var(--sveltely-text-secondary-color) 72%, transparent)'
+	}}
+>
+	{#if canRenderImage}
 		<img
 			{src}
 			{alt}
 			{loading}
 			{decoding}
 			draggable="false"
-			class="absolute inset-0 size-full {fit === 'cover' ? 'object-cover' : 'object-contain'}"
+			class="absolute inset-0 size-full {fit === 'cover'
+				? 'object-cover'
+				: 'object-contain'} {imageLoaded
+				? 'opacity-100'
+				: 'opacity-0'} transition-opacity duration-150"
+			onload={() => (imageLoaded = true)}
+			onerror={() => (imageFailed = true)}
 		/>
-	{:else}
-		<ImagePlaceholder seed={placeholderKey} class="absolute inset-0" />
+	{/if}
+
+	{#if showMissingImage}
+		<div class="image-fallback" aria-hidden="true">
+			<ImageOffIcon strokeWidth={1.5} />
+		</div>
 	{/if}
 
 	{#if children}
@@ -52,6 +81,22 @@
 
 <style>
 	.image {
+		width: 100%;
+		height: 100%;
 		border-radius: var(--image-border-radius, var(--sveltely-border-radius));
 	}
+
+	.image-fallback {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		background: color-mix(in oklab, var(--sveltely-text-secondary-color) 8%, transparent);
+		color: color-mix(in oklab, var(--sveltely-text-secondary-color) 72%, transparent);
+	}
+
+	.image-fallback :global(svg) {
+		width: clamp(3rem, 18%, 7rem);
+		height: clamp(3rem, 18%, 7rem);
+	}
 </style>

package/dist/components/Library/Image/Image.svelte.d.ts

@@ -6,11 +6,10 @@ type Props = {
     alt?: string;
     fit?: ImageFit;
     busy?: boolean;
-    placeholderKey?: string;
     loading?: ImageLoading;
     decoding?: HTMLImgAttributes['decoding'];
+    aspectRatio?: string;
     children?: Snippet;
-    class?: string;
 };
 declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;

package/dist/components/Library/Image/ImagePlaceholder.demo.svelte

@@ -0,0 +1,12 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'ImagePlaceholder',
+		description: 'Animated generated placeholder for custom image surfaces.'
+	};
+</script>
+
+<script lang="ts">
+	import { ImagePlaceholder } from './index';
+</script>
+
+<ImagePlaceholder seed="image-placeholder-demo" aspectRatio="4 / 3" />

package/dist/components/Library/Image/ImagePlaceholder.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import { ImagePlaceholder } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImagePlaceholder: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImagePlaceholder = InstanceType<typeof ImagePlaceholder>;
+export default ImagePlaceholder;

package/dist/components/Library/Image/ImagePlaceholder.svelte

@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 
 	let {
-		class: className = '',
-		seed = 'default'
+		seed = 'default',
+		aspectRatio
 	}: {
-		class?: string;
 		seed?: string;
+		aspectRatio?: string;
 	} = $props();
 
 	const fps = 24;
@@ -199,4 +199,28 @@
 	});
 </script>
 
-<canvas bind:this={canvas} class={`block size-full ${className}`}></canvas>
+<div
+	class="image-placeholder"
+	style={aspectRatio ? `aspect-ratio: ${aspectRatio}; height: auto;` : ''}
+	aria-hidden="true"
+>
+	<canvas bind:this={canvas} class="image-placeholder-canvas"></canvas>
+</div>
+
+<style>
+	.image-placeholder {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-radius: var(--image-placeholder-border-radius, var(--sveltely-border-radius));
+	}
+
+	.image-placeholder-canvas {
+		position: absolute;
+		inset: 0;
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/Library/Image/ImagePlaceholder.svelte.d.ts

@@ -1,6 +1,6 @@
 type $$ComponentProps = {
-    class?: string;
     seed?: string;
+    aspectRatio?: string;
 };
 declare const ImagePlaceholder: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImagePlaceholder = ReturnType<typeof ImagePlaceholder>;

package/dist/components/Library/Image/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Image.svelte';
+export { default as ImagePlaceholder } from './ImagePlaceholder.svelte';

package/dist/components/Library/Image/index.js

@@ -1 +1,2 @@
 export { default } from './Image.svelte';
+export { default as ImagePlaceholder } from './ImagePlaceholder.svelte';

package/dist/components/Library/ImageMask/BrushPreview.svelte

@@ -56,9 +56,9 @@
 		pointer-events: none;
 		border: 1.5px solid rgb(255 255 255 / 0.95);
 		border-radius: 9999px;
-		background: color-mix(in oklab, var(--sveltely-active-color) 16%, transparent);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 16%, transparent);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 90%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-control-active-color) 90%, transparent),
 			0 1px 4px rgb(0 0 0 / 0.22);
 		will-change: transform, width, height;
 	}
@@ -88,16 +88,16 @@
 		box-sizing: border-box;
 		border-radius: 9999px;
 		border: 1.5px solid rgb(255 255 255 / 0.95);
-		background: color-mix(in oklab, var(--sveltely-active-color) 20%, transparent);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 20%, transparent);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 95%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-control-active-color) 95%, transparent),
 			0 8px 24px rgb(0 0 0 / 0.24);
 	}
 
 	.brush-size-preview-label {
 		border-radius: 9999px;
 		background: rgb(255 255 255 / 0.88);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		font-size: 0.75rem;
 		font-weight: 650;
 		line-height: 1;
@@ -113,7 +113,7 @@
 	.brush-size-preview-erase .brush-size-preview-circle {
 		background: rgb(255 255 255 / 0.2);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 85%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-control-active-color) 85%, transparent),
 			0 8px 24px rgb(0 0 0 / 0.24);
 	}
 </style>

package/dist/components/Library/ImageMask/ImageMask.demo.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'ImageMask',
+		name: 'Image Mask',
 		description: 'Image mask editor that exposes the exported mask through bind:mask.',
 		columnSpan: 2,
 		rowSpan: 2
@@ -28,17 +28,19 @@
 		bind:tool
 		bind:clearRevision
 		fit="cover"
-		class="aspect-square"
+		aspectRatio="1 / 1"
 	/>
-	<div class="vstack gap-2 text-sm text-[var(--sveltely-secondary-color)]">
-		<div class="font-medium text-[var(--sveltely-primary-color)]">Mask</div>
+	<div class="vstack gap-2 text-sm text-[var(--sveltely-text-secondary-color)]">
+		<div class="font-medium text-[var(--sveltely-text-primary-color)]">Mask</div>
 		<div class="aspect-square overflow-hidden rounded-md border border-zinc-200 bg-black">
 			{#if mask}
 				<img src={mask.dataUrl} alt="Exported mask" class="size-full object-contain" />
 			{/if}
 		</div>
 		<label class="vstack gap-2 bg-white p-3">
-			<span class="font-medium text-[var(--sveltely-primary-color)]">Brush size {brushSize}px</span>
+			<span class="font-medium text-[var(--sveltely-text-primary-color)]"
+				>Brush size {brushSize}px</span
+			>
 			<Slider bind:value={brushSize} min={6} max={72} step={1} />
 			<div class="image-mask-controls">
 				<button
@@ -97,7 +99,7 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: 9999px;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		transition:
 			background-color 150ms,
 			color 150ms,
@@ -106,8 +108,8 @@
 
 	.image-mask-controls button:hover:not(:disabled),
 	.image-mask-controls button.active {
-		background: var(--sveltely-active-color);
-		color: var(--sveltely-background-color);
+		background: var(--sveltely-control-active-color);
+		color: var(--sveltely-control-background-color);
 	}
 
 	.image-mask-controls button:disabled {

package/dist/components/Library/ImageMask/ImageMask.svelte

@@ -11,13 +11,12 @@
 		fit = 'contain',
 		busy = false,
 		disabled = false,
-		placeholderKey = 'default',
 		loading = 'lazy',
 		brushSize = $bindable(24),
 		tool = $bindable<MaskTool>('paint'),
 		clearRevision = $bindable(0),
 		exportSize = 2048,
-		class: className = ''
+		aspectRatio
 	}: {
 		src?: string | null;
 		alt?: string;
@@ -25,22 +24,31 @@
 		fit?: ImageFit;
 		busy?: boolean;
 		disabled?: boolean;
-		placeholderKey?: string;
 		loading?: ImageLoading;
 		brushSize?: number;
 		tool?: MaskTool;
 		clearRevision?: number;
 		exportSize?: number;
-		class?: string;
+		aspectRatio?: string;
 	} = $props();
 
 	const canEdit = $derived(Boolean(src) && !busy && !disabled);
 </script>
 
-<div class={`image-mask relative ${className}`}>
-	<Image {src} {alt} {fit} {busy} {placeholderKey} {loading} class="size-full">
+<div
+	class="image-mask relative"
+	style={aspectRatio ? `aspect-ratio: ${aspectRatio}; height: auto;` : ''}
+>
+	<Image {src} {alt} {fit} {busy} {loading}>
 		{#if canEdit}
 			<MaskLayer bind:mask {tool} {brushSize} {exportSize} {disabled} {clearRevision} />
 		{/if}
 	</Image>
 </div>
+
+<style>
+	.image-mask {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/Library/ImageMask/ImageMask.svelte.d.ts

@@ -7,13 +7,12 @@ type $$ComponentProps = {
     fit?: ImageFit;
     busy?: boolean;
     disabled?: boolean;
-    placeholderKey?: string;
     loading?: ImageLoading;
     brushSize?: number;
     tool?: MaskTool;
     clearRevision?: number;
     exportSize?: number;
-    class?: string;
+    aspectRatio?: string;
 };
 declare const ImageMask: import("svelte").Component<$$ComponentProps, {}, "mask" | "brushSize" | "tool" | "clearRevision">;
 type ImageMask = ReturnType<typeof ImageMask>;

package/dist/components/Library/ImageMask/MaskLayer.svelte

@@ -130,6 +130,11 @@
 	}
 
 	function drawOutlineSurface() {
+		if (isDrawing) {
+			outlineContext?.clearRect(0, 0, viewportWidth, viewportHeight);
+			return;
+		}
+
 		drawMarchingAnts({
 			context: outlineContext,
 			contours,
@@ -144,14 +149,14 @@
 		drawOutlineSurface();
 		context.clearRect(0, 0, viewportWidth, viewportHeight);
 		if (!surfaceCanvas) return;
-		const primaryColor = canvas
-			? getComputedStyle(canvas).getPropertyValue('--sveltely-active-color').trim() ||
-				'var(--sveltely-active-color)'
-			: 'var(--sveltely-active-color)';
+		const maskColor = canvas
+			? getComputedStyle(canvas).getPropertyValue('--sveltely-control-active-color').trim() ||
+				'var(--sveltely-control-active-color)'
+			: 'var(--sveltely-control-active-color)';
 		context.save();
 		context.drawImage(surfaceCanvas, 0, 0, viewportWidth, viewportHeight);
 		context.globalCompositeOperation = 'source-in';
-		context.fillStyle = primaryColor;
+		context.fillStyle = maskColor;
 		context.globalAlpha = 0.32;
 		context.fillRect(0, 0, viewportWidth, viewportHeight);
 		context.restore();
@@ -160,7 +165,7 @@
 			context.save();
 			context.drawImage(outlineCanvas, 0, 0, viewportWidth, viewportHeight);
 			context.globalCompositeOperation = 'source-in';
-			context.fillStyle = primaryColor;
+			context.fillStyle = maskColor;
 			context.globalAlpha = 0.9;
 			context.fillRect(0, 0, viewportWidth, viewportHeight);
 			context.restore();
@@ -253,6 +258,7 @@
 		isDrawing = false;
 		lastPoint = null;
 		rebuildContours();
+		drawFrame();
 		emitMask();
 	}
 

package/dist/components/Library/Label/Label.demo.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Label',
-		description: 'Form label wrapper with top and left orientation.',
+		description: 'Form label wrapper with top, leading, and trailing placement.',
 		columnSpan: 2
 	};
 </script>
@@ -9,20 +9,26 @@
 <script lang="ts">
 	import { HashIcon, UserIcon } from '@lucide/svelte';
 	import HStack from '../HStack';
+	import Switch from '../Switch';
 	import NumberField from '../NumberField';
 	import TextField from '../TextField';
 	import Label from './Label.svelte';
 
 	let name = $state('');
 	let amount = $state<number | null>(35);
+	let enabled = $state(true);
 </script>
 
 <HStack gap={10} align="center">
-	<Label label="Name" icon={UserIcon} orientation="top">
+	<Label label="Name" icon={UserIcon} orientation="top" width="fit">
 		<TextField bind:value={name} placeholder="Sveltely" />
 	</Label>
 
-	<Label label="Amount" icon={HashIcon} orientation="left">
+	<Label label="Amount" icon={HashIcon} orientation="leading" width="fit">
 		<NumberField bind:value={amount} min={0} max={100} />
 	</Label>
+
+	<Label label="Enabled" orientation="trailing" width="fit">
+		<Switch bind:checked={enabled} />
+	</Label>
 </HStack>

package/dist/components/Library/Label/Label.svelte

@@ -125,7 +125,7 @@
 		min-height: min-content;
 		gap: var(--label-gap, calc(var(--sveltely-gap) * 0.75));
 		border-radius: var(--label-border-radius, 0px);
-		color: var(--label-color, var(--sveltely-primary-color));
+		color: var(--label-color, var(--sveltely-text-primary-color));
 		font-size: var(--label-font-size);
 		padding: var(--label-padding-y, 0px) var(--label-padding-x, 0px);
 	}
@@ -135,11 +135,17 @@
 		align-items: stretch;
 	}
 
-	.label[data-orientation='left'] {
+	.label[data-orientation='leading'],
+	.label[data-orientation='trailing'] {
 		flex-direction: row;
 		align-items: center;
 	}
 
+	.label[data-orientation='trailing'] {
+		flex-direction: row-reverse;
+		justify-content: flex-end;
+	}
+
 	.label-heading {
 		display: inline-flex;
 		min-width: max-content;

package/dist/components/Library/Link/Link.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		children?: Snippet;
 		label?: string;
 	} & StyleProps &
-		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-			class?: HTMLAnchorAttributes['class'];
-		};
+		TooltipProps &
+		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 
-	let { children, label, class: className = '', ...restProps }: Props = $props();
+	let { children, label, tooltip, ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -35,11 +36,10 @@
 </script>
 
 <a
-	class="link inline-flex items-center justify-center {iconOnly
-		? 'link-icon-only'
-		: ''} {className}"
+	class="link inline-flex items-center justify-center {iconOnly ? 'link-icon-only' : ''}"
 	style={rootStyle}
 	{...props}
+	use:tooltipAction={tooltip}
 >
 	{#if children}
 		{@render children()}
@@ -55,8 +55,8 @@
 		--link-icon-size: calc(var(--link-font-size) * 1.143);
 		border: 1px solid var(--link-border-color, var(--sveltely-border-color));
 		border-radius: var(--link-border-radius, var(--sveltely-border-radius));
-		background: var(--link-background, var(--sveltely-background-color));
-		color: var(--link-color, var(--sveltely-primary-color));
+		background: var(--link-background, var(--sveltely-control-background-color));
+		color: var(--link-color, var(--sveltely-text-primary-color));
 		gap: var(--link-gap, var(--sveltely-gap));
 		font-size: var(--link-font-size);
 		line-height: 1.25;
@@ -65,19 +65,7 @@
 		text-decoration: none;
 		transition:
 			color 150ms,
-			border-color 150ms,
-			background-color 150ms;
-	}
-
-	.link:hover {
-		background: var(
-			--link-hover-background,
-			color-mix(
-				in oklab,
-				var(--link-background, var(--sveltely-background-color)) 88%,
-				var(--link-color, var(--sveltely-primary-color))
-			)
-		);
+			border-color 150ms;
 	}
 
 	.link-icon-only {

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

@@ -1,12 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     children?: Snippet;
     label?: string;
-} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-    class?: HTMLAnchorAttributes['class'];
-};
+} & StyleProps & TooltipProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/components/Library/Loader/Loader.demo.svelte

@@ -28,10 +28,16 @@
 </script>
 
 <ScrollView
-	background="color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-primary-color))"
+	background="color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-text-primary-color))"
 	borderRadius={7.5}
 	scrollGradient={false}
-	loader={{ text: 'Loading preview...', promise: pending }}
+	loader={{
+		text: 'Loading preview...',
+		promise: pending,
+		background:
+			'color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-text-primary-color))',
+		fontSize: 12
+	}}
 >
 	<div class="loader-demo">
 		<div class="loader-demo-copy">
@@ -67,7 +73,7 @@
 	}
 
 	.loader-demo-copy span {
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: calc(var(--sveltely-font-size) * 0.875);
 		line-height: 1.3;
 	}

package/dist/components/Library/NavigationStack/Link.svelte

@@ -8,11 +8,9 @@
 		label?: string;
 		active?: boolean;
 	} & StyleProps &
-		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-			class?: HTMLAnchorAttributes['class'];
-		};
+		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 
-	let { children, label, active = false, class: className = '', ...restProps }: Props = $props();
+	let { children, label, active = false, ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -20,12 +18,7 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'navigation-link'));
 </script>
 
-<a
-	class="navigation-link {className}"
-	class:navigation-link-active={active}
-	style={rootStyle}
-	{...props}
->
+<a class="navigation-link" class:navigation-link-active={active} style={rootStyle} {...props}>
 	{#if children}
 		{@render children()}
 	{:else if label}
@@ -42,7 +35,7 @@
 		min-width: 0;
 		align-items: center;
 		border-radius: var(--navigation-link-border-radius, var(--sveltely-border-radius));
-		color: var(--navigation-link-color, var(--sveltely-primary-color));
+		color: var(--navigation-link-color, var(--sveltely-text-primary-color));
 		gap: var(--navigation-link-gap, var(--sveltely-gap));
 		font-size: var(--navigation-link-font-size);
 		line-height: 1.25;
@@ -62,7 +55,10 @@
 
 	.navigation-link:hover,
 	.navigation-link-active {
-		background: var(--navigation-link-active-background, var(--sveltely-hover-color));
+		background: var(
+			--navigation-link-active-background,
+			color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent)
+		);
 	}
 
 	.navigation-link :global(svg) {

package/dist/components/Library/NavigationStack/Link.svelte.d.ts

@@ -5,9 +5,7 @@ type Props = {
     children?: Snippet;
     label?: string;
     active?: boolean;
-} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-    class?: HTMLAnchorAttributes['class'];
-};
+} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;