887edd5f21
- Add skip-to-content link and dynamic document title (App.svelte) - Wrap titlebar in header landmark, enlarge traffic lights to 44px (Titlebar.svelte) - Enlarge toggle switch to 52x28, improve OFF knob contrast (ToggleSwitch.svelte) - Enlarge stepper buttons to 36px, add keyboard hold-to-repeat (Stepper.svelte) - Add keyboard feedback to pressable, focus glow to glowHover (animate.ts)
34 lines
931 B
Svelte
34 lines
931 B
Svelte
<script lang="ts">
|
|
import { config } from "../stores/config";
|
|
|
|
interface Props {
|
|
checked: boolean;
|
|
onchange?: (value: boolean) => void;
|
|
label?: string;
|
|
}
|
|
|
|
let { checked = $bindable(), onchange, label = "Toggle" }: Props = $props();
|
|
|
|
function toggle() {
|
|
checked = !checked;
|
|
onchange?.(checked);
|
|
}
|
|
</script>
|
|
|
|
<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'};"
|
|
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>
|
|
</button>
|