lashman/core-cooldown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

v0.2.0: WCAG 2.2 AAA accessibility + toggle fix + version bump

Browse Source
This commit is contained in:
lashman
2026-02-18 19:15:19 +02:00
parent ee7fe87663
commit 4fdbec9b0f
6 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/components/ToggleSwitch.svelte
View File

@@ -15,19 +15,24 @@
}
</script>
<!-- 44px hit area wrapper (WCAG 2.5.8) with compact visual toggle inside -->
<button
type="button"
role="switch"
aria-label={label}
aria-checked={checked}
class="relative inline-flex h-[28px] w-[52px] min-h-[44px] shrink-0 cursor-pointer rounded-full
transition-colors duration-200 ease-in-out"
style="background: {checked ? $config.accent_color : '#1a1a1a'};"
class="relative inline-flex min-h-[44px] min-w-[52px] shrink-0 cursor-pointer items-center justify-center
bg-transparent border-none p-0"
onclick={toggle}
>
<span
class="pointer-events-none inline-block h-[22px] w-[22px] rounded-full
shadow-sm transition-transform duration-200 ease-in-out
{checked ? 'translate-x-[27px] bg-white' : 'translate-x-[3px] bg-[#666]'} mt-[3px]"
></span>
class="inline-flex h-[28px] w-[52px] items-center rounded-full transition-colors duration-200 ease-in-out"
style="background: {checked ? $config.accent_color : '#1a1a1a'};"
>
<span
class="pointer-events-none inline-block h-[22px] w-[22px] rounded-full
shadow-sm transition-transform duration-200 ease-in-out
{checked ? 'translate-x-[27px] bg-white' : 'translate-x-[3px] bg-[#666]'}"
></span>
</span>
</button>