diff --git a/src/components/demos/button-demo.svelte b/src/components/demos/button-demo.svelte
index 759809d2c..21111aa73 100644
--- a/src/components/demos/button-demo.svelte
+++ b/src/components/demos/button-demo.svelte
@@ -5,7 +5,7 @@
 <Button.Root
 	class="inline-flex h-12 items-center justify-center rounded-input bg-dark
 	px-[21px] text-[15px] font-semibold text-background shadow-mini
-	transition-all hover:bg-dark/95 active:scale-98 "
+	hover:bg-dark/95 active:scale-98 active:transition-all"
 >
 	Unlimited
 </Button.Root>
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index d8dcd171d..5a869efd8 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -16,13 +16,13 @@
 >
 	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
-			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background sq-10 hover:bg-muted active:scale-98 active:transition-all"
 		>
 			<CaretLeft class="sq-6" />
 		</Calendar.PrevButton>
 		<Calendar.Heading class="text-[15px] font-medium" />
 		<Calendar.NextButton
-			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background sq-10 hover:bg-muted active:scale-98 active:transition-all"
 		>
 			<CaretRight class="sq-6" />
 		</Calendar.NextButton>
@@ -54,10 +54,10 @@
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 hover:border-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
+										class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent bg-transparent p-0 text-sm font-normal text-foreground sq-10 hover:border-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
 									>
 										<div
-											class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
+											class="absolute top-[5px] hidden rounded-full bg-foreground sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 										/>
 										{date.day}
 									</Calendar.Date>
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 9a4efc61e..b79dc0c37 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -24,7 +24,7 @@
 		transition={flyAndScale}
 	>
 		<ContextMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<PencilSimpleLine class="mr-2 text-foreground-alt sq-5" />
@@ -45,7 +45,7 @@
 		</ContextMenu.Item>
 		<ContextMenu.Sub>
 			<ContextMenu.SubTrigger
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
 					<PlusCircle class="mr-2 text-foreground-alt sq-5" />
@@ -70,34 +70,34 @@
 				sideOffset={10}
 			>
 				<ContextMenu.Item
-					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
 					Header
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
 					Paragraph
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
 					Codeblock
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
 					List
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
 					Task
 				</ContextMenu.Item>
 			</ContextMenu.SubContent>
 		</ContextMenu.Sub>
 		<ContextMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<CopySimple class="mr-2 text-foreground-alt sq-5" />
@@ -118,7 +118,7 @@
 		</ContextMenu.Item>
 		<ContextMenu.Separator class="-mx-1 my-1 block h-px bg-muted" />
 		<ContextMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<Trash class="mr-2 text-foreground-alt sq-5" />
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 51e0168bf..aa9a56ff9 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -27,7 +27,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<UserCircle class="mr-2 text-foreground-alt sq-4" />
+				<UserCircle class="mr-2 text-foreground-alt sq-5" />
 				Profile
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -47,7 +47,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<Cardholder class="mr-2 text-foreground-alt sq-4" />
+				<Cardholder class="mr-2 text-foreground-alt sq-5" />
 				Billing
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -67,7 +67,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<GearSix class="mr-2 text-foreground-alt sq-4" />
+				<GearSix class="mr-2 text-foreground-alt sq-5" />
 				Settings
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -89,11 +89,11 @@
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
-					<UserCirclePlus class="mr-2 text-foreground-alt sq-4" />
+					<UserCirclePlus class="mr-2 text-foreground-alt sq-5" />
 					Invite users
 				</div>
 				<div class="ml-auto flex items-center gap-px">
-					<CaretRight class="text-foreground-alt sq-4" />
+					<CaretRight class="text-foreground-alt sq-5" />
 				</div>
 			</DropdownMenu.SubTrigger>
 			<DropdownMenu.SubContent
@@ -113,7 +113,7 @@
 							class="aspect-square h-full w-full"
 						/>
 						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xxs"
 							>HJ</Avatar.Fallback
 						>
 					</Avatar.Root>
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index b5cfa4b06..967c3c6ec 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -27,7 +27,7 @@
 	>
 		{#each themes as theme}
 			<Select.Item
-				class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50 data-[selected]:bg-muted"
+				class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50"
 				value={theme.value}
 				label={theme.label}
 			>
diff --git a/src/components/demos/slider-demo.svelte b/src/components/demos/slider-demo.svelte
index 5fc83d729..23838080f 100644
--- a/src/components/demos/slider-demo.svelte
+++ b/src/components/demos/slider-demo.svelte
@@ -4,7 +4,7 @@
 	let value = [50];
 </script>
 
-<div class="w-full md:max-w-[75%]">
+<div class="w-full md:max-w-[280px]">
 	<Slider.Root
 		bind:value
 		class="relative flex w-full touch-none select-none items-center"
diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index 27fc3890e..030bba5db 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/src/components/demos/toggle-demo.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div
-	class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-muted bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
+	class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
 >
 	<div
 		class="text-end font-alt text-[19px] tracking-[13.87px] {unlocked
diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index eb928a494..0bc57c091 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/src/components/demos/toggle-group-demo.svelte
@@ -8,7 +8,7 @@
 <ToggleGroup.Root
 	bind:value
 	type="multiple"
-	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-muted bg-background px-[5px] py-1 shadow-mini"
+	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background px-[5px] py-1 shadow-mini"
 >
 	<ToggleGroup.Item
 		aria-label="toggle bold"