From d4282c270b8c608e38b29471e26d8c90f592e16b Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sun, 5 Apr 2026 23:02:47 +0700
Subject: [PATCH] refactor: update Switch component styles and structure for
 improved accessibility and responsiveness. Adjust class bindings and enhance
 thumb positioning based on size prop.

---
 .../lib/components/ui/switch/switch.svelte    | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/ui/switch/switch.svelte b/web/src/lib/components/ui/switch/switch.svelte
index 6aa57d5..b875462 100644
--- a/web/src/lib/components/ui/switch/switch.svelte
+++ b/web/src/lib/components/ui/switch/switch.svelte
@@ -1,31 +1,46 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
-		size = "default",
+		size = 'default',
 		...restProps
 	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
-		size?: "sm" | "default";
+		size?: 'sm' | 'default';
 	} = $props();
 </script>
 
+<!-- bits-ui Switch использует data-state="checked" | "unchecked" (не data-checked). -->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	data-slot="switch"
 	data-size={size}
 	class={cn(
-		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		'peer focus-visible:ring-ring inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors',
+		'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none',
+		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+		'dark:data-[state=unchecked]:bg-input/80',
+		'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50',
+		size === 'default' && 'h-6 w-11',
+		size === 'sm' && 'h-5 w-9',
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+		class={cn(
+			'pointer-events-none block rounded-full bg-background shadow-md ring-0 transition-transform',
+			'dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground',
+			size === 'default' &&
+				'size-5 data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-5',
+			size === 'sm' &&
+				'size-4 data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-4'
+		)}
 	/>
 </SwitchPrimitive.Root>