@dryui/ui 0.1.3 → 0.1.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.1.3",
+  "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.3"
+    "@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"
   }
 }