@dryui/ui 0.1.2 → 0.1.4

package/dist/tabs/tabs-trigger.svelte

@@ -45,7 +45,7 @@
 	}}
 	{...rest}
 >
-	{@render children()}
+	<span data-tabs-trigger-content>{@render children()}</span>
 </button>
 
 <style>
@@ -118,8 +118,11 @@
 		--dry-tabs-font-size: var(--dry-type-heading-4-size, var(--dry-text-base-size));
 	}
 
-	[data-tabs-trigger] :is(svg) {
-		height: 1em;
-		aspect-ratio: 1;
+	[data-tabs-trigger-content] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		align-items: center;
+		gap: var(--dry-space-1_5);
 	}
+
 </style>

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

@@ -62,6 +62,8 @@
 
 <style>
 	[data-part='input'] {
+		display: inline-grid;
+		vertical-align: middle;
 		border: none;
 		outline: none;
 		background: transparent;
@@ -69,6 +71,7 @@
 		font-size: var(--dry-tags-input-font-size, var(--dry-type-small-size, var(--dry-text-sm-size)));
 		color: var(--dry-color-text-strong);
 		padding: 0;
+		margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
 		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
 
 		&::placeholder {

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

@@ -84,15 +84,12 @@
 	}
 
 	[data-part='root'] {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
-		gap: var(--dry-space-1_5);
+		display: block;
 		padding: var(--dry-space-2);
 		border: 1px solid var(--dry-color-stroke-strong);
 		border-radius: var(--dry-radius-md);
 		background: var(--dry-color-bg-raised);
 		min-height: 44px;
-		align-items: center;
 		box-sizing: border-box;
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
@@ -123,7 +120,7 @@
 	[data-size='sm'] {
 		padding: var(--dry-space-1) var(--dry-space-1_5);
 		min-height: 32px;
-		gap: var(--dry-space-1);
+		--dry-tags-input-gap: var(--dry-space-1);
 		--dry-tags-input-tag-padding-x: var(--dry-space-1_5);
 		--dry-tags-input-tag-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 		--dry-tags-input-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
@@ -132,21 +129,15 @@
 	[data-size='md'] {
 		padding: var(--dry-space-2);
 		min-height: 44px;
-		gap: var(--dry-space-1_5);
+		--dry-tags-input-gap: var(--dry-space-1_5);
 	}
 
 	[data-size='lg'] {
 		padding: var(--dry-space-2_5);
 		min-height: 52px;
-		gap: var(--dry-space-2);
+		--dry-tags-input-gap: var(--dry-space-2);
 		--dry-tags-input-tag-padding-x: var(--dry-space-2_5);
 		--dry-tags-input-tag-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		--dry-tags-input-font-size: var(--dry-type-small-size, var(--dry-text-base-size));
 	}
-
-	@container (max-width: 200px) {
-		[data-part='root'] {
-			grid-template-columns: 1fr;
-		}
-	}
 </style>

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

@@ -33,9 +33,12 @@
 		display: inline-grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
+		vertical-align: middle;
 		align-items: center;
 		gap: var(--dry-space-1);
 		padding: var(--dry-space-1) var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		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);
 		border-radius: var(--dry-radius-full);

package/dist/themes/dark.css

@@ -79,6 +79,9 @@
 	--dry-toggle-label-color: var(--dry-color-text-strong);
 	--dry-toggle-label-disabled-color: #ffffff1f;
 
+	/* ─── Component: Beam ─────────────────────────────────────────── */
+	--dry-beam-default-blend: screen;
+
 	/* ─── Status: Error ───────────────────────────────────────────── */
 	--dry-color-text-error: hsl(0, 60%, 70%);
 	--dry-color-fill-error: hsl(0, 65%, 55%);
@@ -220,6 +223,9 @@
 			--dry-toggle-label-color: var(--dry-color-text-strong);
 			--dry-toggle-label-disabled-color: #ffffff1f;
 
+			/* ─── Component: Beam ─────────────────────────────────────────── */
+			--dry-beam-default-blend: screen;
+
 			/* ─── Status: Error ───────────────────────────────────────────── */
 			--dry-color-text-error: hsl(0, 60%, 70%);
 			--dry-color-fill-error: hsl(0, 65%, 55%);

package/dist/themes/default.css

@@ -87,6 +87,9 @@ code, pre, kbd, samp {
 	--dry-toggle-label-color: rgba(0, 6, 38, 0.9);
 	--dry-toggle-label-disabled-color: rgba(0, 17, 102, 0.1);
 
+	/* ─── Component: Beam ─────────────────────────────────────────── */
+	--dry-beam-default-blend: multiply;
+
 	/* ─── Status: Error (hue 0) ───────────────────────────────────── */
 	--dry-color-text-error: hsl(0, 70%, 35%);
 	--dry-color-fill-error: hsl(0, 70%, 50%);

package/dist/toast/toast-action.svelte

@@ -17,6 +17,7 @@
 <style>
 	[data-part='action'] {
 		all: unset;
+		justify-self: start;
 		cursor: pointer;
 		font-size: var(--dry-type-small-size);
 		font-weight: 600;

package/dist/toast/toast-close.svelte

@@ -26,6 +26,10 @@
 
 <style>
 	[data-part='close'] {
+		position: absolute;
+		top: var(--dry-space-4);
+		right: var(--dry-space-4);
+		z-index: 1;
 		cursor: pointer;
 		background: none;
 		border: none;

package/dist/toast/toast-provider.svelte

@@ -19,31 +19,11 @@
 	}
 
 	let { class: className, position = 'bottom-right', children, ...rest }: Props = $props();
-
-	let popoverEl = $state<HTMLDivElement>();
-
-	$effect(() => {
-		if (!popoverEl) return;
-
-		if (toastStore.toasts.length > 0) {
-			try {
-				popoverEl.showPopover();
-			} catch {
-				// Already showing
-			}
-		} else {
-			try {
-				popoverEl.hidePopover();
-			} catch {
-				// Already hidden
-			}
-		}
-	});
+	const visible = $derived(Boolean(children) || toastStore.toasts.length > 0);
 </script>
 
 <div
-	bind:this={popoverEl}
-	popover="manual"
+	hidden={!visible}
 	role="region"
 	aria-label="Notifications"
 	data-part="provider"
@@ -82,6 +62,8 @@
 
 <style>
 	[data-part='provider'] {
+		position: fixed;
+		z-index: var(--dry-layer-overlay);
 		display: grid;
 		grid-template-columns: minmax(0, min(420px, calc(100vw - var(--dry-space-8))));
 		gap: var(--dry-space-3);
@@ -92,10 +74,6 @@
 		overflow: visible;
 		container-type: inline-size;
 
-		&:not(:popover-open) {
-			display: none;
-		}
-
 		&[data-position='top-right'] {
 			inset: var(--dry-space-4) var(--dry-space-4) auto auto;
 		}
@@ -125,6 +103,7 @@
 
 	[data-part='content'] {
 		display: grid;
+		grid-template-columns: minmax(0, 1fr);
 		gap: var(--dry-space-1);
 	}
 </style>

package/dist/toast/toast-root.svelte

@@ -35,7 +35,7 @@
 
 	function applyProgressStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('--progress-width', `${progress}%`);
+			node.style.cssText = `--progress-width: ${progress}%`;
 		});
 	}
 </script>
@@ -67,11 +67,11 @@
 		border-radius: var(--dry-radius-lg);
 		box-shadow: var(--dry-shadow-lg);
 		padding: var(--dry-space-4);
+		padding-right: calc(var(--dry-space-4) + var(--dry-space-12) + var(--dry-space-2));
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: flex-start;
-		gap: var(--dry-space-3);
+		grid-template-columns: minmax(0, 1fr);
+		align-items: start;
+		gap: var(--dry-space-2);
 		animation: slideIn var(--dry-duration-normal) var(--dry-ease-out);
 
 		&[data-variant='info'] {
@@ -101,11 +101,6 @@
 			--dry-toast-border: var(--dry-color-stroke-error);
 			--dry-toast-action-hover-bg: var(--dry-color-fill-error-weak);
 		}
-
-		@container (max-width: 300px) {
-			grid-auto-flow: row;
-			grid-auto-columns: initial;
-		}
 	}
 
 	@keyframes slideIn {

package/dist/virtual-list/virtual-list.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" generics="T">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { VirtualList as VirtualListPrimitive } from '@dryui/primitives/virtual-list';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 		items: T[];
@@ -10,13 +9,198 @@
 		children: Snippet<[{ item: T; index: number; style: string }]>;
 	}
 
-	let { ...rest }: Props = $props();
+	let {
+		items,
+		itemHeight,
+		overscan = 5,
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let container: HTMLDivElement | undefined = $state(undefined);
+	let scrollTop = $state(0);
+	let containerHeight = $state(0);
+
+	// Detect mode: fixed (number) vs variable (function)
+	let isFixed = $derived(typeof itemHeight === 'number');
+
+	// ─── Fixed-height mode helpers ──────────────────────────────────────────────
+
+	let fixedHeight = $derived(isFixed ? (itemHeight as number) : 0);
+
+	let fixedTotalHeight = $derived(isFixed ? items.length * fixedHeight : 0);
+
+	let fixedStartIndex = $derived.by(() => {
+		if (!isFixed) return 0;
+		return Math.max(0, Math.floor(scrollTop / fixedHeight) - overscan);
+	});
+
+	let fixedEndIndex = $derived.by(() => {
+		if (!isFixed) return 0;
+		const visible = Math.ceil(containerHeight / fixedHeight);
+		return Math.min(items.length, Math.floor(scrollTop / fixedHeight) + visible + overscan);
+	});
+
+	let fixedVisibleItems = $derived.by(() => {
+		if (!isFixed) return [];
+		const result: Array<{ item: T; index: number; style: string }> = [];
+		for (let i = fixedStartIndex; i < fixedEndIndex; i++) {
+			result.push({
+				item: items[i]!,
+				index: i,
+				style: `position:absolute;top:${i * fixedHeight}px;width:100%;height:${fixedHeight}px;`
+			});
+		}
+		return result;
+	});
+
+	// ─── Variable-height mode helpers ───────────────────────────────────────────
+
+	// Pre-compute offsets from the height function
+	let variableOffsets = $derived.by(() => {
+		if (isFixed) return [];
+		const heightFn = itemHeight as (index: number) => number;
+		const offsets: number[] = new Array(items.length);
+		let cumulative = 0;
+		for (let i = 0; i < items.length; i++) {
+			offsets[i] = cumulative;
+			cumulative += heightFn(i);
+		}
+		return offsets;
+	});
+
+	let variableTotalHeight = $derived.by(() => {
+		if (isFixed || items.length === 0) return 0;
+		const heightFn = itemHeight as (index: number) => number;
+		const lastIdx = items.length - 1;
+		return variableOffsets[lastIdx]! + heightFn(lastIdx);
+	});
+
+	// Binary search to find the first item whose bottom edge is past scrollTop
+	function binarySearchStart(offsets: number[], target: number): number {
+		let lo = 0;
+		let hi = offsets.length - 1;
+		while (lo < hi) {
+			const mid = (lo + hi) >>> 1;
+			if (offsets[mid]! < target) {
+				lo = mid + 1;
+			} else {
+				hi = mid;
+			}
+		}
+		return lo;
+	}
+
+	let variableStartIndex = $derived.by(() => {
+		if (isFixed || items.length === 0) return 0;
+		const raw = binarySearchStart(variableOffsets, scrollTop);
+		// Step back to find the item that actually contains scrollTop
+		const idx = raw > 0 ? raw - 1 : 0;
+		return Math.max(0, idx - overscan);
+	});
+
+	let variableEndIndex = $derived.by(() => {
+		if (isFixed || items.length === 0) return 0;
+		const bottom = scrollTop + containerHeight;
+		const raw = binarySearchStart(variableOffsets, bottom);
+		return Math.min(items.length, raw + 1 + overscan);
+	});
+
+	let variableVisibleItems = $derived.by(() => {
+		if (isFixed) return [];
+		const heightFn = itemHeight as (index: number) => number;
+		const result: Array<{ item: T; index: number; style: string }> = [];
+		for (let i = variableStartIndex; i < variableEndIndex; i++) {
+			const h = heightFn(i);
+			result.push({
+				item: items[i]!,
+				index: i,
+				style: `position:absolute;top:${variableOffsets[i]}px;width:100%;height:${h}px;`
+			});
+		}
+		return result;
+	});
+
+	// ─── Combined derivations ──────────────────────────────────────────────────
+
+	let totalHeight = $derived(isFixed ? fixedTotalHeight : variableTotalHeight);
+	let visibleItems = $derived(isFixed ? fixedVisibleItems : variableVisibleItems);
+
+	// ─── Scroll handling with RAF throttle ──────────────────────────────────────
+
+	let rafId = 0;
+
+	function handleScroll() {
+		if (rafId) return;
+		rafId = requestAnimationFrame(() => {
+			rafId = 0;
+			if (container) {
+				scrollTop = container.scrollTop;
+				containerHeight = container.clientHeight;
+			}
+		});
+	}
+
+	function applyContainerStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			node.style.setProperty('position', 'relative');
+			node.style.setProperty('overflow-y', 'auto');
+		});
+	}
+
+	function applyInnerStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('height', `${totalHeight}px`);
+			node.style.setProperty('position', 'relative');
+		});
+	}
+
+	// Measure container on mount and when it resizes
+	$effect(() => {
+		if (!container) return;
+
+		containerHeight = container.clientHeight;
+		scrollTop = container.scrollTop;
+
+		const ro = new ResizeObserver(() => {
+			if (container) {
+				containerHeight = container.clientHeight;
+			}
+		});
+		ro.observe(container);
+
+		return () => {
+			ro.disconnect();
+			if (rafId) {
+				cancelAnimationFrame(rafId);
+				rafId = 0;
+			}
+		};
+	});
 </script>
 
-<VirtualListPrimitive {...rest} data-virtual-list />
+<div
+	bind:this={container}
+	class={className}
+	use:applyContainerStyles
+	onscroll={handleScroll}
+	role="list"
+	data-virtual-list
+	{...rest}
+>
+	<div use:applyInnerStyles>
+		{#each visibleItems as entry (entry.index)}
+			{@render children(entry)}
+		{/each}
+	</div>
+</div>
 
 <style>
 	[data-virtual-list] {
+		height: 100%;
 		--dry-virtual-list-scrollbar-width: 8px;
 		--dry-virtual-list-scrollbar-track: var(--dry-color-bg-raised, transparent);
 		--dry-virtual-list-scrollbar-thumb: color-mix(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -1502,7 +1502,7 @@
     "thumbnail:create": "bun scripts/create-thumbnail.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^0.1.0"
+    "@dryui/primitives": "^0.1.4"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"
@@ -1510,7 +1510,7 @@
   "devDependencies": {
     "svelte": "^5.55.1",
     "@sveltejs/package": "^2.5.7",
-    "svelte-check": "^4.4.5",
+    "svelte-check": "^4.4.6",
     "typescript": "^6.0.2"
   }
 }