diff --git a/src/lib/components/ui/button/button.module.scss b/src/lib/components/ui/button/button.module.scss
index bd55d1c1..0ddcc273 100644
--- a/src/lib/components/ui/button/button.module.scss
+++ b/src/lib/components/ui/button/button.module.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'themes/spacing';
 @use 'themes/mixins';
 @use 'themes/colors';
@@ -6,445 +7,447 @@
 @use 'themes/layout';
 
 .button {
-  align-items: center;
-  background: var(--button-bg);
-  border: 2px solid transparent;
-  border-radius: layout.$input-corner;
-  color: var(--button-text);
-  display: inline-flex;
-  font-size: typography.$font-button;
-  font-weight: typography.$normal;
-  justify-content: center;
-  gap: 6px;
-  transition: 0.18s opacity ease-in-out;
-  user-select: none;
-  transition: background-color 0.18s ease-out, color 0.18s ease-out;
-  cursor: pointer;
-  outline: none;
-  position: relative;
-  white-space: nowrap;
-  text-decoration: none;
-  line-height: 1;
+	align-items: center;
+	background: var(--button-bg);
+	border: 2px solid transparent;
+	border-radius: layout.$input-corner;
+	color: var(--button-text);
+	display: inline-flex;
+	font-size: typography.$font-button;
+	font-weight: typography.$normal;
+	justify-content: center;
+	gap: 6px;
+	transition: 0.18s opacity ease-in-out;
+	user-select: none;
+	transition:
+		background-color 0.18s ease-out,
+		color 0.18s ease-out;
+	cursor: pointer;
+	outline: none;
+	position: relative;
+	white-space: nowrap;
+	text-decoration: none;
+	line-height: 1;
 
-  .text {
-    align-items: center;
-    color: inherit;
-    display: flex;
-  }
+	.text {
+		align-items: center;
+		color: inherit;
+		display: flex;
+	}
 
-  &:hover,
-  &.blended:hover,
-  &.blended.active {
-    background: var(--button-bg-hover);
-    cursor: pointer;
-    color: var(--button-text-hover);
+	&:hover,
+	&.blended:hover,
+	&.blended.active {
+		background: var(--button-bg-hover);
+		cursor: pointer;
+		color: var(--button-text-hover);
 
-    .accessory svg {
-      fill: var(--button-text-hover);
-    }
+		.accessory svg {
+			fill: var(--button-text-hover);
+		}
 
-    .accessory svg.stroke {
-      fill: none;
-      stroke: var(--button-text-hover);
-    }
-  }
+		.accessory svg.stroke {
+			fill: none;
+			stroke: var(--button-text-hover);
+		}
+	}
 
-  &:disabled {
-    background-color: var(--button-bg-disabled);
-    color: var(--button-text-disabled);
-    cursor: not-allowed;
-    opacity: 0.5;
+	&:disabled {
+		background-color: var(--button-bg-disabled);
+		color: var(--button-text-disabled);
+		cursor: not-allowed;
+		opacity: 0.5;
 
-    &:hover {
-      background-color: var(--button-bg-disabled);
-      color: var(--button-text-disabled);
-      cursor: not-allowed;
-    }
-  }
+		&:hover {
+			background-color: var(--button-bg-disabled);
+			color: var(--button-text-disabled);
+			cursor: not-allowed;
+		}
+	}
 
-  &:focus-visible {
-    border: 2px solid colors.$blue;
-    outline: none;
-  }
+	&:focus-visible {
+		border: 2px solid colors.$blue;
+		outline: none;
+	}
 
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-  }
+	&:active:not(:disabled) {
+		transform: translateY(1px);
+	}
 }
 
 // Variants
 .primary {
-  background-color: var(--button-contained-bg);
-  color: var(--button-text);
+	background-color: var(--button-contained-bg);
+	color: var(--button-text);
 
-  &:hover:not(:disabled) {
-    background-color: var(--button-contained-bg-hover);
-  }
+	&:hover:not(:disabled) {
+		background-color: var(--button-contained-bg-hover);
+	}
 }
 
 .secondary {
-  background-color: var(--button-bg);
-  color: var(--button-text);
-  border: 1px solid var(--separator-bg);
+	background-color: var(--button-bg);
+	color: var(--button-text);
+	border: 1px solid var(--separator-bg);
 
-  &:hover:not(:disabled) {
-    background-color: var(--button-bg-hover);
-    color: var(--button-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background-color: var(--button-bg-hover);
+		color: var(--button-text-hover);
+	}
 }
 
 .ghost {
-  background-color: transparent;
-  color: var(--text-secondary);
+	background-color: transparent;
+	color: var(--text-secondary);
 
-  &:hover:not(:disabled) {
-    background-color: var(--button-bg);
-    color: var(--text-primary);
-  }
+	&:hover:not(:disabled) {
+		background-color: var(--button-bg);
+		color: var(--text-primary);
+	}
 }
 
 .text {
-  background-color: transparent;
-  color: var(--accent-blue);
-  padding: 0;
-  min-height: auto;
+	background-color: transparent;
+	color: var(--accent-blue);
+	padding: 0;
+	min-height: auto;
 
-  &:hover:not(:disabled) {
-    color: var(--accent-blue-focus);
-    text-decoration: underline;
-  }
+	&:hover:not(:disabled) {
+		color: var(--accent-blue-focus);
+		text-decoration: underline;
+	}
 
-  &:active:not(:disabled) {
-    transform: none;
-  }
+	&:active:not(:disabled) {
+		transform: none;
+	}
 }
 
 .blended {
-  background: transparent;
+	background: transparent;
 
-  &:hover:not(:disabled) {
-    background: var(--button-bg-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--button-bg-hover);
+	}
 }
 
 .bound {
-  background: var(--button-contained-bg);
+	background: var(--button-contained-bg);
 
-  &:hover:not(:disabled) {
-    background: var(--button-contained-bg-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--button-contained-bg-hover);
+	}
 
-  &.save:hover .accessory svg {
-    fill: colors.$save-red;
-    stroke: colors.$save-red;
-  }
+	&.save:hover .accessory svg {
+		fill: colors.$save-red;
+		stroke: colors.$save-red;
+	}
 
-  &.save {
-    color: colors.$save-red;
+	&.save {
+		color: colors.$save-red;
 
-    &.active .accessory svg {
-      fill: colors.$save-red;
-      stroke: colors.$save-red;
-    }
+		&.active .accessory svg {
+			fill: colors.$save-red;
+			stroke: colors.$save-red;
+		}
 
-    &:hover {
-      color: darken(colors.$save-red, 30);
+		&:hover {
+			color: color.adjust(colors.$save-red, $lightness: -30%);
 
-      .accessory svg {
-        fill: darken(colors.$save-red, 30);
-        stroke: darken(colors.$save-red, 30);
-      }
-    }
-  }
+			.accessory svg {
+				fill: color.adjust(colors.$save-red, $lightness: -30%);
+				stroke: color.adjust(colors.$save-red, $lightness: -30%);
+			}
+		}
+	}
 }
 
 .bound.blended {
-  background: var(--dialog-bg);
+	background: var(--dialog-bg);
 
-  &:hover:not(:disabled) {
-    background: var(--input-bound-bg);
-  }
+	&:hover:not(:disabled) {
+		background: var(--input-bound-bg);
+	}
 }
 
 .floating {
-  pointer-events: none;
-  position: absolute;
-  opacity: 0;
-  z-index: 99;
+	pointer-events: none;
+	position: absolute;
+	opacity: 0;
+	z-index: 99;
 }
 
 .destructive {
-  background: colors.$error;
-  color: white;
+	background: colors.$error;
+	color: white;
 
-  &:hover:not(:disabled) {
-    background: darken(colors.$error, 15);
-  }
+	&:hover:not(:disabled) {
+		background: color.adjust(colors.$error, $lightness: -15%);
+	}
 
-  @include mixins.breakpoint(phone) {
-    background: colors.$error;
-    color: colors.$grey-100;
+	@include mixins.breakpoint(phone) {
+		background: colors.$error;
+		color: colors.$grey-100;
 
-    .accessory svg {
-      fill: colors.$grey-100;
-    }
-  }
+		.accessory svg {
+			fill: colors.$grey-100;
+		}
+	}
 }
 
 .notice {
-  background-color: var(--notice-button-bg);
-  color: var(--notice-button-text);
+	background-color: var(--notice-button-bg);
+	color: var(--notice-button-text);
 
-  &:hover:not(:disabled) {
-    background-color: var(--notice-button-bg-hover);
-  }
+	&:hover:not(:disabled) {
+		background-color: var(--notice-button-bg-hover);
+	}
 }
 
 .modal {
-  &:hover:not(:disabled) {
-    background: colors.$grey-90;
-  }
+	&:hover:not(:disabled) {
+		background: colors.$grey-90;
+	}
 
-  &.destructive {
-    color: colors.$error;
+	&.destructive {
+		color: colors.$error;
 
-    &:hover:not(:disabled) {
-      color: darken(colors.$error, 10);
-    }
-  }
+		&:hover:not(:disabled) {
+			color: color.adjust(colors.$error, $lightness: -10%);
+		}
+	}
 }
 
 // Modifiers
 .full {
-  width: 100%;
+	width: 100%;
 }
 
 .fullWidth {
-  width: 100%;
+	width: 100%;
 }
 
 .grow {
-  flex-grow: 1;
+	flex-grow: 1;
 }
 
 .no-shrink {
-  flex-shrink: 0;
+	flex-shrink: 0;
 }
 
 .active {
-  background: var(--button-bg-hover);
-  color: var(--button-text-hover);
+	background: var(--button-bg-hover);
+	color: var(--button-text-hover);
 }
 
 // Sizes
 .icon {
-  aspect-ratio: 1 / 1;
-  padding: spacing.$unit * 1.5;
-  height: 44px;
-  width: 44px;
+	aspect-ratio: 1 / 1;
+	padding: spacing.$unit * 1.5;
+	height: 44px;
+	width: 44px;
 
-  .text {
-    display: none;
+	.text {
+		display: none;
 
-    @include mixins.breakpoint(tablet) {
-      display: block;
-    }
+		@include mixins.breakpoint(tablet) {
+			display: block;
+		}
 
-    @include mixins.breakpoint(phone) {
-      display: block;
-    }
-  }
+		@include mixins.breakpoint(phone) {
+			display: block;
+		}
+	}
 }
 
 .small {
-  padding: spacing.$unit spacing.$unit-2x;
-  font-size: typography.$font-small;
-  min-height: 28px;
+	padding: spacing.$unit spacing.$unit-2x;
+	font-size: typography.$font-small;
+	min-height: 28px;
 
-  &.iconOnly {
-    padding: spacing.$unit;
-    width: 28px;
-    height: 28px;
-  }
+	&.iconOnly {
+		padding: spacing.$unit;
+		width: 28px;
+		height: 28px;
+	}
 }
 
 .medium {
-  height: spacing.$unit * 5.5;
-  padding: (spacing.$unit * 1.5) spacing.$unit-2x;
-  font-size: typography.$font-regular;
+	height: spacing.$unit * 5.5;
+	padding: (spacing.$unit * 1.5) spacing.$unit-2x;
+	font-size: typography.$font-regular;
 
-  &.iconOnly {
-    padding: spacing.$unit * 1.5;
-    width: 44px;
-    height: 44px;
-  }
+	&.iconOnly {
+		padding: spacing.$unit * 1.5;
+		width: 44px;
+		height: 44px;
+	}
 }
 
 .large {
-  font-size: typography.$font-large;
-  padding: spacing.$unit-2x spacing.$unit-3x;
-  min-height: 52px;
+	font-size: typography.$font-large;
+	padding: spacing.$unit-2x spacing.$unit-3x;
+	min-height: 52px;
 
-  &.iconOnly {
-    padding: spacing.$unit-2x;
-    width: 52px;
-    height: 52px;
-  }
+	&.iconOnly {
+		padding: spacing.$unit-2x;
+		width: 52px;
+		height: 52px;
+	}
 }
 
 // Special features
 .save {
-  .accessory svg {
-    fill: none;
-    stroke: var(--button-text);
-  }
+	.accessory svg {
+		fill: none;
+		stroke: var(--button-text);
+	}
 
-  &.saved {
-    color: colors.$save-red;
+	&.saved {
+		color: colors.$save-red;
 
-    .accessory svg {
-      fill: colors.$save-red;
-      stroke: colors.$save-red;
-    }
+		.accessory svg {
+			fill: colors.$save-red;
+			stroke: colors.$save-red;
+		}
 
-    &:hover:not(:disabled) {
-      color: colors.$save-red;
+		&:hover:not(:disabled) {
+			color: colors.$save-red;
 
-      .accessory svg {
-        fill: none;
-        stroke: colors.$save-red;
-      }
-    }
-  }
+			.accessory svg {
+				fill: none;
+				stroke: colors.$save-red;
+			}
+		}
+	}
 
-  &:hover:not(:disabled) {
-    color: colors.$save-red;
+	&:hover:not(:disabled) {
+		color: colors.$save-red;
 
-    .accessory svg {
-      fill: colors.$save-red;
-      stroke: colors.$save-red;
-    }
-  }
+		.accessory svg {
+			fill: colors.$save-red;
+			stroke: colors.$save-red;
+		}
+	}
 }
 
 // Element colors
 .wind {
-  background: var(--wind-bg);
-  color: var(--wind-text-contrast);
+	background: var(--wind-bg);
+	color: var(--wind-text-contrast);
 
-  &:hover:not(:disabled) {
-    background: var(--wind-bg-hover);
-    color: var(--wind-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--wind-bg-hover);
+		color: var(--wind-text-hover);
+	}
 }
 
 .fire {
-  background: var(--fire-bg);
-  color: var(--fire-text-contrast);
+	background: var(--fire-bg);
+	color: var(--fire-text-contrast);
 
-  &:hover:not(:disabled) {
-    background: var(--fire-bg-hover);
-    color: var(--fire-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--fire-bg-hover);
+		color: var(--fire-text-hover);
+	}
 }
 
 .water {
-  background: var(--water-bg);
-  color: var(--water-text-contrast);
+	background: var(--water-bg);
+	color: var(--water-text-contrast);
 
-  &:hover:not(:disabled) {
-    background: var(--water-bg-hover);
-    color: var(--water-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--water-bg-hover);
+		color: var(--water-text-hover);
+	}
 }
 
 .earth {
-  background: var(--earth-bg);
-  color: var(--earth-text-contrast);
+	background: var(--earth-bg);
+	color: var(--earth-text-contrast);
 
-  &:hover:not(:disabled) {
-    background: var(--earth-bg-hover);
-    color: var(--earth-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--earth-bg-hover);
+		color: var(--earth-text-hover);
+	}
 }
 
 .dark {
-  background: var(--dark-bg);
-  color: var(--dark-text-contrast);
+	background: var(--dark-bg);
+	color: var(--dark-text-contrast);
 
-  &:hover:not(:disabled) {
-    background: var(--dark-bg-hover);
-    color: var(--dark-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--dark-bg-hover);
+		color: var(--dark-text-hover);
+	}
 }
 
 .light {
-  background: var(--light-bg);
-  color: var(--light-text-contrast);
+	background: var(--light-bg);
+	color: var(--light-text-contrast);
 
-  &:hover:not(:disabled) {
-    background: var(--light-bg-hover);
-    color: var(--light-text-hover);
-  }
+	&:hover:not(:disabled) {
+		background: var(--light-bg-hover);
+		color: var(--light-text-hover);
+	}
 }
 
 // Icon-only specific
 .iconOnly {
-  gap: 0;
-  aspect-ratio: 1;
+	gap: 0;
+	aspect-ratio: 1;
 }
 
 // Accessories
 .accessory {
-  $dimension: spacing.$unit-2x;
+	$dimension: spacing.$unit-2x;
 
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 
-  &.arrow {
-    margin-top: spacing.$unit-half;
-  }
+	&.arrow {
+		margin-top: spacing.$unit-half;
+	}
 
-  &.flipped {
-    transform: rotate(180deg);
-  }
+	&.flipped {
+		transform: rotate(180deg);
+	}
 
-  svg {
-    fill: var(--button-text);
-    height: $dimension;
-    width: $dimension;
+	svg {
+		fill: var(--button-text);
+		height: $dimension;
+		width: $dimension;
 
-    &.stroke {
-      fill: none;
-      stroke: var(--button-text);
-    }
+		&.stroke {
+			fill: none;
+			stroke: var(--button-text);
+		}
 
-    &.Add {
-      height: 18px;
-      width: 18px;
-    }
+		&.Add {
+			height: 18px;
+			width: 18px;
+		}
 
-    &.Check {
-      height: 22px;
-      width: 22px;
-    }
-  }
+		&.Check {
+			height: 22px;
+			width: 22px;
+		}
+	}
 
-  &.check svg {
-    margin-top: 1px;
-    height: 14px;
-    width: auto;
-  }
+	&.check svg {
+		margin-top: 1px;
+		height: 14px;
+		width: auto;
+	}
 
-  &.settings svg {
-    height: 13px;
-    width: 13px;
-  }
+	&.settings svg {
+		height: 13px;
+		width: 13px;
+	}
 }
 
 // CSS modules workaround for floating button behavior
 :global(.unit:hover) .floating,
 :global(.unit) .floating.active {
-  pointer-events: initial;
-  opacity: 1;
-}
\ No newline at end of file
+	pointer-events: initial;
+	opacity: 1;
+}
diff --git a/src/lib/components/ui/checkbox/Checkbox.svelte b/src/lib/components/ui/checkbox/Checkbox.svelte
index 3f88a28b..c8ef5139 100644
--- a/src/lib/components/ui/checkbox/Checkbox.svelte
+++ b/src/lib/components/ui/checkbox/Checkbox.svelte
@@ -1,8 +1,8 @@
 <!-- Checkbox Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 	import { Check, Minus } from 'lucide-svelte';
-	import { cn } from '$lib/utils.js';
 	import styles from './checkbox.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -31,9 +31,11 @@
 		...restProps
 	}: Props = $props();
 
-	$: if (onCheckedChange && checked !== undefined) {
-		onCheckedChange(checked);
-	}
+	$effect(() => {
+		if (onCheckedChange && checked !== undefined) {
+			onCheckedChange(checked);
+		}
+	});
 
 	const sizeClasses = {
 		small: styles.small,
@@ -53,12 +55,7 @@
 	{required}
 	{name}
 	{value}
-	class={cn(
-		styles.checkbox,
-		sizeClasses[size],
-		variantClasses[variant],
-		className
-	)}
+	class={`${styles.checkbox} ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
 	{...restProps}
 >
 	<CheckboxPrimitive.Indicator class={styles.indicator}>
diff --git a/src/lib/components/ui/segmented-control/Segment.svelte b/src/lib/components/ui/segmented-control/Segment.svelte
index c197ef78..66fe529b 100644
--- a/src/lib/components/ui/segmented-control/Segment.svelte
+++ b/src/lib/components/ui/segmented-control/Segment.svelte
@@ -1,7 +1,7 @@
 <!-- Segment Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
 	import styles from './segment.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -13,16 +13,20 @@
 	let {
 		value,
 		class: className,
-		children,
+		children: content,
 		...restProps
 	}: Props = $props();
 </script>
 
 <RadioGroupPrimitive.Item
 	{value}
-	class={cn(styles.segment, className)}
+	class={`${styles.segment} ${className || ''}`}
 	{...restProps}
 >
-	<RadioGroupPrimitive.ItemIndicator class={styles.indicator} />
-	<span class={styles.label}>{children}</span>
+	{#snippet children({ checked })}
+		{#if checked}
+			<div class={styles.indicator}></div>
+		{/if}
+		<span class={styles.label}>{@render content?.()}</span>
+	{/snippet}
 </RadioGroupPrimitive.Item>
\ No newline at end of file
diff --git a/src/lib/components/ui/segmented-control/SegmentedControl.svelte b/src/lib/components/ui/segmented-control/SegmentedControl.svelte
index 05f99e52..d641cdf1 100644
--- a/src/lib/components/ui/segmented-control/SegmentedControl.svelte
+++ b/src/lib/components/ui/segmented-control/SegmentedControl.svelte
@@ -1,7 +1,7 @@
 <!-- SegmentedControl Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
 	import styles from './segmented-control.module.scss';
 	import type { HTMLDivAttributes } from 'svelte/elements';
 
@@ -29,9 +29,11 @@
 		...restProps
 	}: Props = $props();
 
-	$: if (onValueChange && value !== undefined) {
-		onValueChange(value);
-	}
+	$effect(() => {
+		if (onValueChange && value !== undefined) {
+			onValueChange(value);
+		}
+	});
 
 	const variantClasses = {
 		default: '',
@@ -49,21 +51,12 @@
 	};
 </script>
 
-<div class={cn(styles.wrapper, wrapperClass)}>
+<div class={`${styles.wrapper} ${wrapperClass || ''}`}>
 	<RadioGroupPrimitive.Root
 		bind:value
-		class={cn(
-			styles.segmentedControl,
-			variantClasses[variant],
-			element && elementClasses[element],
-			{
-				[styles.grow]: grow,
-				[styles.gap]: gap
-			},
-			className
-		)}
+		class={`${styles.segmentedControl} ${variantClasses[variant]} ${element ? elementClasses[element] : ''} ${grow ? styles.grow : ''} ${gap ? styles.gap : ''} ${className || ''}`}
 		{...restProps}
 	>
-		{children}
+		{@render children?.()}
 	</RadioGroupPrimitive.Root>
 </div>
\ No newline at end of file
diff --git a/src/lib/components/ui/switch/Switch.svelte b/src/lib/components/ui/switch/Switch.svelte
index ecb9b317..fbf48637 100644
--- a/src/lib/components/ui/switch/Switch.svelte
+++ b/src/lib/components/ui/switch/Switch.svelte
@@ -1,7 +1,7 @@
 <!-- Switch Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
 	import styles from './switch.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -28,9 +28,11 @@
 		...restProps
 	}: Props = $props();
 
-	$: if (onCheckedChange && checked !== undefined) {
-		onCheckedChange(checked);
-	}
+	$effect(() => {
+		if (onCheckedChange && checked !== undefined) {
+			onCheckedChange(checked);
+		}
+	});
 </script>
 
 <SwitchPrimitive.Root
@@ -39,8 +41,8 @@
 	{required}
 	{name}
 	{value}
-	class={cn(styles.switch, className)}
+	class={`${styles.switch} ${className || ''}`}
 	{...restProps}
 >
-	<SwitchPrimitive.Thumb class={cn(styles.thumb, thumbClass)} />
+	<SwitchPrimitive.Thumb class={`${styles.thumb} ${thumbClass || ''}`} />
 </SwitchPrimitive.Root>
\ No newline at end of file