@dryui/ui 3.0.0 → 4.0.1

package/dist/god-rays/god-rays.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { observeOffscreenState } from '@dryui/primitives/internal/motion';
+	import { observeOffscreenState } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 		color?: string | undefined;
@@ -14,7 +14,7 @@
 	}
 
 	let {
-		color = 'rgba(255, 255, 255, 0.15)',
+		color,
 		rayCount = 12,
 		intensity = 60,
 		center = { x: 0.5, y: 0 },
@@ -38,8 +38,8 @@
 		const stops: string[] = [];
 		for (let i = 0; i < count; i++) {
 			const start = i * sliceDeg;
-			stops.push(`var(--dry-rays-color) ${start}deg`);
-			stops.push(`var(--dry-rays-color) ${start + rayDeg}deg`);
+			stops.push(`var(--dry-rays-color, rgba(255, 255, 255, 0.15)) ${start}deg`);
+			stops.push(`var(--dry-rays-color, rgba(255, 255, 255, 0.15)) ${start + rayDeg}deg`);
 			stops.push(`transparent ${start + rayDeg}deg`);
 			stops.push(`transparent ${start + sliceDeg}deg`);
 		}
@@ -49,7 +49,8 @@
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
-			node.style.setProperty('--dry-rays-color', color);
+			if (color) node.style.setProperty('--dry-rays-color', color);
+			else node.style.removeProperty('--dry-rays-color');
 			node.style.setProperty('--dry-rays-cx', cx);
 			node.style.setProperty('--dry-rays-cy', cy);
 			node.style.setProperty('--dry-rays-intensity', clampedIntensity);
@@ -85,7 +86,6 @@
 
 <style>
 	[data-god-rays] {
-		--dry-rays-color: rgba(255, 255, 255, 0.15);
 		--dry-rays-cx: 50%;
 		--dry-rays-cy: 0%;
 		--dry-rays-intensity: 60;

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
@@ -7,10 +6,8 @@
 		observeInViewport,
 		observePageVisibility,
 		observeReducedMotionPreference,
-		registerPropertyOnce,
-		supportsPropertyRegistration,
 		supportsPointerTracking
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		colors?: readonly [string, string, string, string];
@@ -20,7 +17,7 @@
 	}
 
 	let {
-		colors = ['#7b68ee', '#38bdf8', '#f472b6', '#4ade80'] as const,
+		colors,
 		speed = 'normal',
 		interactive = false,
 		children: childSnippet,
@@ -29,7 +26,7 @@
 		...rest
 	}: Props = $props();
 
-	let element = $state<HTMLDivElement | null>(null);
+	let element = $state<HTMLDivElement>();
 	let prefersReducedMotion = $state(false);
 	let animated = $state(false);
 	let onScreen = $state(true);
@@ -41,15 +38,6 @@
 	let pendingPointerX = '50%';
 	let pendingPointerY = '50%';
 
-	function captureElement(node: HTMLDivElement) {
-		element = node;
-		return {
-			destroy() {
-				if (element === node) element = null;
-			}
-		};
-	}
-
 	const speedDuration = $derived.by(() => {
 		if (typeof speed === 'number' && Number.isFinite(speed) && speed > 0) {
 			return `${(12 / speed).toFixed(2)}s`;
@@ -99,35 +87,10 @@
 		pointerY = '50%';
 	}
 
-	onMount(() => {
-		registerPropertyOnce({
-			name: '--dry-mesh-color-1',
-			syntax: '<color>',
-			inherits: false,
-			initialValue: '#7b68ee'
-		});
-		registerPropertyOnce({
-			name: '--dry-mesh-color-2',
-			syntax: '<color>',
-			inherits: false,
-			initialValue: '#38bdf8'
-		});
-		registerPropertyOnce({
-			name: '--dry-mesh-color-3',
-			syntax: '<color>',
-			inherits: false,
-			initialValue: '#f472b6'
-		});
-		registerPropertyOnce({
-			name: '--dry-mesh-color-4',
-			syntax: '<color>',
-			inherits: false,
-			initialValue: '#4ade80'
-		});
-
+	$effect(() => {
 		const updateAnimatedState = (matches: boolean) => {
 			prefersReducedMotion = matches;
-			animated = !matches && supportsPropertyRegistration();
+			animated = !matches;
 		};
 
 		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
@@ -145,11 +108,7 @@
 			);
 		}
 
-		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
-			animated = false;
-		} else {
-			animated = true;
-		}
+		animated = !getReducedMotionPreference();
 
 		return () => {
 			cancelQueuedPointerPosition();
@@ -159,23 +118,25 @@
 		};
 	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-mesh-color-1', colors[0]);
-			node.style.setProperty('--dry-mesh-color-2', colors[1]);
-			node.style.setProperty('--dry-mesh-color-3', colors[2]);
-			node.style.setProperty('--dry-mesh-color-4', colors[3]);
-			node.style.setProperty('--dry-mesh-duration', speedDuration);
-			node.style.setProperty('--dry-mesh-pointer-x', pointerX);
-			node.style.setProperty('--dry-mesh-pointer-y', pointerY);
-		});
-	}
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		if (colors) {
+			for (let i = 0; i < 4; i++) {
+				const value = colors[i];
+				const prop = `--dry-mesh-color-${i + 1}`;
+				if (value) element.style.setProperty(prop, value);
+				else element.style.removeProperty(prop);
+			}
+		}
+		element.style.setProperty('--dry-mesh-duration', speedDuration);
+		element.style.setProperty('--dry-mesh-pointer-x', pointerX);
+		element.style.setProperty('--dry-mesh-pointer-y', pointerY);
+	});
 </script>
 
 <div
-	{@attach captureElement}
-	{@attach applyStyles}
+	bind:this={element}
 	class={className}
 	data-gradient-mesh
 	data-animated={animated || undefined}
@@ -196,55 +157,96 @@
 <style>
 	[data-gradient-mesh] {
 		--dry-mesh-duration: 12s;
-		--dry-mesh-color-1: #7b68ee;
-		--dry-mesh-color-2: #38bdf8;
-		--dry-mesh-color-3: #f472b6;
-		--dry-mesh-color-4: #4ade80;
 		--dry-mesh-pointer-x: 50%;
 		--dry-mesh-pointer-y: 50%;
+		--dry-mesh-origin-1: 18% 18%;
+		--dry-mesh-origin-2: 82% 18%;
+		--dry-mesh-origin-3: 72% 82%;
+		--dry-mesh-origin-4: 18% 78%;
+		--dry-mesh-base: linear-gradient(
+			135deg,
+			var(--dry-mesh-color-4, #4ade80) 0%,
+			var(--dry-mesh-color-1, #7b68ee) 34%,
+			var(--dry-mesh-color-2, #38bdf8) 68%,
+			var(--dry-mesh-color-3, #f472b6) 100%
+		);
 
 		position: relative;
 		isolation: isolate;
 		overflow: hidden;
 		border-radius: inherit;
 		background:
-			radial-gradient(ellipse 60% 50% at 20% 20%, var(--dry-mesh-color-1), transparent 70%),
-			radial-gradient(ellipse 50% 60% at 80% 20%, var(--dry-mesh-color-2), transparent 70%),
-			radial-gradient(ellipse 55% 55% at 70% 80%, var(--dry-mesh-color-3), transparent 70%),
-			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4), transparent 70%);
-	}
-
-	/* Static fallback without @property */
-	@supports not (background: paint(id)) {
-		[data-gradient-mesh]:not([data-animated]) {
-			background: linear-gradient(
-				135deg,
-				var(--dry-mesh-color-1) 0%,
-				var(--dry-mesh-color-2) 33%,
-				var(--dry-mesh-color-3) 66%,
-				var(--dry-mesh-color-4) 100%
-			);
-		}
+			radial-gradient(
+				ellipse 80% 70% at var(--dry-mesh-origin-1),
+				var(--dry-mesh-color-1, #7b68ee) 0%,
+				transparent 68%
+			),
+			radial-gradient(
+				ellipse 70% 68% at var(--dry-mesh-origin-2),
+				var(--dry-mesh-color-2, #38bdf8) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 78% 62% at var(--dry-mesh-origin-3),
+				var(--dry-mesh-color-3, #f472b6) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 72% 66% at var(--dry-mesh-origin-4),
+				var(--dry-mesh-color-4, #4ade80) 0%,
+				transparent 72%
+			),
+			var(--dry-mesh-base);
+		background:
+			radial-gradient(
+				ellipse 80% 70% at var(--dry-mesh-origin-1),
+				color-mix(in srgb, var(--dry-mesh-color-1, #7b68ee) 86%, transparent) 0%,
+				transparent 68%
+			),
+			radial-gradient(
+				ellipse 70% 68% at var(--dry-mesh-origin-2),
+				color-mix(in srgb, var(--dry-mesh-color-2, #38bdf8) 82%, transparent) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 78% 62% at var(--dry-mesh-origin-3),
+				color-mix(in srgb, var(--dry-mesh-color-3, #f472b6) 84%, transparent) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 72% 66% at var(--dry-mesh-origin-4),
+				color-mix(in srgb, var(--dry-mesh-color-4, #4ade80) 84%, transparent) 0%,
+				transparent 72%
+			),
+			var(--dry-mesh-base);
+		background-size:
+			130% 130%,
+			125% 125%,
+			135% 130%,
+			125% 130%,
+			100% 100%;
+		background-position:
+			0% 8%,
+			100% 0%,
+			90% 100%,
+			0% 92%,
+			center;
 	}
 
 	[data-gradient-mesh][data-animated] {
 		animation: mesh-cycle var(--dry-mesh-duration) ease-in-out infinite alternate;
 	}
 
+	[data-gradient-mesh][data-animated]:not([data-paused]) {
+		will-change: background-position;
+	}
+
 	[data-gradient-mesh][data-animated][data-paused] {
 		animation-play-state: paused;
 	}
 
 	[data-gradient-mesh][data-interactive] {
-		background:
-			radial-gradient(
-				ellipse 60% 50% at var(--dry-mesh-pointer-x) var(--dry-mesh-pointer-y),
-				var(--dry-mesh-color-1),
-				transparent 70%
-			),
-			radial-gradient(ellipse 50% 60% at 80% 20%, var(--dry-mesh-color-2), transparent 70%),
-			radial-gradient(ellipse 55% 55% at 70% 80%, var(--dry-mesh-color-3), transparent 70%),
-			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4), transparent 70%);
+		--dry-mesh-origin-1: var(--dry-mesh-pointer-x) var(--dry-mesh-pointer-y);
 	}
 
 	[data-gradient-mesh][data-reduced-motion] {
@@ -258,31 +260,30 @@
 
 	@keyframes mesh-cycle {
 		0% {
-			--dry-mesh-color-1: var(--dry-mesh-color-1);
-			--dry-mesh-color-2: var(--dry-mesh-color-2);
-			--dry-mesh-color-3: var(--dry-mesh-color-3);
-			--dry-mesh-color-4: var(--dry-mesh-color-4);
-		}
-
-		33% {
-			--dry-mesh-color-1: var(--dry-mesh-color-2);
-			--dry-mesh-color-2: var(--dry-mesh-color-3);
-			--dry-mesh-color-3: var(--dry-mesh-color-4);
-			--dry-mesh-color-4: var(--dry-mesh-color-1);
+			background-position:
+				0% 8%,
+				100% 0%,
+				90% 100%,
+				0% 92%,
+				center;
 		}
 
-		66% {
-			--dry-mesh-color-1: var(--dry-mesh-color-3);
-			--dry-mesh-color-2: var(--dry-mesh-color-4);
-			--dry-mesh-color-3: var(--dry-mesh-color-1);
-			--dry-mesh-color-4: var(--dry-mesh-color-2);
+		50% {
+			background-position:
+				12% 18%,
+				88% 14%,
+				100% 82%,
+				14% 100%,
+				center;
 		}
 
 		100% {
-			--dry-mesh-color-1: var(--dry-mesh-color-4);
-			--dry-mesh-color-2: var(--dry-mesh-color-1);
-			--dry-mesh-color-3: var(--dry-mesh-color-2);
-			--dry-mesh-color-4: var(--dry-mesh-color-3);
+			background-position:
+				8% 0%,
+				96% 18%,
+				82% 94%,
+				6% 84%,
+				center;
 		}
 	}
 

package/dist/halftone/halftone.svelte

@@ -39,24 +39,19 @@
 	const normalizedOpacity = $derived(`${Math.max(0, Math.min(1, opacity))}`);
 	const angleValue = $derived(`${angle}deg`);
 
-	function setHalftoneVars(node: HTMLDivElement) {
-		$effect(() => {
-			node.style.setProperty('--dry-halftone-pattern-size', patternSize);
-			node.style.setProperty('--dry-halftone-dot-radius', dotRadius);
-			node.style.setProperty('--dry-halftone-color', color);
-			node.style.setProperty('--dry-halftone-opacity', normalizedOpacity);
-			node.style.setProperty('--dry-halftone-angle', angleValue);
-		});
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-halftone-pattern-size', patternSize);
+		el.style.setProperty('--dry-halftone-dot-radius', dotRadius);
+		el.style.setProperty('--dry-halftone-color', color);
+		el.style.setProperty('--dry-halftone-opacity', normalizedOpacity);
+		el.style.setProperty('--dry-halftone-angle', angleValue);
+	});
 </script>
 
-<div
-	{@attach setHalftoneVars}
-	class={className}
-	data-halftone
-	data-dot-size={dotSizeName}
-	{...rest}
->
+<div bind:this={el} class={className} data-halftone data-dot-size={dotSizeName} {...rest}>
 	{#if children}
 		<div data-halftone-content>
 			{@render children()}
@@ -66,12 +61,6 @@
 
 <style>
 	[data-halftone] {
-		--dry-halftone-pattern-size: 12;
-		--dry-halftone-dot-radius: 1.8;
-		--dry-halftone-color: currentColor;
-		--dry-halftone-opacity: 0.3;
-		--dry-halftone-angle: 45deg;
-
 		position: relative;
 		isolation: isolate;
 		border-radius: inherit;
@@ -83,17 +72,17 @@
 		position: absolute;
 		inset: -10%;
 		pointer-events: none;
-		opacity: var(--dry-halftone-opacity);
+		opacity: var(--dry-halftone-opacity, 0.3);
 		mix-blend-mode: multiply;
-		transform: rotate(var(--dry-halftone-angle));
+		transform: rotate(var(--dry-halftone-angle, 45deg));
 		transform-origin: center;
 		background-image: radial-gradient(
 			circle at center,
-			var(--dry-halftone-color) 0 calc(var(--dry-halftone-dot-radius) * 1px),
-			transparent calc((var(--dry-halftone-dot-radius) * 1px) + 0.8px)
+			var(--dry-halftone-color, currentColor) 0 calc(var(--dry-halftone-dot-radius, 1.8) * 1px),
+			transparent calc((var(--dry-halftone-dot-radius, 1.8) * 1px) + 0.8px)
 		);
-		background-size: calc(var(--dry-halftone-pattern-size) * 1px)
-			calc(var(--dry-halftone-pattern-size) * 1px);
+		background-size: calc(var(--dry-halftone-pattern-size, 12) * 1px)
+			calc(var(--dry-halftone-pattern-size, 12) * 1px);
 		background-repeat: repeat;
 	}
 

package/dist/heading/heading.svelte

@@ -27,32 +27,26 @@
 </script>
 
 {#if level === 1}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h6>

package/dist/hover-card/hover-card-content.svelte

@@ -22,13 +22,15 @@
 
 	const ctx = getHoverCardCtx();
 
+	let contentEl = $state<HTMLDivElement>();
+
 	const overlay = createAnchoredOverlayContent({
 		ctx,
+		contentEl: () => contentEl ?? null,
 		placement: () => placement,
 		offset: () => offset,
-		style: () => style,
-		onContentChange: (contentEl) => {
-			ctx.contentEl = contentEl;
+		onContentChange: (next) => {
+			ctx.contentEl = next;
 		}
 	});
 
@@ -63,8 +65,8 @@
 </script>
 
 <div
-	{@attach overlay.bindContent}
-	{@attach overlay.position}
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
 	id={ctx.contentId}
 	popover="manual"
 	role="dialog"
@@ -111,6 +113,7 @@
 		border-radius: var(--dry-hover-card-radius);
 		box-shadow: var(--dry-hover-card-shadow);
 		padding: var(--dry-hover-card-padding);
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
 		z-index: var(--dry-layer-overlay);

package/dist/hover-card/hover-card.meta.js

@@ -1,7 +1,7 @@
 /** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
 export default {
     name: 'HoverCard',
-    description: 'Card popup on hover with delay-based open/close',
+    description: 'Surface popup on hover with delay-based open/close',
     category: 'overlay',
-    tags: ['hover', 'card', 'preview', 'popup']
+    tags: ['hover', 'preview', 'popup']
 };

package/dist/icon/icon.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { variantAttrs } from '@dryui/primitives';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		color?: 'primary' | 'muted' | 'current';
 		label?: string;
-		class?: string;
 		children: Snippet;
 	}
 
-	let { size = 'md', color = 'current', label, class: className, children }: Props = $props();
+	let {
+		size = 'md',
+		color = 'current',
+		label,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 
 	function sizeSvg(node: HTMLElement) {
 		const svg = node.querySelector('svg');
@@ -28,6 +35,7 @@
 	aria-hidden={label ? undefined : true}
 	{...variantAttrs({ size, color })}
 	class={className}
+	{...rest}
 	use:sizeSvg
 >
 	{@render children()}
@@ -35,47 +43,50 @@
 
 <style>
 	span {
+		--_icon-size-default: var(--dry-space-5);
+		--_icon-color-default: currentColor;
+
 		display: inline-grid;
 		place-items: center;
 		aspect-ratio: 1;
-		height: var(--dry-icon-size, var(--dry-space-5));
-		color: var(--dry-icon-color, currentColor);
+		height: var(--dry-icon-size, var(--_icon-size-default));
+		color: var(--dry-icon-color, var(--_icon-color-default));
 		line-height: 0;
 	}
 
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
 	span[data-size='xs'] {
-		--dry-icon-size: var(--dry-space-3);
+		--_icon-size-default: var(--dry-space-3);
 	}
 
 	span[data-size='sm'] {
-		--dry-icon-size: var(--dry-space-4);
+		--_icon-size-default: var(--dry-space-4);
 	}
 
 	span[data-size='md'] {
-		--dry-icon-size: var(--dry-space-5);
+		--_icon-size-default: var(--dry-space-5);
 	}
 
 	span[data-size='lg'] {
-		--dry-icon-size: var(--dry-space-6);
+		--_icon-size-default: var(--dry-space-6);
 	}
 
 	span[data-size='xl'] {
-		--dry-icon-size: var(--dry-space-8);
+		--_icon-size-default: var(--dry-space-8);
 	}
 
 	/* ── Colors ────────────────────────────────────────────────────────────────── */
 
 	span[data-color='primary'] {
-		--dry-icon-color: var(--dry-color-fill-brand);
+		--_icon-color-default: var(--dry-color-fill-brand);
 	}
 
 	span[data-color='muted'] {
-		--dry-icon-color: var(--dry-color-text-weak);
+		--_icon-color-default: var(--dry-color-text-weak);
 	}
 
 	span[data-color='current'] {
-		--dry-icon-color: currentColor;
+		--_icon-color-default: currentColor;
 	}
 </style>

package/dist/icon/icon.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'primary' | 'muted' | 'current';
     label?: string;
-    class?: string;
     children: Snippet;
 }
 declare const Icon: import("svelte").Component<Props, {}, "">;

package/dist/icon-swap/icon-swap.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
 	import type { Component, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		icon: Snippet | Component | unknown;
 		size?: 'sm' | 'md' | 'lg';
 		label?: string;
 	}
 
-	let { icon, size = 'md', label }: Props = $props();
+	let { icon, size = 'md', label, class: className, ...rest }: Props = $props();
 </script>
 
 {#key icon}
 	{@const IconComponent = icon as Component}
 	{@const iconAsSnippet = icon as Snippet}
-	<span class="dry-icon-swap" data-size={size} aria-label={label}>
+	<span class={['dry-icon-swap', className]} data-size={size} aria-label={label} {...rest}>
 		{#if typeof icon === 'function' && (icon as Snippet).length === 0}
 			{@render iconAsSnippet()}
 		{:else}

package/dist/icon-swap/icon-swap.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Component, Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     icon: Snippet | Component | unknown;
     size?: 'sm' | 'md' | 'lg';
     label?: string;