Repository: melt-ui/melt-ui
Pull request #721 (2023-11-09 21:43:33)

merge develop to main


Patch:
diff --git a/src/docs/previews/calendar/main/tailwind/LocaleCombobox.svelte b/src/docs/previews/calendar/main/tailwind/LocaleCombobox.svelte
index 3e832894..3f951f69 100644
--- a/src/docs/previews/calendar/main/tailwind/LocaleCombobox.svelte
+++ b/src/docs/previews/calendar/main/tailwind/LocaleCombobox.svelte
@@ -50,85 +50,89 @@
 	$: isCustom = _filteredLocales.length === 0;
 </script>
 
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label use:melt={$label}>
-		<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
-	</label>
+<div class="absolute left-4 top-4 hidden lg:block">
+	<div class="flex flex-col gap-1">
+		<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+		<label use:melt={$label}>
+			<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
+		</label>
 
-	<div class="relative">
-		<input
-			use:melt={$input}
-			aria-describedby="disclaimer"
-			class="flex h-8 w-full items-center justify-between rounded-lg
+		<div class="relative">
+			<input
+				use:melt={$input}
+				aria-describedby="disclaimer"
+				class="flex h-8 w-full items-center justify-between rounded-lg
 			bg-white px-3 pr-4 text-sm text-black"
-			placeholder="Choose a locale"
-		/>
-		<div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900">
-			{#if $open}
-				<ChevronUp class="square-4" />
-			{:else}
-				<ChevronDown class="square-4" />
-			{/if}
+				placeholder="Choose a locale"
+			/>
+			<div
+				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900"
+			>
+				{#if $open}
+					<ChevronUp class="square-4" />
+				{:else}
+					<ChevronDown class="square-4" />
+				{/if}
+			</div>
+		</div>
+		<div id="disclaimer" class="text-sm text-magnum-900">
+			(Not a complete list)
 		</div>
 	</div>
-	<div id="disclaimer" class="text-sm text-magnum-900">
-		(Not a complete list)
-	</div>
-</div>
 
-{#if $open}
-	<ul
-		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
-		use:melt={$menu}
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div
-			class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
-			tabindex="0"
+	{#if $open}
+		<ul
+			class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
+			use:melt={$menu}
+			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#if isCustom}
-				<li
-					use:melt={$option({ value: $inputValue, label: $inputValue })}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div
+				class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+				tabindex="0"
+			>
+				{#if isCustom}
+					<li
+						use:melt={$option({ value: $inputValue, label: $inputValue })}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 			text-sm
 			hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 				data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected($inputValue)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected($inputValue)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">Custom</span>
+							<span class="block text-sm opacity-75">{$inputValue}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">Custom</span>
-						<span class="block text-sm opacity-75">{$inputValue}</span>
-					</div>
-				</li>
-			{/if}
-			{#each filteredLocales as locale, index (index)}
-				<li
-					use:melt={$option(locale)}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+					</li>
+				{/if}
+				{#each filteredLocales as locale, index (index)}
+					<li
+						use:melt={$option(locale)}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 				text-sm
 				hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 					data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected(locale.value)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected(locale.value)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">{locale.label}</span>
+							<span class="block text-sm opacity-75">{locale.value}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">{locale.label}</span>
-						<span class="block text-sm opacity-75">{locale.value}</span>
-					</div>
-				</li>
-			{/each}
-		</div>
-	</ul>
-{/if}
+					</li>
+				{/each}
+			</div>
+		</ul>
+	{/if}
+</div>
 
 <style lang="postcss">
 	.check {
diff --git a/src/docs/previews/calendar/main/tailwind/index.svelte b/src/docs/previews/calendar/main/tailwind/index.svelte
index 66f66a42..df04fcba 100644
--- a/src/docs/previews/calendar/main/tailwind/index.svelte
+++ b/src/docs/previews/calendar/main/tailwind/index.svelte
@@ -12,16 +12,14 @@
 </script>
 
 <section>
-	<div class="absolute left-4 top-4">
-		<LocaleCombobox
-			onSelectedChange={({ next }) => {
-				if (next) {
-					locale.set(next.value);
-				}
-				return next;
-			}}
-		/>
-	</div>
+	<LocaleCombobox
+		onSelectedChange={({ next }) => {
+			if (next) {
+				locale.set(next.value);
+			}
+			return next;
+		}}
+	/>
 	<div use:melt={$calendar}>
 		<header>
 			<button use:melt={$prevButton}>
diff --git a/src/docs/previews/date-field/main/tailwind/LocaleCombobox.svelte b/src/docs/previews/date-field/main/tailwind/LocaleCombobox.svelte
index 3e832894..3376b8c6 100644
--- a/src/docs/previews/date-field/main/tailwind/LocaleCombobox.svelte
+++ b/src/docs/previews/date-field/main/tailwind/LocaleCombobox.svelte
@@ -50,85 +50,89 @@
 	$: isCustom = _filteredLocales.length === 0;
 </script>
 
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label use:melt={$label}>
-		<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
-	</label>
+<div class="absolute left-4 top-4">
+	<div class="flex flex-col gap-1">
+		<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+		<label use:melt={$label}>
+			<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
+		</label>
 
-	<div class="relative">
-		<input
-			use:melt={$input}
-			aria-describedby="disclaimer"
-			class="flex h-8 w-full items-center justify-between rounded-lg
+		<div class="relative">
+			<input
+				use:melt={$input}
+				aria-describedby="disclaimer"
+				class="flex h-8 w-full items-center justify-between rounded-lg
 			bg-white px-3 pr-4 text-sm text-black"
-			placeholder="Choose a locale"
-		/>
-		<div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900">
-			{#if $open}
-				<ChevronUp class="square-4" />
-			{:else}
-				<ChevronDown class="square-4" />
-			{/if}
+				placeholder="Choose a locale"
+			/>
+			<div
+				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900"
+			>
+				{#if $open}
+					<ChevronUp class="square-4" />
+				{:else}
+					<ChevronDown class="square-4" />
+				{/if}
+			</div>
+		</div>
+		<div id="disclaimer" class="text-sm text-magnum-900">
+			(Not a complete list)
 		</div>
 	</div>
-	<div id="disclaimer" class="text-sm text-magnum-900">
-		(Not a complete list)
-	</div>
-</div>
 
-{#if $open}
-	<ul
-		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
-		use:melt={$menu}
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div
-			class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
-			tabindex="0"
+	{#if $open}
+		<ul
+			class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
+			use:melt={$menu}
+			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#if isCustom}
-				<li
-					use:melt={$option({ value: $inputValue, label: $inputValue })}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div
+				class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+				tabindex="0"
+			>
+				{#if isCustom}
+					<li
+						use:melt={$option({ value: $inputValue, label: $inputValue })}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 			text-sm
 			hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 				data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected($inputValue)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected($inputValue)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">Custom</span>
+							<span class="block text-sm opacity-75">{$inputValue}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">Custom</span>
-						<span class="block text-sm opacity-75">{$inputValue}</span>
-					</div>
-				</li>
-			{/if}
-			{#each filteredLocales as locale, index (index)}
-				<li
-					use:melt={$option(locale)}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+					</li>
+				{/if}
+				{#each filteredLocales as locale, index (index)}
+					<li
+						use:melt={$option(locale)}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 				text-sm
 				hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 					data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected(locale.value)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected(locale.value)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">{locale.label}</span>
+							<span class="block text-sm opacity-75">{locale.value}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">{locale.label}</span>
-						<span class="block text-sm opacity-75">{locale.value}</span>
-					</div>
-				</li>
-			{/each}
-		</div>
-	</ul>
-{/if}
+					</li>
+				{/each}
+			</div>
+		</ul>
+	{/if}
+</div>
 
 <style lang="postcss">
 	.check {
diff --git a/src/docs/previews/date-field/main/tailwind/index.svelte b/src/docs/previews/date-field/main/tailwind/index.svelte
index b913d97a..3331bfbc 100644
--- a/src/docs/previews/date-field/main/tailwind/index.svelte
+++ b/src/docs/previews/date-field/main/tailwind/index.svelte
@@ -1,33 +1,23 @@
 <script lang="ts">
 	import { createDateField, melt } from '$lib';
-	import { onMount } from 'svelte';
 	import LocaleCombobox from './LocaleCombobox.svelte';
-	import { CalendarDate } from '@internationalized/date';
 
 	const {
 		elements: { field, segment, label },
 		states: { segmentContents },
 		options: { locale },
-	} = createDateField({
-		defaultValue: new CalendarDate(2024, 1, 11),
-	});
-
-	onMount(() => {
-		locale.set(navigator.language);
-	});
+	} = createDateField();
 </script>
 
 <section>
-	<div class="absolute left-4 top-4">
-		<LocaleCombobox
-			onSelectedChange={({ next }) => {
-				if (next) {
-					locale.set(next.value);
-				}
-				return next;
-			}}
-		/>
-	</div>
+	<LocaleCombobox
+		onSelectedChange={({ next }) => {
+			if (next) {
+				locale.set(next.value);
+			}
+			return next;
+		}}
+	/>
 	<div class="flex h-full w-full flex-col">
 		<span use:melt={$label}>Date</span>
 		<div use:melt={$field}>
diff --git a/src/docs/previews/date-picker/main/tailwind/LocaleCombobox.svelte b/src/docs/previews/date-picker/main/tailwind/LocaleCombobox.svelte
index 3e832894..3376b8c6 100644
--- a/src/docs/previews/date-picker/main/tailwind/LocaleCombobox.svelte
+++ b/src/docs/previews/date-picker/main/tailwind/LocaleCombobox.svelte
@@ -50,85 +50,89 @@
 	$: isCustom = _filteredLocales.length === 0;
 </script>
 
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label use:melt={$label}>
-		<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
-	</label>
+<div class="absolute left-4 top-4">
+	<div class="flex flex-col gap-1">
+		<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+		<label use:melt={$label}>
+			<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
+		</label>
 
-	<div class="relative">
-		<input
-			use:melt={$input}
-			aria-describedby="disclaimer"
-			class="flex h-8 w-full items-center justify-between rounded-lg
+		<div class="relative">
+			<input
+				use:melt={$input}
+				aria-describedby="disclaimer"
+				class="flex h-8 w-full items-center justify-between rounded-lg
 			bg-white px-3 pr-4 text-sm text-black"
-			placeholder="Choose a locale"
-		/>
-		<div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900">
-			{#if $open}
-				<ChevronUp class="square-4" />
-			{:else}
-				<ChevronDown class="square-4" />
-			{/if}
+				placeholder="Choose a locale"
+			/>
+			<div
+				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900"
+			>
+				{#if $open}
+					<ChevronUp class="square-4" />
+				{:else}
+					<ChevronDown class="square-4" />
+				{/if}
+			</div>
+		</div>
+		<div id="disclaimer" class="text-sm text-magnum-900">
+			(Not a complete list)
 		</div>
 	</div>
-	<div id="disclaimer" class="text-sm text-magnum-900">
-		(Not a complete list)
-	</div>
-</div>
 
-{#if $open}
-	<ul
-		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
-		use:melt={$menu}
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div
-			class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
-			tabindex="0"
+	{#if $open}
+		<ul
+			class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
+			use:melt={$menu}
+			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#if isCustom}
-				<li
-					use:melt={$option({ value: $inputValue, label: $inputValue })}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div
+				class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+				tabindex="0"
+			>
+				{#if isCustom}
+					<li
+						use:melt={$option({ value: $inputValue, label: $inputValue })}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 			text-sm
 			hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 				data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected($inputValue)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected($inputValue)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">Custom</span>
+							<span class="block text-sm opacity-75">{$inputValue}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">Custom</span>
-						<span class="block text-sm opacity-75">{$inputValue}</span>
-					</div>
-				</li>
-			{/if}
-			{#each filteredLocales as locale, index (index)}
-				<li
-					use:melt={$option(locale)}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+					</li>
+				{/if}
+				{#each filteredLocales as locale, index (index)}
+					<li
+						use:melt={$option(locale)}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 				text-sm
 				hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 					data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected(locale.value)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected(locale.value)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">{locale.label}</span>
+							<span class="block text-sm opacity-75">{locale.value}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">{locale.label}</span>
-						<span class="block text-sm opacity-75">{locale.value}</span>
-					</div>
-				</li>
-			{/each}
-		</div>
-	</ul>
-{/if}
+					</li>
+				{/each}
+			</div>
+		</ul>
+	{/if}
+</div>
 
 <style lang="postcss">
 	.check {
diff --git a/src/docs/previews/date-picker/main/tailwind/index.svelte b/src/docs/previews/date-picker/main/tailwind/index.svelte
index 9cddb7cb..7aa4f665 100644
--- a/src/docs/previews/date-picker/main/tailwind/index.svelte
+++ b/src/docs/previews/date-picker/main/tailwind/index.svelte
@@ -29,16 +29,14 @@
 </script>
 
 <section>
-	<div class="absolute left-4 top-4">
-		<LocaleCombobox
-			onSelectedChange={({ next }) => {
-				if (next) {
-					locale.set(next.value);
-				}
-				return next;
-			}}
-		/>
-	</div>
+	<LocaleCombobox
+		onSelectedChange={({ next }) => {
+			if (next) {
+				locale.set(next.value);
+			}
+			return next;
+		}}
+	/>
 	<div>
 		<span use:melt={$label}>Date</span>
 		<div use:melt={$field}>
diff --git a/src/docs/previews/date-range-field/main/tailwind/LocaleCombobox.svelte b/src/docs/previews/date-range-field/main/tailwind/LocaleCombobox.svelte
index 3e832894..3376b8c6 100644
--- a/src/docs/previews/date-range-field/main/tailwind/LocaleCombobox.svelte
+++ b/src/docs/previews/date-range-field/main/tailwind/LocaleCombobox.svelte
@@ -50,85 +50,89 @@
 	$: isCustom = _filteredLocales.length === 0;
 </script>
 
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label use:melt={$label}>
-		<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
-	</label>
+<div class="absolute left-4 top-4">
+	<div class="flex flex-col gap-1">
+		<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+		<label use:melt={$label}>
+			<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
+		</label>
 
-	<div class="relative">
-		<input
-			use:melt={$input}
-			aria-describedby="disclaimer"
-			class="flex h-8 w-full items-center justify-between rounded-lg
+		<div class="relative">
+			<input
+				use:melt={$input}
+				aria-describedby="disclaimer"
+				class="flex h-8 w-full items-center justify-between rounded-lg
 			bg-white px-3 pr-4 text-sm text-black"
-			placeholder="Choose a locale"
-		/>
-		<div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900">
-			{#if $open}
-				<ChevronUp class="square-4" />
-			{:else}
-				<ChevronDown class="square-4" />
-			{/if}
+				placeholder="Choose a locale"
+			/>
+			<div
+				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900"
+			>
+				{#if $open}
+					<ChevronUp class="square-4" />
+				{:else}
+					<ChevronDown class="square-4" />
+				{/if}
+			</div>
+		</div>
+		<div id="disclaimer" class="text-sm text-magnum-900">
+			(Not a complete list)
 		</div>
 	</div>
-	<div id="disclaimer" class="text-sm text-magnum-900">
-		(Not a complete list)
-	</div>
-</div>
 
-{#if $open}
-	<ul
-		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
-		use:melt={$menu}
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div
-			class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
-			tabindex="0"
+	{#if $open}
+		<ul
+			class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
+			use:melt={$menu}
+			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#if isCustom}
-				<li
-					use:melt={$option({ value: $inputValue, label: $inputValue })}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div
+				class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+				tabindex="0"
+			>
+				{#if isCustom}
+					<li
+						use:melt={$option({ value: $inputValue, label: $inputValue })}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 			text-sm
 			hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 				data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected($inputValue)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected($inputValue)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">Custom</span>
+							<span class="block text-sm opacity-75">{$inputValue}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">Custom</span>
-						<span class="block text-sm opacity-75">{$inputValue}</span>
-					</div>
-				</li>
-			{/if}
-			{#each filteredLocales as locale, index (index)}
-				<li
-					use:melt={$option(locale)}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+					</li>
+				{/if}
+				{#each filteredLocales as locale, index (index)}
+					<li
+						use:melt={$option(locale)}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 				text-sm
 				hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 					data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected(locale.value)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected(locale.value)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">{locale.label}</span>
+							<span class="block text-sm opacity-75">{locale.value}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">{locale.label}</span>
-						<span class="block text-sm opacity-75">{locale.value}</span>
-					</div>
-				</li>
-			{/each}
-		</div>
-	</ul>
-{/if}
+					</li>
+				{/each}
+			</div>
+		</ul>
+	{/if}
+</div>
 
 <style lang="postcss">
 	.check {
diff --git a/src/docs/previews/date-range-field/main/tailwind/index.svelte b/src/docs/previews/date-range-field/main/tailwind/index.svelte
index 8365ab05..f60d176c 100644
--- a/src/docs/previews/date-range-field/main/tailwind/index.svelte
+++ b/src/docs/previews/date-range-field/main/tailwind/index.svelte
@@ -10,16 +10,14 @@
 </script>
 
 <section>
-	<div class="absolute left-4 top-4">
-		<LocaleCombobox
-			onSelectedChange={({ next }) => {
-				if (next) {
-					locale.set(next.value);
-				}
-				return next;
-			}}
-		/>
-	</div>
+	<LocaleCombobox
+		onSelectedChange={({ next }) => {
+			if (next) {
+				locale.set(next.value);
+			}
+			return next;
+		}}
+	/>
 	<div>
 		<span use:melt={$label}>Booking Dates</span>
 		<div use:melt={$field}>
diff --git a/src/docs/previews/date-range-picker/main/tailwind/LocaleCombobox.svelte b/src/docs/previews/date-range-picker/main/tailwind/LocaleCombobox.svelte
index 3e832894..3376b8c6 100644
--- a/src/docs/previews/date-range-picker/main/tailwind/LocaleCombobox.svelte
+++ b/src/docs/previews/date-range-picker/main/tailwind/LocaleCombobox.svelte
@@ -50,85 +50,89 @@
 	$: isCustom = _filteredLocales.length === 0;
 </script>
 
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label use:melt={$label}>
-		<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
-	</label>
+<div class="absolute left-4 top-4">
+	<div class="flex flex-col gap-1">
+		<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+		<label use:melt={$label}>
+			<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
+		</label>
 
-	<div class="relative">
-		<input
-			use:melt={$input}
-			aria-describedby="disclaimer"
-			class="flex h-8 w-full items-center justify-between rounded-lg
+		<div class="relative">
+			<input
+				use:melt={$input}
+				aria-describedby="disclaimer"
+				class="flex h-8 w-full items-center justify-between rounded-lg
 			bg-white px-3 pr-4 text-sm text-black"
-			placeholder="Choose a locale"
-		/>
-		<div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900">
-			{#if $open}
-				<ChevronUp class="square-4" />
-			{:else}
-				<ChevronDown class="square-4" />
-			{/if}
+				placeholder="Choose a locale"
+			/>
+			<div
+				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900"
+			>
+				{#if $open}
+					<ChevronUp class="square-4" />
+				{:else}
+					<ChevronDown class="square-4" />
+				{/if}
+			</div>
+		</div>
+		<div id="disclaimer" class="text-sm text-magnum-900">
+			(Not a complete list)
 		</div>
 	</div>
-	<div id="disclaimer" class="text-sm text-magnum-900">
-		(Not a complete list)
-	</div>
-</div>
 
-{#if $open}
-	<ul
-		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
-		use:melt={$menu}
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div
-			class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
-			tabindex="0"
+	{#if $open}
+		<ul
+			class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
+			use:melt={$menu}
+			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#if isCustom}
-				<li
-					use:melt={$option({ value: $inputValue, label: $inputValue })}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div
+				class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+				tabindex="0"
+			>
+				{#if isCustom}
+					<li
+						use:melt={$option({ value: $inputValue, label: $inputValue })}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 			text-sm
 			hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 				data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected($inputValue)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected($inputValue)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">Custom</span>
+							<span class="block text-sm opacity-75">{$inputValue}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">Custom</span>
-						<span class="block text-sm opacity-75">{$inputValue}</span>
-					</div>
-				</li>
-			{/if}
-			{#each filteredLocales as locale, index (index)}
-				<li
-					use:melt={$option(locale)}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+					</li>
+				{/if}
+				{#each filteredLocales as locale, index (index)}
+					<li
+						use:melt={$option(locale)}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 				text-sm
 				hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 					data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected(locale.value)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected(locale.value)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">{locale.label}</span>
+							<span class="block text-sm opacity-75">{locale.value}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">{locale.label}</span>
-						<span class="block text-sm opacity-75">{locale.value}</span>
-					</div>
-				</li>
-			{/each}
-		</div>
-	</ul>
-{/if}
+					</li>
+				{/each}
+			</div>
+		</ul>
+	{/if}
+</div>
 
 <style lang="postcss">
 	.check {
diff --git a/src/docs/previews/date-range-picker/main/tailwind/index.svelte b/src/docs/previews/date-range-picker/main/tailwind/index.svelte
index 6bb5b554..cad08fb9 100644
--- a/src/docs/previews/date-range-picker/main/tailwind/index.svelte
+++ b/src/docs/previews/date-range-picker/main/tailwind/index.svelte
@@ -29,16 +29,14 @@
 </script>
 
 <section>
-	<div class="absolute left-4 top-4">
-		<LocaleCombobox
-			onSelectedChange={({ next }) => {
-				if (next) {
-					locale.set(next.value);
-				}
-				return next;
-			}}
-		/>
-	</div>
+	<LocaleCombobox
+		onSelectedChange={({ next }) => {
+			if (next) {
+				locale.set(next.value);
+			}
+			return next;
+		}}
+	/>
 	<div>
 		<span use:melt={$label}>Date</span>
 		<div use:melt={$field}>
diff --git a/src/docs/previews/range-calendar/main/tailwind/LocaleCombobox.svelte b/src/docs/previews/range-calendar/main/tailwind/LocaleCombobox.svelte
index 3e832894..3f951f69 100644
--- a/src/docs/previews/range-calendar/main/tailwind/LocaleCombobox.svelte
+++ b/src/docs/previews/range-calendar/main/tailwind/LocaleCombobox.svelte
@@ -50,85 +50,89 @@
 	$: isCustom = _filteredLocales.length === 0;
 </script>
 
-<div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label use:melt={$label}>
-		<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
-	</label>
+<div class="absolute left-4 top-4 hidden lg:block">
+	<div class="flex flex-col gap-1">
+		<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+		<label use:melt={$label}>
+			<span class="text-sm font-medium text-magnum-900">Choose a locale:</span>
+		</label>
 
-	<div class="relative">
-		<input
-			use:melt={$input}
-			aria-describedby="disclaimer"
-			class="flex h-8 w-full items-center justify-between rounded-lg
+		<div class="relative">
+			<input
+				use:melt={$input}
+				aria-describedby="disclaimer"
+				class="flex h-8 w-full items-center justify-between rounded-lg
 			bg-white px-3 pr-4 text-sm text-black"
-			placeholder="Choose a locale"
-		/>
-		<div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900">
-			{#if $open}
-				<ChevronUp class="square-4" />
-			{:else}
-				<ChevronDown class="square-4" />
-			{/if}
+				placeholder="Choose a locale"
+			/>
+			<div
+				class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-magnum-900"
+			>
+				{#if $open}
+					<ChevronUp class="square-4" />
+				{:else}
+					<ChevronDown class="square-4" />
+				{/if}
+			</div>
+		</div>
+		<div id="disclaimer" class="text-sm text-magnum-900">
+			(Not a complete list)
 		</div>
 	</div>
-	<div id="disclaimer" class="text-sm text-magnum-900">
-		(Not a complete list)
-	</div>
-</div>
 
-{#if $open}
-	<ul
-		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
-		use:melt={$menu}
-		transition:fly={{ duration: 150, y: -5 }}
-	>
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<div
-			class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
-			tabindex="0"
+	{#if $open}
+		<ul
+			class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg"
+			use:melt={$menu}
+			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#if isCustom}
-				<li
-					use:melt={$option({ value: $inputValue, label: $inputValue })}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div
+				class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+				tabindex="0"
+			>
+				{#if isCustom}
+					<li
+						use:melt={$option({ value: $inputValue, label: $inputValue })}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 			text-sm
 			hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 				data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected($inputValue)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected($inputValue)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">Custom</span>
+							<span class="block text-sm opacity-75">{$inputValue}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">Custom</span>
-						<span class="block text-sm opacity-75">{$inputValue}</span>
-					</div>
-				</li>
-			{/if}
-			{#each filteredLocales as locale, index (index)}
-				<li
-					use:melt={$option(locale)}
-					class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
+					</li>
+				{/if}
+				{#each filteredLocales as locale, index (index)}
+					<li
+						use:melt={$option(locale)}
+						class="relative cursor-pointer scroll-my-2 rounded-md py-2 pl-4 pr-4
 				text-sm
 				hover:bg-magnum-100 data-[highlighted]:bg-magnum-200
 					data-[highlighted]:text-magnum-900 data-[disabled]:opacity-50"
-				>
-					{#if $isSelected(locale.value)}
-						<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
-							<Check class="square-4" />
+					>
+						{#if $isSelected(locale.value)}
+							<div class="check absolute left-2 top-1/2 z-10 text-magnum-900">
+								<Check class="square-4" />
+							</div>
+						{/if}
+						<div class="pl-4">
+							<span class="font-medium">{locale.label}</span>
+							<span class="block text-sm opacity-75">{locale.value}</span>
 						</div>
-					{/if}
-					<div class="pl-4">
-						<span class="font-medium">{locale.label}</span>
-						<span class="block text-sm opacity-75">{locale.value}</span>
-					</div>
-				</li>
-			{/each}
-		</div>
-	</ul>
-{/if}
+					</li>
+				{/each}
+			</div>
+		</ul>
+	{/if}
+</div>
 
 <style lang="postcss">
 	.check {
diff --git a/src/docs/previews/range-calendar/main/tailwind/index.svelte b/src/docs/previews/range-calendar/main/tailwind/index.svelte
index 30be38e0..984e6c0e 100644
--- a/src/docs/previews/range-calendar/main/tailwind/index.svelte
+++ b/src/docs/previews/range-calendar/main/tailwind/index.svelte
@@ -13,16 +13,14 @@
 </script>
 
 <section>
-	<div class="absolute left-4 top-4">
-		<LocaleCombobox
-			onSelectedChange={({ next }) => {
-				if (next) {
-					locale.set(next.value);
-				}
-				return next;
-			}}
-		/>
-	</div>
+	<LocaleCombobox
+		onSelectedChange={({ next }) => {
+			if (next) {
+				locale.set(next.value);
+			}
+			return next;
+		}}
+	/>
 	<div use:melt={$calendar}>
 		<header>
 			<button use:melt={$prevButton}>


Test patch:
diff --git a/src/tests/slider/Slider.spec.ts b/src/tests/slider/Slider.spec.ts
index ec644340..66a5f449 100644
--- a/src/tests/slider/Slider.spec.ts
+++ b/src/tests/slider/Slider.spec.ts
@@ -56,7 +56,7 @@ function expectPercentages({
 	expect(isCloseEnough(100 - higherPercentage, range.style.right)).toBeTruthy();
 }
 
-describe.skip('Slider (Default)', () => {
+describe('Slider (Default)', () => {
 	test('No accessibility violations', async () => {
 		const { container } = render(Slider);
 
@@ -133,7 +133,7 @@ describe.skip('Slider (Default)', () => {
 	});
 });
 
-describe.skip('Slider (Range)', () => {
+describe('Slider (Range)', () => {
 	test('No accessibility violations', async () => {
 		const { container } = render(RangeSlider);
 
@@ -332,7 +332,7 @@ describe.skip('Slider (Range)', () => {
 	});
 });
 
-describe.skip('Slider (Small min, max, step)', () => {
+describe('Slider (Small min, max, step)', () => {
 	test('Has a thumb positioned at 50% of the container', async () => {
 		const { getByTestId } = render(Slider, {
 			value: [0.5],
@@ -385,7 +385,7 @@ describe.skip('Slider (Small min, max, step)', () => {
 	});
 });
 
-describe.skip('Slider (negative min)', () => {
+describe('Slider (negative min)', () => {
 	test('Has a thumb positioned at 50% of the container', async () => {
 		const { getByTestId } = render(Slider, {
 			value: [0],
@@ -438,7 +438,7 @@ describe.skip('Slider (negative min)', () => {
 	});
 });
 
-describe.skip('Slider (value=[5], min=0, max=10, step=1)', () => {
+describe('Slider (value=[5], min=0, max=10, step=1)', () => {
 	const props = {
 		value: [5],
 		min: 0,
@@ -471,7 +471,7 @@ describe.skip('Slider (value=[5], min=0, max=10, step=1)', () => {
 	});
 });
 
-describe.skip('Slider (min=0, max=8, step=3)', () => {
+describe('Slider (min=0, max=8, step=3)', () => {
 	test('3 ticks are rendered', () => {
 		const { getAllByTestId } = render(Slider, {
 			min: 0,
@@ -483,7 +483,7 @@ describe.skip('Slider (min=0, max=8, step=3)', () => {
 	});
 });
 
-describe.skip('Slider (min=0, max=9, step=3)', () => {
+describe('Slider (min=0, max=9, step=3)', () => {
 	test('4 ticks are rendered', () => {
 		const { getAllByTestId } = render(Slider, {
 			min: 0,
@@ -495,7 +495,7 @@ describe.skip('Slider (min=0, max=9, step=3)', () => {
 	});
 });
 
-describe.skip('Slider (value=[3,6], min=0, max=10, step=3)', () => {
+describe('Slider (value=[3,6], min=0, max=10, step=3)', () => {
 	const props = {
 		value: [3, 6],
 		min: 0,
@@ -528,7 +528,7 @@ describe.skip('Slider (value=[3,6], min=0, max=10, step=3)', () => {
 	});
 });
 
-describe.skip('Slider changing options after building', () => {
+describe('Slider changing options after building', () => {
 	const props = {
 		value: [5],
 		min: 0,
@@ -541,7 +541,7 @@ describe.skip('Slider changing options after building', () => {
 
 		expect(getAllByTestId('tick')).toHaveLength(11);
 
-		await rerender({ ...props, resetMin: 2 });
+		rerender({ ...props, resetMin: 2 });
 
 		expect(getAllByTestId('tick')).toHaveLength(9);
 	});
@@ -551,7 +551,7 @@ describe.skip('Slider changing options after building', () => {
 
 		expect(getAllByTestId('tick')).toHaveLength(11);
 
-		await rerender({ ...props, resetMax: 8 });
+		rerender({ ...props, resetMax: 8 });
 
 		expect(getAllByTestId('tick')).toHaveLength(9);
 	});
@@ -561,7 +561,7 @@ describe.skip('Slider changing options after building', () => {
 
 		expect(getAllByTestId('tick')).toHaveLength(11);
 
-		await rerender({ ...props, resetStep: 2 });
+		rerender({ ...props, resetStep: 2 });
 
 		expect(getAllByTestId('tick')).toHaveLength(6);
 	});
@@ -578,7 +578,7 @@ describe('Slider (min=0, max=100, step=30)', () => {
 
 		const user = userEvent.setup();
 		const thumb = getByTestId('thumb');
-		await expect(thumb).toBeInTheDocument();
+		expect(thumb).toBeInTheDocument();
 
 		await act(() => thumb.focus());
 		await user.keyboard(`{${kbd.ARROW_RIGHT}}`);