ColorWheel

let hue = 210;

<div mix={[hstack({ gap: 5, align: "center" })]}>
	<ColorWheel
		aria-label="Accent hue"
		name="accentHue"
		value={hue}
		step={1}
		mix={[
			colorWheelDrag(),
			on<HTMLDivElement, "ui:color-wheel-change">("ui:color-wheel-change", (event) => {
				hue = event.hue;
				void handle.update();
			}),
		]}
	/>

	<div mix={[vstack({ gap: 3, align: "start" })]}>
		<Label>Accent hue</Label>
		<div mix={[hstack({ gap: 2, align: "center" })]}>
			<ColorSwatch size="lg" shape="circle" value={tint} />
			<div mix={[vstack({ gap: 0, align: "start" })]}>
				<span mix={[font("mono"), text("sm"), weight("medium")]}>{Math.round(hue)}°</span>
				<span mix={[font("mono"), text("xs"), fg("neutral")]}>{tint}</span>
			</div>
		</div>
		<p mix={[text("sm"), fg("neutral")]}>
			Drag around the ring, or focus it and step with the arrow keys.
		</p>
	</div>
</div>