@dryui/ui 0.0.6 → 0.1.0

package/dist/accordion/accordion-content.svelte

@@ -16,6 +16,7 @@
 	class={className}
 	id={itemCtx.contentId}
 	role="region"
+	hidden={!itemCtx.open}
 	data-state={itemCtx.open ? 'open' : 'closed'}
 	data-accordion-content
 	{...rest}
@@ -27,18 +28,10 @@
 
 <style>
 	[data-accordion-content] {
-		display: grid;
-		grid-template-rows: 0fr;
-		transition: grid-template-rows var(--dry-duration-normal) var(--dry-ease-spring-soft);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	}
 
-	[data-accordion-content][data-state='open'] {
-		grid-template-rows: 1fr;
-	}
-
 	[data-accordion-content-inner] {
-		overflow: hidden;
 		padding: var(--dry-space-2) var(--dry-space-4) var(--dry-space-4);
 	}
 </style>

package/dist/alert/alert-close.svelte

@@ -36,7 +36,8 @@
 		place-items: center;
 		height: var(--dry-space-11);
 		aspect-ratio: 1;
-		padding: 0;
+		padding-block: 0;
+		padding-inline: var(--dry-alert-gap, var(--dry-space-3)) 0;
 		border: none;
 		border-radius: var(--dry-radius-sm);
 		background: transparent;

package/dist/alert/alert-icon.svelte

@@ -21,5 +21,6 @@
 		display: grid;
 		align-items: center;
 		margin-top: var(--dry-space-0_5);
+		padding-inline-end: var(--dry-alert-gap, var(--dry-space-3));
 	}
 </style>

package/dist/alert/alert-root.svelte

@@ -48,7 +48,6 @@
 	</div>
 {/if}
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-alert] {
 		--dry-alert-bg: var(--dry-color-fill-info-weak);
@@ -64,9 +63,9 @@
 
 		container-type: inline-size;
 		display: grid;
-		grid-template-columns: 1fr;
+		grid-template-columns: auto 1fr auto;
 		align-items: start;
-		column-gap: var(--dry-alert-gap, var(--dry-space-3));
+		column-gap: 0;
 		row-gap: var(--dry-space-1);
 		padding: var(--dry-alert-padding, var(--dry-space-6));
 		background: var(--dry-alert-bg);
@@ -106,26 +105,11 @@
 		--dry-alert-icon-color: var(--dry-color-fill-error);
 	}
 
-	/* ── Grid modifiers ────────────────────────────────────────────────────────── */
-
-	[data-alert]:has([data-alert-icon]) {
-		grid-template-columns: auto 1fr;
-	}
-
-	[data-alert]:has([data-alert-close]) {
-		grid-template-columns: 1fr auto;
-	}
-
-	[data-alert]:has([data-alert-icon]):has([data-alert-close]) {
-		grid-template-columns: auto 1fr auto;
-	}
-
 	/* ── Responsive ────────────────────────────────────────────────────────────── */
 
 	@container (max-width: 640px) {
 		[data-alert] {
 			padding: var(--dry-alert-padding, var(--dry-space-3));
-			column-gap: var(--dry-alert-gap, var(--dry-space-2));
 		}
 	}
 </style>

package/dist/button-group/button-group.svelte

@@ -28,7 +28,6 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-button-group] {
 		--dry-button-group-radius: var(--dry-radius-md);
@@ -65,8 +64,8 @@
 
 		& > :where(button, a):hover,
 		& > :where(button, a):focus-visible,
-		& > :where(span):has(:hover) > :where(button, a),
-		& > :where(span):has(:focus-visible) > :where(button, a) {
+		& > :where(span):hover > :where(button, a),
+		& > :where(span):focus-within > :where(button, a) {
 			z-index: var(--dry-button-group-hover-z-index);
 			position: relative;
 		}
@@ -97,8 +96,8 @@
 
 		& > :where(button, a):hover,
 		& > :where(button, a):focus-visible,
-		& > :where(span):has(:hover) > :where(button, a),
-		& > :where(span):has(:focus-visible) > :where(button, a) {
+		& > :where(span):hover > :where(button, a),
+		& > :where(span):focus-within > :where(button, a) {
 			z-index: var(--dry-button-group-hover-z-index);
 			position: relative;
 		}

package/dist/calendar/calendar-root.svelte

@@ -132,7 +132,7 @@
 		--dry-calendar-today-color: var(--dry-color-fill-brand);
 		--dry-calendar-outside-color: var(--dry-color-text-weak);
 
-		display: grid;
+		display: inline-grid;
 		box-sizing: border-box;
 		padding: var(--dry-calendar-padding);
 		background: var(--dry-calendar-bg);

package/dist/checkbox/checkbox.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getFormControlCtx } from '@dryui/primitives';
 
-	interface Props extends Omit<HTMLInputAttributes, 'size'> {
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'children'> {
 		checked?: boolean;
 		indeterminate?: boolean;
 		size?: 'sm' | 'md' | 'lg';
 		disabled?: boolean;
+		children?: Snippet | undefined;
 	}
 
 	let {
@@ -14,6 +16,7 @@
 		indeterminate = false,
 		size = 'md',
 		disabled = false,
+		children,
 		class: className,
 		...rest
 	}: Props = $props();
@@ -21,37 +24,86 @@
 	const ctx = getFormControlCtx();
 	const isDisabled = $derived(disabled || ctx?.disabled || false);
 
-	let inputEl: HTMLInputElement | undefined = $state();
-
 	let dataState = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
 
-	$effect(() => {
-		if (inputEl) {
-			inputEl.indeterminate = indeterminate;
-		}
-	});
+	function applyIndeterminate(node: HTMLInputElement) {
+		$effect(() => {
+			node.indeterminate = indeterminate;
+		});
+	}
 </script>
 
-<span class="wrapper">
-	<input
-		bind:this={inputEl}
-		type="checkbox"
-		bind:checked
-		id={ctx?.id}
-		disabled={isDisabled}
-		required={ctx?.required || undefined}
-		aria-describedby={ctx?.describedBy}
-		aria-invalid={ctx?.hasError || undefined}
-		aria-errormessage={ctx?.errorMessageId}
+{#if children}
+	<label
+		class="checkbox-label"
 		data-disabled={isDisabled || undefined}
-		data-state={dataState}
 		data-size={size}
-		class={className}
-		{...rest}
-	/>
-</span>
+	>
+		<span class="wrapper">
+			<input
+				{@attach applyIndeterminate}
+				type="checkbox"
+				bind:checked
+				id={ctx?.id}
+				disabled={isDisabled}
+				required={ctx?.required || undefined}
+				aria-describedby={ctx?.describedBy}
+				aria-invalid={ctx?.hasError || undefined}
+				aria-errormessage={ctx?.errorMessageId}
+				data-disabled={isDisabled || undefined}
+				data-state={dataState}
+				data-size={size}
+				class={className}
+				{...rest}
+			/>
+		</span>
+		<span class="checkbox-text">{@render children()}</span>
+	</label>
+{:else}
+	<span class="wrapper">
+		<input
+			{@attach applyIndeterminate}
+			type="checkbox"
+			bind:checked
+			id={ctx?.id}
+			disabled={isDisabled}
+			required={ctx?.required || undefined}
+			aria-describedby={ctx?.describedBy}
+			aria-invalid={ctx?.hasError || undefined}
+			aria-errormessage={ctx?.errorMessageId}
+			data-disabled={isDisabled || undefined}
+			data-state={dataState}
+			data-size={size}
+			class={className}
+			{...rest}
+		/>
+	</span>
+{/if}
 
 <style>
+	.checkbox-label {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		align-items: center;
+		gap: var(--dry-space-3);
+		cursor: pointer;
+	}
+
+	.checkbox-label[data-disabled] {
+		cursor: not-allowed;
+	}
+
+	.checkbox-text {
+		font-size: var(--dry-text-sm-size);
+		line-height: var(--dry-text-sm-line);
+		color: var(--dry-color-text-strong);
+		user-select: none;
+	}
+
+	.checkbox-label[data-disabled] .checkbox-text {
+		color: var(--dry-color-text-disabled);
+	}
+
 	.wrapper {
 		display: inline-grid;
 		grid-template-columns: minmax(48px, max-content);
@@ -100,7 +152,10 @@
 				aspect-ratio: 35 / 60;
 				border: solid var(--dry-checkbox-check-color);
 				border-width: 0 2px 2px 0;
-				transform: rotate(45deg) scale(1) translateY(-10%);
+				margin-left: calc(var(--dry-checkbox-size) * 0.52);
+				margin-top: calc(var(--dry-checkbox-size) * -0.18);
+				transform: rotate(45deg) scale(1);
+				transform-origin: center;
 				animation: checkScale var(--dry-duration-fast) var(--dry-ease-spring);
 			}
 		}
@@ -177,10 +232,10 @@
 
 	@keyframes checkScale {
 		from {
-			transform: rotate(45deg) scale(0) translateY(-10%);
+			transform: rotate(45deg) scale(0);
 		}
 		to {
-			transform: rotate(45deg) scale(1) translateY(-10%);
+			transform: rotate(45deg) scale(1);
 		}
 	}
 

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

@@ -172,6 +172,7 @@
 
 		container-type: inline-size;
 		display: grid;
+		grid-template-columns: var(--dry-color-picker-area-width);
 		gap: var(--dry-space-3);
 	}
 

package/dist/combobox/combobox-group.svelte

@@ -17,7 +17,6 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-combobox-group] [data-part='group-label'] {
 		padding: var(--dry-space-1_5) var(--dry-space-2);

package/dist/country-select/country-select.svelte

@@ -279,8 +279,7 @@
 	[data-country-select-wrapper] [data-part='trigger'] {
 		all: unset;
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-template-columns: auto 1fr auto;
 		align-items: center;
 		gap: var(--dry-space-2, 0.5rem);
 		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
@@ -309,7 +308,6 @@
 
 	[data-country-select-wrapper] [data-part='dial-code'] {
 		color: var(--dry-color-text-weak, #64748b);
-		margin-left: auto;
 	}
 
 	[data-country-select-wrapper] [data-part='placeholder'] {
@@ -322,6 +320,7 @@
 		left: 0;
 		right: 0;
 		z-index: 50;
+		display: grid;
 		margin-top: var(--dry-space-1, 0.25rem);
 		background: var(--dry-color-bg-raised, #ffffff);
 		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
@@ -343,8 +342,7 @@
 	[data-country-select-wrapper] [data-part='option'] {
 		all: unset;
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-template-columns: auto 1fr auto;
 		align-items: center;
 		gap: var(--dry-space-2, 0.5rem);
 		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);

package/dist/date-range-picker/date-range-picker-root.svelte

@@ -151,7 +151,6 @@
 
 {@render children()}
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-drp-root] {
 		display: contents;

package/dist/dialog/dialog-footer.svelte

@@ -13,7 +13,6 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-dialog-footer] {
 		--dry-section-padding: var(--dry-dialog-padding);

package/dist/field/field-root.svelte

@@ -73,10 +73,10 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-field] {
 		--dry-field-gap: var(--dry-space-1_5);
+		--dry-field-label-order: 1;
 		display: grid;
 		gap: var(--dry-field-gap);
 
@@ -87,13 +87,5 @@
 		&[data-error] {
 			--dry-field-gap: var(--dry-space-1);
 		}
-
-		& > :where(:not(label)) {
-			order: 4;
-		}
-
-		& > :where(label) {
-			order: 1;
-		}
 	}
 </style>

package/dist/file-select/file-select-clear.svelte

@@ -18,6 +18,7 @@
 		type="button"
 		onclick={ctx.clear}
 		aria-label="Clear selection"
+		data-fs-clear
 		data-disabled={ctx.disabled || undefined}
 		{...rest}
 	>

package/dist/file-select/file-select-root.svelte

@@ -71,9 +71,10 @@
 	});
 </script>
 
-{@render children()}
+<div data-file-select data-disabled={disabled || undefined}>
+	{@render children()}
+</div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-file-select] {
 		container-type: inline-size;

package/dist/file-select/file-select-trigger.svelte

@@ -16,8 +16,10 @@
 	type="button"
 	onclick={ctx.request}
 	disabled={ctx.disabled || ctx.loading || undefined}
+	data-fs-trigger
 	data-loading={ctx.loading || undefined}
 	data-disabled={ctx.disabled || undefined}
+	data-size={size}
 	{...rest}
 	class={className}
 >

package/dist/file-select/file-select-value.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <span
+	data-fs-value
 	data-placeholder={!ctx.value || undefined}
 	data-loading={ctx.loading || undefined}
 	{...rest}

package/dist/file-upload/file-upload-dropzone.svelte

@@ -58,6 +58,8 @@
 <div
 	role="button"
 	tabindex={ctx.disabled ? undefined : 0}
+	data-fu-dropzone
+	data-size={size}
 	data-dragging={ctx.isDragging || undefined}
 	data-disabled={ctx.disabled || undefined}
 	class={className}

package/dist/file-upload/file-upload-root.svelte

@@ -134,7 +134,6 @@
 
 {@render children()}
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	.file-upload-hidden-input {
 		display: none;

package/dist/flip-card/flip-card-back.svelte

@@ -25,5 +25,10 @@
 <style>
 	[data-flip-card-back] {
 		z-index: 1;
+		backface-visibility: hidden;
+		transition: transform var(--dry-flip-card-duration, 0.6s) ease;
+		position: absolute;
+		inset: 0;
+		transform: var(--dry-flip-card-back-transform, rotateY(180deg));
 	}
 </style>

package/dist/flip-card/flip-card-front.svelte

@@ -16,5 +16,10 @@
 <style>
 	[data-flip-card-front] {
 		z-index: 2;
+		backface-visibility: hidden;
+		transition: transform var(--dry-flip-card-duration, 0.6s) ease;
+		position: absolute;
+		inset: 0;
+		transform: var(--dry-flip-card-front-transform, rotateY(0deg));
 	}
 </style>

package/dist/flip-card/flip-card-root.svelte

@@ -59,53 +59,29 @@
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
 	[data-flip-card] {
 		--dry-flip-card-duration: 0.6s;
 		--dry-flip-card-perspective: 1000px;
+		--dry-flip-card-front-transform: rotateY(0deg);
+		--dry-flip-card-back-transform: rotateY(180deg);
 
 		perspective: var(--dry-flip-card-perspective);
 		position: relative;
 	}
 
-	[data-flip-card] > :where([data-part='front']),
-	[data-flip-card] > :where([data-part='back']) {
-		backface-visibility: hidden;
-		transition: transform var(--dry-flip-card-duration) ease;
-		position: absolute;
-		inset: 0;
+	[data-flip-card][data-direction='horizontal'][data-flipped] {
+		--dry-flip-card-front-transform: rotateY(180deg);
+		--dry-flip-card-back-transform: rotateY(360deg);
 	}
 
-	[data-flip-card] > :where([data-part='front']) {
-		transform: rotateY(0deg);
+	[data-flip-card][data-direction='vertical'] {
+		--dry-flip-card-front-transform: rotateX(0deg);
+		--dry-flip-card-back-transform: rotateX(180deg);
 	}
 
-	[data-flip-card] > :where([data-part='back']) {
-		transform: rotateY(180deg);
-	}
-
-	[data-flip-card][data-direction='horizontal'][data-flipped] > :where([data-part='front']) {
-		transform: rotateY(180deg);
-	}
-
-	[data-flip-card][data-direction='horizontal'][data-flipped] > :where([data-part='back']) {
-		transform: rotateY(360deg);
-	}
-
-	[data-flip-card][data-direction='vertical'] > :where([data-part='front']) {
-		transform: rotateX(0deg);
-	}
-
-	[data-flip-card][data-direction='vertical'] > :where([data-part='back']) {
-		transform: rotateX(180deg);
-	}
-
-	[data-flip-card][data-direction='vertical'][data-flipped] > :where([data-part='front']) {
-		transform: rotateX(180deg);
-	}
-
-	[data-flip-card][data-direction='vertical'][data-flipped] > :where([data-part='back']) {
-		transform: rotateX(360deg);
+	[data-flip-card][data-direction='vertical'][data-flipped] {
+		--dry-flip-card-front-transform: rotateX(180deg);
+		--dry-flip-card-back-transform: rotateX(360deg);
 	}
 </style>

package/dist/float-button/float-button-action.svelte

@@ -14,6 +14,7 @@
 
 <button
 	type="button"
+	data-float-button-action
 	data-state={ctx.open ? 'open' : 'closed'}
 	tabindex={ctx.open ? 0 : -1}
 	{...rest}
@@ -22,13 +23,8 @@
 	{@render children()}
 </button>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
-	[data-float-button-action-wrapper] {
-		display: contents;
-	}
-
-	[data-float-button-action-wrapper] :where(button) {
+	[data-float-button-action] {
 		--dry-fab-action-bg: var(--dry-color-bg-overlay);
 		--dry-fab-action-color: var(--dry-color-text-strong);
 		--dry-fab-action-border: var(--dry-color-stroke-weak);

package/dist/float-button/float-button-root.svelte

@@ -27,17 +27,12 @@
 	});
 </script>
 
-<div data-state={open ? 'open' : 'closed'} {...rest} class={className}>
+<div data-float-button data-position={position} data-state={open ? 'open' : 'closed'} {...rest} class={className}>
 	{@render children()}
 </div>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
-	[data-float-button-wrapper] {
-		display: contents;
-	}
-
-	[data-float-button-wrapper] :where([data-float-button]) {
+	[data-float-button] {
 		--dry-fab-offset: var(--dry-space-6);
 		--dry-fab-gap: var(--dry-space-3);
 		--dry-fab-z-index: var(--dry-layer-overlay);
@@ -49,12 +44,12 @@
 		gap: var(--dry-fab-gap);
 	}
 
-	[data-float-button-wrapper][data-position='bottom-right'] :where([data-float-button]) {
+	[data-float-button][data-position='bottom-right'] {
 		bottom: var(--dry-fab-offset);
 		right: var(--dry-fab-offset);
 	}
 
-	[data-float-button-wrapper][data-position='bottom-left'] :where([data-float-button]) {
+	[data-float-button][data-position='bottom-left'] {
 		bottom: var(--dry-fab-offset);
 		left: var(--dry-fab-offset);
 	}

package/dist/float-button/float-button-trigger.svelte

@@ -18,6 +18,7 @@
 	aria-expanded={ctx.open}
 	data-state={ctx.open ? 'open' : 'closed'}
 	data-float-button-trigger
+	data-size={size}
 	class={className}
 	onclick={() => ctx.toggle()}
 	{...rest}
@@ -25,13 +26,8 @@
 	{@render children()}
 </button>
 
-<!-- svelte-ignore css_unused_selector -->
 <style>
-	[data-float-button-trigger-wrapper] {
-		display: contents;
-	}
-
-	[data-float-button-trigger-wrapper] :where(button) {
+	[data-float-button-trigger] {
 		--dry-fab-bg: var(--dry-color-fill-brand);
 		--dry-fab-color: var(--dry-color-on-brand);
 		--dry-fab-shadow: var(--dry-shadow-lg);
@@ -73,17 +69,17 @@
 		}
 	}
 
-	[data-float-button-trigger-wrapper][data-size='sm'] :where(button) {
+	[data-float-button-trigger][data-size='sm'] {
 		height: 44px;
 		aspect-ratio: 1;
 	}
 
-	[data-float-button-trigger-wrapper][data-size='md'] :where(button) {
+	[data-float-button-trigger][data-size='md'] {
 		height: 52px;
 		aspect-ratio: 1;
 	}
 
-	[data-float-button-trigger-wrapper][data-size='lg'] :where(button) {
+	[data-float-button-trigger][data-size='lg'] {
 		height: 60px;
 		aspect-ratio: 1;
 	}

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

@@ -27,3 +27,36 @@
 >
 	{@render children?.()}
 </button>
+
+<style>
+	[data-input-group-action] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0 var(--dry-input-group-padding-x);
+		white-space: nowrap;
+		appearance: none;
+		border: 0;
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		cursor: pointer;
+		font: inherit;
+		font-size: var(--dry-input-group-font-size);
+		transition: background-color 160ms ease;
+	}
+
+	[data-input-group-action]:hover:not(:disabled) {
+		background: var(--dry-color-fill-weak);
+	}
+
+	[data-input-group-action]:focus-visible {
+		outline: none;
+		background: var(--dry-color-fill-weak);
+	}
+
+	[data-input-group-action]:disabled {
+		cursor: not-allowed;
+	}
+</style>