@dryui/ui 0.1.2 → 0.1.4

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/list/list-item-icon.svelte

@@ -12,3 +12,11 @@
 <div data-list-item-icon class={className} {...rest}>
 	{@render children()}
 </div>
+
+<style>
+	[data-list-item-icon] {
+		display: inline-grid;
+		place-items: center;
+		color: var(--dry-list-item-icon-color);
+	}
+</style>

package/dist/list/list-item-text.svelte

@@ -21,3 +21,22 @@
 		<span data-list-item-secondary>{@render secondary()}</span>
 	{/if}
 </div>
+
+<style>
+	[data-list-item-text] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--dry-space-0_5);
+	}
+
+	[data-list-item-text] > [data-list-item-primary] {
+		font-size: var(--dry-list-primary-size);
+		line-height: 1.5;
+	}
+
+	[data-list-item-text] > [data-list-item-secondary] {
+		font-size: var(--dry-list-secondary-size);
+		color: var(--dry-list-secondary-color);
+		line-height: 1.4;
+	}
+</style>

package/dist/list/list-item.svelte

@@ -47,3 +47,45 @@
 >
 	{@render children()}
 </li>
+
+<style>
+	[data-list-item] {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		align-items: start;
+		gap: var(--dry-list-item-gap);
+		padding: var(--dry-list-item-padding);
+		border-radius: var(--dry-list-item-radius);
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-list-item][data-interactive='true'] {
+		cursor: pointer;
+	}
+
+	[data-list-item][data-interactive='true']:hover,
+	[data-list-item][data-interactive='true']:focus-visible {
+		background: var(--dry-list-item-hover-bg);
+	}
+
+	[data-list-item][data-interactive='true']:active {
+		background: var(--dry-list-item-active-bg);
+	}
+
+	[data-list-item][data-interactive='true']:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: -2px;
+	}
+
+	[data-list-item][data-disabled='true'] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	[data-list-item][data-dense='true'] {
+		--dry-list-item-padding: var(--dry-space-1_5) var(--dry-space-2);
+	}
+</style>

package/dist/list/list-root.svelte

@@ -66,75 +66,4 @@
 		--dry-list-padding: 0;
 	}
 
-	[data-list-item] {
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
-		align-items: start;
-		gap: var(--dry-list-item-gap);
-		padding: var(--dry-list-item-padding);
-		border-radius: var(--dry-list-item-radius);
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-list-item][data-interactive='true'] {
-		cursor: pointer;
-	}
-
-	[data-list-item][data-interactive='true']:hover,
-	[data-list-item][data-interactive='true']:focus-visible {
-		background: var(--dry-list-item-hover-bg);
-	}
-
-	[data-list-item][data-interactive='true']:active {
-		background: var(--dry-list-item-active-bg);
-	}
-
-	[data-list-item][data-interactive='true']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-
-	[data-list-item][data-disabled='true'] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	[data-list-item][data-dense='true'] {
-		--dry-list-item-padding: var(--dry-space-1_5) var(--dry-space-2);
-	}
-
-	[data-list-item-icon] {
-		display: inline-grid;
-		place-items: center;
-		color: var(--dry-list-item-icon-color);
-	}
-
-	[data-list-item-text] {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: var(--dry-space-0_5);
-	}
-
-	[data-list-item-text] > [data-list-item-primary] {
-		font-size: var(--dry-list-primary-size);
-		line-height: 1.5;
-	}
-
-	[data-list-item-text] > [data-list-item-secondary] {
-		font-size: var(--dry-list-secondary-size);
-		color: var(--dry-list-secondary-color);
-		line-height: 1.4;
-	}
-
-	[data-list-subheader] {
-		padding: var(--dry-space-1_5) var(--dry-space-3) var(--dry-space-1);
-		font-size: var(--dry-list-secondary-size);
-		font-weight: 600;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--dry-list-subheader-color);
-	}
 </style>

package/dist/list/list-subheader.svelte

@@ -12,3 +12,14 @@
 <li role="presentation" data-list-subheader class={className} {...rest}>
 	{@render children()}
 </li>
+
+<style>
+	[data-list-subheader] {
+		padding: var(--dry-space-1_5) var(--dry-space-3) var(--dry-space-1);
+		font-size: var(--dry-list-secondary-size);
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--dry-list-subheader-color);
+	}
+</style>

package/dist/map/map-marker.svelte

@@ -70,3 +70,13 @@
 		{@render children()}
 	</div>
 {/if}
+
+<style>
+	[data-part='marker-content'] {
+		background: var(--dry-color-bg-raised, #ffffff);
+		border-radius: var(--dry-radius-md, 0.375rem);
+		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+		padding: var(--dry-space-2, 0.5rem);
+		cursor: pointer;
+	}
+</style>

package/dist/map/map-popup.svelte

@@ -61,3 +61,10 @@
 <div bind:this={contentEl} data-part="popup-content">
 	{@render children()}
 </div>
+
+<style>
+	[data-part='popup-content'] {
+		display: grid;
+		grid-template-columns: minmax(0, 20rem);
+	}
+</style>

package/dist/map/map-root.svelte

@@ -223,36 +223,6 @@
 		height: 400px;
 	}
 
-	[data-map-root] [data-map-mapboxgl]-canvas,
-	[data-map-root] [data-map-maplibregl]-canvas {
-		border-radius: var(--dry-map-radius);
-	}
-
-	[data-map-marker] {
-		cursor: pointer;
-	}
-
-	[data-map-marker] [data-part='marker-content'] {
-		background: var(--dry-color-bg-raised, #ffffff);
-		border-radius: var(--dry-radius-md, 0.375rem);
-		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-		padding: var(--dry-space-2, 0.5rem);
-	}
-
-	[data-map-popup] {
-		display: grid;
-		grid-template-columns: minmax(0, 20rem);
-	}
-
-	[data-map-popup] [data-map-mapboxgl]-popup-content,
-	[data-map-popup] [data-map-maplibregl]-popup-content {
-		background: var(--dry-color-bg-raised, #ffffff);
-		border-radius: var(--dry-radius-lg, 0.5rem);
-		box-shadow: var(--dry-shadow-lg);
-		padding: var(--dry-space-4, 1rem);
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
-	}
-
 	[data-part='map-error'] {
 		display: grid;
 		place-items: center;

package/dist/multi-select-combobox/multi-select-combobox-group.svelte

@@ -25,7 +25,7 @@
 		letter-spacing: 0.05em;
 	}
 
-	[data-multi-select-group] + [data-multi-select-group] {
+	[data-multi-select-group]:not(:first-of-type) {
 		border-top: 1px solid var(--dry-color-stroke-weak);
 		margin-top: var(--dry-space-1);
 		padding-top: var(--dry-space-1);

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),

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

@@ -44,3 +44,93 @@
 		{@render children()}
 	{/if}
 </label>
+
+<style>
+	[data-radio-group-item] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-template-columns: var(--dry-space-8);
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-3);
+		cursor: pointer;
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-color-text-strong);
+		padding: var(--dry-space-1) 0;
+		min-height: 48px;
+		user-select: none;
+
+		&[data-disabled] {
+			color: var(--dry-color-text-disabled);
+			opacity: 1;
+			cursor: not-allowed;
+		}
+	}
+
+	[data-radio-group-item] input[type='radio'] {
+		appearance: none;
+		-webkit-appearance: none;
+		height: var(--dry-space-8);
+		min-height: var(--dry-space-8);
+		border: 2px solid var(--dry-color-stroke-strong);
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-color-bg-raised);
+		margin: 0;
+		cursor: pointer;
+		position: relative;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			background-color var(--dry-duration-fast) var(--dry-ease-default),
+			transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-radio-group-item] input[type='radio']::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%) scale(0);
+		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);
+	}
+
+	[data-radio-group-item] input[type='radio']:hover:not(:disabled) {
+		border-color: var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:active:not(:disabled) {
+		transform: scale(0.96);
+	}
+
+	[data-radio-group-item] input[type='radio']:focus-visible {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: 2px;
+	}
+
+	[data-radio-group-item] input[type='radio']:checked {
+		background: var(--dry-color-fill-selected);
+		border-color: var(--dry-color-stroke-selected);
+		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:checked::after {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {
+		background: var(--dry-color-fill-selected);
+		border-color: var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:disabled {
+		background: var(--dry-color-fill-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		opacity: 1;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -115,93 +115,4 @@
 		}
 	}
 
-	[data-radio-group-item] {
-		/* Label styling */
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-template-columns: var(--dry-space-8);
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-3);
-		cursor: pointer;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-strong);
-		padding: var(--dry-space-1) 0;
-		min-height: 48px;
-		user-select: none;
-
-		&[data-disabled] {
-			color: var(--dry-color-text-disabled);
-			opacity: 1;
-			cursor: not-allowed;
-		}
-
-		/* Custom radio input */
-		& input[type='radio'] {
-			appearance: none;
-			-webkit-appearance: none;
-			height: var(--dry-space-8);
-			min-height: var(--dry-space-8);
-			border: 2px solid var(--dry-color-stroke-strong);
-			border-radius: var(--dry-radius-full);
-			background: var(--dry-color-bg-raised);
-			margin: 0;
-			cursor: pointer;
-			position: relative;
-			transition:
-				border-color var(--dry-duration-fast) var(--dry-ease-default),
-				background-color var(--dry-duration-fast) var(--dry-ease-default),
-				transform var(--dry-duration-fast) var(--dry-ease-default);
-
-			&::after {
-				content: '';
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%) scale(0);
-				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);
-			}
-
-			&:hover:not(:disabled) {
-				border-color: var(--dry-color-stroke-selected);
-			}
-
-			&:active:not(:disabled) {
-				transform: scale(0.96);
-			}
-
-			&:focus-visible {
-				outline: 2px solid var(--dry-color-stroke-focus);
-				outline-offset: 2px;
-			}
-
-			&:checked {
-				background: var(--dry-color-fill-selected);
-				border-color: var(--dry-color-stroke-selected);
-				box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
-
-				&::after {
-					transform: translate(-50%, -50%) scale(1);
-				}
-
-				&:hover:not(:disabled) {
-					background: var(--dry-color-fill-selected);
-					border-color: var(--dry-color-stroke-selected);
-				}
-			}
-
-			&:disabled {
-				background: var(--dry-color-fill-disabled);
-				border-color: var(--dry-color-stroke-disabled);
-				opacity: 1;
-				cursor: not-allowed;
-			}
-		}
-	}
 </style>