diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 8c450c00c..47b8f867b 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -16,7 +16,7 @@
 		<AlertDialog.Overlay
 			transition={fade}
 			transitionConfig={{ duration: 150 }}
-			class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+			class="fixed inset-0 z-50 bg-black/80"
 		/>
 		<AlertDialog.Content
 			transition={flyAndScale}
@@ -33,7 +33,7 @@
 			</div>
 			<div class="flex w-full items-center justify-center gap-2">
 				<AlertDialog.Cancel
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-muted/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>Cancel</AlertDialog.Cancel
 				>
 				<AlertDialog.Action
diff --git a/src/components/demos/aspect-ratio-demo.svelte b/src/components/demos/aspect-ratio-demo.svelte
index 67a14b82e..45f5ad6eb 100644
--- a/src/components/demos/aspect-ratio-demo.svelte
+++ b/src/components/demos/aspect-ratio-demo.svelte
@@ -2,7 +2,7 @@
 	import { AspectRatio } from "$lib";
 </script>
 
-<AspectRatio.Root ratio={16 / 9} class="scale-80 rounded-[15px] bg-transparent">
+<AspectRatio.Root ratio={14 / 9} class="scale-80 rounded-[15px] bg-transparent">
 	<img
 		src="/abstract.png"
 		alt="an abstract painting"
diff --git a/src/components/demos/avatar-demo.svelte b/src/components/demos/avatar-demo.svelte
index 3e5cd95dc..34fe009a8 100644
--- a/src/components/demos/avatar-demo.svelte
+++ b/src/components/demos/avatar-demo.svelte
@@ -10,7 +10,7 @@
 		: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
 >
 	<div
-		class="flex h-full w-full items-center justify-center rounded-full border border-background"
+		class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
 	>
 		<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 		<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 5696d80c4..9b71d4030 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
+		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
index 0b9d49dcd..01c8fbed8 100644
--- a/src/components/demos/date-field-demo.svelte
+++ b/src/components/demos/date-field-demo.svelte
@@ -9,7 +9,7 @@
 		>
 		<DateField.Input
 			let:segments
-			class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
+			class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
 		>
 			{#each segments as { part, value }}
 				<div class="inline-block select-none">
@@ -20,7 +20,7 @@
 					{:else}
 						<DateField.Segment
 							{part}
-							class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
+							class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
 						>
 							{value}
 						</DateField.Segment>
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index fe700adb6..df82c9411 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -11,7 +11,7 @@
 		>
 		<DatePicker.Input
 			let:segments
-			class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
+			class="flex h-input w-full max-w-[232px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
 		>
 			{#each segments as { part, value }}
 				<div class="inline-block select-none">
@@ -22,7 +22,7 @@
 					{:else}
 						<DatePicker.Segment
 							{part}
-							class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
+							class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
 						>
 							{value}
 						</DatePicker.Segment>
@@ -30,9 +30,9 @@
 				</div>
 			{/each}
 			<DatePicker.Trigger
-				class="ml-auto inline-flex items-center justify-center rounded-[5px] transition-all sq-8 hover:bg-muted active:bg-dark-10"
+				class="ml-auto inline-flex items-center justify-center rounded-[5px] text-foreground/60 transition-all sq-8 hover:bg-muted active:bg-dark-10"
 			>
-				<CalendarBlank class="sq-5" />
+				<CalendarBlank class="sq-6" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
 		<DatePicker.Content
diff --git a/src/components/demos/date-range-field-demo.svelte b/src/components/demos/date-range-field-demo.svelte
index d6d56fbad..db8bc04ef 100644
--- a/src/components/demos/date-range-field-demo.svelte
+++ b/src/components/demos/date-range-field-demo.svelte
@@ -3,19 +3,19 @@
 	import { CalendarDate } from "@internationalized/date";
 
 	let value = {
-		start: new CalendarDate(2022, 1, 1),
-		end: new CalendarDate(2022, 3, 1)
+		start: new CalendarDate(2024, 1, 1),
+		end: new CalendarDate(2024, 3, 1)
 	};
 </script>
 
 <DateRangeField.Root bind:value>
-	<div class="flex w-full max-w-[300px] flex-col gap-1.5">
+	<div class="flex w-full max-w-[280px] flex-col gap-1.5">
 		<DateRangeField.Label class="block select-none text-sm font-medium"
 			>Hotel dates</DateRangeField.Label
 		>
 		<DateRangeField.Input
 			let:segments
-			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
+			class="flex h-input w-full max-w-[280px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
 		>
 			{#each segments.start as { part, value }}
 				<div class="inline-block select-none">
@@ -27,14 +27,14 @@
 						<DateRangeField.Segment
 							type="start"
 							{part}
-							class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
+							class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
 						>
 							{value}
 						</DateRangeField.Segment>
 					{/if}
 				</div>
 			{/each}
-			<div aria-hidden class="px-1">-</div>
+			<div aria-hidden class="px-1">–⁠⁠⁠⁠⁠</div>
 			{#each segments.end as { part, value }}
 				<div class="inline-block select-none">
 					{#if part === "literal"}
@@ -45,7 +45,7 @@
 						<DateRangeField.Segment
 							type="end"
 							{part}
-							class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
+							class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
 						>
 							{value}
 						</DateRangeField.Segment>
diff --git a/src/components/demos/date-range-picker-demo.svelte b/src/components/demos/date-range-picker-demo.svelte
index 5c4af5d2b..9e8997df0 100644
--- a/src/components/demos/date-range-picker-demo.svelte
+++ b/src/components/demos/date-range-picker-demo.svelte
@@ -7,13 +7,13 @@
 </script>
 
 <DateRangePicker.Root bind:value weekdayFormat="short" fixedWeeks={true}>
-	<div class="flex w-full max-w-[380px] flex-col gap-1.5">
+	<div class="flex w-full max-w-[320px] flex-col gap-1.5">
 		<DateRangePicker.Label class="block select-none text-sm font-medium"
 			>Rental Days</DateRangePicker.Label
 		>
 		<DateRangePicker.Input
 			let:segments
-			class="flex h-input w-full max-w-[380px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
+			class="flex h-input w-full max-w-[320px] select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-muted-foreground focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
 		>
 			{#each segments.start as { part, value }}
 				<div class="inline-block select-none">
@@ -25,14 +25,14 @@
 						<DateRangePicker.Segment
 							type="start"
 							{part}
-							class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
+							class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
 						>
 							{value}
 						</DateRangePicker.Segment>
 					{/if}
 				</div>
 			{/each}
-			<div aria-hidden class="px-1">-</div>
+			<div aria-hidden class="px-1">–</div>
 			{#each segments.end as { part, value }}
 				<div class="inline-block select-none">
 					{#if part === "literal"}
@@ -43,7 +43,7 @@
 						<DateRangePicker.Segment
 							type="end"
 							{part}
-							class="rounded-5px px-2 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
+							class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0"
 						>
 							{value}
 						</DateRangePicker.Segment>
@@ -51,9 +51,9 @@
 				</div>
 			{/each}
 			<DateRangePicker.Trigger
-				class="ml-auto inline-flex items-center justify-center rounded-[5px] transition-all sq-8 hover:bg-muted active:bg-dark-10"
+				class="ml-auto inline-flex items-center justify-center rounded-[5px] text-foreground/60 transition-all sq-8 hover:bg-muted active:bg-dark-10"
 			>
-				<CalendarBlank class="sq-5" />
+				<CalendarBlank class="sq-6" />
 			</DateRangePicker.Trigger>
 		</DateRangePicker.Input>
 		<DateRangePicker.Content
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index 6eaae77de..80a888f66 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -17,7 +17,7 @@
 		<Dialog.Overlay
 			transition={fade}
 			transitionConfig={{ duration: 150 }}
-			class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+			class="fixed inset-0 z-50 bg-black/80"
 		/>
 		<Dialog.Content
 			transition={flyAndScale}
diff --git a/src/components/demos/label-demo.svelte b/src/components/demos/label-demo.svelte
index fab923bb6..a7bc2fd7e 100644
--- a/src/components/demos/label-demo.svelte
+++ b/src/components/demos/label-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
+		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
index 26a5fa93d..330d756a1 100644
--- a/src/components/demos/link-preview-demo.svelte
+++ b/src/components/demos/link-preview-demo.svelte
@@ -20,7 +20,7 @@
 				: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
 		>
 			<div
-				class="flex h-full w-full items-center justify-center rounded-full border border-background"
+				class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
 			>
 				<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 				<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
@@ -41,7 +41,7 @@
 					: 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
 			>
 				<div
-					class="flex h-full w-full items-center justify-center rounded-full border border-background"
+					class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
 				>
 					<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 					<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
diff --git a/src/components/demos/pagination-demo.svelte b/src/components/demos/pagination-demo.svelte
index e85776ee5..bd200adc7 100644
--- a/src/components/demos/pagination-demo.svelte
+++ b/src/components/demos/pagination-demo.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <Pagination.Root count={100} perPage={10} let:pages let:range>
-	<div class="mb-[55px] flex items-center">
+	<div class="my-8 flex items-center">
 		<Pagination.PrevButton
 			class="mr-[25px] inline-flex items-center justify-center rounded-[9px] bg-transparent sq-10 hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:text-muted-foreground hover:disabled:bg-transparent"
 		>
diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index cdfcb48a1..9d53f2fa2 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -9,7 +9,7 @@
 		<RadioGroup.Item
 			id="amazing"
 			value="amazing"
-			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-100 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="amazing">Amazing</Label.Root>
 	</div>
@@ -19,7 +19,7 @@
 		<RadioGroup.Item
 			id="average"
 			value="average"
-			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-100 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="average">Average</Label.Root>
 	</div>
@@ -29,7 +29,7 @@
 		<RadioGroup.Item
 			id="terrible"
 			value="terrible"
-			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-100 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="terrible">Terrible</Label.Root>
 	</div>
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 0cb049dd3..70ef35eea 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -52,7 +52,7 @@
 										{date}
 										month={month.value}
 										class={cn(
-											"group relative inline-flex items-center justify-center overflow-visible whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 hover:border-foreground  focus-visible:!ring-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selection-start]:focus-visible:ring-2 data-[selection-start]:focus-visible:!ring-offset-2 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:border-foreground data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-0 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-offset-0"
+											"group relative inline-flex items-center justify-center overflow-visible whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground sq-10 hover:border-foreground focus-visible:!ring-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selection-start]:focus-visible:ring-2 data-[selection-start]:focus-visible:!ring-offset-2 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:border-foreground data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-0 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-offset-0"
 										)}
 									>
 										<div
diff --git a/src/components/demos/slider-demo.svelte b/src/components/demos/slider-demo.svelte
index 8d7e5168b..90b1ebdee 100644
--- a/src/components/demos/slider-demo.svelte
+++ b/src/components/demos/slider-demo.svelte
@@ -18,7 +18,7 @@
 		{#each thumbs as thumb}
 			<Slider.Thumb
 				{thumb}
-				class="block rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
+				class="block cursor-pointer rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	</Slider.Root>
diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index d42a48574..c65e4b41d 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/src/components/demos/toggle-demo.svelte
@@ -3,7 +3,7 @@
 	import { Toggle } from "$lib";
 
 	let unlocked = false;
-	$: code = unlocked ? "1985" : "••••";
+	$: code = unlocked ? "B1T5" : "••••";
 </script>
 
 <div
diff --git a/static/avatar-1.png b/static/avatar-1.png
index 02ca1d12e..8bc797db9 100644
Binary files a/static/avatar-1.png and b/static/avatar-1.png differ