@dryui/ui 4.0.0 → 4.0.1

package/dist/badge/badge.svelte

@@ -152,12 +152,8 @@
 	}
 
 	[data-variant='solid'][data-color='orange'] {
-		--_badge-bg-default: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--_badge-color-default: var(--dry-color-on-warning);
+		--_badge-bg-default: var(--dry-color-fill-orange);
+		--_badge-color-default: var(--dry-color-on-orange);
 	}
 
 	/* ── Variant: outline ─────────────────────────────────────────────────────── */

package/dist/chromatic-aberration/chromatic-aberration.svelte

@@ -30,29 +30,41 @@
 
 <svg data-chromatic-aberration-svg width="0" height="0" aria-hidden="true">
 	<defs>
-		<filter id={filterId} color-interpolation-filters="sRGB">
+		<filter
+			id={filterId}
+			color-interpolation-filters="sRGB"
+			x="-20%"
+			y="-20%"
+			width="140%"
+			height="140%"
+		>
+			<feOffset in="SourceAlpha" dx={offsetX} dy={offsetY} result="redAlpha" />
+			<feFlood flood-color="rgb(255, 24, 86)" flood-opacity="0.62" result="redFlood" />
+			<feComposite in="redFlood" in2="redAlpha" operator="in" result="redFringe" />
 			<feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="red" />
 			<feColorMatrix
 				in="red"
 				type="matrix"
-				values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
-				result="redOnly"
+				values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0"
+				result="redSignal"
 			/>
+			<feBlend in="redFringe" in2="redSignal" mode="screen" result="redOnly" />
+			<feOffset in="SourceAlpha" dx={-offsetX} dy={-offsetY} result="blueAlpha" />
+			<feFlood flood-color="rgb(0, 132, 255)" flood-opacity="0.62" result="blueFlood" />
+			<feComposite in="blueFlood" in2="blueAlpha" operator="in" result="blueFringe" />
 			<feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="blue" />
 			<feColorMatrix
 				in="blue"
 				type="matrix"
-				values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
-				result="blueOnly"
+				values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 1 0 0"
+				result="blueSignal"
 			/>
-			<feColorMatrix
-				in="SourceGraphic"
-				type="matrix"
-				values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
-				result="greenOnly"
-			/>
-			<feBlend in="redOnly" in2="greenOnly" mode="screen" result="rg" />
-			<feBlend in="rg" in2="blueOnly" mode="screen" />
+			<feBlend in="blueFringe" in2="blueSignal" mode="screen" result="blueOnly" />
+			<feMerge>
+				<feMergeNode in="redOnly" />
+				<feMergeNode in="blueOnly" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
 		</filter>
 	</defs>
 </svg>

package/dist/date-picker/datepicker-button-trigger.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import Button from '../button/button.svelte';
 	import { getDatePickerCtx } from './context.svelte.js';
-	import { formatDate } from '@dryui/primitives';
+	import { formatDate, variantAttrs } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
 		placeholder?: string;
@@ -15,15 +14,13 @@
 
 	const ctx = getDatePickerCtx();
 
+	let triggerEl = $state<HTMLButtonElement>();
+
 	$effect(() => {
-		const node = document.getElementById(ctx.triggerId);
-		if (node) {
-			ctx.triggerEl = node as HTMLButtonElement;
-		}
+		if (!triggerEl) return;
+		ctx.triggerEl = triggerEl;
 		return () => {
-			if (ctx.triggerEl && ctx.triggerEl.id === ctx.triggerId) {
-				ctx.triggerEl = null;
-			}
+			if (ctx.triggerEl === triggerEl) ctx.triggerEl = null;
 		};
 	});
 
@@ -34,39 +31,144 @@
 	);
 </script>
 
-<Button
-	variant="outline"
-	type="button"
-	{size}
-	id={ctx.triggerId}
-	aria-haspopup="dialog"
-	aria-expanded={ctx.open}
-	aria-controls={ctx.contentId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-disabled={ctx.disabled ? '' : undefined}
-	disabled={ctx.disabled}
-	popovertarget={ctx.contentId}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<span data-placeholder={!ctx.value ? '' : undefined}>
-			{displayText || placeholder}
-		</span>
-	{/if}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		aria-hidden="true"
-		><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line
-			x1="16"
-			y1="2"
-			x2="16"
-			y2="6"
-		/><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg
+<span class="wrapper">
+	<button
+		bind:this={triggerEl}
+		type="button"
+		id={ctx.triggerId}
+		aria-haspopup="dialog"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.contentId}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-date-picker-trigger
+		data-disabled={ctx.disabled || undefined}
+		disabled={ctx.disabled}
+		popovertarget={ctx.contentId}
+		{...variantAttrs({ size })}
+		{...rest}
 	>
-</Button>
+		<span data-content>
+			{#if children}
+				{@render children()}
+			{:else}
+				<span data-placeholder={!ctx.value ? '' : undefined}>
+					{displayText || placeholder}
+				</span>
+			{/if}
+		</span>
+		<svg
+			data-indicator
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+			><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><path
+				d="M16 2v4M8 2v4M3 10h18"
+			/></svg
+		>
+	</button>
+</span>
+
+<style>
+	.wrapper {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	[data-date-picker-trigger] {
+		--_dpt-bg: var(--dry-date-picker-trigger-bg, var(--dry-form-control-bg));
+		--_dpt-border: var(--dry-date-picker-trigger-border, var(--dry-form-control-border));
+		--_dpt-color: var(--dry-date-picker-trigger-color, var(--dry-form-control-color));
+		--_dpt-radius: var(--dry-date-picker-trigger-radius, var(--dry-form-control-radius));
+		--_dpt-padding-x: var(
+			--dry-date-picker-trigger-padding-x,
+			var(--dry-form-control-padding-inline)
+		);
+		--_dpt-padding-y: var(
+			--dry-date-picker-trigger-padding-y,
+			var(--dry-form-control-padding-block)
+		);
+		--_dpt-font-size: var(--dry-date-picker-trigger-font-size, var(--dry-form-control-font-size));
+
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding-block: var(--_dpt-padding-y);
+		padding-inline: var(--_dpt-padding-x);
+		font-size: var(--_dpt-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--_dpt-color);
+		background: var(--_dpt-bg);
+		border: 1px solid var(--_dpt-border);
+		border-radius: var(--_dpt-radius);
+		box-sizing: border-box;
+		appearance: none;
+		text-align: start;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-date-picker-trigger] [data-content] {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-date-picker-trigger] [data-placeholder] {
+		color: var(--dry-form-control-color-placeholder);
+	}
+
+	[data-date-picker-trigger]:hover:not([data-disabled]) {
+		border-color: var(--dry-form-control-border-hover);
+	}
+
+	[data-date-picker-trigger]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-date-picker-trigger][data-disabled] {
+		--dry-date-picker-trigger-bg: var(--dry-color-bg-sunken);
+		--dry-date-picker-trigger-border: var(--dry-color-stroke-disabled);
+		--dry-date-picker-trigger-color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-date-picker-trigger][data-size='sm'] {
+		--dry-date-picker-trigger-padding-x: var(--dry-space-2);
+		--dry-date-picker-trigger-padding-y: var(--dry-space-1);
+		--dry-date-picker-trigger-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-date-picker-trigger][data-size='md'] {
+		--dry-date-picker-trigger-padding-x: var(--dry-space-3);
+		--dry-date-picker-trigger-padding-y: var(--dry-space-2);
+		--dry-date-picker-trigger-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-date-picker-trigger][data-size='lg'] {
+		--dry-date-picker-trigger-padding-x: var(--dry-space-4);
+		--dry-date-picker-trigger-padding-y: var(--dry-space-2_5);
+		--dry-date-picker-trigger-font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	svg[data-indicator] {
+		height: 1em;
+		aspect-ratio: 1;
+		place-self: center;
+		opacity: 0.7;
+	}
+</style>

package/dist/displacement/displacement.svelte

@@ -133,6 +133,7 @@
 
 	[data-displacement] {
 		position: relative;
+		block-size: 100%;
 		border-radius: inherit;
 		overflow: hidden;
 	}

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

@@ -115,7 +115,7 @@
 	[data-fu-dropzone][data-dragging] {
 		--_fu-border-default: var(--dry-color-fill-brand);
 		--_fu-bg-default: color-mix(in srgb, var(--dry-color-fill-brand) 8%, transparent);
-		color: var(--dry-color-fill-brand);
+		color: var(--dry-color-text-brand);
 	}
 
 	[data-fu-dropzone][data-disabled] {

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

@@ -6,8 +6,6 @@
 		observeInViewport,
 		observePageVisibility,
 		observeReducedMotionPreference,
-		registerPropertyOnce,
-		supportsPropertyRegistration,
 		supportsPointerTracking
 	} from '@dryui/primitives';
 
@@ -90,34 +88,9 @@
 	}
 
 	$effect(() => {
-		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'
-		});
-
 		const updateAnimatedState = (matches: boolean) => {
 			prefersReducedMotion = matches;
-			animated = !matches && supportsPropertyRegistration();
+			animated = !matches;
 		};
 
 		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
@@ -135,11 +108,7 @@
 			);
 		}
 
-		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
-			animated = false;
-		} else {
-			animated = true;
-		}
+		animated = !getReducedMotionPreference();
 
 		return () => {
 			cancelQueuedPointerPosition();
@@ -190,6 +159,17 @@
 		--dry-mesh-duration: 12s;
 		--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;
@@ -197,62 +177,76 @@
 		border-radius: inherit;
 		background:
 			radial-gradient(
-				ellipse 60% 50% at 20% 20%,
-				var(--dry-mesh-color-1, #7b68ee),
+				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 50% 60% at 80% 20%,
-				var(--dry-mesh-color-2, #38bdf8),
+				ellipse 78% 62% at var(--dry-mesh-origin-3),
+				var(--dry-mesh-color-3, #f472b6) 0%,
 				transparent 70%
 			),
 			radial-gradient(
-				ellipse 55% 55% at 70% 80%,
-				var(--dry-mesh-color-3, #f472b6),
+				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 50% 50% at 25% 75%, var(--dry-mesh-color-4, #4ade80), 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, #7b68ee) 0%,
-				var(--dry-mesh-color-2, #38bdf8) 33%,
-				var(--dry-mesh-color-3, #f472b6) 66%,
-				var(--dry-mesh-color-4, #4ade80) 100%
-			);
-		}
+			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, #7b68ee),
-				transparent 70%
-			),
-			radial-gradient(
-				ellipse 50% 60% at 80% 20%,
-				var(--dry-mesh-color-2, #38bdf8),
-				transparent 70%
-			),
-			radial-gradient(
-				ellipse 55% 55% at 70% 80%,
-				var(--dry-mesh-color-3, #f472b6),
-				transparent 70%
-			),
-			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4, #4ade80), transparent 70%);
+		--dry-mesh-origin-1: var(--dry-mesh-pointer-x) var(--dry-mesh-pointer-y);
 	}
 
 	[data-gradient-mesh][data-reduced-motion] {
@@ -266,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/link-preview/link-preview-trigger.svelte

@@ -55,7 +55,7 @@
 	}
 
 	[data-link-preview-trigger]:hover {
-		color: var(--dry-color-fill-brand-hover);
+		color: var(--dry-color-text-brand);
 		text-decoration-color: currentColor;
 	}
 </style>

package/dist/option-picker/option-picker-preview.svelte

@@ -50,7 +50,10 @@
 			--dry-option-picker-preview-bg,
 			color-mix(in srgb, var(--dry-color-fill-weak) 72%, var(--dry-color-bg-base) 28%)
 		);
-		color: var(--dry-option-picker-preview-color, var(--dry-color-text-strong));
+		color: var(
+			--dry-option-picker-preview-color,
+			var(--_option-picker-preview-preset-color, var(--dry-color-text-strong))
+		);
 		box-shadow: var(--dry-option-picker-preview-shadow, none);
 		overflow: hidden;
 	}
@@ -74,7 +77,7 @@
 			--_preset-color,
 			var(--dry-option-picker-preview-bg, var(--dry-color-fill-selected))
 		);
-		--dry-option-picker-preview-color: var(--dry-option-picker-preview-tint-light, white);
+		--_option-picker-preview-preset-color: var(--dry-option-picker-preview-tint-light, white);
 		--dry-option-picker-preview-border: color-mix(
 			in srgb,
 			var(--_preset-color-resolved) 46%,
@@ -105,6 +108,12 @@
 		transition: border-radius var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
+	@supports (color: contrast-color(white)) {
+		[data-option-picker-preview][data-variant='preset'] {
+			--_option-picker-preview-preset-color: contrast-color(var(--_preset-color-resolved));
+		}
+	}
+
 	[data-option-picker-preview][data-variant='font'] {
 		--dry-option-picker-preview-size: 2.75rem;
 		--dry-option-picker-preview-bg: color-mix(

package/dist/rich-text-editor/rich-text-editor-content.svelte

@@ -174,7 +174,7 @@
 	}
 
 	[data-part='content'] a {
-		color: var(--dry-color-fill-brand);
+		color: var(--dry-color-text-brand);
 		text-decoration: underline;
 	}
 

package/dist/select/index.d.ts

@@ -1,4 +1,10 @@
-export type { SelectRootProps, SelectTriggerProps, SelectContentProps, SelectItemProps, SelectValueProps } from '@dryui/primitives';
+export type { SelectRootProps, SelectContentProps, SelectItemProps, SelectValueProps } from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface SelectTriggerProps extends Omit<HTMLButtonAttributes, 'children'> {
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
 import SelectRoot from './select-root-input.svelte';
 import SelectTrigger from './select-trigger-button.svelte';
 import SelectContent from './select-content.svelte';

package/dist/tag/tag-button.svelte

@@ -146,12 +146,8 @@
 	}
 
 	[data-variant='solid'][data-color='orange'] {
-		--_tag-bg-default: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--_tag-color-default: var(--dry-color-on-warning);
+		--_tag-bg-default: var(--dry-color-fill-orange);
+		--_tag-color-default: var(--dry-color-on-orange);
 	}
 
 	/* ── Variant: outline ─────────────────────────────────────────────────────── */

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(