refactor: migrate UI components to inline styles

src/lib/components/Button.module.scss

@@ -1,144 +0,0 @@
-@use '../../themes/spacing';
-@use '../../themes/mixins';
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: spacing.$unit;
-  font-family: var(--font-family);
-  font-weight: 500;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  outline: none;
-  position: relative;
-  white-space: nowrap;
-  text-decoration: none;
-  line-height: 1;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px var(--accent-blue-focus);
-  }
-}
-
-// Variants
-.primary {
-  background-color: var(--button-contained-bg);
-  color: var(--button-text);
-
-  &:hover:not(:disabled) {
-    background-color: var(--button-contained-bg-hover);
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-}
-
-.secondary {
-  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);
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-}
-
-.ghost {
-  background-color: transparent;
-  color: var(--text-secondary);
-
-  &:hover:not(:disabled) {
-    background-color: var(--button-bg);
-    color: var(--text-primary);
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-}
-
-.text {
-  background-color: transparent;
-  color: var(--accent-blue);
-  padding: 0;
-  min-height: auto;
-
-  &:hover:not(:disabled) {
-    color: var(--accent-blue-focus);
-    text-decoration: underline;
-  }
-
-  &:active:not(:disabled) {
-    transform: none;
-  }
-}
-
-// Sizes
-.small {
-  padding: spacing.$unit spacing.$unit-2x;
-  font-size: 1.2rem;
-  min-height: 28px;
-
-  &.iconOnly {
-    padding: spacing.$unit;
-    width: 28px;
-    height: 28px;
-  }
-}
-
-.medium {
-  padding: spacing.$unit-2x spacing.$unit-3x;
-  font-size: 1.4rem;
-  min-height: 36px;
-
-  &.iconOnly {
-    padding: spacing.$unit-2x;
-    width: 36px;
-    height: 36px;
-  }
-}
-
-.large {
-  padding: spacing.$unit-2x spacing.$unit-4x;
-  font-size: 1.6rem;
-  min-height: 44px;
-
-  &.iconOnly {
-    padding: spacing.$unit-2x;
-    width: 44px;
-    height: 44px;
-  }
-}
-
-// Icon positioning
-.iconLeft {
-  flex-direction: row;
-}
-
-.iconRight {
-  flex-direction: row-reverse;
-}
-
-.iconOnly {
-  gap: 0;
-  aspect-ratio: 1;
-}
-
-// Full width
-.fullWidth {
-  width: 100%;
-}

src/lib/components/Button.svelte

@@ -1,8 +0,0 @@
-<!-- Re-export the enhanced Button component from UI directory -->
-<script lang="ts">
-  import Button from './ui/button/Button.svelte';
-
-  const props = $props();
-</script>
-
-<Button {...props} />

src/lib/components/ui/ContextMenu.svelte

@@ -30,6 +30,7 @@
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/layout' as *;
 	@use '$src/themes/typography' as *;
+	@use '$src/themes/effects' as *;
 
 	:global(.context-menu) {
 		background: var(--app-bg, white);
@@ -37,9 +38,9 @@
 		border-radius: $card-corner;
 		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 		padding: $unit-half;
-		min-width: 180px;
+		min-width: calc($unit * 22.5);
 		z-index: 200;
-		animation: slideIn 0.15s ease-out;
+		animation: slideIn $duration-quick ease-out;
 	}
 
 	:global(.context-menu-item) {
@@ -51,7 +52,7 @@
 		display: flex;
 		align-items: center;
 		gap: $unit;
-		transition: background 0.2s;
+		@include smooth-transition($duration-standard, background);
 
 		&:hover {
 			background: var(--button-contained-bg-hover, #f5f5f5);
@@ -76,7 +77,7 @@
 	@keyframes slideIn {
 		from {
 			opacity: 0;
-			transform: translateY(-2px);
+			transform: translateY(-$unit-fourth);
 		}
 		to {
 			opacity: 1;

src/lib/components/ui/Dialog.svelte

@@ -59,13 +59,14 @@
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/layout' as *;
 	@use '$src/themes/typography' as *;
+	@use '$src/themes/effects' as *;
 
 	:global(.dialog-overlay) {
 		position: fixed;
 		inset: 0;
 		background: rgba(0, 0, 0, 0.5);
 		z-index: 100;
-		animation: fade-in 0.15s ease-out;
+		animation: fade-in $duration-quick ease-out;
 	}
 
 	:global(.dialog-content) {
@@ -80,7 +81,7 @@
 		max-height: 90vh;
 		width: 500px;
 		z-index: 101;
-		animation: slide-up 0.2s ease-out;
+		animation: slide-up $duration-standard ease-out;
 		display: flex;
 		flex-direction: column;
 	}
@@ -105,18 +106,18 @@
 		position: absolute;
 		right: $unit;
 		top: $unit;
-		width: 32px;
+		width: $unit-4x;
-		height: 32px;
+		height: $unit-4x;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		border: none;
 		background: transparent;
-		font-size: 24px;
+		font-size: $unit-3x;
 		color: var(--text-secondary);
 		cursor: pointer;
 		border-radius: $item-corner-small;
-		transition: all 0.2s;
+		@include smooth-transition($duration-standard, all);
 
 		&:hover {
 			background: var(--button-contained-bg-hover);

src/lib/components/ui/Tooltip.svelte

@@ -40,20 +40,20 @@
 </TooltipBase.Root>
 
 <style lang="scss">
-	@use '$src/themes/layout';
+	@use '$src/themes/layout' as *;
-	@use '$src/themes/typography';
+	@use '$src/themes/typography' as *;
-	@use '$src/themes/spacing';
+	@use '$src/themes/spacing' as *;
 
 	:global(.tooltip-content) {
 		background: var(--tooltip-bg, #2a2a2a);
 		color: var(--tooltip-text, white);
-		padding: spacing.$unit-half spacing.$unit;
+		padding: $unit-half $unit;
-		border-radius: layout.$item-corner-small;
+		border-radius: $item-corner-small;
-		font-size: typography.$font-small;
+		font-size: $font-small;
-		font-weight: typography.$medium;
+		font-weight: $medium;
 		z-index: 1000;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-		max-width: 250px;
+		max-width: calc($unit * 31.25);
 		line-height: 1.4;
 	}
 </style>

src/lib/components/ui/button/Button.svelte

@@ -1,57 +1,74 @@
+<!-- Button Component -->
+<svelte:options runes={true} />
 <script lang="ts">
-  import { Button } from 'bits-ui';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
   import Icon from '../../Icon.svelte';
-  import styles from './button.module.scss';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  interface Props extends HTMLButtonAttributes {
+  type BaseProps = {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'unstyled' | 'blended' | 'bound' | 'destructive' | 'notice' | 'modal';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'blended' | 'bound' | 'destructive' | 'notice' | 'modal';
-    size?: 'icon' | 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'icon';
-    element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | null;
+    element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light';
     active?: boolean;
     floating?: boolean;
     save?: boolean;
     saved?: boolean;
+    fullWidth?: boolean;
+    full?: boolean; // Alias for fullWidth
+    grow?: boolean;
+    noShrink?: boolean;
+    iconOnly?: boolean;
+    class?: string;
+    children?: Snippet;
+    leftAccessory?: Snippet;
+    rightAccessory?: Snippet;
+    // Legacy icon props
+    icon?: string;
     leftIcon?: string;
     rightIcon?: string;
+    iconPosition?: 'left' | 'right';
     leftAccessoryClass?: string;
     rightAccessoryClass?: string;
-    // Legacy props for compatibility
+  };
-    icon?: string;
-    iconPosition?: 'left' | 'right';
-    iconOnly?: boolean;
-    fullWidth?: boolean;
-    href?: string;
-    children?: any;
-  }
 
-  const {
+  type ButtonProps = BaseProps & HTMLButtonAttributes & { href?: never };
+  type LinkProps = BaseProps & HTMLAnchorAttributes & { href: string };
+
+  type Props = ButtonProps | LinkProps;
+
+  let {
     variant = 'primary',
     size = 'medium',
-    element = null,
+    element,
     active = false,
     floating = false,
     save = false,
     saved = false,
+    fullWidth = false,
+    full = false,
+    grow = false,
+    noShrink = false,
+    iconOnly = false,
+    class: className,
+    children,
+    leftAccessory,
+    rightAccessory,
+    // Legacy icon props
+    icon,
     leftIcon,
     rightIcon,
+    iconPosition = 'left',
     leftAccessoryClass = '',
     rightAccessoryClass = '',
-    // Legacy props
-    icon,
-    iconPosition = 'left',
-    iconOnly = false,
-    fullWidth = false,
-    href,
-    disabled = false,
-    class: className = '',
-    children,
     ...restProps
   }: Props = $props();
 
-  // Handle legacy icon prop
+  const isLink = $derived('href' in restProps);
-  const effectiveLeftIcon = leftIcon || (icon && iconPosition === 'left' ? icon : undefined);
+  const isFullWidth = $derived(fullWidth || full);
-  const effectiveRightIcon = rightIcon || (icon && iconPosition === 'right' ? icon : undefined);
+
+  // Handle legacy icon props
+  const effectiveLeftIcon = $derived(leftIcon || (icon && iconPosition === 'left' ? icon : undefined));
+  const effectiveRightIcon = $derived(rightIcon || (icon && iconPosition === 'right' ? icon : undefined));
 
   const iconSizes = {
     icon: 16,
@@ -60,54 +77,531 @@
     large: 20
   };
 
-  const classes = variant === 'unstyled'
+  const buttonClass = $derived(
-    ? className
+    `button ${variant || ''} ${size || ''} ${element ? element : ''} ${active ? 'active' : ''} ${floating ? 'floating' : ''} ${save ? 'save' : ''} ${saved ? 'saved' : ''} ${isFullWidth ? 'full' : ''} ${grow ? 'grow' : ''} ${noShrink ? 'no-shrink' : ''} ${iconOnly ? 'iconOnly' : ''} ${className || ''}`.trim()
-    : [
+  );
-        styles.button,
-        styles[variant],
-        styles[size],
-        element && styles[element],
-        active && styles.active,
-        floating && styles.floating,
-        save && styles.save,
-        saved && styles.saved,
-        iconOnly && styles.iconOnly,
-        fullWidth && styles.fullWidth,
-        className
-      ].filter(Boolean).join(' ');
 
-  const leftAccessoryClasses = [
+  const leftAccessoryClasses = $derived(
-    styles.accessory,
+    `accessory ${leftAccessoryClass}`.trim()
-    styles.left,
+  );
-    leftAccessoryClass
-  ].filter(Boolean).join(' ');
 
-  const rightAccessoryClasses = [
+  const rightAccessoryClasses = $derived(
-    styles.accessory,
+    `accessory arrow ${rightAccessoryClass}`.trim()
-    styles.right,
+  );
-    rightAccessoryClass
-  ].filter(Boolean).join(' ');
 </script>
 
-<Button.Root
+{#if isLink}
-  {href}
+  <a
-  {disabled}
+    class={buttonClass}
-  class={classes}
+    {...restProps}
-  {...restProps}
+  >
->
+    {#if leftAccessory}
-  {#if effectiveLeftIcon}
+      <span class={leftAccessoryClasses}>
-    <span class={leftAccessoryClasses}>
+        {@render leftAccessory()}
-      <Icon name={effectiveLeftIcon} size={iconSizes[size]} />
+      </span>
-    </span>
+    {:else if effectiveLeftIcon}
-  {/if}
+      <span class={leftAccessoryClasses}>
-  {#if !iconOnly && children}
+        <Icon name={effectiveLeftIcon} size={iconSizes[size]} />
-    <span class={styles.text}>
+      </span>
-      {@render children()}
+    {/if}
-    </span>
+    {#if children && !iconOnly}
-  {/if}
+      <span class="text">
-  {#if effectiveRightIcon}
+        {@render children()}
-    <span class={rightAccessoryClasses}>
+      </span>
-      <Icon name={effectiveRightIcon} size={iconSizes[size]} />
+    {/if}
-    </span>
+    {#if rightAccessory}
-  {/if}
+      <span class={rightAccessoryClasses}>
-</Button.Root>
+        {@render rightAccessory()}
+      </span>
+    {:else if effectiveRightIcon}
+      <span class={rightAccessoryClasses}>
+        <Icon name={effectiveRightIcon} size={iconSizes[size]} />
+      </span>
+    {/if}
+  </a>
+{:else}
+  <button
+    class={buttonClass}
+    {...restProps}
+  >
+    {#if leftAccessory}
+      <span class={leftAccessoryClasses}>
+        {@render leftAccessory()}
+      </span>
+    {:else if effectiveLeftIcon}
+      <span class={leftAccessoryClasses}>
+        <Icon name={effectiveLeftIcon} size={iconSizes[size]} />
+      </span>
+    {/if}
+    {#if children && !iconOnly}
+      <span class="text">
+        {@render children()}
+      </span>
+    {/if}
+    {#if rightAccessory}
+      <span class={rightAccessoryClasses}>
+        {@render rightAccessory()}
+      </span>
+    {:else if effectiveRightIcon}
+      <span class={rightAccessoryClasses}>
+        <Icon name={effectiveRightIcon} size={iconSizes[size]} />
+      </span>
+    {/if}
+  </button>
+{/if}
+
+<style lang="scss">
+@use 'sass:color';
+@use 'themes/spacing' as *;
+@use 'themes/mixins' as *;
+@use 'themes/colors' as *;
+@use 'themes/typography' as *;
+@use 'themes/effects' as *;
+@use 'themes/layout' as *;
+
+// Button base mixin - local to this component
+@mixin button-base {
+	align-items: center;
+	display: inline-flex;
+	justify-content: center;
+	gap: $unit-three-quarter; // 6px
+	cursor: pointer;
+	user-select: none;
+	text-decoration: none;
+	line-height: 1;
+	position: relative;
+	white-space: nowrap;
+	@include smooth-transition($duration-zoom, background-color, color);
+
+	&:active:not(:disabled) {
+		transform: translateY(1px);
+	}
+}
+
+.button {
+	@include button-base;
+	background: var(--button-bg);
+	border: 2px solid transparent;
+	border-radius: $input-corner;
+	color: var(--button-text);
+	font-size: $font-button;
+	font-weight: $normal;
+
+	.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);
+
+		.accessory svg {
+			fill: 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;
+
+		&:hover {
+			background-color: var(--button-bg-disabled);
+			color: var(--button-text-disabled);
+			cursor: not-allowed;
+		}
+	}
+
+	&:focus-visible {
+		@include focus-ring($blue);
+	}
+}
+
+// Variants
+.primary {
+	background-color: var(--button-contained-bg);
+	color: var(--button-text);
+
+	&: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);
+
+	&:hover:not(:disabled) {
+		background-color: var(--button-bg-hover);
+		color: var(--button-text-hover);
+	}
+}
+
+.ghost {
+	background-color: transparent;
+	color: var(--text-secondary);
+
+	&: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;
+
+	&:hover:not(:disabled) {
+		color: var(--accent-blue-focus);
+		text-decoration: underline;
+	}
+
+	&:active:not(:disabled) {
+		transform: none;
+	}
+}
+
+.blended {
+	background: transparent;
+
+	&:hover:not(:disabled) {
+		background: var(--button-bg-hover);
+	}
+}
+
+.bound {
+	background: var(--button-contained-bg);
+
+	&:hover:not(:disabled) {
+		background: var(--button-contained-bg-hover);
+	}
+
+	&.save:hover .accessory svg {
+		fill: $save-red;
+		stroke: $save-red;
+	}
+
+	&.save {
+		color: $save-red;
+
+		&.active .accessory svg {
+			fill: $save-red;
+			stroke: $save-red;
+		}
+
+		&:hover {
+			color: color.adjust($save-red, $lightness: -30%);
+
+			.accessory svg {
+				fill: color.adjust($save-red, $lightness: -30%);
+				stroke: color.adjust($save-red, $lightness: -30%);
+			}
+		}
+	}
+}
+
+.bound.blended {
+	background: var(--dialog-bg);
+
+	&:hover:not(:disabled) {
+		background: var(--input-bound-bg);
+	}
+}
+
+.floating {
+	pointer-events: none;
+	position: absolute;
+	opacity: 0;
+	z-index: 99;
+}
+
+.destructive {
+	background: $error;
+	color: white;
+
+	&:hover:not(:disabled) {
+		background: color.adjust($error, $lightness: -15%);
+	}
+
+	@include breakpoint(phone) {
+		background: $error;
+		color: $grey-100;
+
+		.accessory svg {
+			fill: $grey-100;
+		}
+	}
+}
+
+.notice {
+	background-color: var(--notice-button-bg);
+	color: var(--notice-button-text);
+
+	&:hover:not(:disabled) {
+		background-color: var(--notice-button-bg-hover);
+	}
+}
+
+.modal {
+	&:hover:not(:disabled) {
+		background: $grey-90;
+	}
+
+	&.destructive {
+		color: $error;
+
+		&:hover:not(:disabled) {
+			color: color.adjust($error, $lightness: -10%);
+		}
+	}
+}
+
+// Modifiers
+.full {
+	width: 100%;
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.grow {
+	flex-grow: 1;
+}
+
+.no-shrink {
+	flex-shrink: 0;
+}
+
+.active {
+	background: var(--button-bg-hover);
+	color: var(--button-text-hover);
+}
+
+// Sizes
+.icon {
+	aspect-ratio: 1 / 1;
+	padding: calc($unit * 1.5);
+	height: calc($unit * 5.5);
+	width: calc($unit * 5.5);
+
+	.text {
+		display: none;
+
+		@include breakpoint(tablet) {
+			display: block;
+		}
+
+		@include breakpoint(phone) {
+			display: block;
+		}
+	}
+}
+
+.small {
+	padding: $unit $unit-2x;
+	font-size: $font-small;
+	min-height: calc($unit * 3.5);
+
+	&.iconOnly {
+		padding: $unit;
+		width: calc($unit * 3.5);
+		height: calc($unit * 3.5);
+	}
+}
+
+.medium {
+	height: calc($unit * 5.5);
+	padding: calc($unit * 1.5) $unit-2x;
+	font-size: $font-regular;
+
+	&.iconOnly {
+		padding: calc($unit * 1.5);
+		width: calc($unit * 5.5);
+		height: calc($unit * 5.5);
+	}
+}
+
+.large {
+	font-size: $font-large;
+	padding: $unit-2x $unit-3x;
+	min-height: calc($unit * 6.5);
+
+	&.iconOnly {
+		padding: $unit-2x;
+		width: calc($unit * 6.5);
+		height: calc($unit * 6.5);
+	}
+}
+
+// Special features
+.save {
+	.accessory svg {
+		fill: none;
+		stroke: var(--button-text);
+	}
+
+	&.saved {
+		color: $save-red;
+
+		.accessory svg {
+			fill: $save-red;
+			stroke: $save-red;
+		}
+
+		&:hover:not(:disabled) {
+			color: $save-red;
+
+			.accessory svg {
+				fill: none;
+				stroke: $save-red;
+			}
+		}
+	}
+
+	&:hover:not(:disabled) {
+		color: $save-red;
+
+		.accessory svg {
+			fill: $save-red;
+			stroke: $save-red;
+		}
+	}
+}
+
+// Element colors
+.wind {
+	background: var(--wind-bg);
+	color: var(--wind-text-contrast);
+
+	&:hover:not(:disabled) {
+		background: var(--wind-bg-hover);
+		color: var(--wind-text-hover);
+	}
+}
+
+.fire {
+	background: var(--fire-bg);
+	color: var(--fire-text-contrast);
+
+	&:hover:not(:disabled) {
+		background: var(--fire-bg-hover);
+		color: var(--fire-text-hover);
+	}
+}
+
+.water {
+	background: var(--water-bg);
+	color: var(--water-text-contrast);
+
+	&:hover:not(:disabled) {
+		background: var(--water-bg-hover);
+		color: var(--water-text-hover);
+	}
+}
+
+.earth {
+	background: var(--earth-bg);
+	color: var(--earth-text-contrast);
+
+	&:hover:not(:disabled) {
+		background: var(--earth-bg-hover);
+		color: var(--earth-text-hover);
+	}
+}
+
+.dark {
+	background: var(--dark-bg);
+	color: var(--dark-text-contrast);
+
+	&:hover:not(:disabled) {
+		background: var(--dark-bg-hover);
+		color: var(--dark-text-hover);
+	}
+}
+
+.light {
+	background: var(--light-bg);
+	color: var(--light-text-contrast);
+
+	&:hover:not(:disabled) {
+		background: var(--light-bg-hover);
+		color: var(--light-text-hover);
+	}
+}
+
+// Icon-only specific
+.iconOnly {
+	gap: 0;
+	aspect-ratio: 1;
+}
+
+// Accessories
+.accessory {
+	$dimension: $unit-2x;
+
+	display: flex;
+	align-items: center;
+
+	&.arrow {
+		margin-top: $unit-half;
+	}
+
+	&.flipped {
+		transform: rotate(180deg);
+	}
+
+	svg {
+		fill: var(--button-text);
+		height: $dimension;
+		width: $dimension;
+
+		&.stroke {
+			fill: none;
+			stroke: var(--button-text);
+		}
+
+		&.Add {
+			height: 18px;
+			width: 18px;
+		}
+
+		&.Check {
+			height: 22px;
+			width: 22px;
+		}
+	}
+
+	&.check svg {
+		margin-top: 1px;
+		height: 14px;
+		width: auto;
+	}
+
+	&.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;
+}
+</style>

src/lib/components/ui/button/button.module.scss

@@ -1,453 +0,0 @@
-@use 'sass:color';
-@use 'themes/spacing';
-@use 'themes/mixins';
-@use 'themes/colors';
-@use 'themes/typography';
-@use 'themes/effects';
-@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;
-
-	.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);
-
-		.accessory svg {
-			fill: 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;
-
-		&:hover {
-			background-color: var(--button-bg-disabled);
-			color: var(--button-text-disabled);
-			cursor: not-allowed;
-		}
-	}
-
-	&:focus-visible {
-		border: 2px solid colors.$blue;
-		outline: none;
-	}
-
-	&:active:not(:disabled) {
-		transform: translateY(1px);
-	}
-}
-
-// Variants
-.primary {
-	background-color: var(--button-contained-bg);
-	color: var(--button-text);
-
-	&: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);
-
-	&:hover:not(:disabled) {
-		background-color: var(--button-bg-hover);
-		color: var(--button-text-hover);
-	}
-}
-
-.ghost {
-	background-color: transparent;
-	color: var(--text-secondary);
-
-	&: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;
-
-	&:hover:not(:disabled) {
-		color: var(--accent-blue-focus);
-		text-decoration: underline;
-	}
-
-	&:active:not(:disabled) {
-		transform: none;
-	}
-}
-
-.blended {
-	background: transparent;
-
-	&:hover:not(:disabled) {
-		background: var(--button-bg-hover);
-	}
-}
-
-.bound {
-	background: var(--button-contained-bg);
-
-	&:hover:not(:disabled) {
-		background: var(--button-contained-bg-hover);
-	}
-
-	&.save:hover .accessory svg {
-		fill: colors.$save-red;
-		stroke: colors.$save-red;
-	}
-
-	&.save {
-		color: colors.$save-red;
-
-		&.active .accessory svg {
-			fill: colors.$save-red;
-			stroke: colors.$save-red;
-		}
-
-		&:hover {
-			color: color.adjust(colors.$save-red, $lightness: -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);
-
-	&:hover:not(:disabled) {
-		background: var(--input-bound-bg);
-	}
-}
-
-.floating {
-	pointer-events: none;
-	position: absolute;
-	opacity: 0;
-	z-index: 99;
-}
-
-.destructive {
-	background: colors.$error;
-	color: white;
-
-	&:hover:not(:disabled) {
-		background: color.adjust(colors.$error, $lightness: -15%);
-	}
-
-	@include mixins.breakpoint(phone) {
-		background: colors.$error;
-		color: colors.$grey-100;
-
-		.accessory svg {
-			fill: colors.$grey-100;
-		}
-	}
-}
-
-.notice {
-	background-color: var(--notice-button-bg);
-	color: var(--notice-button-text);
-
-	&:hover:not(:disabled) {
-		background-color: var(--notice-button-bg-hover);
-	}
-}
-
-.modal {
-	&:hover:not(:disabled) {
-		background: colors.$grey-90;
-	}
-
-	&.destructive {
-		color: colors.$error;
-
-		&:hover:not(:disabled) {
-			color: color.adjust(colors.$error, $lightness: -10%);
-		}
-	}
-}
-
-// Modifiers
-.full {
-	width: 100%;
-}
-
-.fullWidth {
-	width: 100%;
-}
-
-.grow {
-	flex-grow: 1;
-}
-
-.no-shrink {
-	flex-shrink: 0;
-}
-
-.active {
-	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;
-
-	.text {
-		display: none;
-
-		@include mixins.breakpoint(tablet) {
-			display: block;
-		}
-
-		@include mixins.breakpoint(phone) {
-			display: block;
-		}
-	}
-}
-
-.small {
-	padding: spacing.$unit spacing.$unit-2x;
-	font-size: typography.$font-small;
-	min-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;
-
-	&.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;
-
-	&.iconOnly {
-		padding: spacing.$unit-2x;
-		width: 52px;
-		height: 52px;
-	}
-}
-
-// Special features
-.save {
-	.accessory svg {
-		fill: none;
-		stroke: var(--button-text);
-	}
-
-	&.saved {
-		color: colors.$save-red;
-
-		.accessory svg {
-			fill: colors.$save-red;
-			stroke: colors.$save-red;
-		}
-
-		&:hover:not(:disabled) {
-			color: colors.$save-red;
-
-			.accessory svg {
-				fill: none;
-				stroke: colors.$save-red;
-			}
-		}
-	}
-
-	&:hover:not(:disabled) {
-		color: 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);
-
-	&:hover:not(:disabled) {
-		background: var(--wind-bg-hover);
-		color: var(--wind-text-hover);
-	}
-}
-
-.fire {
-	background: var(--fire-bg);
-	color: var(--fire-text-contrast);
-
-	&:hover:not(:disabled) {
-		background: var(--fire-bg-hover);
-		color: var(--fire-text-hover);
-	}
-}
-
-.water {
-	background: var(--water-bg);
-	color: var(--water-text-contrast);
-
-	&:hover:not(:disabled) {
-		background: var(--water-bg-hover);
-		color: var(--water-text-hover);
-	}
-}
-
-.earth {
-	background: var(--earth-bg);
-	color: var(--earth-text-contrast);
-
-	&:hover:not(:disabled) {
-		background: var(--earth-bg-hover);
-		color: var(--earth-text-hover);
-	}
-}
-
-.dark {
-	background: var(--dark-bg);
-	color: var(--dark-text-contrast);
-
-	&:hover:not(:disabled) {
-		background: var(--dark-bg-hover);
-		color: var(--dark-text-hover);
-	}
-}
-
-.light {
-	background: var(--light-bg);
-	color: var(--light-text-contrast);
-
-	&:hover:not(:disabled) {
-		background: var(--light-bg-hover);
-		color: var(--light-text-hover);
-	}
-}
-
-// Icon-only specific
-.iconOnly {
-	gap: 0;
-	aspect-ratio: 1;
-}
-
-// Accessories
-.accessory {
-	$dimension: spacing.$unit-2x;
-
-	display: flex;
-	align-items: center;
-
-	&.arrow {
-		margin-top: spacing.$unit-half;
-	}
-
-	&.flipped {
-		transform: rotate(180deg);
-	}
-
-	svg {
-		fill: var(--button-text);
-		height: $dimension;
-		width: $dimension;
-
-		&.stroke {
-			fill: none;
-			stroke: var(--button-text);
-		}
-
-		&.Add {
-			height: 18px;
-			width: 18px;
-		}
-
-		&.Check {
-			height: 22px;
-			width: 22px;
-		}
-	}
-
-	&.check svg {
-		margin-top: 1px;
-		height: 14px;
-		width: auto;
-	}
-
-	&.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;
-}

src/lib/components/ui/checkbox/Checkbox.svelte

@@ -2,8 +2,6 @@
 <svelte:options runes={true} />
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import { Check, Minus } from 'lucide-svelte';
-	import styles from './checkbox.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
@@ -37,16 +35,8 @@
 		}
 	});
 
-	const sizeClasses = {
+	const sizeClass = $derived(size);
-		small: styles.small,
+	const variantClass = $derived(variant === 'bound' ? 'bound' : '');
-		medium: styles.medium,
-		large: styles.large
-	};
-
-	const variantClasses = {
-		default: '',
-		bound: styles.bound
-	};
 </script>
 
 <CheckboxPrimitive.Root
@@ -55,14 +45,115 @@
 	{required}
 	{name}
 	{value}
-	class={`${styles.checkbox} ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
+	class="checkbox {sizeClass} {variantClass} {className || ''}"
 	{...restProps}
 >
-	<CheckboxPrimitive.Indicator class={styles.indicator}>
+	<CheckboxPrimitive.Indicator class="indicator">
 		{#if checked === 'indeterminate'}
-			<Minus class={styles.icon} />
+			<span class="icon">−</span>
-		{:else}
+		{:else if checked}
-			<Check class={styles.icon} />
+			<span class="icon">✓</span>
 		{/if}
 	</CheckboxPrimitive.Indicator>
 </CheckboxPrimitive.Root>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/effects' as *;
+
+	.checkbox {
+		background-color: var(--input-bg);
+		border: 2px solid var(--separator-bg);
+		border-radius: $item-corner-small;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		@include smooth-transition($duration-zoom, all);
+
+		&:hover:not(:disabled) {
+			background-color: var(--input-bg-hover);
+			border-color: var(--separator-bg-hover);
+		}
+
+		&:focus,
+		&:focus-visible {
+			@include focus-ring($blue);
+		}
+
+		&[data-state='checked'],
+		&[data-state='indeterminate'] {
+			background-color: var(--accent-blue);
+			border-color: var(--accent-blue);
+
+			&:hover:not(:disabled) {
+				background-color: var(--accent-blue-hover);
+				border-color: var(--accent-blue-hover);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
+
+		&.bound {
+			background-color: var(--input-bound-bg);
+
+			&:hover:not(:disabled) {
+				background-color: var(--input-bound-bg-hover);
+			}
+
+			&[data-state='checked'],
+			&[data-state='indeterminate'] {
+				background-color: var(--accent-blue);
+				border-color: var(--accent-blue);
+			}
+		}
+	}
+
+	// Size variations
+	.small {
+		width: $unit-2x;
+		height: $unit-2x;
+
+		.icon {
+			width: calc($unit * 1.5);
+			height: calc($unit * 1.5);
+		}
+	}
+
+	.medium {
+		width: calc($unit * 2.5);
+		height: calc($unit * 2.5);
+
+		.icon {
+			width: calc($unit * 1.75);
+			height: calc($unit * 1.75);
+		}
+	}
+
+	.large {
+		width: $unit-3x;
+		height: $unit-3x;
+
+		.icon {
+			width: calc($unit * 2.25);
+			height: calc($unit * 2.25);
+		}
+	}
+
+	.indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: white;
+	}
+
+	.icon {
+		stroke-width: 3;
+	}
+</style>

src/lib/components/ui/checkbox/checkbox.module.scss

@@ -1,99 +0,0 @@
-@use 'themes/spacing';
-@use 'themes/colors';
-@use 'themes/layout';
-@use 'themes/typography';
-
-.checkbox {
-  background-color: var(--input-bg);
-  border: 2px solid var(--separator-bg);
-  border-radius: layout.$item-corner-small;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.18s ease-out;
-
-  &:hover:not(:disabled) {
-    background-color: var(--input-bg-hover);
-    border-color: var(--separator-bg-hover);
-  }
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border-color: colors.$blue;
-    box-shadow: 0 0 0 2px rgba(colors.$blue, 0.2);
-  }
-
-  &[data-state='checked'],
-  &[data-state='indeterminate'] {
-    background-color: var(--accent-blue);
-    border-color: var(--accent-blue);
-
-    &:hover:not(:disabled) {
-      background-color: var(--accent-blue-hover);
-      border-color: var(--accent-blue-hover);
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.bound {
-    background-color: var(--input-bound-bg);
-
-    &:hover:not(:disabled) {
-      background-color: var(--input-bound-bg-hover);
-    }
-
-    &[data-state='checked'],
-    &[data-state='indeterminate'] {
-      background-color: var(--accent-blue);
-      border-color: var(--accent-blue);
-    }
-  }
-}
-
-// Size variations
-.small {
-  width: 16px;
-  height: 16px;
-
-  .icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.medium {
-  width: 20px;
-  height: 20px;
-
-  .icon {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-.large {
-  width: 24px;
-  height: 24px;
-
-  .icon {
-    width: 18px;
-    height: 18px;
-  }
-}
-
-.indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-
-.icon {
-  stroke-width: 3;
-}

src/lib/components/ui/dropdown/DropdownItem.svelte

@@ -0,0 +1,101 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui'
+	import type { Snippet } from 'svelte'
+
+	type Props = {
+		children: Snippet
+		href?: string
+		asChild?: boolean
+		class?: string
+	}
+
+	const { children, href, asChild = false, class: className = '' }: Props = $props()
+</script>
+
+{#if href}
+	<DropdownMenu.Item class="dropdown-item {className}" asChild>
+		<a {href}>
+			{@render children()}
+		</a>
+	</DropdownMenu.Item>
+{:else}
+	<DropdownMenu.Item class="dropdown-item {className}" {asChild}>
+		{@render children()}
+	</DropdownMenu.Item>
+{/if}
+
+<style lang="scss">
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+
+	// Define the dropdown item styles as a mixin for reusability
+	@mixin dropdown-item-base {
+		display: flex;
+		align-items: center;
+		padding: spacing.$unit (spacing.$unit * 1.5);
+		border-radius: 6px;
+		font-size: typography.$font-small;
+		font-weight: typography.$medium;
+		color: var(--menu-text);
+		cursor: pointer;
+		outline: none;
+		transition: background-color 0.15s ease;
+		user-select: none;
+		text-decoration: none;
+
+		&:hover {
+			background-color: var(--menu-bg-item-hover);
+			color: var(--menu-text);
+			text-decoration: none;
+		}
+
+		&:focus-visible {
+			background-color: var(--menu-bg-item-hover);
+			outline: 2px solid var(--accent-blue-focus);
+			outline-offset: -2px;
+		}
+	}
+
+	// Apply styles to the dropdown item class that bits-ui adds
+	:global(.dropdown-item) {
+		// @include dropdown-item-base;
+
+		// Nested form styles for logout button
+		form {
+			width: 100%;
+
+			button {
+				width: 100%;
+				text-align: left;
+				background: none;
+				border: none;
+				color: inherit;
+				font: inherit;
+				cursor: inherit;
+				padding: 0;
+				margin: 0;
+			}
+		}
+	}
+
+	// Separate global selector for link dropdown items
+	:global(.dropdown-item a) {
+		@include dropdown-item-base;
+
+		&:link,
+		&:visited {
+			color: var(--menu-text);
+			text-decoration: none;
+		}
+	}
+
+	:global(.dropdown-item button) {
+		@include dropdown-item-base;
+
+		border: none;
+		background: none;
+		width: 100%;
+	}
+</style>

src/lib/components/ui/input/Input.svelte

@@ -1,132 +1,342 @@
 <script lang="ts">
-  import { Label } from 'bits-ui';
+	import { Label } from 'bits-ui';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
-  import styles from './input.module.scss';
+	import Icon from '../../Icon.svelte';
-  import Icon from '../../Icon.svelte';
 
-  interface Props extends HTMLInputAttributes {
+	interface Props extends HTMLInputAttributes {
-    variant?: 'default' | 'bound' | 'duration' | 'number' | 'range';
+		variant?: 'default' | 'bound' | 'duration' | 'number' | 'range';
-    error?: string;
+		error?: string;
-    label?: string;
+		label?: string;
-    leftIcon?: string;
+		leftIcon?: string;
-    rightIcon?: string;
+		rightIcon?: string;
-    counter?: number;
+		counter?: number;
-    maxLength?: number;
+		maxLength?: number;
-    hidden?: boolean;
+		hidden?: boolean;
-    fullWidth?: boolean;
+		fullWidth?: boolean;
-    fullHeight?: boolean;
+		fullHeight?: boolean;
-    alignRight?: boolean;
+		alignRight?: boolean;
-    accessory?: boolean;
+		accessory?: boolean;
-    children?: any;
+		children?: any;
-  }
+	}
 
-  let {
+	let {
-    variant = 'default',
+		variant = 'default',
-    error,
+		error,
-    label,
+		label,
-    leftIcon,
+		leftIcon,
-    rightIcon,
+		rightIcon,
-    counter,
+		counter,
-    maxLength,
+		maxLength,
-    hidden = false,
+		hidden = false,
-    fullWidth = false,
+		fullWidth = false,
-    fullHeight = false,
+		fullHeight = false,
-    alignRight = false,
+		alignRight = false,
-    accessory = false,
+		accessory = false,
-    value = $bindable(''),
+		value = $bindable(''),
-    type = 'text',
+		type = 'text',
-    placeholder,
+		placeholder,
-    disabled = false,
+		disabled = false,
-    readonly = false,
+		readonly = false,
-    required = false,
+		required = false,
-    class: className = '',
+		class: className = '',
-    children,
+		children,
-    ...restProps
+		...restProps
-  }: Props = $props();
+	}: Props = $props();
 
-  const showCounter = $derived(counter !== undefined || maxLength !== undefined);
+	const showCounter = $derived(counter !== undefined || maxLength !== undefined);
-  const currentCount = $derived(String(value).length);
+	const currentCount = $derived(String(value).length);
 
-  const fieldsetClasses = [
+	const fieldsetClasses = $derived([
-    styles.fieldset,
+		'fieldset',
-    hidden && styles.hidden,
+		hidden && 'hidden',
-    fullWidth && styles.full,
+		fullWidth && 'full',
-    className
+		className
-  ].filter(Boolean).join(' ');
+	].filter(Boolean).join(' '));
 
-  const inputClasses = [
+	const inputClasses = $derived([
-    styles.input,
+		'input',
-    variant === 'bound' && styles.bound,
+		variant === 'bound' && 'bound',
-    variant === 'duration' && styles.duration,
+		variant === 'duration' && 'duration',
-    variant === 'number' && styles.number,
+		variant === 'number' && 'number',
-    variant === 'range' && styles.range,
+		variant === 'range' && 'range',
-    alignRight && styles.alignRight,
+		alignRight && 'alignRight',
-    fullHeight && styles.fullHeight,
+		fullHeight && 'fullHeight',
-    accessory && styles.accessory,
+		accessory && 'accessory',
-    (leftIcon || rightIcon || showCounter) && styles.wrapper
+		(leftIcon || rightIcon || showCounter) && 'wrapper'
-  ].filter(Boolean).join(' ');
+	].filter(Boolean).join(' '));
 </script>
 
 <fieldset class={fieldsetClasses}>
-  {#if label}
+	{#if label}
-    <Label.Root class={styles.label} for={restProps.id}>
+		<Label.Root class="label" for={restProps.id}>
-      {label}
+			{label}
-      {#if required}
+			{#if required}
-        <span class={styles.required}>*</span>
+				<span class="required">*</span>
-      {/if}
+			{/if}
-    </Label.Root>
+		</Label.Root>
-  {/if}
+	{/if}
 
-  {#if accessory || leftIcon || rightIcon || showCounter}
+	{#if accessory || leftIcon || rightIcon || showCounter}
-    <div class={inputClasses}>
+		<div class={inputClasses}>
-      {#if leftIcon}
+			{#if leftIcon}
-        <span class={styles.iconLeft}>
+				<span class="iconLeft">
-          <Icon name={leftIcon} size={16} />
+					<Icon name={leftIcon} size={16} />
-        </span>
+				</span>
-      {/if}
+			{/if}
 
-      <input
+			<input
-        bind:value
+				bind:value
-        {type}
+				{type}
-        {placeholder}
+				{placeholder}
-        {disabled}
+				{disabled}
-        {readonly}
+				{readonly}
-        {required}
+				{required}
-        {maxLength}
+				{maxLength}
-        {...restProps}
+				{...restProps}
-      />
+			/>
 
-      {#if rightIcon}
+			{#if rightIcon}
-        <span class={styles.iconRight}>
+				<span class="iconRight">
-          <Icon name={rightIcon} size={16} />
+					<Icon name={rightIcon} size={16} />
-        </span>
+				</span>
-      {/if}
+			{/if}
 
-      {#if showCounter}
+			{#if showCounter}
-        <span class={styles.counter}>
+				<span class="counter">
-          {currentCount}{maxLength ? `/${maxLength}` : ''}
+					{currentCount}{maxLength ? `/${maxLength}` : ''}
-        </span>
+				</span>
-      {/if}
+			{/if}
-    </div>
+		</div>
-  {:else}
+	{:else}
-    <input
+		<input
-      bind:value
+			bind:value
-      class={inputClasses}
+			class={inputClasses}
-      {type}
+			{type}
-      {placeholder}
+			{placeholder}
-      {disabled}
+			{disabled}
-      {readonly}
+			{readonly}
-      {required}
+			{required}
-      {maxLength}
+			{maxLength}
-      {...restProps}
+			{...restProps}
-    />
+		/>
-  {/if}
+	{/if}
 
-  {#if error}
+	{#if error}
-    <span class={styles.error}>{error}</span>
+		<span class="error">{error}</span>
-  {/if}
+	{/if}
 
-  {#if children}
+	{#if children}
-    {@render children()}
+		{@render children()}
-  {/if}
+	{/if}
 </fieldset>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/mixins' as *;
+	@use '$src/themes/effects' as *;
+
+	.fieldset {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+
+		&:last-child .error {
+			margin-bottom: 0;
+		}
+
+		&.hidden {
+			display: none;
+		}
+
+		&.full {
+			width: 100%;
+		}
+
+		:global(.label) {
+			color: var(--text-primary);
+			font-size: $font-small;
+			font-weight: $medium;
+			margin-bottom: $unit-half;
+
+			.required {
+				color: $error;
+				margin-left: $unit-fourth;
+			}
+		}
+
+		.error {
+			color: $error;
+			font-size: $font-small;
+			padding: $unit-half $unit-2x;
+			min-width: 100%;
+			margin-bottom: $unit;
+			width: 0;
+		}
+
+		.fullHeight {
+			height: 100%;
+		}
+
+		.input {
+			-webkit-font-smoothing: antialiased;
+			background-color: var(--input-bg);
+			border-radius: $input-corner;
+			border: none;
+			box-sizing: border-box;
+			color: var(--text-primary);
+			display: block;
+			font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+			font-size: $font-regular;
+			width: 100%;
+			@include smooth-transition($duration-quick, background-color);
+
+			&:not(.wrapper) {
+				padding: calc($unit * 1.5) $unit-2x;
+			}
+
+			&.accessory,
+			&.wrapper {
+				$offset: 2px;
+
+				align-items: center;
+				background: var(--input-bg);
+				border-radius: $input-corner;
+				box-sizing: border-box;
+				position: relative;
+				display: flex;
+				padding: 0;
+
+				.counter {
+					color: var(--text-tertiary);
+					display: block;
+					font-weight: $bold;
+					line-height: calc($unit * 6);
+					position: absolute;
+					right: $unit-2x;
+					top: 0;
+					pointer-events: none;
+				}
+
+				input {
+					background: transparent;
+					border-radius: $input-corner;
+					border: 2px solid transparent;
+					box-sizing: border-box;
+					color: var(--text-primary);
+					padding: calc($unit * 1.75) $unit-2x;
+					width: 100%;
+					font-size: $font-regular;
+					font-family: inherit;
+					@include smooth-transition($duration-quick, border-color);
+
+					&:focus {
+						@include focus-ring($blue);
+					}
+				}
+
+				.iconLeft,
+				.iconRight {
+					position: absolute;
+					display: flex;
+					align-items: center;
+					pointer-events: none;
+					color: var(--text-secondary);
+
+					:global(svg) {
+						fill: currentColor;
+					}
+				}
+
+				.iconLeft {
+					left: $unit-2x;
+				}
+
+				.iconRight {
+					right: $unit-2x;
+				}
+
+				&:has(.iconLeft) input {
+					padding-left: $unit-5x;
+				}
+
+				&:has(.iconRight) input {
+					padding-right: $unit-5x;
+				}
+
+				&:has(.counter) input {
+					padding-right: $unit-8x;
+				}
+			}
+
+			&[type='number']::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+			}
+
+			&.bound {
+				background-color: var(--input-bound-bg);
+
+				&:hover {
+					background-color: var(--input-bound-bg-hover);
+				}
+			}
+
+			&.duration {
+				background: transparent;
+				border: none;
+				padding: 0;
+				width: initial;
+				height: 100%;
+				padding: calc($unit-2x - 2px) 0;
+
+				&:hover {
+					background: transparent;
+				}
+
+				&:focus,
+				&:focus-visible {
+					border: none;
+				}
+			}
+
+			&.number {
+				text-align: right;
+				width: $unit-8x;
+			}
+
+			&.range {
+				text-align: right;
+				width: $unit-12x;
+			}
+
+			&.alignRight {
+				text-align: right;
+			}
+
+			&:hover:not(:disabled) {
+				background-color: var(--input-bg-hover);
+			}
+
+			&:focus {
+				@include focus-ring($blue);
+			}
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.counter {
+			display: none;
+		}
+	}
+
+	.input::placeholder,
+	.input > input::placeholder {
+		color: var(--text-tertiary);
+		opacity: 1;
+	}
+</style>

src/lib/components/ui/segmented-control/rep-segment.module.scss

@@ -15,7 +15,7 @@
 	transition: all 0.2s ease;
 
 	&:hover {
-		background: $grey-80; // Solid gray for hover state
+		background: $grey-100;
 	}
 
 	&:focus-visible {
@@ -36,7 +36,7 @@
 .indicator {
 	position: absolute;
 	inset: 0;
-	background: $grey-80;
+	background: $grey-100;
 	border-radius: $item-corner;
 	opacity: 0;
 	transition: opacity 0.2s ease;

src/lib/components/ui/select/Select.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" generics="T extends string | number">
   import { Select } from 'bits-ui';
-  import { ChevronDown, Check } from 'lucide-svelte';
-  import styles from './select.module.scss';
 
   interface Option {
     value: T;
@@ -43,21 +41,21 @@
   const selected = $derived(options.find(opt => opt.value === value));
 
   const triggerClasses = [
-    styles.trigger,
+    'trigger',
-    variant === 'bound' && styles.bound,
+    variant === 'bound' && 'bound',
-    variant === 'small' && styles.small,
+    variant === 'small' && 'small',
-    variant === 'table' && styles.table,
+    variant === 'table' && 'table',
-    position === 'right' && styles.right,
+    position === 'right' && 'right',
-    position === 'left' && styles.left,
+    position === 'left' && 'left',
-    fullWidth && styles.full,
+    fullWidth && 'full',
-    hidden && styles.hidden,
+    hidden && 'hidden',
-    disabled && styles.disabled,
+    disabled && 'disabled',
     className
   ].filter(Boolean).join(' ');
 
   const contentClasses = [
-    styles.select,
+    'select',
-    variant === 'bound' && styles.bound
+    variant === 'bound' && 'bound'
   ].filter(Boolean).join(' ');
 
   function handleValueChange(newValue: string | undefined) {
@@ -82,14 +80,14 @@
       <img src={selected.image} alt={selected.label} />
     {/if}
     <span>{selected?.label || placeholder}</span>
-    <span class={styles.icon}>
+    <span class="icon">
-      <ChevronDown size={16} />
+      <span class="chevron">▼</span>
     </span>
   </Select.Trigger>
 
   <Select.Content class={contentClasses}>
-    <div class={`${styles.scroll} ${styles.up}`}>
+    <div class="scroll up">
-      <ChevronDown size={16} />
+      <span class="chevron">▼</span>
     </div>
 
     <Select.Viewport>
@@ -97,21 +95,289 @@
         <Select.Item
           value={option.value}
           disabled={option.disabled}
-          class={styles.item}
+          class="item"
         >
           {#if option.image}
             <img src={option.image} alt={option.label} />
           {/if}
           <span>{option.label}</span>
-          <Select.ItemIndicator class={styles.indicator}>
+          <Select.ItemIndicator class="indicator">
-            <Check size={16} />
+            <span>✓</span>
           </Select.ItemIndicator>
         </Select.Item>
       {/each}
     </Select.Viewport>
 
-    <div class={`${styles.scroll} ${styles.down}`}>
+    <div class="scroll down">
-      <ChevronDown size={16} />
+      <span class="chevron">▼</span>
     </div>
   </Select.Content>
 </Select.Root>
+
+<style lang="scss">
+@use 'themes/spacing' as *;
+@use 'themes/colors' as *;
+@use 'themes/typography' as *;
+@use 'themes/layout' as *;
+@use 'themes/effects' as *;
+@use 'themes/mixins' as *;
+
+.trigger {
+  align-items: center;
+  background-color: var(--input-bg);
+  border-radius: $input-corner;
+  border: 2px solid transparent;
+  display: flex;
+  gap: $unit;
+  padding: calc($unit * 1.5) $unit-2x;
+  white-space: nowrap;
+  cursor: pointer;
+  @include smooth-transition($duration-zoom, background-color);
+
+  &.small {
+    & > span:not(.icon) {
+      font-size: $font-small;
+      margin: 0;
+      max-width: 200px;
+    }
+
+    @include breakpoint(tablet) {
+      &::before {
+        content: '';
+        display: block;
+        width: calc($unit-2x - 1px);
+      }
+
+      & > span:not(.icon) {
+        width: 100%;
+        max-width: inherit;
+        text-align: center;
+      }
+    }
+  }
+
+  &.grow {
+    flex-grow: 1;
+  }
+
+  &.left {
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  &.right {
+    flex-grow: 0;
+    text-align: right;
+    min-width: 12rem;
+  }
+
+  &.bound {
+    background-color: var(--select-contained-bg);
+
+    &:hover {
+      background-color: var(--select-contained-bg-hover);
+
+      &.disabled {
+        background-color: var(--select-contained-bg);
+      }
+    }
+  }
+
+  &.full {
+    width: 100%;
+  }
+
+  &.table {
+    min-width: calc($unit * 30);
+
+    @include breakpoint(phone) {
+      width: 100%;
+    }
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--input-bg-hover);
+
+    span:not(.icon),
+    &[data-placeholder] > span:not(.icon) {
+      color: var(--text-primary);
+    }
+
+    .icon svg {
+      fill: var(--text-primary);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: var(--input-bg);
+    cursor: not-allowed;
+  }
+
+  &[data-placeholder='true'] > span:not(.icon) {
+    color: var(--text-secondary);
+  }
+
+  & > span:not(.icon) {
+    color: var(--text-primary);
+    flex-grow: 1;
+    font-size: $font-regular;
+    text-align: left;
+  }
+
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+
+    svg {
+      fill: var(--icon-secondary);
+    }
+
+    .chevron {
+      font-size: 10px;
+      color: var(--icon-secondary);
+    }
+  }
+}
+
+.select {
+  animation: scaleIn $duration-zoom ease-out;
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+  padding: 0 $unit;
+  min-width: var(--radix-select-trigger-width);
+  transform-origin: var(--radix-select-content-transform-origin);
+  max-height: 40vh;
+  z-index: 40;
+
+  &.bound {
+    background-color: var(--select-content-contained-bg);
+  }
+
+  .scroll.up,
+  .scroll.down {
+    padding: $unit 0;
+    text-align: center;
+
+    &:hover svg, &:hover .chevron {
+      fill: var(--icon-secondary-hover);
+      color: var(--icon-secondary-hover);
+    }
+
+    svg {
+      fill: var(--icon-secondary);
+    }
+
+    .chevron {
+      font-size: 10px;
+      color: var(--icon-secondary);
+    }
+  }
+
+  .scroll.up {
+    transform: scale(1, -1);
+  }
+
+  @keyframes scaleIn {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    20% {
+      opacity: 0.2;
+      transform: scale(0.4);
+    }
+    40% {
+      opacity: 0.4;
+      transform: scale(0.8);
+    }
+    60% {
+      opacity: 0.6;
+      transform: scale(1);
+    }
+    65% {
+      opacity: 0.65;
+      transform: scale(1.1);
+    }
+    70% {
+      opacity: 0.7;
+      transform: scale(1);
+    }
+    75% {
+      opacity: 0.75;
+      transform: scale(0.98);
+    }
+    80% {
+      opacity: 0.8;
+      transform: scale(1.02);
+    }
+    90% {
+      opacity: 0.9;
+      transform: scale(0.96);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.item {
+  align-items: center;
+  border-radius: $item-corner-small;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  gap: $unit;
+  padding: $unit $unit-2x;
+  position: relative;
+  user-select: none;
+  @include smooth-transition($duration-opacity-fade, background-color);
+
+  &:hover {
+    background-color: var(--option-bg-hover);
+  }
+
+  &[data-disabled] {
+    color: var(--text-tertiary);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[data-selected] {
+    background-color: var(--option-bg-hover);
+    font-weight: $medium;
+  }
+
+  img {
+    width: $unit-3x;
+    height: auto;
+  }
+
+  span {
+    flex-grow: 1;
+  }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+
+    svg, span {
+      fill: var(--accent-blue);
+      color: var(--accent-blue);
+    }
+  }
+}
+</style>

src/lib/components/ui/select/select.module.scss

@@ -1,253 +0,0 @@
-@use 'themes/spacing';
-@use 'themes/colors';
-@use 'themes/typography';
-@use 'themes/layout';
-@use 'themes/effects';
-@use 'themes/mixins';
-
-.trigger {
-  align-items: center;
-  background-color: var(--input-bg);
-  border-radius: layout.$input-corner;
-  border: 2px solid transparent;
-  display: flex;
-  gap: spacing.$unit;
-  padding: (spacing.$unit * 1.5) spacing.$unit-2x;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.18s ease-out;
-
-  &.small {
-    & > span:not(.icon) {
-      font-size: typography.$font-small;
-      margin: 0;
-      max-width: 200px;
-    }
-
-    @include mixins.breakpoint(tablet) {
-      &::before {
-        content: '';
-        display: block;
-        width: calc(spacing.$unit-2x - 1px);
-      }
-
-      & > span:not(.icon) {
-        width: 100%;
-        max-width: inherit;
-        text-align: center;
-      }
-    }
-  }
-
-  &.grow {
-    flex-grow: 1;
-  }
-
-  &.left {
-    flex-grow: 1;
-    width: 100%;
-  }
-
-  &.right {
-    flex-grow: 0;
-    text-align: right;
-    min-width: 12rem;
-  }
-
-  &.bound {
-    background-color: var(--select-contained-bg);
-
-    &:hover {
-      background-color: var(--select-contained-bg-hover);
-
-      &.disabled {
-        background-color: var(--select-contained-bg);
-      }
-    }
-  }
-
-  &.full {
-    width: 100%;
-  }
-
-  &.table {
-    min-width: spacing.$unit * 30;
-
-    @include mixins.breakpoint(phone) {
-      width: 100%;
-    }
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  &:hover {
-    background-color: var(--input-bg-hover);
-
-    span:not(.icon),
-    &[data-placeholder] > span:not(.icon) {
-      color: var(--text-primary);
-    }
-
-    .icon svg {
-      fill: var(--text-primary);
-    }
-  }
-
-  &.disabled:hover {
-    background-color: var(--input-bg);
-    cursor: not-allowed;
-  }
-
-  &[data-placeholder='true'] > span:not(.icon) {
-    color: var(--text-secondary);
-  }
-
-  & > span:not(.icon) {
-    color: var(--text-primary);
-    flex-grow: 1;
-    font-size: typography.$font-regular;
-    text-align: left;
-  }
-
-  img {
-    width: spacing.$unit-4x;
-    height: auto;
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-
-    svg {
-      fill: var(--icon-secondary);
-    }
-  }
-}
-
-.select {
-  animation: scaleIn effects.$duration-zoom ease-out;
-  background: var(--dialog-bg);
-  border-radius: layout.$card-corner;
-  border: 1px solid rgba(0, 0, 0, 0.24);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
-  padding: 0 spacing.$unit;
-  min-width: var(--radix-select-trigger-width);
-  transform-origin: var(--radix-select-content-transform-origin);
-  max-height: 40vh;
-  z-index: 40;
-
-  &.bound {
-    background-color: var(--select-content-contained-bg);
-  }
-
-  .scroll.up,
-  .scroll.down {
-    padding: spacing.$unit 0;
-    text-align: center;
-
-    &:hover svg {
-      fill: var(--icon-secondary-hover);
-    }
-
-    svg {
-      fill: var(--icon-secondary);
-    }
-  }
-
-  .scroll.up {
-    transform: scale(1, -1);
-  }
-
-  @keyframes scaleIn {
-    0% {
-      opacity: 0;
-      transform: scale(0);
-    }
-    20% {
-      opacity: 0.2;
-      transform: scale(0.4);
-    }
-    40% {
-      opacity: 0.4;
-      transform: scale(0.8);
-    }
-    60% {
-      opacity: 0.6;
-      transform: scale(1);
-    }
-    65% {
-      opacity: 0.65;
-      transform: scale(1.1);
-    }
-    70% {
-      opacity: 0.7;
-      transform: scale(1);
-    }
-    75% {
-      opacity: 0.75;
-      transform: scale(0.98);
-    }
-    80% {
-      opacity: 0.8;
-      transform: scale(1.02);
-    }
-    90% {
-      opacity: 0.9;
-      transform: scale(0.96);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-.item {
-  align-items: center;
-  border-radius: layout.$item-corner-small;
-  color: var(--text-primary);
-  cursor: pointer;
-  display: flex;
-  gap: spacing.$unit;
-  padding: spacing.$unit spacing.$unit-2x;
-  position: relative;
-  user-select: none;
-  transition: background-color 0.12s ease-out;
-
-  &:hover {
-    background-color: var(--option-bg-hover);
-  }
-
-  &[data-disabled] {
-    color: var(--text-tertiary);
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &[data-selected] {
-    background-color: var(--option-bg-hover);
-    font-weight: typography.$medium;
-  }
-
-  img {
-    width: spacing.$unit-3x;
-    height: auto;
-  }
-
-  span {
-    flex-grow: 1;
-  }
-
-  .indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: auto;
-
-    svg {
-      fill: var(--accent-blue);
-    }
-  }
-}

src/lib/components/ui/switch/Switch.svelte

@@ -2,7 +2,6 @@
 <svelte:options runes={true} />
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
-	import styles from './switch.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
@@ -41,8 +40,65 @@
 	{required}
 	{name}
 	{value}
-	class={`${styles.switch} ${className || ''}`}
+	class="switch {className || ''}"
 	{...restProps}
 >
-	<SwitchPrimitive.Thumb class={`${styles.thumb} ${thumbClass || ''}`} />
+	<SwitchPrimitive.Thumb class="thumb {thumbClass || ''}" />
 </SwitchPrimitive.Root>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/effects' as *;
+
+	.switch {
+		$height: calc($unit-4x + $unit-fourth);  // 34px
+		background: $grey-70;
+		border-radius: calc($height / 2);
+		border: none;
+		padding-left: $unit-half;
+		padding-right: $unit-half;
+		position: relative;
+		width: $unit-7x + $unit-fourth; // 58px
+		height: $height;
+		cursor: pointer;
+		@include smooth-transition($duration-instant, background-color);
+
+		&:focus,
+		&:focus-visible {
+			@include focus-ring($blue);
+		}
+
+		&[data-state='checked'] {
+			background: var(--accent-blue);
+		}
+
+		&:disabled {
+			box-shadow: none;
+			cursor: not-allowed;
+			opacity: 0.5;
+
+			.thumb {
+				background: $grey-80;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.thumb {
+		background: $grey-100;
+		border-radius: calc($unit-3x + $unit-fourth / 2); // 13px
+		display: block;
+		height: $unit-3x + $unit-fourth; // 26px
+		width: $unit-3x + $unit-fourth; // 26px
+		@include smooth-transition($duration-instant, transform);
+		transform: translateX(0px);
+		cursor: pointer;
+
+		&[data-state='checked'] {
+			background: $grey-100;
+			transform: translateX($unit-3x); // 24px
+		}
+	}
+</style>

src/lib/components/ui/switch/switch.module.scss

@@ -1,54 +0,0 @@
-@use 'themes/spacing';
-@use 'themes/colors';
-@use 'themes/layout';
-
-.switch {
-  $height: 34px;
-  background: colors.$grey-70;
-  border-radius: calc($height / 2);
-  border: none;
-  padding-left: spacing.$unit-half;
-  padding-right: spacing.$unit-half;
-  position: relative;
-  width: 58px;
-  height: $height;
-  cursor: pointer;
-  transition: background-color 100ms ease-out;
-
-  &:focus,
-  &:focus-visible {
-    box-shadow: 0 0 0 2px var(--accent-blue-focus);
-    outline: none;
-  }
-
-  &[data-state='checked'] {
-    background: var(--accent-blue);
-  }
-
-  &:disabled {
-    box-shadow: none;
-    cursor: not-allowed;
-    opacity: 0.5;
-
-    .thumb {
-      background: colors.$grey-80;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.thumb {
-  background: colors.$grey-100;
-  border-radius: 13px;
-  display: block;
-  height: 26px;
-  width: 26px;
-  transition: transform 100ms;
-  transform: translateX(0px);
-  cursor: pointer;
-
-  &[data-state='checked'] {
-    background: colors.$grey-100;
-    transform: translateX(24px);
-  }
-}