@dryui/ui 0.1.11 → 0.1.12

package/dist/adjust/adjust.svelte

@@ -48,8 +48,8 @@
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
-			node.style.setProperty('filter', filterString ?? '');
-			node.style.setProperty('mix-blend-mode', blendMode ?? '');
+			node.style.setProperty('--_filter', filterString ?? 'none');
+			node.style.setProperty('--_blend', blendMode ?? 'normal');
 		});
 	}
 </script>
@@ -61,5 +61,7 @@
 <style>
 	[data-adjust] {
 		border-radius: inherit;
+		filter: var(--_filter, none);
+		mix-blend-mode: var(--_blend, normal);
 	}
 </style>

package/dist/alpha-slider/alpha-slider.svelte

@@ -31,13 +31,13 @@
 
 	function setTrackBg(node: HTMLDivElement) {
 		$effect(() => {
-			node.style.setProperty('background', `linear-gradient(to right, transparent, ${color})`);
+			node.style.setProperty('--_track-bg', `linear-gradient(to right, transparent, ${color})`);
 		});
 	}
 
 	function setSwatchBg(node: HTMLDivElement) {
 		$effect(() => {
-			node.style.setProperty('background', swatchColor);
+			node.style.setProperty('--_swatch-bg', swatchColor);
 		});
 	}
 </script>
@@ -96,6 +96,7 @@
 		position: absolute;
 		inset: 0;
 		border-radius: var(--dry-radius-full);
+		background: var(--_track-bg, linear-gradient(to right, transparent, hsl(230, 65%, 55%)));
 	}
 
 	[data-alpha-slider-input] {
@@ -148,6 +149,7 @@
 	[data-alpha-slider-swatch] {
 		position: absolute;
 		inset: 0;
+		background: var(--_swatch-bg, hsl(230, 65%, 55%));
 	}
 
 	[data-alpha-slider-value-label] {

package/dist/aspect-ratio/aspect-ratio.svelte

@@ -11,7 +11,7 @@
 
 	function applyRatio(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('aspect-ratio', String(ratio));
+			node.style.setProperty('--_ratio', String(ratio));
 		});
 	}
 </script>
@@ -23,5 +23,6 @@
 <style>
 	div {
 		overflow: hidden;
+		aspect-ratio: var(--_ratio, 16 / 9);
 	}
 </style>

package/dist/aurora/aurora.svelte

@@ -116,8 +116,11 @@
 		$effect(() => {
 			node.style.cssText = style || '';
 			if (customPalette?.[0]) node.style.setProperty('--dry-aurora-color-1', customPalette[0]);
+			else node.style.removeProperty('--dry-aurora-color-1');
 			if (customPalette?.[1]) node.style.setProperty('--dry-aurora-color-2', customPalette[1]);
+			else node.style.removeProperty('--dry-aurora-color-2');
 			if (customPalette?.[2]) node.style.setProperty('--dry-aurora-color-3', customPalette[2]);
+			else node.style.removeProperty('--dry-aurora-color-3');
 			node.style.setProperty('--dry-aurora-duration', speedDuration);
 			node.style.setProperty(
 				'--dry-aurora-intensity',
@@ -129,8 +132,11 @@
 
 	function applyBackdropStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('mix-blend-mode', blendMode ?? '');
-			node.style.setProperty('opacity', layerOpacity != null ? String(layerOpacity) : '');
+			if (blendMode) node.style.setProperty('--_aurora-backdrop-blend', blendMode);
+			else node.style.removeProperty('--_aurora-backdrop-blend');
+			if (layerOpacity != null)
+				node.style.setProperty('--_aurora-backdrop-opacity', String(layerOpacity));
+			else node.style.removeProperty('--_aurora-backdrop-opacity');
 		});
 	}
 </script>
@@ -163,6 +169,8 @@
 		--dry-aurora-angle: 0deg;
 		--dry-aurora-shift: 0%;
 		--dry-aurora-duration: 18s;
+		--dry-aurora-intensity: 80;
+		--dry-aurora-waviness: 50;
 		--dry-aurora-surface: linear-gradient(
 			145deg,
 			color-mix(in srgb, var(--dry-color-bg-base) 84%, var(--dry-color-bg-overlay)),
@@ -215,6 +223,8 @@
 		overflow: hidden;
 		border-radius: inherit;
 		z-index: 0;
+		mix-blend-mode: var(--_aurora-backdrop-blend, normal);
+		opacity: var(--_aurora-backdrop-opacity, 1);
 	}
 
 	[data-aurora-layer] {

package/dist/beam/beam.svelte

@@ -28,36 +28,23 @@
 
 	const clampedIntensity = $derived(`${Math.max(0, Math.min(100, intensity))}`);
 	const speedValue = $derived(`${Math.max(0, speed)}s`);
-	const gradientString = $derived(
-		`linear-gradient(${angle}deg, transparent 0%, transparent calc(50% - ${width}px), ${color} 50%, transparent calc(50% + ${width}px), transparent 100%)`
-	);
-	const rootStyle = $derived.by(() => {
-		const declarations = [
-			style,
-			`--dry-beam-speed: ${speedValue}`,
-			`--dry-beam-intensity: ${clampedIntensity}`,
-			`--dry-beam-width: ${width}px`,
-			blendMode ? `--dry-beam-blend: ${blendMode}` : null
-		].filter(Boolean);
-		return declarations.join('; ');
-	});
-	const layerStyle = $derived(`background-image: ${gradientString};`);
 
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.cssText = rootStyle;
-		});
-	}
-
-	function applyLayerStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = layerStyle;
+			node.style.cssText = style || '';
+			node.style.setProperty('--dry-beam-color', color);
+			node.style.setProperty('--dry-beam-angle', `${angle}deg`);
+			node.style.setProperty('--dry-beam-speed', speedValue);
+			node.style.setProperty('--dry-beam-intensity', clampedIntensity);
+			node.style.setProperty('--dry-beam-width', `${width}px`);
+			if (blendMode) node.style.setProperty('--dry-beam-blend', blendMode);
+			else node.style.removeProperty('--dry-beam-blend');
 		});
 	}
 </script>
 
 <div data-beam class={className} {...rest} {@attach applyRootStyles}>
-	<div data-beam-layer {@attach applyLayerStyles}></div>
+	<div data-beam-layer></div>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -65,6 +52,12 @@
 
 <style>
 	[data-beam] {
+		--dry-beam-color: var(--dry-color-fill-brand);
+		--dry-beam-angle: 45deg;
+		--dry-beam-speed: 3s;
+		--dry-beam-intensity: 70;
+		--dry-beam-width: 2px;
+
 		position: relative;
 		overflow: hidden;
 		border-radius: inherit;
@@ -74,6 +67,14 @@
 		position: absolute;
 		inset: 0;
 		pointer-events: none;
+		background-image: linear-gradient(
+			var(--dry-beam-angle, 45deg),
+			transparent 0%,
+			transparent calc(50% - var(--dry-beam-width, 2px)),
+			var(--dry-beam-color, var(--dry-color-fill-brand)) 50%,
+			transparent calc(50% + var(--dry-beam-width, 2px)),
+			transparent 100%
+		);
 		background-size: 300% 300%;
 		opacity: calc(var(--dry-beam-intensity, 70) / 100);
 		mix-blend-mode: var(--dry-beam-blend, var(--dry-beam-default-blend, multiply));

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

@@ -16,6 +16,9 @@
 	const offsetX = $derived(Math.round(offset * Math.cos((angle * Math.PI) / 180)));
 	const offsetY = $derived(Math.round(offset * Math.sin((angle * Math.PI) / 180)));
 
+	// Flash-on-load: filter references a runtime-generated SVG filter ID (url(#${filterId})),
+	// so no CSS default is possible — the ID isn't known until mount. The SVG <filter> element
+	// is in the same template, so the @attach sets it immediately on first paint.
 	function applyFilterStyles(node: HTMLElement) {
 		node.style.cssText = style || '';
 		node.style.setProperty('filter', `url(#${filterId})`);

package/dist/color-picker/color-picker-alpha-slider.svelte

@@ -20,7 +20,7 @@
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
-			node.style.setProperty('--dry-alpha-rgb', rgbStr);
+			node.style.setProperty('--_alpha-rgb', rgbStr);
 		});
 	}
 </script>
@@ -53,6 +53,7 @@
 	}
 
 	[data-cp-slider] {
+		--dry-alpha-rgb: var(--_alpha-rgb, 255, 0, 0);
 		--dry-slider-track-height: var(--dry-color-picker-slider-track-height);
 		--dry-slider-thumb-size: var(--dry-color-picker-slider-thumb-size);
 

package/dist/color-picker/color-picker-area.svelte

@@ -109,11 +109,11 @@
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
-			node.style.setProperty('--dry-color-picker-area-width', `${width}px`);
-			node.style.setProperty('--dry-color-picker-area-height', `${height}px`);
-			node.style.setProperty('--dry-color-picker-indicator-left', `${indicatorX}px`);
-			node.style.setProperty('--dry-color-picker-indicator-top', `${indicatorY}px`);
-			node.style.setProperty('--dry-color-picker-indicator-color', ctx.hex);
+			node.style.setProperty('--_area-w', `${width}px`);
+			node.style.setProperty('--_area-h', `${height}px`);
+			node.style.setProperty('--_ind-left', `${indicatorX}px`);
+			node.style.setProperty('--_ind-top', `${indicatorY}px`);
+			node.style.setProperty('--_ind-color', ctx.hex);
 		});
 	}
 </script>
@@ -137,6 +137,12 @@
 
 <style>
 	[data-cp-area] {
+		--dry-color-picker-area-width: var(--_area-w, 200px);
+		--dry-color-picker-area-height: var(--_area-h, 150px);
+		--dry-color-picker-indicator-left: var(--_ind-left, 0px);
+		--dry-color-picker-indicator-top: var(--_ind-top, 0px);
+		--dry-color-picker-indicator-color: var(--_ind-color, #ff0000);
+
 		position: relative;
 		display: grid;
 		grid-template-columns: var(--dry-color-picker-area-width);

package/dist/color-picker/color-picker-swatch.svelte

@@ -36,8 +36,8 @@
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
-			node.style.setProperty('--dry-swatch-color', displayColor);
-			node.style.setProperty('--dry-swatch-opacity', String(displayAlpha));
+			node.style.setProperty('--_swatch-color', displayColor);
+			node.style.setProperty('--_swatch-opacity', String(displayAlpha));
 		});
 	}
 </script>
@@ -58,6 +58,9 @@
 
 <style>
 	[data-cp-swatch] {
+		--dry-swatch-color: var(--_swatch-color, #ff0000);
+		--dry-swatch-opacity: var(--_swatch-opacity, 1);
+
 		height: var(--dry-color-picker-swatch-size);
 		aspect-ratio: 1;
 		border-radius: var(--dry-radius-md);
@@ -84,7 +87,7 @@
 		position: absolute;
 		inset: 0;
 		background: var(--dry-swatch-color);
-		opacity: var(--dry-swatch-opacity, 1);
+		opacity: var(--dry-swatch-opacity);
 		border-radius: inherit;
 	}
 

package/dist/displacement/displacement.svelte

@@ -69,6 +69,9 @@
 		return () => mql.removeEventListener('change', handler);
 	});
 
+	// Flash-on-load: filter references a runtime-generated SVG filter ID (url(#${filterId})),
+	// so no CSS default is possible — the ID isn't known until mount. The SVG <filter> element
+	// is in the same template, so the @attach sets it immediately on first paint.
 	function applyFilterStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';

package/dist/gauge/gauge.svelte

@@ -61,8 +61,8 @@
 
 	function applyFillStroke(node: SVGElement) {
 		$effect(() => {
-			if (thresholdColor) node.style.setProperty('stroke', thresholdColor);
-			else node.style.removeProperty('stroke');
+			if (thresholdColor) node.style.setProperty('--_gauge-fill-stroke', thresholdColor);
+			else node.style.removeProperty('--_gauge-fill-stroke');
 		});
 	}
 </script>
@@ -115,7 +115,7 @@
 
 	[data-gauge] [data-part='fill'] {
 		fill: none;
-		stroke: var(--dry-gauge-fill-color);
+		stroke: var(--_gauge-fill-stroke, var(--dry-gauge-fill-color));
 		stroke-width: var(--dry-gauge-stroke-width);
 		stroke-linecap: round;
 		transition: d var(--dry-duration-normal, 0.3s) var(--dry-ease-default, ease);

package/dist/god-rays/god-rays.svelte

@@ -57,6 +57,9 @@
 		});
 	}
 
+	// Flash-on-load: background is a computed conic-gradient with a dynamic number of stops
+	// based on rayCount, so no static CSS default is possible. The layer is invisible without
+	// its gradient anyway (transparent), so no visible flash occurs.
 	function applyLayerStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.setProperty('background', gradientString);
@@ -79,6 +82,13 @@
 
 <style>
 	[data-god-rays] {
+		--dry-rays-color: rgba(255, 255, 255, 0.15);
+		--dry-rays-cx: 50%;
+		--dry-rays-cy: 0%;
+		--dry-rays-intensity: 60;
+		--dry-rays-blend: screen;
+		--dry-rays-speed: 0s;
+
 		position: relative;
 		overflow: hidden;
 		border-radius: inherit;

package/dist/image-comparison/image-comparison.svelte

@@ -25,7 +25,8 @@
 
 	function syncStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.cssText = `${style ? `${style}; ` : ''}--dry-image-comparison-position: ${position}%`;
+			node.style.cssText = style || '';
+			node.style.setProperty('--dry-image-comparison-position', `${position}%`);
 		});
 	}
 
@@ -120,6 +121,7 @@
 
 <style>
 	[data-image-comparison] {
+		--dry-image-comparison-position: 50%;
 		--dry-image-comparison-handle-width: 2px;
 		--dry-image-comparison-handle-color: var(--dry-color-bg-overlay);
 		--dry-image-comparison-arrow-color: var(--dry-color-text-strong);

package/dist/marquee/marquee.svelte

@@ -60,17 +60,9 @@
 		});
 	}
 
-	function applyTrackStyles(node: HTMLElement) {
+	function applyFlowDirection(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('grid-auto-flow', isVertical ? 'row' : 'column');
-			node.style.setProperty('gap', 'var(--marquee-gap)');
-		});
-	}
-
-	function applyContentStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('grid-auto-flow', isVertical ? 'row' : 'column');
-			node.style.setProperty('gap', 'var(--marquee-gap)');
+			node.style.setProperty('--_flow', isVertical ? 'row' : 'column');
 		});
 	}
 </script>
@@ -85,11 +77,11 @@
 	use:applyRootStyles
 	{...rest}
 >
-	<div data-marquee-track use:applyTrackStyles>
-		<div data-marquee-content bind:this={contentEl} use:applyContentStyles>
+	<div data-marquee-track use:applyFlowDirection>
+		<div data-marquee-content bind:this={contentEl} use:applyFlowDirection>
 			{@render children()}
 		</div>
-		<div data-marquee-content aria-hidden="true" use:applyContentStyles>
+		<div data-marquee-content aria-hidden="true" use:applyFlowDirection>
 			{@render children()}
 		</div>
 	</div>
@@ -107,6 +99,8 @@
 
 	[data-marquee-track] {
 		display: grid;
+		grid-auto-flow: var(--_flow, column);
+		gap: var(--marquee-gap, 1rem);
 		animation-duration: var(--dry-marquee-speed);
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;
@@ -115,6 +109,8 @@
 
 	[data-marquee-content] {
 		display: grid;
+		grid-auto-flow: var(--_flow, column);
+		gap: var(--marquee-gap, 1rem);
 	}
 
 	[data-marquee][data-direction='left'] [data-marquee-track],

package/dist/progress/progress.svelte

@@ -61,7 +61,7 @@
 			const segment = getSegment();
 			const widthPct = max > 0 ? Math.min(Math.max((segment.value / max) * 100, 0), 100) : 0;
 			node.style.setProperty('width', `${widthPct}%`);
-			node.style.setProperty('background-color', segment.color);
+			node.style.setProperty('--_segment-bg', segment.color);
 		});
 	}
 
@@ -75,9 +75,11 @@
 		$effect(() => {
 			const threshold = getThreshold();
 			const leftPct = max > 0 ? Math.min(Math.max((threshold.value / max) * 100, 0), 100) : 0;
-			node.style.setProperty('left', `${leftPct}%`);
+			node.style.setProperty('--_threshold-left', `${leftPct}%`);
 			if (threshold.color) {
-				node.style.setProperty('border-inline-start-color', threshold.color);
+				node.style.setProperty('--_threshold-color', threshold.color);
+			} else {
+				node.style.removeProperty('--_threshold-color');
 			}
 		});
 	}
@@ -236,6 +238,7 @@
 	}
 
 	[data-part='segment'] {
+		background-color: var(--_segment-bg, var(--dry-progress-bar));
 		height: 100%;
 		transition: width var(--dry-duration-slow, 300ms) ease;
 	}
@@ -260,7 +263,8 @@
 		position: absolute;
 		top: -4px;
 		bottom: -4px;
-		border-inline-start: 2px solid var(--dry-color-text-strong, #1a1a2e);
+		left: var(--_threshold-left, 0%);
+		border-inline-start: 2px solid var(--_threshold-color, var(--dry-color-text-strong, #1a1a2e));
 		opacity: 0.3;
 		z-index: 1;
 	}

package/dist/qr-code/qr-code.svelte

@@ -89,7 +89,7 @@
 		--dry-qr-padding: var(--dry-space-3);
 		--dry-qr-radius: var(--dry-radius-lg);
 		--dry-qr-border: var(--dry-color-stroke-weak);
-		--dry-qr-bg: var(--dry-color-bg-overlay);
+		--dry-qr-bg: #fff;
 		--dry-qr-size: 200px;
 
 		display: inline-grid;

package/dist/reveal/reveal.svelte

@@ -66,7 +66,7 @@
 			if (delayValue) node.style.setProperty('--dry-reveal-delay', delayValue);
 			if (durationValue) node.style.setProperty('--dry-reveal-duration', durationValue);
 			if (distanceValue) node.style.setProperty('--dry-reveal-distance', distanceValue);
-			node.style.setProperty('mix-blend-mode', blendMode ?? '');
+			node.style.setProperty('--_blend-mode', blendMode ?? 'normal');
 		});
 	}
 
@@ -137,8 +137,10 @@
 		--dry-reveal-offset-y: 0px;
 		--dry-reveal-mask-top: 0%;
 		--dry-reveal-mask-radius: 0px;
+		--_blend-mode: normal;
 
 		display: block;
+		mix-blend-mode: var(--_blend-mode);
 		opacity: var(--dry-reveal-hidden-opacity);
 		transform: translate3d(0, var(--dry-reveal-offset-y), 0) scale(var(--dry-reveal-hidden-scale));
 		filter: blur(var(--dry-reveal-hidden-blur));

package/dist/shader-canvas/shader-canvas.svelte

@@ -70,9 +70,9 @@
 	function setAspectRatio(node: HTMLDivElement) {
 		$effect(() => {
 			if (aspectRatio) {
-				node.style.setProperty('aspect-ratio', aspectRatio);
+				node.style.setProperty('--_ratio', aspectRatio);
 			} else {
-				node.style.removeProperty('aspect-ratio');
+				node.style.removeProperty('--_ratio');
 			}
 		});
 	}
@@ -116,6 +116,7 @@
 		position: relative;
 		overflow: hidden;
 		border-radius: inherit;
+		aspect-ratio: var(--_ratio);
 	}
 
 </style>

package/dist/skeleton/skeleton.svelte

@@ -17,9 +17,9 @@
 				node.style.removeProperty('width');
 			}
 			if (height) {
-				node.style.setProperty('height', height);
+				node.style.setProperty('--_h', height);
 			} else {
-				node.style.removeProperty('height');
+				node.style.removeProperty('--_h');
 			}
 		});
 	}
@@ -59,6 +59,9 @@
 		background-size: 200% 100%;
 		animation: skeleton-shimmer 1.5s ease-in-out infinite;
 		border-radius: var(--dry-skeleton-radius);
+		/* width set via @attach inline style (lint bans width in CSS);
+		   --_h set by @attach when height prop is provided,
+		   overriding variant defaults via the var() fallback chain */
 	}
 
 	@keyframes skeleton-shimmer {
@@ -81,17 +84,17 @@
 
 	div[data-variant='text'] {
 		--dry-skeleton-radius: var(--dry-radius-md);
-		height: var(--dry-text-base-leading);
+		height: var(--_h, var(--dry-text-base-leading));
 	}
 
 	div[data-variant='circular'] {
 		--dry-skeleton-radius: var(--dry-radius-full);
 		aspect-ratio: 1;
-		height: var(--dry-space-10);
+		height: var(--_h, var(--dry-space-10));
 	}
 
 	div[data-variant='rectangular'] {
 		--dry-skeleton-radius: var(--dry-radius-sm);
-		height: var(--dry-space-16);
+		height: var(--_h, var(--dry-space-16));
 	}
 </style>

package/dist/slider/slider.svelte

@@ -83,7 +83,7 @@
 				var(--dry-color-fill-selected),
 				var(--dry-color-fill-selected)
 			);
-			background-size: var(--dry-slider-progress) 100%;
+			background-size: var(--dry-slider-progress, 50%) 100%;
 			background-repeat: no-repeat;
 		}
 

package/dist/splitter/splitter-root.svelte

@@ -33,11 +33,11 @@
 	function applyGridTemplate(node: HTMLElement) {
 		$effect(() => {
 			if (orientation === 'vertical') {
-				node.style.gridTemplateColumns = '';
-				node.style.gridTemplateRows = trackTemplate;
+				node.style.removeProperty('--_splitter-columns');
+				node.style.setProperty('--_splitter-rows', trackTemplate);
 			} else {
-				node.style.gridTemplateRows = '';
-				node.style.gridTemplateColumns = trackTemplate;
+				node.style.removeProperty('--_splitter-rows');
+				node.style.setProperty('--_splitter-columns', trackTemplate);
 			}
 		});
 	}
@@ -113,6 +113,7 @@
 	[data-part='root'] {
 		display: grid;
 		grid-auto-flow: column;
+		grid-template-columns: var(--_splitter-columns, 1fr max-content 1fr);
 		height: 100%;
 		min-height: 0;
 		align-items: stretch;
@@ -120,5 +121,7 @@
 
 	[data-part='root'][data-orientation='vertical'] {
 		grid-auto-flow: row;
+		grid-template-columns: initial;
+		grid-template-rows: var(--_splitter-rows, 1fr max-content 1fr);
 	}
 </style>

package/dist/spotlight/spotlight.svelte

@@ -130,6 +130,7 @@
 			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');
 		});
 	}
 </script>
@@ -154,6 +155,12 @@
 
 <style>
 	[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%;
+
 		position: relative;
 		isolation: isolate;
 		overflow: hidden;

package/dist/thumbnail/accordion.svelte

@@ -125,8 +125,8 @@
 <style>
 	[data-thumbnail] {
 		display: inline-grid;
-		width: var(--thumbnail-w);
-		height: var(--thumbnail-h);
+		width: var(--thumbnail-w, 80px);
+		height: var(--thumbnail-h, 53px);
 	}
 
 	[data-thumbnail][data-size='sm'] {

package/dist/thumbnail/add-on-selector.svelte

@@ -194,8 +194,8 @@
 <style>
 	[data-thumbnail] {
 		display: inline-grid;
-		width: var(--thumbnail-w);
-		height: var(--thumbnail-h);
+		width: var(--thumbnail-w, 80px);
+		height: var(--thumbnail-h, 53px);
 	}
 
 	[data-thumbnail][data-size='sm'] {

package/dist/thumbnail/affix-group.svelte

@@ -36,8 +36,8 @@
 <style>
 	[data-thumbnail] {
 		display: inline-grid;
-		width: var(--thumbnail-w);
-		height: var(--thumbnail-h);
+		width: var(--thumbnail-w, 80px);
+		height: var(--thumbnail-h, 53px);
 	}
 
 	[data-thumbnail][data-size='sm'] {

package/dist/thumbnail/alert-dialog.svelte

@@ -81,8 +81,8 @@
 <style>
 	[data-thumbnail] {
 		display: inline-grid;
-		width: var(--thumbnail-w);
-		height: var(--thumbnail-h);
+		width: var(--thumbnail-w, 80px);
+		height: var(--thumbnail-h, 53px);
 	}
 
 	[data-thumbnail][data-size='sm'] {

package/dist/thumbnail/alert.svelte

@@ -60,8 +60,8 @@
 <style>
 	[data-thumbnail] {
 		display: inline-grid;
-		width: var(--thumbnail-w);
-		height: var(--thumbnail-h);
+		width: var(--thumbnail-w, 80px);
+		height: var(--thumbnail-h, 53px);
 	}
 
 	[data-thumbnail][data-size='sm'] {