@dryui/ui 0.2.1 → 0.3.0

package/dist/drag-and-drop/group-context.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface DragAndDropGroupContext {
+    register(listId: string, element: HTMLElement): void;
+    unregister(listId: string): void;
+    getRoots(): Map<string, HTMLElement>;
+    readonly activeTarget: {
+        listId: string;
+        index: number;
+    } | null;
+    setActiveTarget(listId: string | null, index: number | null): void;
+    move(fromListId: string, fromIndex: number, toListId: string, toIndex: number): void;
+}
+export declare function setGroupCtx(ctx: DragAndDropGroupContext): void;
+export declare function getGroupCtx(): DragAndDropGroupContext | null;

package/dist/drag-and-drop/group-context.svelte.js

@@ -0,0 +1,8 @@
+import { getContext, setContext, hasContext } from 'svelte';
+const GROUP_KEY = Symbol('drag-and-drop-group');
+export function setGroupCtx(ctx) {
+    setContext(GROUP_KEY, ctx);
+}
+export function getGroupCtx() {
+    return hasContext(GROUP_KEY) ? getContext(GROUP_KEY) : null;
+}

package/dist/drag-and-drop/index.d.ts

@@ -1,13 +1,11 @@
-export type {
-	DragAndDropRootProps,
-	DragAndDropItemProps,
-	DragAndDropHandleProps
-} from '@dryui/primitives';
+export type { DragAndDropRootProps, DragAndDropItemProps, DragAndDropHandleProps } from '@dryui/primitives';
 import DragAndDropRoot from './drag-and-drop-root.svelte';
 import DragAndDropItem from './drag-and-drop-item.svelte';
 import DragAndDropHandle from './drag-and-drop-handle.svelte';
+import DragAndDropGroup from './drag-and-drop-group.svelte';
 export declare const DragAndDrop: {
-	Root: typeof DragAndDropRoot;
-	Item: typeof DragAndDropItem;
-	Handle: typeof DragAndDropHandle;
+    Root: typeof DragAndDropRoot;
+    Item: typeof DragAndDropItem;
+    Handle: typeof DragAndDropHandle;
+    Group: typeof DragAndDropGroup;
 };

package/dist/drag-and-drop/index.js

@@ -1,8 +1,10 @@
 import DragAndDropRoot from './drag-and-drop-root.svelte';
 import DragAndDropItem from './drag-and-drop-item.svelte';
 import DragAndDropHandle from './drag-and-drop-handle.svelte';
+import DragAndDropGroup from './drag-and-drop-group.svelte';
 export const DragAndDrop = {
     Root: DragAndDropRoot,
     Item: DragAndDropItem,
-    Handle: DragAndDropHandle
+    Handle: DragAndDropHandle,
+    Group: DragAndDropGroup
 };

package/dist/drawer/drawer-content.svelte

@@ -108,7 +108,8 @@
 		box-shadow: var(--dry-drawer-shadow, var(--dry-shadow-overlay));
 		padding: 0;
 		display: grid;
-		overflow: auto;
+		grid-template-rows: max-content minmax(0, 1fr) max-content;
+		overflow: hidden;
 
 		transition:
 			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),

package/dist/drawer/drawer-footer.svelte

@@ -20,7 +20,7 @@
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		justify-items: end;
+		justify-content: end;
 		gap: var(--dry-space-2);
 	}
 </style>

package/dist/drawer/index.d.ts

@@ -1,15 +1,7 @@
-export type {
-	DrawerRootProps,
-	DrawerTriggerProps,
-	DrawerContentProps,
-	DrawerOverlayProps,
-	DrawerHeaderProps,
-	DrawerFooterProps,
-	DrawerCloseProps
-} from '@dryui/primitives';
+export type { DrawerRootProps, DrawerTriggerProps, DrawerContentProps, DrawerOverlayProps, DrawerHeaderProps, DrawerFooterProps, DrawerCloseProps } from '@dryui/primitives';
 import type { DrawerBodyProps as PrimitiveDrawerBodyProps } from '@dryui/primitives';
 export interface DrawerBodyProps extends PrimitiveDrawerBodyProps {
-	padding?: boolean;
+    padding?: boolean;
 }
 import DrawerRoot from './drawer-root.svelte';
 import DrawerTrigger from './drawer-trigger.svelte';
@@ -20,12 +12,12 @@ import DrawerBody from './drawer-body.svelte';
 import DrawerFooter from './drawer-footer.svelte';
 import DrawerClose from './drawer-close.svelte';
 export declare const Drawer: {
-	Root: typeof DrawerRoot;
-	Trigger: typeof DrawerTrigger;
-	Content: typeof DrawerContent;
-	Overlay: typeof DrawerOverlay;
-	Header: typeof DrawerHeader;
-	Body: typeof DrawerBody;
-	Footer: typeof DrawerFooter;
-	Close: typeof DrawerClose;
+    Root: typeof DrawerRoot;
+    Trigger: typeof DrawerTrigger;
+    Content: typeof DrawerContent;
+    Overlay: typeof DrawerOverlay;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+    Close: typeof DrawerClose;
 };

package/dist/drop-zone/index.d.ts

@@ -1,5 +1,5 @@
 export interface DropZoneProps {
-	accept?: string;
-	onDrop?: (files: File[]) => void;
+    accept?: string;
+    onDrop?: (files: File[]) => void;
 }
 export { default as DropZone } from './drop-zone.svelte';

package/dist/dropdown-menu/index.d.ts

@@ -1,12 +1,4 @@
-export type {
-	DropdownMenuRootProps,
-	DropdownMenuTriggerProps,
-	DropdownMenuContentProps,
-	DropdownMenuItemProps,
-	DropdownMenuSeparatorProps,
-	DropdownMenuGroupProps,
-	DropdownMenuLabelProps
-} from '@dryui/primitives';
+export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuSeparatorProps, DropdownMenuGroupProps, DropdownMenuLabelProps } from '@dryui/primitives';
 import DropdownMenuRoot from './dropdown-menu-root.svelte';
 import DropdownMenuTrigger from './dropdown-menu-trigger.svelte';
 import DropdownMenuContent from './dropdown-menu-content.svelte';
@@ -15,11 +7,11 @@ import DropdownMenuSeparator from './dropdown-menu-separator.svelte';
 import DropdownMenuGroup from './dropdown-menu-group.svelte';
 import DropdownMenuLabel from './dropdown-menu-label.svelte';
 export declare const DropdownMenu: {
-	Root: typeof DropdownMenuRoot;
-	Trigger: typeof DropdownMenuTrigger;
-	Content: typeof DropdownMenuContent;
-	Item: typeof DropdownMenuItem;
-	Separator: typeof DropdownMenuSeparator;
-	Group: typeof DropdownMenuGroup;
-	Label: typeof DropdownMenuLabel;
+    Root: typeof DropdownMenuRoot;
+    Trigger: typeof DropdownMenuTrigger;
+    Content: typeof DropdownMenuContent;
+    Item: typeof DropdownMenuItem;
+    Separator: typeof DropdownMenuSeparator;
+    Group: typeof DropdownMenuGroup;
+    Label: typeof DropdownMenuLabel;
 };

package/dist/field/index.d.ts

@@ -3,7 +3,7 @@ import FieldRoot from './field-root.svelte';
 import FieldDescription from './field-description.svelte';
 import FieldError from './field-error.svelte';
 export declare const Field: {
-	Root: typeof FieldRoot;
-	Description: typeof FieldDescription;
-	Error: typeof FieldError;
+    Root: typeof FieldRoot;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
 };

package/dist/fieldset/index.d.ts

@@ -1,24 +1,24 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface FieldsetRootProps extends HTMLAttributes<HTMLFieldSetElement> {
-	children: Snippet;
+    children: Snippet;
 }
 export interface FieldsetLegendProps extends HTMLAttributes<HTMLLegendElement> {
-	children: Snippet;
+    children: Snippet;
 }
 export interface FieldsetDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
-	children: Snippet;
+    children: Snippet;
 }
 export interface FieldsetContentProps extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
 import FieldsetRoot from './fieldset-root.svelte';
 import FieldsetLegend from './fieldset-legend.svelte';
 import FieldsetDescription from './fieldset-description.svelte';
 import FieldsetContent from './fieldset-content.svelte';
 export declare const Fieldset: {
-	Root: typeof FieldsetRoot;
-	Legend: typeof FieldsetLegend;
-	Description: typeof FieldsetDescription;
-	Content: typeof FieldsetContent;
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Description: typeof FieldsetDescription;
+    Content: typeof FieldsetContent;
 };

package/dist/file-select/file-select-clear.svelte

@@ -25,7 +25,14 @@
 		{#if children}
 			{@render children()}
 		{:else}
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
+			>
 		{/if}
 	</button>
 {/if}

package/dist/file-select/index.d.ts

@@ -1,19 +1,17 @@
-import type {
-	FileSelectTriggerProps as PrimitiveFileSelectTriggerProps,
-	FileSelectClearProps as PrimitiveFileSelectClearProps
-} from '@dryui/primitives';
+import type { FileSelectTriggerProps as PrimitiveFileSelectTriggerProps, FileSelectClearProps as PrimitiveFileSelectClearProps } from '@dryui/primitives';
 export type { FileSelectRootProps, FileSelectValueProps } from '@dryui/primitives';
 export interface FileSelectTriggerProps extends PrimitiveFileSelectTriggerProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface FileSelectClearProps extends PrimitiveFileSelectClearProps {
 }
-export interface FileSelectClearProps extends PrimitiveFileSelectClearProps {}
 import FileSelectRoot from './file-select-root.svelte';
 import FileSelectTrigger from './file-select-trigger.svelte';
 import FileSelectValue from './file-select-value.svelte';
 import FileSelectClear from './file-select-clear.svelte';
 export declare const FileSelect: {
-	Root: typeof FileSelectRoot;
-	Trigger: typeof FileSelectTrigger;
-	Value: typeof FileSelectValue;
-	Clear: typeof FileSelectClear;
+    Root: typeof FileSelectRoot;
+    Trigger: typeof FileSelectTrigger;
+    Value: typeof FileSelectValue;
+    Clear: typeof FileSelectClear;
 };

package/dist/file-upload/file-upload-item-delete.svelte

@@ -32,7 +32,14 @@
 	{#if children}
 		{@render children()}
 	{:else}
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
+		>
 	{/if}
 </button>
 

package/dist/file-upload/file-upload-root.svelte

@@ -141,5 +141,4 @@
 		height: 0;
 		overflow: hidden;
 	}
-
 </style>

package/dist/file-upload/index.d.ts

@@ -1,26 +1,21 @@
 import type { Snippet } from 'svelte';
-import type {
-	FileUploadDropzoneProps as PrimitiveFileUploadDropzoneProps,
-	FileUploadTriggerProps as PrimitiveFileUploadTriggerProps,
-	FileUploadListProps as PrimitiveFileUploadListProps,
-	FileUploadItemProps as PrimitiveFileUploadItemProps,
-	FileUploadItemDeleteProps as PrimitiveFileUploadItemDeleteProps
-} from '@dryui/primitives';
+import type { FileUploadDropzoneProps as PrimitiveFileUploadDropzoneProps, FileUploadTriggerProps as PrimitiveFileUploadTriggerProps, FileUploadListProps as PrimitiveFileUploadListProps, FileUploadItemProps as PrimitiveFileUploadItemProps, FileUploadItemDeleteProps as PrimitiveFileUploadItemDeleteProps } from '@dryui/primitives';
 export type { FileUploadRootProps } from '@dryui/primitives';
 export interface FileUploadDropzoneProps extends PrimitiveFileUploadDropzoneProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export interface FileUploadTriggerProps extends PrimitiveFileUploadTriggerProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export interface FileUploadListProps extends PrimitiveFileUploadListProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export interface FileUploadItemProps extends Omit<PrimitiveFileUploadItemProps, 'children'> {
-	size?: 'sm' | 'md' | 'lg';
-	children?: Snippet;
+    size?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+}
+export interface FileUploadItemDeleteProps extends PrimitiveFileUploadItemDeleteProps {
 }
-export interface FileUploadItemDeleteProps extends PrimitiveFileUploadItemDeleteProps {}
 import FileUploadRoot from './file-upload-root.svelte';
 import FileUploadDropzone from './file-upload-dropzone.svelte';
 import FileUploadTrigger from './file-upload-trigger.svelte';
@@ -28,10 +23,10 @@ import FileUploadList from './file-upload-list.svelte';
 import FileUploadItem from './file-upload-item.svelte';
 import FileUploadItemDelete from './file-upload-item-delete.svelte';
 export declare const FileUpload: {
-	Root: typeof FileUploadRoot;
-	Dropzone: typeof FileUploadDropzone;
-	Trigger: typeof FileUploadTrigger;
-	List: typeof FileUploadList;
-	Item: typeof FileUploadItem;
-	ItemDelete: typeof FileUploadItemDelete;
+    Root: typeof FileUploadRoot;
+    Dropzone: typeof FileUploadDropzone;
+    Trigger: typeof FileUploadTrigger;
+    List: typeof FileUploadList;
+    Item: typeof FileUploadItem;
+    ItemDelete: typeof FileUploadItemDelete;
 };

package/dist/flip-card/index.d.ts

@@ -3,7 +3,7 @@ import FlipCardRoot from './flip-card-root.svelte';
 import FlipCardFront from './flip-card-front.svelte';
 import FlipCardBack from './flip-card-back.svelte';
 export declare const FlipCard: {
-	Root: typeof FlipCardRoot;
-	Front: typeof FlipCardFront;
-	Back: typeof FlipCardBack;
+    Root: typeof FlipCardRoot;
+    Front: typeof FlipCardFront;
+    Back: typeof FlipCardBack;
 };

package/dist/float-button/float-button-root.svelte

@@ -27,7 +27,13 @@
 	});
 </script>
 
-<div data-float-button data-position={position} data-state={open ? 'open' : 'closed'} {...rest} class={className}>
+<div
+	data-float-button
+	data-position={position}
+	data-state={open ? 'open' : 'closed'}
+	{...rest}
+	class={className}
+>
 	{@render children()}
 </div>
 

package/dist/float-button/index.d.ts

@@ -1,20 +1,16 @@
-import type {
-	FloatButtonRootProps as PrimitiveFloatButtonRootProps,
-	FloatButtonTriggerProps as PrimitiveFloatButtonTriggerProps,
-	FloatButtonActionProps
-} from '@dryui/primitives';
+import type { FloatButtonRootProps as PrimitiveFloatButtonRootProps, FloatButtonTriggerProps as PrimitiveFloatButtonTriggerProps, FloatButtonActionProps } from '@dryui/primitives';
 export type { FloatButtonActionProps };
 export interface FloatButtonRootProps extends PrimitiveFloatButtonRootProps {
-	position?: 'bottom-right' | 'bottom-left';
+    position?: 'bottom-right' | 'bottom-left';
 }
 export interface FloatButtonTriggerProps extends PrimitiveFloatButtonTriggerProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 import FloatButtonRoot from './float-button-root.svelte';
 import FloatButtonTrigger from './float-button-trigger.svelte';
 import FloatButtonAction from './float-button-action.svelte';
 export declare const FloatButton: {
-	Root: typeof FloatButtonRoot;
-	Trigger: typeof FloatButtonTrigger;
-	Action: typeof FloatButtonAction;
+    Root: typeof FloatButtonRoot;
+    Trigger: typeof FloatButtonTrigger;
+    Action: typeof FloatButtonAction;
 };

package/dist/glass/index.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface GlassProps extends HTMLAttributes<HTMLDivElement> {
-	blur?: number;
-	tint?: string;
-	saturation?: number;
-	children: Snippet;
+    blur?: number;
+    tint?: string;
+    saturation?: number;
+    children: Snippet;
 }
 export { default as Glass } from './glass.svelte';

package/dist/glow/index.d.ts

@@ -3,10 +3,10 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { BlendMode } from '@dryui/primitives/glow';
 export type { BlendMode };
 export interface GlowProps extends HTMLAttributes<HTMLDivElement> {
-	color?: string;
-	intensity?: number;
-	radius?: number;
-	blendMode?: BlendMode;
-	children: Snippet;
+    color?: string;
+    intensity?: number;
+    radius?: number;
+    blendMode?: BlendMode;
+    children: Snippet;
 }
 export { default as Glow } from './glow.svelte';

package/dist/god-rays/index.d.ts

@@ -3,15 +3,15 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { BlendMode } from '@dryui/primitives/god-rays';
 export type { BlendMode };
 export interface GodRaysProps extends HTMLAttributes<HTMLDivElement> {
-	color?: string;
-	rayCount?: number;
-	intensity?: number;
-	center?: {
-		x: number;
-		y: number;
-	};
-	speed?: number;
-	blendMode?: BlendMode;
-	children?: Snippet;
+    color?: string;
+    rayCount?: number;
+    intensity?: number;
+    center?: {
+        x: number;
+        y: number;
+    };
+    speed?: number;
+    blendMode?: BlendMode;
+    children?: Snippet;
 }
 export { default as GodRays } from './god-rays.svelte';

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

@@ -32,6 +32,9 @@
 	let animated = $state(false);
 	let pointerX = $state('50%');
 	let pointerY = $state('50%');
+	let pointerFrame = $state<number | null>(null);
+	let pendingPointerX = '50%';
+	let pendingPointerY = '50%';
 
 	function captureElement(node: HTMLDivElement) {
 		element = node;
@@ -51,14 +54,42 @@
 		return '12s';
 	});
 
+	function flushPointerPosition() {
+		pointerFrame = null;
+		pointerX = pendingPointerX;
+		pointerY = pendingPointerY;
+	}
+
+	function queuePointerPosition(nextX: string, nextY: string) {
+		pendingPointerX = nextX;
+		pendingPointerY = nextY;
+
+		if (pointerFrame !== null) return;
+
+		pointerFrame = requestAnimationFrame(() => {
+			flushPointerPosition();
+		});
+	}
+
+	function cancelQueuedPointerPosition() {
+		if (pointerFrame === null) return;
+		cancelAnimationFrame(pointerFrame);
+		pointerFrame = null;
+	}
+
 	function handlePointerMove(event: PointerEvent) {
 		if (!interactive || prefersReducedMotion || !element || !supportsPointerTracking()) return;
 		const rect = element.getBoundingClientRect();
-		pointerX = `${(((event.clientX - rect.left) / rect.width) * 100).toFixed(1)}%`;
-		pointerY = `${(((event.clientY - rect.top) / rect.height) * 100).toFixed(1)}%`;
+		queuePointerPosition(
+			`${(((event.clientX - rect.left) / rect.width) * 100).toFixed(1)}%`,
+			`${(((event.clientY - rect.top) / rect.height) * 100).toFixed(1)}%`
+		);
 	}
 
 	function handlePointerLeave() {
+		cancelQueuedPointerPosition();
+		pendingPointerX = '50%';
+		pendingPointerY = '50%';
 		pointerX = '50%';
 		pointerY = '50%';
 	}
@@ -98,11 +129,17 @@
 
 		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
 			animated = false;
-			return stopMotionObserver;
+			return () => {
+				cancelQueuedPointerPosition();
+				stopMotionObserver();
+			};
 		}
 
 		animated = true;
-		return stopMotionObserver;
+		return () => {
+			cancelQueuedPointerPosition();
+			stopMotionObserver();
+		};
 	});
 
 	function applyStyles(node: HTMLElement) {
@@ -121,6 +158,7 @@
 
 <div
 	{@attach captureElement}
+	{@attach applyStyles}
 	class={className}
 	data-gradient-mesh
 	data-animated={animated || undefined}
@@ -129,7 +167,6 @@
 	onpointermove={interactive ? handlePointerMove : undefined}
 	onpointerleave={interactive ? handlePointerLeave : undefined}
 	{...rest}
-	use:applyStyles
 >
 	{#if childSnippet}
 		<div data-gradient-mesh-content>

package/dist/gradient-mesh/index.d.ts

@@ -1,3 +1,4 @@
 import type { GradientMeshProps as PrimitiveGradientMeshProps } from '@dryui/primitives/gradient-mesh';
-export interface GradientMeshProps extends PrimitiveGradientMeshProps {}
+export interface GradientMeshProps extends PrimitiveGradientMeshProps {
+}
 export { default as GradientMesh } from './gradient-mesh.svelte';

package/dist/halftone/halftone.svelte

@@ -24,29 +24,17 @@
 		dotSize === 'fine' || dotSize === 'medium' || dotSize === 'coarse' ? dotSize : 'custom'
 	);
 
-	const patternSize = $derived.by(() => {
-		const size =
-			typeof dotSize === 'number'
-				? Math.max(1, dotSize)
-				: dotSize === 'fine'
-					? 2
-					: dotSize === 'coarse'
-						? 6
-						: 4;
-		return `${size * 3}`;
-	});
-
-	const dotRadius = $derived.by(() => {
-		const size =
-			typeof dotSize === 'number'
-				? Math.max(1, dotSize)
-				: dotSize === 'fine'
-					? 2
-					: dotSize === 'coarse'
-						? 6
-						: 4;
-		return `${size * 0.45}`;
-	});
+	const baseSize = $derived(
+		typeof dotSize === 'number'
+			? Math.max(1, dotSize)
+			: dotSize === 'fine'
+				? 2
+				: dotSize === 'coarse'
+					? 6
+					: 4
+	);
+	const patternSize = $derived(`${baseSize * 3}`);
+	const dotRadius = $derived(`${baseSize * 0.45}`);
 
 	const normalizedOpacity = $derived(`${Math.max(0, Math.min(1, opacity))}`);
 	const angleValue = $derived(`${angle}deg`);
@@ -99,24 +87,16 @@
 		mix-blend-mode: multiply;
 		transform: rotate(var(--dry-halftone-angle));
 		transform-origin: center;
-
-		/* SVG halftone dot pattern via data URI */
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='1.8' fill='black'/%3E%3C/svg%3E");
+		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)
+		);
 		background-size: calc(var(--dry-halftone-pattern-size) * 1px)
 			calc(var(--dry-halftone-pattern-size) * 1px);
 		background-repeat: repeat;
 	}
 
-	/* Override SVG for fine pattern */
-	[data-halftone][data-dot-size='fine']::after {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='0.9' fill='black'/%3E%3C/svg%3E");
-	}
-
-	/* Override SVG for coarse pattern */
-	[data-halftone][data-dot-size='coarse']::after {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2.7' fill='black'/%3E%3C/svg%3E");
-	}
-
 	[data-halftone-content] {
 		position: relative;
 		z-index: 1;

package/dist/halftone/index.d.ts

@@ -2,10 +2,10 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export type HalftoneDotSize = 'fine' | 'medium' | 'coarse' | number;
 export interface HalftoneProps extends HTMLAttributes<HTMLDivElement> {
-	dotSize?: HalftoneDotSize;
-	angle?: number;
-	color?: string;
-	opacity?: number;
-	children?: Snippet;
+    dotSize?: HalftoneDotSize;
+    angle?: number;
+    color?: string;
+    opacity?: number;
+    children?: Snippet;
 }
 export { default as Halftone } from './halftone.svelte';

package/dist/heading/index.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-	level?: 1 | 2 | 3 | 4 | 5 | 6;
-	variant?: 'default' | 'display';
-	children: Snippet;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    variant?: 'default' | 'display';
+    children: Snippet;
 }
 export { default as Heading } from './heading.svelte';