@dryui/ui 1.6.0 → 1.7.0

package/dist/accordion/accordion-item.svelte

@@ -46,6 +46,15 @@
 		display: grid;
 		border-bottom: 1px solid var(--dry-color-stroke-weak);
 
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+
 		&:last-child {
 			border-bottom: none;
 		}

package/dist/accordion/accordion-root.svelte

@@ -47,7 +47,7 @@
 	});
 </script>
 
-<div data-accordion data-orientation={orientation} class={className} {...rest}>
+<div data-accordion data-dry-stagger data-orientation={orientation} class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/alert/alert.svelte

@@ -83,6 +83,7 @@
 					var(--dry-alert-padding, var(--dry-space-6))
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		display: grid;

package/dist/avatar/avatar.svelte

@@ -121,7 +121,7 @@
 		font-size: var(--dry-avatar-font-size);
 		font-weight: 600;
 		line-height: 1;
-		border: 1px solid var(--dry-color-stroke-weak);
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 		overflow: hidden;
 		user-select: none;
 	}

package/dist/button/button.svelte

@@ -177,6 +177,7 @@
 		text-decoration: none;
 		white-space: nowrap;
 		user-select: none;
+		transform-origin: center;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
@@ -191,7 +192,7 @@
 		}
 
 		&:active:not([data-disabled]) {
-			transform: translateY(1px);
+			transform: scale(0.98);
 		}
 
 		&[data-disabled] {
@@ -499,7 +500,7 @@
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
-		height: var(--dry-space-8);
+		height: var(--dry-space-10);
 		--_dry-btn-radius: var(--dry-btn-radius, var(--dry-radius-sm));
 		--_dry-btn-font-size: var(
 			--dry-btn-font-size,

package/dist/card/card-root.svelte

@@ -69,6 +69,7 @@
 			0px,
 			calc(var(--dry-card-radius) - var(--dry-card-padding, var(--dry-space-8)))
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		display: grid;

package/dist/chart/chart-y-axis.svelte

@@ -45,6 +45,7 @@
 			font-size="11"
 			fill="currentColor"
 			opacity="0.6"
+			data-chart-tick-label
 		>
 			{Math.round(tick.value)}
 		</text>
@@ -63,4 +64,8 @@
 	[data-chart-axis] {
 		color: var(--dry-chart-axis-color);
 	}
+
+	[data-chart-tick-label] {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/dist/checkbox/checkbox-input.svelte

@@ -133,8 +133,21 @@
 
 		&::after {
 			content: '';
-			display: none;
-			transition: transform var(--dry-duration-fast) var(--dry-ease-spring);
+			display: block;
+			height: 60%;
+			aspect-ratio: 35 / 60;
+			border: solid transparent;
+			border-width: 0 2px 2px 0;
+			margin-left: calc(var(--dry-checkbox-size) * 0.52);
+			margin-top: calc(var(--dry-checkbox-size) * -0.18);
+			transform-origin: center;
+			opacity: 0;
+			transform: rotate(45deg) scale(0.25);
+			filter: blur(4px);
+			transition:
+				opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+				transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+				filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
 		}
 
 		&[data-state='checked'] {
@@ -143,16 +156,10 @@
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				display: block;
-				height: 60%;
-				aspect-ratio: 35 / 60;
-				border: solid var(--dry-checkbox-check-color);
-				border-width: 0 2px 2px 0;
-				margin-left: calc(var(--dry-checkbox-size) * 0.52);
-				margin-top: calc(var(--dry-checkbox-size) * -0.18);
+				border-color: var(--dry-checkbox-check-color);
+				opacity: 1;
 				transform: rotate(45deg) scale(1);
-				transform-origin: center;
-				animation: checkScale var(--dry-duration-fast) var(--dry-ease-spring);
+				filter: blur(0);
 			}
 		}
 
@@ -163,11 +170,15 @@
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				display: block;
 				height: 2px;
+				aspect-ratio: auto;
+				border: none;
 				background: var(--dry-checkbox-check-color);
+				margin-left: 0;
+				margin-top: 0;
+				opacity: 1;
 				transform: scale(1);
-				animation: dashScale var(--dry-duration-fast) var(--dry-ease-spring);
+				filter: blur(0);
 			}
 		}
 
@@ -226,28 +237,16 @@
 		--dry-checkbox-radius: var(--dry-radius-md);
 	}
 
-	@keyframes checkScale {
-		from {
-			transform: rotate(45deg) scale(0);
+	@media (prefers-reduced-motion: reduce) {
+		input::after {
+			transition: none;
+			filter: none;
 		}
-		to {
+		input[data-state='checked']::after {
 			transform: rotate(45deg) scale(1);
 		}
-	}
-
-	@keyframes dashScale {
-		from {
-			transform: scale(0);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		input[data-state='checked']::after,
 		input[data-state='indeterminate']::after {
-			animation: none;
+			transform: scale(1);
 		}
 	}
 </style>

package/dist/combobox/combobox-content.svelte

@@ -64,6 +64,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.inputId}
 	data-combobox-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{...rest}

package/dist/combobox/combobox-item.svelte

@@ -97,6 +97,15 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-10);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-combobox-item][data-has-icon] {

package/dist/command-palette/command-palette-item.svelte

@@ -71,6 +71,15 @@
 		cursor: pointer;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-command-palette-item]:hover:not([data-disabled]) {

package/dist/command-palette/command-palette-list.svelte

@@ -15,6 +15,7 @@
 <div
 	role="listbox"
 	data-command-palette-list
+	data-dry-stagger
 	id={ctx.listId}
 	aria-label="Commands"
 	class={className}

package/dist/context-menu/context-menu-content.svelte

@@ -60,6 +60,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-context-menu-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{style}

package/dist/data-grid/data-grid-cell.svelte

@@ -29,4 +29,9 @@
 		background: inherit;
 		box-shadow: 2px 0 4px -2px rgb(15 23 42 / 0.1);
 	}
+
+	[data-dg-cell][data-type='number'],
+	[data-dg-cell][data-align='end'] {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/dist/dropdown-menu/dropdown-menu-content.svelte

@@ -58,6 +58,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-dropdown-menu-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {
@@ -97,12 +98,18 @@
 				var(--dry-menu-radius, var(--dry-radius-lg)) - var(--dry-menu-padding, var(--dry-space-2))
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		transition:
 			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-dropdown-menu-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-dropdown-menu-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/image/image.svelte

@@ -67,6 +67,11 @@
 		object-fit: var(--dry-image-object-fit);
 	}
 
+	img[data-state='loaded'],
+	img[data-state='fallback'] {
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+	}
+
 	img[data-state='fallback'] {
 		opacity: 0.95;
 	}

package/dist/internal/menu-item.svelte

@@ -62,7 +62,16 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	div:hover:not([data-disabled]),

package/dist/internal/modal-content.svelte

@@ -132,6 +132,7 @@
 					var(--dry-dialog-padding)
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		justify-self: stretch;
@@ -150,6 +151,11 @@
 			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
 	}
 
+	[data-modal-content][data-variant='dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='dialog'][data-state='open'] [data-modal-panel] {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -189,6 +195,8 @@
 		--dry-dialog-shadow: var(--dry-shadow-overlay);
 		--dry-dialog-padding: var(--dry-space-6);
 		--dry-dialog-max-width: 32rem;
+		--dry-radius-nested: max(0px, calc(var(--dry-dialog-radius) - var(--dry-dialog-padding)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		justify-self: stretch;
@@ -208,6 +216,11 @@
 			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
 	}
 
+	[data-modal-content][data-variant='alert-dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='alert-dialog'][data-state='open'] [data-modal-panel] {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -282,6 +295,11 @@
 			opacity var(--dry-duration-normal) var(--dry-ease-out);
 	}
 
+	[data-modal-content][data-variant='drawer'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='drawer'][data-side='right'] [data-modal-panel] {
 		grid-column: 2;
 		height: 100%;

package/dist/internal/nav-arrow-button.svelte

@@ -18,9 +18,25 @@
 </script>
 
 <Button {variant} {size} type="button" aria-label={label} {...rest}>
-	{#if children}
-		{@render children()}
-	{:else}
-		{glyph}
-	{/if}
+	<span data-part="nav-arrow-icon" data-direction={direction}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{glyph}
+		{/if}
+	</span>
 </Button>
+
+<style>
+	[data-part='nav-arrow-icon'] {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+	[data-part='nav-arrow-icon'][data-direction='prev'] {
+		transform: translateX(-0.5px);
+	}
+	[data-part='nav-arrow-icon'][data-direction='next'] {
+		transform: translateX(0.5px);
+	}
+</style>

package/dist/menubar/menubar-content.svelte

@@ -99,6 +99,7 @@
 	tabindex="-1"
 	aria-labelledby={triggerEl?.id}
 	data-menubar-content
+	data-dry-stagger
 	data-state={menuCtx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {

package/dist/menubar/menubar-item.svelte

@@ -69,7 +69,16 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-menubar-item]:hover:not([data-disabled]),

package/dist/number-input/number-input-button.svelte

@@ -82,6 +82,7 @@
 		font-size: var(--dry-input-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
+		font-variant-numeric: tabular-nums;
 		color: var(--dry-input-color);
 		background: var(--dry-input-bg);
 		border: 1px solid var(--dry-input-border);

package/dist/pin-input/pin-input-cell.svelte

@@ -53,6 +53,7 @@
 		height: var(--dry-pin-size);
 		font-size: var(--dry-pin-font-size);
 		font-family: var(--dry-font-mono);
+		font-variant-numeric: tabular-nums;
 		font-weight: 500;
 		color: var(--dry-color-text-strong);
 		background: var(--dry-pin-bg);

package/dist/popover/popover-content.svelte

@@ -61,6 +61,7 @@
 		--dry-popover-shadow: var(--dry-overlay-shadow, var(--dry-shadow-lg));
 		--dry-popover-padding: var(--dry-space-4);
 		--dry-radius-nested: max(0px, calc(var(--dry-popover-radius) - var(--dry-popover-padding)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		inset: unset;
 		margin: 0;
@@ -79,6 +80,11 @@
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-popover-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-popover-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/progress/progress.svelte

@@ -275,6 +275,7 @@
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		color: var(--dry-color-text-weak, #64748b);
 		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
 	}
 
 	[data-part='label'][data-position='inside'] {

package/dist/radio-group/radio-group-item-input.svelte

@@ -91,12 +91,18 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%) scale(0);
+		transform: translate(-50%, -50%) scale(0.25);
+		opacity: 0;
+		filter: blur(4px);
 		height: 8px;
 		aspect-ratio: 1;
 		border-radius: var(--dry-radius-full);
 		background: var(--dry-color-on-brand);
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
 	}
 
 	[data-radio-group-item] input[type='radio']:hover:not(:disabled) {
@@ -120,6 +126,15 @@
 
 	[data-radio-group-item] input[type='radio']:checked::after {
 		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+		filter: blur(0);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-radio-group-item] input[type='radio']::after {
+			transition: none;
+			filter: none;
+		}
 	}
 
 	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {

package/dist/reveal/reveal.svelte

@@ -128,7 +128,7 @@
 <style>
 	[data-reveal] {
 		--dry-reveal-distance: var(--dry-motion-distance-sm, 0.75rem);
-		--dry-reveal-delay: 0ms;
+		--dry-reveal-delay: var(--dry-stagger-delay, 0ms);
 		--dry-reveal-duration: var(--dry-duration-entrance, 480ms);
 		--dry-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
 		--dry-reveal-hidden-opacity: var(--dry-motion-opacity-enter, 0);

package/dist/select/select-content.svelte

@@ -123,6 +123,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-select-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {

package/dist/select/select-item.svelte

@@ -81,6 +81,15 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-10);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-select-item]:hover:not([data-disabled]),

package/dist/select/select-trigger-button.svelte

@@ -33,6 +33,7 @@
 		{@render children()}
 		<svg
 			data-indicator
+			data-state={ctx.open ? 'open' : 'closed'}
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 24 24"
 			fill="none"
@@ -55,6 +56,22 @@
 		aspect-ratio: 1;
 		place-self: center;
 		opacity: 0.5;
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	}
+
+	svg[data-indicator][data-state='open'] {
+		opacity: 1;
+		transform: scale(1.05);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg[data-indicator] {
+			transition: none;
+			filter: none;
+		}
 	}
 </style>

package/dist/skeleton/skeleton.svelte

@@ -91,10 +91,12 @@
 		--dry-skeleton-radius: var(--dry-radius-full);
 		aspect-ratio: 1;
 		height: var(--_h, var(--dry-space-10));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 	}
 
 	div[data-variant='rectangular'] {
 		--dry-skeleton-radius: var(--dry-radius-sm);
 		height: var(--_h, var(--dry-space-16));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 	}
 </style>

package/dist/slider/slider-input.svelte

@@ -249,6 +249,7 @@
 		padding-inline: var(--dry-space-4);
 		font-size: var(--dry-text-sm-size, 0.875rem);
 		font-weight: 600;
+		font-variant-numeric: tabular-nums;
 		color: var(--dry-color-text);
 		clip-path: inset(
 			0 calc(100% - var(--dry-slider-progress, 50%)) 0 0 round var(--dry-radius-full)

package/dist/text/text.svelte

@@ -60,6 +60,7 @@
 		color: var(--dry-typography-text-color, var(--dry-color-text-strong));
 		font-family: var(--dry-font-sans);
 		line-height: 1.7;
+		text-wrap: pretty;
 	}
 
 	[data-color='muted'] {

package/dist/theme-toggle/theme-toggle.svelte

@@ -113,7 +113,12 @@
 >
 	{#snippet icon()}
 		<span class="icons" data-mode={iconState}>
-			<span class="icon sun" aria-hidden="true">
+			<span
+				class="icon sun"
+				data-dry-icon-reveal
+				data-hidden={iconState === 'dark' || undefined}
+				aria-hidden="true"
+			>
 				{#if sunIcon}
 					{@render sunIcon()}
 				{:else}
@@ -138,7 +143,12 @@
 					</svg>
 				{/if}
 			</span>
-			<span class="icon moon" aria-hidden="true">
+			<span
+				class="icon moon"
+				data-dry-icon-reveal
+				data-hidden={iconState === 'light' || undefined}
+				aria-hidden="true"
+			>
 				{#if moonIcon}
 					{@render moonIcon()}
 				{:else}

package/dist/themes/dark.css

@@ -65,6 +65,9 @@
 	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: #ffffff;
 
+	/* ─── Image edge ring (dark) ─────────────────────────────────── */
+	--dry-image-edge: rgba(255, 255, 255, 0.1);
+
 	/* ─── Component: Toggle ─────────────────────────────────────────
 	   Derived from semantic tokens so brand overrides (e.g. a consumer
 	   retheming --dry-color-fill-brand) flow through to toggles too.
@@ -283,6 +286,9 @@
 			--dry-color-bg-brand: var(--dry-color-fill-brand);
 			--dry-color-bg-inverse: #ffffff;
 
+			/* ─── Image edge ring (dark) ─────────────────────────────────── */
+			--dry-image-edge: rgba(255, 255, 255, 0.1);
+
 			/* ─── Component: Toggle ─────────────────────────────────────────
 			   Derived from semantic tokens so brand overrides (e.g. a consumer
 			   retheming --dry-color-fill-brand) flow through to toggles too.

package/dist/themes/default.css

@@ -91,6 +91,12 @@ samp {
 	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: hsl(233, 18%, 9%);
 
+	/* ─── Image edge ring ────────────────────────────────────────────
+	   Subtle 1px outline for image surfaces (avatars, images, image
+	   skeletons). Prevents image edges from reading as surface
+	   imperfections. Hardcoded rgba — not brand-derivable. */
+	--dry-image-edge: rgba(0, 0, 0, 0.1);
+
 	/* ─── Component: Toggle ─────────────────────────────────────────
 	   Derived from semantic tokens so brand overrides (e.g. a consumer
 	   retheming --dry-color-fill-brand) flow through to toggles too.
@@ -365,6 +371,10 @@ samp {
 	--dry-motion-blur-enter: 16px;
 	--dry-motion-scale-enter: 0.96;
 
+	/* ─── Stagger ─────────────────────────────────────────────────── */
+	--dry-stagger-step: 60ms;
+	--dry-stagger-max: 8; /* cap delay so very long lists don't take forever */
+
 	/* ─── Glass surface ───────────────────────────────────────────── */
 	--dry-glass-blur: 12px;
 	--dry-glass-tint: var(--dry-color-bg-raised);
@@ -501,3 +511,85 @@ samp {
 		--dry-motion-scale-enter: 1;
 	}
 }
+
+/* Stagger — per-child transition-delay driven by `--dry-index`. The first
+   12 children get `--dry-index` automatically via `:nth-child()`; for longer
+   lists set `--dry-index` on each child. The child must declare a
+   `transition` on its enter properties for the delay to have effect. */
+[data-dry-stagger] > * {
+	--dry-stagger-delay: calc(
+		min(var(--dry-index, 0), var(--dry-stagger-max)) * var(--dry-stagger-step)
+	);
+	transition-delay: var(--dry-stagger-delay);
+	animation-delay: var(--dry-stagger-delay);
+}
+
+[data-dry-stagger] > *:nth-child(1) {
+	--dry-index: 0;
+}
+[data-dry-stagger] > *:nth-child(2) {
+	--dry-index: 1;
+}
+[data-dry-stagger] > *:nth-child(3) {
+	--dry-index: 2;
+}
+[data-dry-stagger] > *:nth-child(4) {
+	--dry-index: 3;
+}
+[data-dry-stagger] > *:nth-child(5) {
+	--dry-index: 4;
+}
+[data-dry-stagger] > *:nth-child(6) {
+	--dry-index: 5;
+}
+[data-dry-stagger] > *:nth-child(7) {
+	--dry-index: 6;
+}
+[data-dry-stagger] > *:nth-child(8) {
+	--dry-index: 7;
+}
+[data-dry-stagger] > *:nth-child(9) {
+	--dry-index: 8;
+}
+[data-dry-stagger] > *:nth-child(10) {
+	--dry-index: 9;
+}
+[data-dry-stagger] > *:nth-child(11) {
+	--dry-index: 10;
+}
+[data-dry-stagger] > *:nth-child(12) {
+	--dry-index: 11;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-dry-stagger] > * {
+		transition: none;
+		animation: none;
+	}
+}
+
+.dry-tabular-nums {
+	font-variant-numeric: tabular-nums;
+}
+
+[data-dry-icon-reveal] {
+	transition:
+		opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+		transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+		filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	transform-origin: center;
+}
+[data-dry-icon-reveal][data-state='hidden'],
+[data-dry-icon-reveal][data-hidden],
+[data-dry-icon-reveal][hidden] {
+	opacity: 0;
+	transform: scale(0.25);
+	filter: blur(4px);
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-dry-icon-reveal] {
+		transition: none;
+		filter: none;
+		transform: none;
+	}
+}

package/dist/toast/toast-provider.svelte

@@ -47,6 +47,7 @@
 	role="region"
 	aria-label="Notifications"
 	data-part="provider"
+	data-dry-stagger
 	data-position={position}
 	class={className}
 	{...rest}

package/dist/toast/toast-root.svelte

@@ -60,6 +60,7 @@
 	[data-part='root'] {
 		--dry-toast-accent: var(--dry-color-fill-info);
 		--dry-radius-nested: max(0px, calc(var(--dry-radius-lg) - var(--dry-space-4)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		position: relative;
 		background: var(--dry-toast-bg, var(--dry-color-bg-overlay));

package/dist/tooltip/tooltip-content.svelte

@@ -70,6 +70,11 @@
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-tooltip-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-tooltip-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/video-embed/video-embed-button.svelte

@@ -166,10 +166,11 @@
 		height: var(--dry-video-embed-play-size);
 		aspect-ratio: 1;
 		filter: drop-shadow(0 2px 8px rgb(15 23 42 / 0.3));
+		transform: translateX(1px);
 		transition: transform var(--dry-duration-normal) var(--dry-ease-default);
 	}
 
 	.play-btn-slot:hover [data-part='play-icon'] {
-		transform: scale(1.1);
+		transform: translateX(1px) scale(1.1);
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -784,7 +784,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.6.0"
+    "@dryui/primitives": "^1.7.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"