@dryui/ui 3.0.0 → 4.0.1

package/dist/spotlight/spotlight.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		observeReducedMotionPreference,
 		supportsPointerTracking,
 		registerPropertyOnce
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 	import type { BlendMode } from '@dryui/primitives/spotlight';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -21,7 +20,7 @@
 	let {
 		radius = 260,
 		intensity = 26,
-		color = 'rgba(59, 130, 246, 0.28)',
+		color,
 		followPointer = true,
 		blendMode,
 		children,
@@ -30,28 +29,13 @@
 		...rest
 	}: Props = $props();
 
-	let element = $state<HTMLDivElement | null>(null);
+	let element = $state<HTMLDivElement>();
 	let x = $state('50%');
 	let y = $state('50%');
 	let active = $state(false);
 	let prefersReducedMotion = $state(false);
-	let pointerFrame = $state<number | null>(null);
-	let pendingX = '50%';
-	let pendingY = '50%';
-
-	function captureElement(node: HTMLDivElement) {
-		element = node;
-		return {
-			destroy() {
-				if (element === node) element = null;
-			}
-		};
-	}
 
 	function centerSpotlight() {
-		cancelQueuedPointerPosition();
-		pendingX = '50%';
-		pendingY = '50%';
 		x = '50%';
 		y = '50%';
 	}
@@ -63,30 +47,8 @@
 	function updateFromClientPoint(clientX: number, clientY: number) {
 		if (!element) return;
 		const rect = element.getBoundingClientRect();
-		queuePointerPosition(`${clientX - rect.left}px`, `${clientY - rect.top}px`);
-	}
-
-	function flushPointerPosition() {
-		pointerFrame = null;
-		x = pendingX;
-		y = pendingY;
-	}
-
-	function queuePointerPosition(nextX: string, nextY: string) {
-		pendingX = nextX;
-		pendingY = nextY;
-
-		if (pointerFrame !== null) return;
-
-		pointerFrame = requestAnimationFrame(() => {
-			flushPointerPosition();
-		});
-	}
-
-	function cancelQueuedPointerPosition() {
-		if (pointerFrame === null) return;
-		cancelAnimationFrame(pointerFrame);
-		pointerFrame = null;
+		x = `${clientX - rect.left}px`;
+		y = `${clientY - rect.top}px`;
 	}
 
 	function handlePointerEnter(event: PointerEvent) {
@@ -115,7 +77,7 @@
 		active = prefersReducedMotion || !followPointer;
 	}
 
-	onMount(() => {
+	$effect(() => {
 		registerPropertyOnce({
 			name: '--dry-spotlight-x',
 			syntax: '<length-percentage>',
@@ -136,7 +98,6 @@
 		});
 
 		return () => {
-			cancelQueuedPointerPosition();
 			stopMotionObserver();
 		};
 	});
@@ -154,23 +115,26 @@
 		}
 	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-spotlight-radius', radiusValue);
-			node.style.setProperty('--dry-spotlight-intensity', intensityValue);
-			node.style.setProperty('--dry-spotlight-color', color);
-			node.style.setProperty('--dry-spotlight-x', x);
-			node.style.setProperty('--dry-spotlight-y', y);
-			if (blendMode) node.style.setProperty('--dry-spotlight-blend', blendMode);
-			else node.style.removeProperty('--dry-spotlight-blend');
-		});
-	}
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		element.style.setProperty('--dry-spotlight-radius', radiusValue);
+		element.style.setProperty('--dry-spotlight-intensity', intensityValue);
+		if (color) element.style.setProperty('--dry-spotlight-color', color);
+		else element.style.removeProperty('--dry-spotlight-color');
+		if (blendMode) element.style.setProperty('--dry-spotlight-blend', blendMode);
+		else element.style.removeProperty('--dry-spotlight-blend');
+	});
+
+	$effect(() => {
+		if (!element) return;
+		element.style.setProperty('--dry-spotlight-x', x);
+		element.style.setProperty('--dry-spotlight-y', y);
+	});
 </script>
 
 <div
-	{@attach captureElement}
-	{@attach applyStyles}
+	bind:this={element}
 	class={className}
 	data-spotlight
 	data-active={active || undefined}
@@ -190,7 +154,6 @@
 	[data-spotlight] {
 		--dry-spotlight-radius: 260px;
 		--dry-spotlight-intensity: 26%;
-		--dry-spotlight-color: rgba(59, 130, 246, 0.28);
 		--dry-spotlight-x: 50%;
 		--dry-spotlight-y: 50%;
 
@@ -243,8 +206,13 @@
 			radial-gradient(
 				circle calc(var(--dry-spotlight-radius, 260px) * 0.3) at var(--dry-spotlight-x, 50%)
 					var(--dry-spotlight-y, 50%),
-				rgba(255, 255, 255, 0.12) 0%,
-				rgba(255, 255, 255, 0.04) 50%,
+				var(--dry-spotlight-rim-color, rgba(255, 255, 255, 0.12)) 0%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-rim-color, rgba(255, 255, 255, 0.12)) 33%,
+						transparent
+					)
+					50%,
 				transparent 100%
 			);
 		opacity: 0;

package/dist/star-rating/star-rating-root.svelte

@@ -52,7 +52,6 @@
 
 <style>
 	[data-star-rating] {
-		--dry-star-rating-color: #f59e0b;
 		--dry-star-rating-size: 1.25rem;
 
 		display: inline-grid;
@@ -85,8 +84,8 @@
 	}
 
 	[data-star='filled'] {
-		fill: var(--dry-star-rating-color);
-		stroke: var(--dry-star-rating-color);
+		fill: var(--dry-star-rating-color, var(--dry-color-fill-warning));
+		stroke: var(--dry-star-rating-color, var(--dry-color-fill-warning));
 		stroke-width: 1;
 	}
 
@@ -98,7 +97,7 @@
 
 	[data-star='outlined-active'] {
 		fill: none;
-		stroke: var(--dry-star-rating-color);
+		stroke: var(--dry-star-rating-color, var(--dry-color-fill-warning));
 		stroke-width: 1.5;
 	}
 

package/dist/stepper/stepper-step-button.svelte

@@ -73,7 +73,7 @@
 		height: var(--dry-stepper-indicator-size, 1.25rem);
 		border-radius: 50%;
 		border: var(--dry-stepper-connector-width, 1px) solid var(--dry-color-stroke-weak);
-		background: transparent;
+		background: var(--dry-color-fill-base, transparent);
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			background var(--dry-duration-fast) var(--dry-ease-default);
@@ -104,7 +104,7 @@
 
 	[data-part='step'][data-state='error']::before {
 		border-color: var(--dry-color-fill-error);
-		background: transparent;
+		background: var(--dry-color-fill-base, transparent);
 	}
 
 	[data-orientation='vertical'] {

package/dist/table-of-contents/table-of-contents-root.svelte

@@ -78,22 +78,11 @@
 
 <style>
 	[data-part='root'] {
-		/* Component tokens */
-		--dry-toc-bg: var(--dry-color-bg-overlay);
-		--dry-toc-border: var(--dry-color-stroke-weak);
-		--dry-toc-radius: var(--dry-radius-xl);
-		--dry-toc-shadow: var(--dry-shadow-sm);
-		--dry-toc-padding: var(--dry-space-4);
-		--dry-toc-item-padding-x: var(--dry-space-2);
-		--dry-toc-item-padding-y: var(--dry-space-1_5);
-		--dry-toc-indent: var(--dry-space-4);
-		--dry-toc-active-color: var(--dry-color-text-brand);
-		--dry-toc-muted-color: var(--dry-color-text-weak);
-		padding: var(--dry-toc-padding);
-		background: var(--dry-toc-bg);
-		border: 1px solid var(--dry-toc-border);
-		border-radius: var(--dry-toc-radius);
-		box-shadow: var(--dry-toc-shadow);
+		padding: var(--dry-toc-padding, var(--dry-space-4));
+		background: var(--dry-toc-bg, var(--dry-color-bg-overlay));
+		border: 1px solid var(--dry-toc-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-toc-radius, var(--dry-radius-xl));
+		box-shadow: var(--dry-toc-shadow, var(--dry-shadow-sm));
 		font-family: var(--dry-font-sans);
 	}
 </style>

package/dist/tabs/tabs-content.svelte

@@ -21,6 +21,7 @@
 	aria-labelledby="{ctx.id}-tab-{value}"
 	tabindex={isSelected ? 0 : -1}
 	data-state={isSelected ? 'active' : 'inactive'}
+	data-orientation={ctx.orientation}
 	data-tabs-content
 	hidden={!isSelected || undefined}
 	class={className}
@@ -31,6 +32,11 @@
 
 <style>
 	[data-tabs-content] {
-		padding: var(--dry-space-4) 0;
+		padding-block-start: var(--dry-tabs-content-padding-block-start, var(--dry-space-4));
+	}
+
+	[data-tabs-content][data-orientation='vertical'] {
+		padding-block-start: var(--dry-tabs-content-padding-block-start, 0);
+		padding-inline-start: var(--dry-tabs-content-padding-inline-start, var(--dry-space-4));
 	}
 </style>

package/dist/tag/tag-button.svelte

@@ -22,19 +22,15 @@
 		dismissible = false,
 		onDismiss,
 		class: className,
+		style,
 		children,
 		...rest
 	}: Props = $props();
 	const resolvedColor = $derived(resolveAlias(color, 'gray'));
 </script>
 
-<span data-wrapper>
-	<span
-		class={className}
-		data-tag
-		{...variantAttrs({ variant, color: resolvedColor, size })}
-		{...rest}
-	>
+<span data-wrapper class={className} {style} {...rest}>
+	<span data-tag {...variantAttrs({ variant, color: resolvedColor, size })}>
 		{@render children()}
 		{#if dismissible}
 			<Button variant="bare" type="button" aria-label="Dismiss" onclick={onDismiss}>
@@ -66,20 +62,30 @@
 	}
 
 	[data-tag] {
+		--_tag-bg-default: var(--dry-color-fill);
+		--_tag-color-default: var(--dry-color-text-weak);
+		--_tag-border-default: transparent;
+		--_tag-font-size-default: var(--dry-type-tiny-size);
+		--_tag-padding-x-default: var(--dry-space-2);
+		--_tag-padding-y-default: var(--dry-space-0_5);
+		--dry-btn-min-height: var(--dry-tag-dismiss-size, var(--dry-space-5));
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+
 		display: inline-grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-1);
-		padding: var(--dry-tag-padding-y, var(--dry-space-1))
-			var(--dry-tag-padding-x, var(--dry-space-2_5));
-		font-size: var(--dry-tag-font-size, var(--dry-type-tiny-size));
+		padding: var(--dry-tag-padding-y, var(--_tag-padding-y-default))
+			var(--dry-tag-padding-x, var(--_tag-padding-x-default));
+		font-size: var(--dry-tag-font-size, var(--_tag-font-size-default));
 		font-family: var(--dry-font-sans);
 		font-weight: 500;
 		line-height: var(--dry-type-tiny-leading);
-		color: var(--dry-tag-color, var(--dry-color-text-weak));
-		background: var(--dry-tag-bg, var(--dry-color-fill));
-		border: 1px solid var(--dry-tag-border, transparent);
+		color: var(--dry-tag-color, var(--_tag-color-default));
+		background: var(--dry-tag-bg, var(--_tag-bg-default));
+		border: 1px solid var(--dry-tag-border, var(--_tag-border-default));
 		border-radius: var(--dry-tag-radius, var(--dry-radius-2xl));
 		white-space: nowrap;
 		user-select: none;
@@ -89,16 +95,16 @@
 	/* ── Sizes ────────────────────────────────────────────────────────────────── */
 
 	[data-size='sm'] {
-		--dry-tag-font-size: var(--dry-type-tiny-size);
-		--dry-tag-padding-x: var(--dry-space-2_5);
-		--dry-tag-padding-y: var(--dry-space-1);
+		--_tag-font-size-default: var(--dry-type-tiny-size);
+		--_tag-padding-x-default: var(--dry-space-2);
+		--_tag-padding-y-default: var(--dry-space-0_5);
 		min-height: var(--dry-space-6);
 	}
 
 	[data-size='md'] {
-		--dry-tag-font-size: var(--dry-type-small-size);
-		--dry-tag-padding-x: var(--dry-space-3);
-		--dry-tag-padding-y: var(--dry-space-1_5);
+		--_tag-font-size-default: var(--dry-type-small-size);
+		--_tag-padding-x-default: var(--dry-space-2_5);
+		--_tag-padding-y-default: var(--dry-space-1);
 		min-height: var(--dry-space-8);
 		line-height: var(--dry-type-tiny-leading);
 	}
@@ -106,91 +112,87 @@
 	/* ── Variant: solid ───────────────────────────────────────────────────────── */
 
 	[data-variant='solid'] {
-		--dry-tag-border: transparent;
+		--_tag-border-default: transparent;
 	}
 
 	[data-variant='solid'][data-color='gray'] {
-		--dry-tag-bg: var(--dry-color-fill-inverse);
-		--dry-tag-color: var(--dry-color-text-inverse);
+		--_tag-bg-default: var(--dry-color-fill-inverse);
+		--_tag-color-default: var(--dry-color-text-inverse);
 	}
 
 	[data-variant='solid'][data-color='blue'] {
-		--dry-tag-bg: var(--dry-color-fill-brand);
-		--dry-tag-color: var(--dry-color-on-brand);
+		--_tag-bg-default: var(--dry-color-fill-brand);
+		--_tag-color-default: var(--dry-color-on-brand);
 	}
 
 	[data-variant='solid'][data-color='red'] {
-		--dry-tag-bg: var(--dry-color-fill-error);
-		--dry-tag-color: var(--dry-color-on-error);
+		--_tag-bg-default: var(--dry-color-fill-error);
+		--_tag-color-default: var(--dry-color-on-error);
 	}
 
 	[data-variant='solid'][data-color='green'] {
-		--dry-tag-bg: var(--dry-color-fill-success);
-		--dry-tag-color: var(--dry-color-on-success);
+		--_tag-bg-default: var(--dry-color-fill-success);
+		--_tag-color-default: var(--dry-color-on-success);
 	}
 
 	[data-variant='solid'][data-color='yellow'] {
-		--dry-tag-bg: var(--dry-color-fill-yellow);
-		--dry-tag-color: var(--dry-color-on-warning);
+		--_tag-bg-default: var(--dry-color-fill-yellow);
+		--_tag-color-default: var(--dry-color-on-warning);
 	}
 
 	[data-variant='solid'][data-color='purple'] {
-		--dry-tag-bg: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--dry-tag-color: var(--dry-color-on-brand);
+		--_tag-bg-default: var(--dry-color-fill-purple);
+		--_tag-color-default: var(--dry-color-on-purple);
 	}
 
 	[data-variant='solid'][data-color='orange'] {
-		--dry-tag-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--dry-tag-color: var(--dry-color-on-warning);
+		--_tag-bg-default: var(--dry-color-fill-orange);
+		--_tag-color-default: var(--dry-color-on-orange);
 	}
 
 	/* ── Variant: outline ─────────────────────────────────────────────────────── */
 
 	[data-variant='outline'] {
-		--dry-tag-bg: transparent;
+		--_tag-bg-default: transparent;
 	}
 
 	[data-variant='outline'][data-color='gray'] {
-		--dry-tag-color: var(--dry-color-text-weak);
-		--dry-tag-border: var(--dry-color-stroke-weak);
+		--_tag-color-default: var(--dry-color-text-weak);
+		--_tag-border-default: var(--dry-color-stroke-weak);
 	}
 
 	[data-variant='outline'][data-color='blue'] {
-		--dry-tag-color: var(--dry-color-text-brand);
-		--dry-tag-border: var(--dry-color-stroke-brand);
+		--_tag-color-default: var(--dry-color-text-brand);
+		--_tag-border-default: var(--dry-color-stroke-brand);
 	}
 
 	[data-variant='outline'][data-color='red'] {
-		--dry-tag-color: var(--dry-color-text-error);
-		--dry-tag-border: var(--dry-color-stroke-error);
+		--_tag-color-default: var(--dry-color-text-error);
+		--_tag-border-default: var(--dry-color-stroke-error);
 	}
 
 	[data-variant='outline'][data-color='green'] {
-		--dry-tag-color: var(--dry-color-text-success);
-		--dry-tag-border: var(--dry-color-stroke-success);
+		--_tag-color-default: var(--dry-color-text-success);
+		--_tag-border-default: var(--dry-color-stroke-success);
 	}
 
 	[data-variant='outline'][data-color='yellow'] {
-		--dry-tag-color: var(--dry-color-text-warning);
-		--dry-tag-border: var(--dry-color-stroke-warning);
+		--_tag-color-default: var(--dry-color-text-warning);
+		--_tag-border-default: var(--dry-color-stroke-warning);
 	}
 
 	[data-variant='outline'][data-color='purple'] {
-		--dry-tag-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
-		--dry-tag-border: color-mix(in srgb, var(--dry-color-stroke-brand) 60%, hsl(280, 50%, 70%));
+		--_tag-color-default: var(--dry-color-text-purple);
+		--_tag-border-default: var(--dry-color-stroke-purple);
 	}
 
 	[data-variant='outline'][data-color='orange'] {
-		--dry-tag-color: color-mix(
+		--_tag-color-default: color-mix(
 			in srgb,
 			var(--dry-color-text-warning) 60%,
 			var(--dry-color-text-error)
 		);
-		--dry-tag-border: color-mix(
+		--_tag-border-default: color-mix(
 			in srgb,
 			var(--dry-color-stroke-warning) 60%,
 			var(--dry-color-stroke-error)
@@ -200,46 +202,46 @@
 	/* ── Variant: soft ────────────────────────────────────────────────────────── */
 
 	[data-variant='soft'] {
-		--dry-tag-border: var(--dry-color-stroke-weak);
+		--_tag-border-default: var(--dry-color-stroke-weak);
 	}
 
 	[data-variant='soft'][data-color='gray'] {
-		--dry-tag-bg: var(--dry-color-fill);
-		--dry-tag-color: var(--dry-color-text-weak);
+		--_tag-bg-default: var(--dry-color-fill);
+		--_tag-color-default: var(--dry-color-text-weak);
 	}
 
 	[data-variant='soft'][data-color='blue'] {
-		--dry-tag-bg: var(--dry-color-fill-brand-weak);
-		--dry-tag-color: var(--dry-color-text-brand);
+		--_tag-bg-default: var(--dry-color-fill-brand-weak);
+		--_tag-color-default: var(--dry-color-text-brand);
 	}
 
 	[data-variant='soft'][data-color='red'] {
-		--dry-tag-bg: var(--dry-color-fill-error-weak);
-		--dry-tag-color: var(--dry-color-text-error);
+		--_tag-bg-default: var(--dry-color-fill-error-weak);
+		--_tag-color-default: var(--dry-color-text-error);
 	}
 
 	[data-variant='soft'][data-color='green'] {
-		--dry-tag-bg: var(--dry-color-fill-success-weak);
-		--dry-tag-color: var(--dry-color-text-success);
+		--_tag-bg-default: var(--dry-color-fill-success-weak);
+		--_tag-color-default: var(--dry-color-text-success);
 	}
 
 	[data-variant='soft'][data-color='yellow'] {
-		--dry-tag-bg: var(--dry-color-fill-warning-weak);
-		--dry-tag-color: var(--dry-color-text-warning);
+		--_tag-bg-default: var(--dry-color-fill-warning-weak);
+		--_tag-color-default: var(--dry-color-text-warning);
 	}
 
 	[data-variant='soft'][data-color='purple'] {
-		--dry-tag-bg: color-mix(in srgb, var(--dry-color-fill-brand-weak) 70%, hsl(280, 65%, 55%, 0.1));
-		--dry-tag-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
+		--_tag-bg-default: var(--dry-color-fill-purple-weak);
+		--_tag-color-default: var(--dry-color-text-purple);
 	}
 
 	[data-variant='soft'][data-color='orange'] {
-		--dry-tag-bg: color-mix(
+		--_tag-bg-default: color-mix(
 			in srgb,
 			var(--dry-color-fill-warning-weak) 50%,
 			var(--dry-color-fill-error-weak)
 		);
-		--dry-tag-color: color-mix(
+		--_tag-color-default: color-mix(
 			in srgb,
 			var(--dry-color-text-warning) 50%,
 			var(--dry-color-text-error)

package/dist/tags-input/tags-input-root.svelte

@@ -64,15 +64,8 @@
 	});
 </script>
 
-<div data-part="wrapper">
-	<div
-		role="group"
-		data-part="root"
-		data-size={size}
-		data-disabled={disabled || undefined}
-		class={className}
-		{...rest}
-	>
+<div data-part="wrapper" class={className} {...rest}>
+	<div role="group" data-part="root" data-size={size} data-disabled={disabled || undefined}>
 		{@render children()}
 	</div>
 </div>

package/dist/tags-input/tags-input-tag.svelte

@@ -41,7 +41,7 @@
 		margin-inline-end: var(--dry-tags-input-gap, var(--dry-space-1_5));
 		margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
 		background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
-		color: var(--dry-color-fill-brand);
+		color: var(--dry-color-text-brand);
 		border-radius: var(--dry-tags-input-tag-radius, var(--dry-radius-md));
 		overflow: hidden;
 		font-size: var(

package/dist/text/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export interface TextProps extends HTMLAttributes<HTMLElement> {
+export interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
     as?: 'p' | 'span' | 'div';
     color?: 'default' | 'muted' | 'secondary';
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -13,7 +13,6 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
      * `narrow` ≈ 48ch, `default` ≈ 65ch, `wide` ≈ 80ch.
      */
     maxMeasure?: 'narrow' | 'default' | 'wide' | false;
-    className?: HTMLAttributes<HTMLElement>['class'];
-    children: Snippet;
+    children?: Snippet;
 }
 export { default as Text } from './text.svelte';

package/dist/text/text.svelte

@@ -3,7 +3,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { variantAttrs } from '@dryui/primitives';
 
-	interface Props extends HTMLAttributes<HTMLElement> {
+	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
 		as?: 'p' | 'span' | 'div';
 		color?: 'default' | 'muted' | 'secondary';
 		size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -11,8 +11,7 @@
 		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
 		variant?: 'default' | 'label';
 		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
-		className?: HTMLAttributes<HTMLElement>['class'];
-		children: Snippet;
+		children?: Snippet;
 	}
 
 	let {
@@ -23,8 +22,6 @@
 		weight,
 		variant = 'default',
 		maxMeasure = false,
-		class: classAttr,
-		className = classAttr,
 		children,
 		...rest
 	}: Props = $props();
@@ -36,25 +33,22 @@
 
 {#if as === 'span'}
 	<span
-		class={className}
 		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
-		{...rest}>{@render children()}</span
+		{...rest}>{@render children?.()}</span
 	>
 {:else if as === 'div'}
 	<div
-		class={className}
 		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}
 	>
-		{@render children()}
+		{@render children?.()}
 	</div>
 {:else}
 	<p
-		class={className}
 		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}
 	>
-		{@render children()}
+		{@render children?.()}
 	</p>
 {/if}
 
@@ -63,7 +57,7 @@
 	span,
 	div {
 		margin: 0;
-		color: var(--dry-typography-text-color, var(--dry-color-text-strong));
+		color: var(--dry-typography-text-color, inherit);
 		font-family: var(--dry-font-sans);
 		line-height: 1.7;
 		text-wrap: pretty;

package/dist/text/text.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLElement> {
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
     as?: 'p' | 'span' | 'div';
     color?: 'default' | 'muted' | 'secondary';
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -8,8 +8,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
     maxMeasure?: 'narrow' | 'default' | 'wide' | false;
-    className?: HTMLAttributes<HTMLElement>['class'];
-    children: Snippet;
+    children?: Snippet;
 }
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;