@dryui/ui 0.1.3 → 0.1.5

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

@@ -21,20 +21,15 @@
 		...rest
 	}: Props = $props();
 
-	let containerEl = $state<HTMLDivElement>();
 	let dragging = $state(false);
 
-	function setContainer(node: HTMLDivElement) {
-		containerEl = node;
-		return {
-			destroy() {
-				if (containerEl === node) containerEl = undefined;
-			}
-		};
+	function syncStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = `${style ? `${style}; ` : ''}--dry-image-comparison-position: ${position}%`;
+		});
 	}
 
-	function updatePosition(clientX: number, clientY: number) {
-		if (!containerEl) return;
+	function updatePosition(clientX: number, clientY: number, containerEl: HTMLElement) {
 		const rect = containerEl.getBoundingClientRect();
 		let pct: number;
 		if (orientation === 'horizontal') {
@@ -47,13 +42,16 @@
 
 	function onPointerDown(e: PointerEvent) {
 		dragging = true;
-		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-		updatePosition(e.clientX, e.clientY);
+		const handleEl = e.currentTarget as HTMLElement;
+		handleEl.setPointerCapture(e.pointerId);
+		const containerEl = handleEl.closest<HTMLElement>('[data-image-comparison]');
+		if (!containerEl) return;
+		updatePosition(e.clientX, e.clientY, containerEl);
 	}
 
 	function onPointerMove(e: PointerEvent) {
 		if (!dragging) return;
-		updatePosition(e.clientX, e.clientY);
+		updatePosition(e.clientX, e.clientY, e.currentTarget as HTMLElement);
 	}
 
 	function onPointerUp() {
@@ -70,13 +68,6 @@
 			position = Math.min(position + step, 100);
 		}
 	}
-
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-image-comparison-position', `${position}%`);
-		});
-	}
 </script>
 
 {#snippet defaultHandle()}
@@ -92,7 +83,7 @@
 {/snippet}
 
 <div
-	{@attach setContainer}
+	{@attach syncStyles}
 	class={className}
 	data-image-comparison
 	data-orientation={orientation}
@@ -100,7 +91,6 @@
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
 	{...rest}
-	use:applyStyles
 >
 	<div data-part="after" data-ic-layer>
 		{@render after()}
@@ -141,6 +131,8 @@
 		--dry-image-comparison-handle-z-index: 1;
 
 		position: relative;
+		display: grid;
+		height: 100%;
 		overflow: hidden;
 		border-radius: var(--dry-image-comparison-radius);
 		user-select: none;
@@ -148,8 +140,8 @@
 	}
 
 	[data-ic-layer] {
-		position: absolute;
-		inset: 0;
+		grid-area: 1 / 1;
+		min-height: 0;
 	}
 
 	[data-image-comparison][data-orientation='horizontal'] [data-ic-layer-before] {

package/dist/input-group/input-group-action.svelte

@@ -21,6 +21,7 @@
 	data-size={ctx.size}
 	data-disabled={isDisabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-action
 	class={className}
@@ -47,6 +48,10 @@
 		transition: background-color 160ms ease;
 	}
 
+	[data-input-group-action][data-orientation='horizontal'] {
+		grid-column: 5;
+	}
+
 	[data-input-group-action]:hover:not(:disabled) {
 		background: var(--dry-color-fill-weak);
 	}

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

@@ -16,6 +16,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	data-input-group-inputWrap
 >
 	<input
@@ -30,11 +31,14 @@
 <style>
 	[data-input-group-inputWrap] {
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: minmax(0, 1fr);
+		grid-template-columns: minmax(0, 1fr);
 		align-items: center;
 	}
 
+	[data-input-group-inputWrap][data-orientation='horizontal'] {
+		grid-column: 2;
+	}
+
 	[data-input-group-input] {
 		border: 0;
 		background: transparent;
@@ -44,6 +48,7 @@
 		line-height: 1.4;
 		padding: var(--dry-input-group-padding-y) var(--dry-input-group-padding-x);
 		outline: none;
+		box-sizing: border-box;
 	}
 
 	[data-input-group-input]::placeholder {

package/dist/input-group/input-group-prefix.svelte

@@ -17,6 +17,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-prefix
 	class={className}
@@ -35,4 +36,8 @@
 		color: var(--dry-input-group-muted);
 		white-space: nowrap;
 	}
+
+	[data-input-group-prefix][data-orientation='horizontal'] {
+		grid-column: 1;
+	}
 </style>

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

@@ -65,8 +65,6 @@
 		--dry-input-group-separator: color-mix(in srgb, var(--dry-input-group-border) 80%, transparent);
 
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
 		align-items: stretch;
 		min-height: 3rem;
 		border: 1px solid var(--dry-input-group-border);
@@ -76,6 +74,16 @@
 		overflow: hidden;
 	}
 
+	[data-input-group-root][data-orientation='horizontal'] {
+		grid-template-columns:
+			max-content
+			minmax(0, 1fr)
+			max-content
+			max-content
+			max-content
+			max-content;
+	}
+
 	[data-input-group-root]:focus-within {
 		border-color: var(--dry-input-group-border-strong);
 		box-shadow: 0 0 0 1px var(--dry-input-group-border-strong);

package/dist/input-group/input-group-select.svelte

@@ -19,6 +19,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 >
 	<select bind:value class={className} data-input-group-select {...rest}>
 		{@render children?.()}
@@ -31,6 +32,10 @@
 		position: relative;
 	}
 
+	[data-input-group-selectWrap][data-orientation='horizontal'] {
+		grid-column: 6;
+	}
+
 	[data-input-group-select] {
 		display: inline-grid;
 		grid-auto-flow: column;

package/dist/input-group/input-group-separator.svelte

@@ -15,6 +15,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-separator
 	class={className}
@@ -25,4 +26,13 @@
 		align-self: stretch;
 		border-inline-start: 1px solid var(--dry-input-group-separator);
 	}
+
+	[data-input-group-separator][data-orientation='horizontal'] {
+		grid-column: 4;
+	}
+
+	[data-input-group-separator][data-orientation='vertical'] {
+		border-inline-start: 0;
+		border-top: 1px solid var(--dry-input-group-separator);
+	}
 </style>

package/dist/input-group/input-group-suffix.svelte

@@ -17,6 +17,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-suffix
 	class={className}
@@ -35,4 +36,8 @@
 		color: var(--dry-input-group-muted);
 		white-space: nowrap;
 	}
+
+	[data-input-group-suffix][data-orientation='horizontal'] {
+		grid-column: 3;
+	}
 </style>

package/dist/option-swatch-group/option-swatch-group-item.svelte

@@ -81,3 +81,49 @@
 >
 	{@render children()}
 </button>
+
+<style>
+	[data-option-swatch-group-item] {
+		--dry-option-swatch-bg: var(--dry-color-bg-raised);
+		--dry-option-swatch-border: var(--dry-color-stroke-weak);
+		--dry-option-swatch-border-selected: var(--dry-color-stroke-focus);
+		--dry-option-swatch-text: var(--dry-color-text-strong);
+		--dry-option-swatch-muted: var(--dry-color-text-weak);
+
+		display: grid;
+		grid-template-columns: 1.5rem minmax(0, 1fr);
+		align-items: center;
+		gap: var(--dry-space-3);
+		padding: var(--dry-space-3);
+		border: 1px solid var(--dry-option-swatch-border);
+		border-radius: var(--dry-radius-xl);
+		background: var(--dry-option-swatch-bg);
+		color: var(--dry-option-swatch-text);
+		box-shadow: var(--dry-shadow-xs);
+		cursor: pointer;
+		text-align: left;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-option-swatch-group-item]:hover:not(:disabled) {
+		border-color: var(--dry-color-stroke-strong);
+		transform: translateY(-1px);
+	}
+
+	[data-option-swatch-group-item]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 2px;
+	}
+
+	[data-option-swatch-group-item][data-state='checked'] {
+		border-color: var(--dry-option-swatch-border-selected);
+		box-shadow: 0 0 0 1px var(--dry-option-swatch-border-selected);
+	}
+
+	[data-option-swatch-group-item][data-unavailable] {
+		opacity: 0.6;
+	}
+</style>

package/dist/option-swatch-group/option-swatch-group-label.svelte

@@ -12,3 +12,13 @@
 <span data-part="label" data-option-swatch-group-label class={className} {...rest}
 	>{@render children?.()}</span
 >
+
+<style>
+	[data-option-swatch-group-label] {
+		grid-column: 2;
+		grid-row: 1;
+		font-size: var(--dry-type-small-size);
+		font-weight: 600;
+		line-height: 1.2;
+	}
+</style>

package/dist/option-swatch-group/option-swatch-group-meta.svelte

@@ -12,3 +12,13 @@
 <span data-part="meta" data-option-swatch-group-meta class={className} {...rest}
 	>{@render children?.()}</span
 >
+
+<style>
+	[data-option-swatch-group-meta] {
+		grid-column: 2;
+		grid-row: 2;
+		color: var(--dry-option-swatch-muted);
+		font-size: var(--dry-type-tiny-size);
+		line-height: 1.2;
+	}
+</style>

package/dist/option-swatch-group/option-swatch-group-root.svelte

@@ -60,83 +60,4 @@
 	[data-option-swatch-group-root][data-orientation='vertical'] {
 		grid-template-columns: 1fr;
 	}
-
-	[data-option-swatch-group-item] {
-		--dry-option-swatch-bg: var(--dry-color-bg-raised);
-		--dry-option-swatch-border: var(--dry-color-stroke-weak);
-		--dry-option-swatch-border-selected: var(--dry-color-stroke-focus);
-		--dry-option-swatch-text: var(--dry-color-text-strong);
-		--dry-option-swatch-muted: var(--dry-color-text-weak);
-
-		display: grid;
-		grid-template-columns: 1.5rem minmax(0, 1fr);
-		align-items: center;
-		gap: var(--dry-space-3);
-		padding: var(--dry-space-3);
-		border: 1px solid var(--dry-option-swatch-border);
-		border-radius: var(--dry-radius-xl);
-		background: var(--dry-option-swatch-bg);
-		color: var(--dry-option-swatch-text);
-		box-shadow: var(--dry-shadow-xs);
-		cursor: pointer;
-		transition:
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-option-swatch-group-item]:hover:not(:disabled) {
-		border-color: var(--dry-color-stroke-strong);
-		transform: translateY(-1px);
-	}
-
-	[data-option-swatch-group-item]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-option-swatch-group-item][data-state='checked'] {
-		border-color: var(--dry-option-swatch-border-selected);
-		box-shadow: 0 0 0 1px var(--dry-option-swatch-border-selected);
-	}
-
-	[data-option-swatch-group-item][data-unavailable] {
-		opacity: 0.6;
-	}
-
-	[data-option-swatch-group-swatch] {
-		--dry-option-swatch-chip: var(--dry-color-fill-brand);
-
-		display: inline-grid;
-		aspect-ratio: 1;
-		height: 1.5rem;
-		border-radius: 999px;
-		border: 1px solid color-mix(in srgb, black 16%, transparent);
-		background: var(--dry-option-swatch-chip);
-		box-shadow:
-			inset 0 0 0 1px rgb(255 255 255 / 0.24),
-			0 1px 3px rgb(15 23 42 / 0.15);
-	}
-
-	[data-option-swatch-group-rounded] {
-		border-radius: var(--dry-radius-md);
-	}
-
-	[data-option-swatch-group-content] {
-		display: grid;
-		gap: var(--dry-space-1);
-		text-align: left;
-	}
-
-	[data-option-swatch-group-label] {
-		font-size: var(--dry-type-small-size);
-		font-weight: 600;
-		line-height: 1.2;
-	}
-
-	[data-option-swatch-group-meta] {
-		color: var(--dry-option-swatch-muted);
-		font-size: var(--dry-type-tiny-size);
-		line-height: 1.2;
-	}
 </style>

package/dist/option-swatch-group/option-swatch-group-swatch.svelte

@@ -8,15 +8,11 @@
 		children?: Snippet;
 	}
 
-	let { color, shape = 'circle', class: className, children, ...rest }: Props = $props();
+	let { color, shape = 'circle', class: className, style, children, ...rest }: Props = $props();
 
 	function setSwatchChip(node: HTMLSpanElement) {
 		$effect(() => {
-			if (color) {
-				node.style.setProperty('--dry-option-swatch-chip', color);
-			} else {
-				node.style.removeProperty('--dry-option-swatch-chip');
-			}
+			node.style.cssText = `${style ?? ''}${color ? `; --dry-option-swatch-chip: ${color};` : ''}`;
 		});
 	}
 </script>
@@ -30,3 +26,26 @@
 >
 	{@render children?.()}
 </span>
+
+<style>
+	[data-option-swatch-group-swatch] {
+		--dry-option-swatch-chip: var(--dry-color-fill-brand);
+
+		display: inline-grid;
+		grid-column: 1;
+		grid-row: 1 / span 2;
+		align-self: center;
+		aspect-ratio: 1;
+		height: 1.5rem;
+		border-radius: 999px;
+		border: 1px solid color-mix(in srgb, black 16%, transparent);
+		background: var(--dry-option-swatch-chip);
+		box-shadow:
+			inset 0 0 0 1px rgb(255 255 255 / 0.24),
+			0 1px 3px rgb(15 23 42 / 0.15);
+	}
+
+	[data-option-swatch-group-rounded] {
+		border-radius: var(--dry-radius-md);
+	}
+</style>

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

@@ -60,7 +60,10 @@
 		position: relative;
 		user-select: none;
 		border: var(--dry-pin-cell-border, 2px solid var(--dry-pin-border));
-		border-bottom: var(--dry-pin-cell-border-bottom, none);
+		border-bottom: var(
+			--dry-pin-cell-border-bottom,
+			var(--dry-pin-cell-border, 2px solid var(--dry-pin-border))
+		);
 		border-radius: var(--dry-pin-cell-radius, var(--dry-pin-radius));
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),