@dryui/ui 3.0.0 → 4.0.0

package/dist/themes/terminal.css

@@ -11,48 +11,42 @@
 
 [data-theme='terminal'],
 .theme-terminal {
+	/* ─── Public aliases (terminal) ───────────────────────────────── */
+	--dry-color-primary: hsl(145, 80%, 50%);
+	--dry-color-primary-hover: hsl(145, 80%, 42%);
+	--dry-color-text: hsla(0, 0%, 100%, 0.95);
+	--dry-color-text-secondary: hsla(0, 0%, 100%, 0.55);
+	--dry-color-muted: hsla(0, 0%, 100%, 0.1);
+	--dry-color-warning: hsl(45, 90%, 55%);
+	--dry-color-success: hsl(145, 80%, 50%);
+	--dry-color-danger: hsl(0, 80%, 55%);
+	--dry-color-border: hsla(0, 0%, 100%, 0.1);
+	--dry-color-border-hover: hsla(0, 0%, 100%, 0.4);
+
 	/* ─── Brand — terminal green ──────────────────────────────────── */
-	--dry-color-brand: hsl(145, 80%, 50%);
-	--dry-color-text-brand: hsl(145, 80%, 50%);
-	--dry-color-fill-brand: hsl(145, 80%, 50%);
-	--dry-color-fill-brand-hover: hsl(145, 80%, 42%);
 	--dry-color-fill-brand-active: hsl(145, 80%, 36%);
 	--dry-color-fill-brand-weak: hsla(145, 80%, 50%, 0.08);
 	--dry-color-stroke-brand: hsla(145, 80%, 50%, 0.5);
 	--dry-color-stroke-brand-strong: hsla(145, 80%, 50%, 0.8);
-	--dry-color-stroke-brand-weak: hsla(145, 80%, 50%, 0.15);
 	--dry-color-on-brand: hsl(145, 30%, 5%);
 	--dry-color-focus-ring: hsla(145, 80%, 50%, 0.4);
 
 	/* ─── Accent — amber warning tone ─────────────────────────────── */
-	--dry-color-accent: hsl(45, 90%, 55%);
-	--dry-color-text-accent: hsl(45, 90%, 55%);
 	--dry-color-fill-accent: hsl(45, 90%, 55%);
-	--dry-color-fill-accent-hover: hsl(45, 90%, 47%);
-	--dry-color-fill-accent-active: hsl(45, 90%, 41%);
 	--dry-color-fill-accent-weak: hsla(45, 90%, 55%, 0.08);
 	--dry-color-stroke-accent: hsla(45, 90%, 55%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(45, 90%, 55%, 0.8);
-	--dry-color-stroke-accent-weak: hsla(45, 90%, 55%, 0.15);
-	--dry-color-icon-accent: hsla(45, 90%, 55%, 0.8);
-	--dry-color-on-accent: hsl(45, 30%, 5%);
 
 	/* ─── Backgrounds — pure black, minimal saturation ────────────── */
 	--dry-color-bg-base: hsl(0, 0%, 2%);
 	--dry-color-bg-raised: hsl(0, 0%, 6%);
 	--dry-color-bg-overlay: hsl(0, 0%, 10%);
-	--dry-color-bg-elevated: hsl(0, 0%, 14%);
 	--dry-color-bg-floating: hsl(0, 0%, 18%);
 	--dry-color-bg-sunken: hsl(0, 0%, 0%);
-	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: hsl(0, 0%, 95%);
 
 	/* ─── Neutrals — pure achromatic ──────────────────────────────── */
-	--dry-color-text-strong: hsla(0, 0%, 100%, 0.95);
-	--dry-color-text-weak: hsla(0, 0%, 100%, 0.55);
 	--dry-color-icon: hsla(0, 0%, 100%, 0.7);
-	--dry-color-stroke-strong: hsla(0, 0%, 100%, 0.4);
-	--dry-color-stroke-weak: hsla(0, 0%, 100%, 0.1);
 	--dry-color-fill: hsla(0, 0%, 100%, 0.04);
 	--dry-color-fill-hover: hsla(0, 0%, 100%, 0.07);
 	--dry-color-fill-active: hsla(0, 0%, 100%, 0.12);
@@ -61,8 +55,6 @@
 	--dry-shadow-raised: 0 1px 2px hsla(0, 0%, 0%, 0.6);
 	--dry-shadow-overlay: 0 4px 16px hsla(0, 0%, 0%, 0.7);
 	--dry-shadow-sunken: inset 0 1px 3px hsla(0, 0%, 0%, 0.5);
-	--dry-shadow-brand: 0 0 12px hsla(145, 80%, 50%, 0.15), 0 0 4px hsla(145, 80%, 50%, 0.1);
-	--dry-shadow-accent: 0 0 12px hsla(45, 90%, 55%, 0.15), 0 0 4px hsla(45, 90%, 55%, 0.1);
 
 	/* ─── Utility shadows — thin edge, minimal layering (CRT feel) ─── */
 	--dry-shadow-sm:
@@ -77,61 +69,20 @@
 	--dry-shadow-xl:
 		0px 0px 0px 1px rgba(255, 255, 255, 0.14), 0px 8px 16px -4px rgba(0, 0, 0, 0.7),
 		0px 20px 40px -8px rgba(0, 0, 0, 0.6);
-	--dry-shadow-sm-hover:
-		0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(0, 0, 0, 0.6),
-		0px 2px 4px 0px rgba(0, 0, 0, 0.45);
-	--dry-shadow-md-hover:
-		0px 0px 0px 1px rgba(255, 255, 255, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.65),
-		0px 4px 8px -2px rgba(0, 0, 0, 0.45);
 
 	/* ─── Glass — minimal, tinted dark ────────────────────────────── */
 	--dry-glass-blur: 8px;
-	--dry-glass-tint: hsla(0, 0%, 4%, 0.85);
-	--dry-glass-opacity: 88%;
+	--dry-color-glass-tint: hsla(0, 0%, 4%, 0.85);
+	--dry-glass-tint: var(--dry-color-glass-tint);
 	--dry-glass-saturation: 100%;
-	--dry-glass-border: hsla(0, 0%, 100%, 0.08);
-	--dry-glass-border-strong: hsla(0, 0%, 100%, 0.15);
 
 	/* ─── Glow — scanline / CRT feel ──────────────────────────────── */
 	--dry-glow-color: var(--dry-color-fill-brand);
-	--dry-glow-blur: 16px;
-	--dry-glow-spread: 32px;
-	--dry-glow-ring: 0 0 0 1px hsla(145, 80%, 50%, 0.3), 0 0 8px 1px hsla(145, 80%, 50%, 0.15);
-	--dry-glow-ring-accent: 0 0 0 1px hsla(45, 90%, 55%, 0.3), 0 0 8px 1px hsla(45, 90%, 55%, 0.15);
-	--dry-glow-ambient: hsla(145, 80%, 50%, 0.02);
-	--dry-glow-ambient-accent: hsla(45, 90%, 55%, 0.02);
 
 	/* ─── Gradient palette — data viz inspired ────────────────────── */
-	--dry-gradient-warm: linear-gradient(
-		135deg,
-		hsl(45, 90%, 55%) 0%,
-		hsl(25, 80%, 50%) 50%,
-		hsl(0, 70%, 45%) 100%
-	);
-	--dry-gradient-cool: linear-gradient(
-		135deg,
-		hsl(145, 70%, 45%) 0%,
-		hsl(180, 60%, 40%) 50%,
-		hsl(210, 55%, 45%) 100%
-	);
-	--dry-gradient-sunset: linear-gradient(
-		135deg,
-		hsl(45, 90%, 55%) 0%,
-		hsl(15, 85%, 50%) 40%,
-		hsl(350, 75%, 45%) 100%
-	);
-	--dry-gradient-ocean: linear-gradient(
-		135deg,
-		hsl(180, 70%, 40%) 0%,
-		hsl(200, 65%, 45%) 50%,
-		hsl(230, 55%, 50%) 100%
-	);
-	--dry-gradient-surface: linear-gradient(180deg, hsl(0, 0%, 2%) 0%, hsl(0, 0%, 6%) 100%);
 
 	/* ─── Grain — CRT noise ───────────────────────────────────────── */
 	--dry-grain-opacity: 0.08;
-	--dry-grain-size: 0.8;
-	--dry-grain-blend: overlay;
 
 	/* ─── Typography — monospace everything ────────────────────────── */
 	--dry-font-sans:
@@ -142,13 +93,9 @@
 		monospace;
 
 	/* ─── Font weights — lighter for that CRT look ────────────────── */
-	--dry-font-weight-normal: 400;
 	--dry-font-weight-medium: 400;
-	--dry-font-weight-semibold: 500;
-	--dry-font-weight-bold: 600;
 
 	/* ─── Letter spacing — wider for monospace readability ─────────── */
-	--dry-tracking-tight: 0;
 	--dry-tracking-normal: 0.02em;
 
 	/* ─── Motion — snappy, precise ────────────────────────────────── */
@@ -165,7 +112,6 @@
 	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.85);
 
 	/* ─── Radius — sharp, no rounded corners ──────────────────────── */
-	--dry-radius-none: 0;
 	--dry-radius-sm: 2px;
 	--dry-radius-md: 2px;
 	--dry-radius-lg: 4px;
@@ -179,17 +125,37 @@
 	--dry-toggle-selected-bg: hsl(145, 80%, 50%);
 	--dry-toggle-selected-stroke: hsl(145, 80%, 50%);
 	--dry-toggle-thumb-bg: hsl(0, 0%, 2%);
-	--dry-toggle-hover-bg: hsla(0, 0%, 100%, 0.06);
-	--dry-toggle-press-bg: hsla(0, 0%, 100%, 0.1);
-	--dry-toggle-focus-ring: hsl(145, 80%, 50%);
 
 	/* ─── Status overrides — more vivid for data-dense UIs ────────── */
 	--dry-color-text-error: hsl(0, 80%, 65%);
-	--dry-color-fill-error: hsl(0, 80%, 55%);
+	--dry-color-fill-error-hover: hsl(0, 80%, 47%);
+	--dry-color-fill-error-weak: hsla(0, 80%, 55%, 0.12);
+	--dry-color-stroke-error: hsl(0, 60%, 55%);
+	--dry-color-stroke-error-strong: hsla(0, 80%, 55%, 0.85);
+	--dry-color-on-error: hsl(0, 30%, 5%);
+
 	--dry-color-text-warning: hsl(45, 90%, 60%);
-	--dry-color-fill-warning: hsl(45, 90%, 55%);
+	--dry-color-fill-warning-weak: hsla(45, 90%, 55%, 0.12);
+	--dry-color-stroke-warning: hsl(45, 70%, 55%);
+	--dry-color-stroke-warning-strong: hsla(45, 90%, 55%, 0.85);
+	--dry-color-on-warning: hsl(45, 30%, 5%);
+
 	--dry-color-text-success: hsl(145, 80%, 55%);
-	--dry-color-fill-success: hsl(145, 80%, 50%);
+	--dry-color-fill-success-weak: hsla(145, 80%, 50%, 0.12);
+	--dry-color-stroke-success: hsl(145, 60%, 50%);
+	--dry-color-stroke-success-strong: hsla(145, 80%, 50%, 0.85);
+	--dry-color-on-success: hsl(145, 30%, 5%);
+
 	--dry-color-text-info: hsl(200, 80%, 65%);
 	--dry-color-fill-info: hsl(200, 80%, 55%);
+	--dry-color-fill-info-weak: hsla(200, 80%, 55%, 0.12);
+	--dry-color-stroke-info: hsl(200, 60%, 55%);
+	--dry-color-stroke-info-strong: hsla(200, 80%, 55%, 0.85);
+
+	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
+	--dry-color-text-purple: hsl(285, 80%, 70%);
+	--dry-color-fill-purple: hsl(285, 75%, 60%);
+	--dry-color-fill-purple-weak: hsla(285, 75%, 60%, 0.12);
+	--dry-color-stroke-purple: hsla(285, 75%, 60%, 0.5);
+	--dry-color-on-purple: hsl(285, 30%, 5%);
 }

package/dist/time-input/time-input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { getFormControlCtx } from '@dryui/primitives';
 	import { Select } from '../select/index.js';
 
@@ -7,13 +8,12 @@
 		minute: string;
 	};
 
-	interface Props {
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'> {
 		value?: string;
 		disabled?: boolean;
 		step?: number;
 		size?: 'sm' | 'md' | 'lg';
 		name?: string;
-		class?: string;
 	}
 
 	let {
@@ -22,7 +22,8 @@
 		step,
 		size = 'md',
 		name,
-		class: className
+		class: className,
+		...rest
 	}: Props = $props();
 
 	const ctx = getFormControlCtx();
@@ -81,6 +82,7 @@
 	data-disabled={isDisabled || undefined}
 	id={ctx?.id}
 	class={className}
+	{...rest}
 >
 	<Select.Root bind:value={() => hourStr, setHour} disabled={isDisabled}>
 		<Select.Trigger

package/dist/time-input/time-input.svelte.d.ts

@@ -1,10 +1,10 @@
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'> {
     value?: string;
     disabled?: boolean;
     step?: number;
     size?: 'sm' | 'md' | 'lg';
     name?: string;
-    class?: string;
 }
 declare const TimeInput: import("svelte").Component<Props, {}, "value">;
 type TimeInput = ReturnType<typeof TimeInput>;

package/dist/timeline/timeline-title.svelte

@@ -11,22 +11,16 @@
 </script>
 
 {#if level === 1}
-	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h1 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h1>
 {:else if level === 2}
-	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h2 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h2>
 {:else if level === 3}
-	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h3 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h3>
 {:else if level === 4}
-	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h4 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h4>
 {:else if level === 5}
-	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h5 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h5>
 {:else}
-	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h6 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h6>
 {/if}
 

package/dist/toast/toast-root.svelte

@@ -33,11 +33,12 @@
 		}
 	});
 
-	function applyProgressStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('--progress-width', `${progress}%`);
-		});
-	}
+	let progressEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!progressEl) return;
+		progressEl.style.setProperty('--progress-width', `${progress}%`);
+	});
 </script>
 
 <div
@@ -52,7 +53,7 @@
 >
 	{@render children()}
 	{#if progress !== undefined}
-		<div data-part="progress" {@attach applyProgressStyles}></div>
+		<div bind:this={progressEl} data-part="progress"></div>
 	{/if}
 </div>
 
@@ -151,7 +152,7 @@
 		height: 3px;
 		display: grid;
 		grid-template-columns: var(--progress-width, 0%) 1fr;
-		background: var(--dry-color-stroke-weak, #e2e8f0);
+		background: var(--dry-color-stroke-weak);
 		border-radius: 0 0 var(--dry-radius-toast) var(--dry-radius-toast);
 		overflow: hidden;
 		transition: grid-template-columns var(--dry-duration-normal) var(--dry-ease-default);
@@ -159,10 +160,10 @@
 
 	[data-part='progress']::after {
 		content: '';
-		background: var(--dry-toast-accent, var(--dry-color-fill-brand, #3b82f6));
+		background: var(--dry-toast-accent, var(--dry-color-fill-brand));
 	}
 
 	[data-part='root'][data-persistent] {
-		border-left: 3px solid var(--dry-toast-accent, var(--dry-color-fill-brand, #3b82f6));
+		border-left: 3px solid var(--dry-toast-accent, var(--dry-color-fill-brand));
 	}
 </style>

package/dist/toggle/toggle-button.svelte

@@ -66,9 +66,8 @@
 					cx="16"
 					cy="16"
 					r="15"
-					fill="var(--dry-toggle-thumb-bg)"
+					fill="var(--dry-toggle-thumb-bg, var(--dry-color-bg-raised))"
 					stroke="var(--_thumb-stroke)"
-					stroke-width="2"
 				/>
 			</svg>
 			{#if icon}
@@ -107,6 +106,7 @@
 
 	.root[data-state='on'] {
 		--dry-btn-bg: var(--dry-toggle-selected-bg, var(--dry-color-fill-selected));
+		--dry-btn-border: var(--dry-toggle-selected-stroke, var(--dry-color-stroke-selected));
 	}
 
 	.root[data-disabled]:not([data-state='on']) {
@@ -115,10 +115,11 @@
 
 	.root[data-disabled][data-state='on'] {
 		--dry-btn-bg: var(--dry-toggle-disabled-fill, var(--dry-color-fill-disabled));
+		--dry-btn-border: var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled));
 	}
 
 	.thumb {
-		--_thumb-stroke: var(--dry-toggle-track-stroke, var(--dry-color-stroke-strong));
+		--_thumb-stroke: var(--dry-toggle-thumb-stroke, transparent);
 
 		display: inline-grid;
 		position: relative;
@@ -131,12 +132,18 @@
 	}
 
 	.root[data-state='on'] .thumb {
-		--_thumb-stroke: var(--dry-toggle-selected-stroke, var(--dry-color-stroke-selected));
+		--_thumb-stroke: var(
+			--dry-toggle-thumb-selected-stroke,
+			var(--dry-toggle-thumb-stroke, transparent)
+		);
 		transform: translateX(var(--_thumb-travel));
 	}
 
 	.root[data-disabled] .thumb {
-		--_thumb-stroke: var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled));
+		--_thumb-stroke: var(
+			--dry-toggle-thumb-disabled-stroke,
+			var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled))
+		);
 	}
 
 	.thumb > svg {
@@ -144,6 +151,10 @@
 		height: 100%;
 	}
 
+	.thumb circle {
+		stroke-width: var(--dry-toggle-thumb-stroke-width, 1);
+	}
+
 	.thumb-icon {
 		position: absolute;
 		inset: 0;
@@ -155,7 +166,7 @@
 	}
 
 	.root[data-state='on'] .thumb-icon {
-		color: var(--dry-color-text-brand);
+		color: var(--dry-color-on-brand);
 	}
 
 	.root[data-disabled] .thumb-icon {

package/dist/toggle-group/toggle-group-root.svelte

@@ -80,7 +80,7 @@
 		grid-auto-flow: row;
 	}
 
-	[data-size='sm'] {
+	:where([data-size='sm']) {
 		--dry-tg-padding-x: var(--dry-space-2);
 		--dry-tg-padding-y: var(--dry-space-1_5);
 		--dry-tg-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
@@ -88,7 +88,7 @@
 		--dry-tg-radius: var(--dry-radius-sm);
 	}
 
-	[data-size='md'] {
+	:where([data-size='md']) {
 		--dry-tg-padding-x: var(--dry-space-3);
 		--dry-tg-padding-y: var(--dry-space-2);
 		--dry-tg-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
@@ -96,7 +96,7 @@
 		--dry-tg-radius: var(--dry-radius-md);
 	}
 
-	[data-size='lg'] {
+	:where([data-size='lg']) {
 		--dry-tg-padding-x: var(--dry-space-4);
 		--dry-tg-padding-y: var(--dry-space-2_5);
 		--dry-tg-font-size: var(--dry-type-heading-4-size, var(--dry-text-base-size));

package/dist/token-scope/index.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+export interface TokenScopeProps {
+    tokens: Record<string, string>;
+    children: Snippet;
+}
+export { TokenScope } from '@dryui/primitives/token-scope';

package/dist/token-scope/index.js

@@ -0,0 +1 @@
+export { TokenScope } from '@dryui/primitives/token-scope';

package/dist/token-scope/token-scope.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'TokenScope',
+    description: 'Render a wrapper that injects scoped CSS custom properties for its subtree',
+    category: 'theme',
+    tags: ['theme', 'tokens', 'css-variables', 'scope']
+};

package/dist/toolbar/toolbar-root.svelte

@@ -87,10 +87,10 @@
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-1);
-		padding: var(--dry-space-1);
-		background: var(--dry-color-bg-overlay);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-lg);
+		padding: var(--dry-toolbar-padding, var(--dry-space-1));
+		background: var(--dry-toolbar-bg, var(--dry-color-bg-overlay));
+		border: 1px solid var(--dry-toolbar-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-toolbar-radius, var(--dry-radius-lg));
 	}
 
 	[data-part='root'][data-orientation='vertical'] {

package/dist/tooltip/tooltip-content.svelte

@@ -22,17 +22,19 @@
 
 	const ctx = getTooltipCtx();
 
+	let contentEl = $state<HTMLDivElement>();
+
 	const overlay = createAnchoredOverlayContent({
 		ctx,
+		contentEl: () => contentEl ?? null,
 		placement: () => placement,
-		offset: () => offset,
-		style: () => style
+		offset: () => offset
 	});
 </script>
 
 <div
-	{@attach overlay.bindContent}
-	{@attach overlay.position}
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
 	id={ctx.contentId}
 	role="tooltip"
 	popover="manual"
@@ -51,20 +53,29 @@
 		inset: unset;
 		margin: 0;
 
-		background: var(--dry-tooltip-bg, var(--dry-color-bg-inverse));
+		/* glass-tooltip recipe: 95% inverse surface + 5% transparent paired with backdrop-filter blur below */
+		background: var(
+			--dry-tooltip-bg,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 95%, transparent)
+		);
 		color: var(--dry-tooltip-color, var(--dry-color-text-inverse));
 		border: 1px solid var(--dry-tooltip-border, var(--dry-color-stroke-inverse-weak));
 		border-radius: var(--dry-tooltip-radius, var(--dry-overlay-radius, var(--dry-radius-tooltip)));
-		display: grid;
-		grid-template-columns: minmax(0, min(28ch, calc(100vw - var(--dry-space-8))));
-		padding: var(--dry-tooltip-padding-y, var(--dry-space-6))
-			var(--dry-tooltip-padding-x, var(--dry-space-8));
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
+		display: inline-grid;
+		max-inline-size: 28ch;
+		padding: var(--dry-tooltip-padding-y, var(--dry-space-1))
+			var(--dry-tooltip-padding-x, var(--dry-padding-tooltip, var(--dry-space-2)));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-tooltip-font-size, var(--dry-type-ui-caption-size));
+		font-weight: var(--dry-tooltip-font-weight, var(--dry-font-weight-medium));
+		line-height: var(--dry-tooltip-line-height, var(--dry-type-ui-caption-leading));
+		letter-spacing: var(--dry-tooltip-letter-spacing, var(--dry-tracking-normal));
 		white-space: normal;
 		overflow-wrap: anywhere;
 		pointer-events: none;
 		box-shadow: var(--dry-tooltip-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
+		backdrop-filter: blur(var(--dry-tooltip-backdrop-blur, var(--dry-space-2)));
+		-webkit-backdrop-filter: blur(var(--dry-tooltip-backdrop-blur, var(--dry-space-2)));
 
 		transition:
 			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
@@ -81,7 +92,7 @@
 	}
 
 	[data-tooltip-content]:popover-open {
-		display: grid;
+		display: inline-grid;
 		opacity: 1;
 		transform: translateY(0);
 	}
@@ -89,7 +100,7 @@
 	@starting-style {
 		[data-tooltip-content]:popover-open {
 			opacity: 0;
-			transform: translateY(calc(var(--dry-motion-distance-xs) * 0.5));
+			transform: translateY(var(--dry-motion-distance-xs));
 		}
 	}
 </style>

package/dist/tour/tour-root.css

@@ -9,7 +9,11 @@
 	--dry-tour-overlay-color: var(--dry-color-overlay-backdrop-strong);
 	--dry-tour-spotlight-padding: 8px;
 	--dry-tour-spotlight-radius: 4px;
-	--dry-tour-spotlight-ring: color-mix(in srgb, var(--dry-color-fill-brand) 35%, white 25%);
+	--dry-tour-spotlight-ring: color-mix(
+		in srgb,
+		var(--dry-color-fill-brand) 35%,
+		var(--dry-color-on-brand) 25%
+	);
 
 	position: fixed;
 	top: var(--dry-tour-spotlight-top);
@@ -123,7 +127,7 @@
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	color: var(--dry-color-text-strong);
-	background: transparent;
+	background: var(--dry-color-fill-weak, transparent);
 	border: 1px solid var(--dry-color-stroke-weak);
 	padding: var(--dry-space-1) var(--dry-space-3);
 	border-radius: var(--dry-radius-md);

package/dist/transfer/transfer-list-input.svelte

@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div data-part="list" class={className}>
+<div data-part="list" class={className} {...rest}>
 	{#if filterable}
 		<input
 			type="text"
@@ -62,7 +62,6 @@
 		aria-label={title ?? (type === 'source' ? 'Available items' : 'Selected items')}
 		data-transfer-list
 		data-type={type}
-		{...rest}
 	>
 		{#if title}
 			<div data-transfer-list-header>

package/dist/transfer/transfer-root.svelte

@@ -128,16 +128,6 @@
 
 <style>
 	[data-part='root'] {
-		--dry-transfer-border: var(--dry-color-stroke-weak);
-		--dry-transfer-bg: var(--dry-color-bg-base);
-		--dry-transfer-header-bg: var(--dry-color-bg-raised);
-		--dry-transfer-item-hover: var(--dry-color-fill);
-		--dry-transfer-item-selected: var(--dry-color-fill-brand-weak);
-		--dry-transfer-padding: var(--dry-space-3);
-		--dry-transfer-list-height: 280px;
-		--dry-transfer-radius: var(--dry-radius-lg);
-		--dry-transfer-actions-gap: var(--dry-space-2);
-
 		container-type: inline-size;
 		display: grid;
 		grid-auto-flow: column;

package/dist/tree/tree-root.svelte

@@ -87,14 +87,17 @@
 		}
 	});
 
-	function initializeTree(node: HTMLElement) {
+	let rootEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!rootEl) return;
 		if (focusedItem !== null) return;
-		const itemId = node.querySelector<HTMLElement>('[role="treeitem"]')?.dataset.itemId;
+		const itemId = rootEl.querySelector<HTMLElement>('[role="treeitem"]')?.dataset.itemId;
 
 		if (itemId) {
 			focusedItem = itemId;
 		}
-	}
+	});
 
 	function getVisibleItems(tree: HTMLElement) {
 		const items = Array.from(tree.querySelectorAll('[role="treeitem"]')) as HTMLElement[];
@@ -216,12 +219,12 @@
 </script>
 
 <div
+	bind:this={rootEl}
 	role="tree"
 	data-part="root"
 	class={className}
 	onfocusin={handleFocusIn}
 	onkeydown={handleKeydown}
-	{@attach initializeTree}
 	{...rest}
 >
 	{@render children()}

package/dist/typography/blockquote.svelte

@@ -6,10 +6,10 @@
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: classAttr, children, ...rest }: Props = $props();
 </script>
 
-<blockquote class={className} {...rest}>{@render children()}</blockquote>
+<blockquote class={classAttr} {...rest}>{@render children()}</blockquote>
 
 <style>
 	blockquote {

package/dist/typography/code.svelte

@@ -6,10 +6,10 @@
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: classAttr, children, ...rest }: Props = $props();
 </script>
 
-<code class={className} {...rest}>{@render children()}</code>
+<code class={classAttr} {...rest}>{@render children()}</code>
 
 <style>
 	code {

package/dist/typography/heading.svelte

@@ -6,12 +6,12 @@
 		level = 2,
 		variant = 'default',
 		maxMeasure = false,
-		class: className,
+		class: _class,
 		children,
 		...rest
 	}: HeadingProps = $props();
 </script>
 
-<Heading {level} {variant} {maxMeasure} {className} {...rest}>
+<Heading {level} {variant} {maxMeasure} {...rest}>
 	{@render children()}
 </Heading>