@gadxr/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 arsra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Avatar.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">// Base UI-style Avatar: a player's picture (`src`), or their initials on a color picked
+// from their name. Optional `status` dot. 3D: a thin disc with the picture or initials
+// on its face.
+import { ensure3d } from "./aframe";
+import { avatarColor, initials } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { font3d } from "./fonts";
+import { useSlot } from "./layout.svelte";
+let { name = "", src, size = "medium", status, color, dimension, style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const tk = $derived(t.avatar);
+const c = $derived(t.colors.avatar);
+const px = $derived(tk.sizes[size]);
+const fill = $derived(color ?? avatarColor(name, c.palette));
+const letters = $derived(initials(name));
+const dot = $derived(Math.max(8, Math.round(px * tk.status)));
+const label = $derived([name, status].filter(Boolean).join(", ") || "Avatar");
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// The picture, once it has loaded; initials until then, and if it fails.
+let image = $state(null);
+const imageOk = $derived(!!image);
+$effect(() => {
+	image = null;
+	if (!src) return;
+	const img = new Image();
+	img.crossOrigin = "anonymous";
+	img.onload = () => image = img;
+	img.src = src;
+	return () => {
+		img.onload = null;
+	};
+});
+// ---- 3D ----
+const m = (v) => v * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+const d = $derived(m(px));
+const slot = is3d ? useSlot(() => ({
+	width: d,
+	height: d
+})) : () => ({
+	x: 0,
+	y: 0
+});
+const depth = $derived(Math.min(.02, d * .12));
+const face = $derived(depth / 2 + .001);
+// Status dot on the rim at the bottom right (45°), cut out with a ring of the panel color.
+const dotAt = $derived(d / 2 * Math.SQRT1_2);
+const dotR = $derived(m(dot) / 2);
+// The loaded <img> goes to the material as an object: a URL in the attribute string
+// would be split at the `;` in data: URLs.
+let faceEl = $state();
+$effect(() => {
+	if (faceEl && image) faceEl.setAttribute("material", {
+		shader: "flat",
+		src: image
+	});
+});
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<a-entity
+				geometry="primitive: cylinder; radius: {d / 2}; height: {depth}; segmentsRadial: 48"
+				material="color: {fill}; roughness: 0.6"
+				rotation="90 0 0"
+			></a-entity>
+			{#if src && imageOk}
+				<a-entity bind:this={faceEl} geometry="primitive: circle; radius: {d / 2}; segments: 48" position="0 0 {face}"></a-entity>
+			{:else if letters}
+				<a-entity
+					troika-text="value: {letters.replace(/;/g, ',')}; fontSize: {d * tk.initials}; color: {c.text}; font: {font3d(t)}; anchor: center; baseline: center"
+					troika-text-material="shader: standard"
+					position="0 0 {face}"
+				></a-entity>
+			{/if}
+			{#if status}
+				<a-entity position="{dotAt} {-dotAt} {face + 0.002}">
+					<a-entity geometry="primitive: circle; radius: {dotR + m(tk.statusRing)}; segments: 32" material="color: {c.statusRing}; shader: flat"></a-entity>
+					<a-entity geometry="primitive: circle; radius: {dotR}; segments: 32" material="color: {c.status[status]}; shader: flat" position="0 0 0.001"></a-entity>
+				</a-entity>
+			{/if}
+		</a-entity>
+	</a-entity>
+{:else}
+	<span
+		class="ui-avatar"
+		role="img"
+		aria-label={label}
+		style="--ui-size: {px}px; --ui-fill: {fill}; --ui-text: {c.text}; --ui-font: 600 {Math.round(px * tk.initials)}px/1 {t.typography.fontFamily}; --ui-dot: {dot}px; --ui-ring: {tk.statusRing}px; --ui-ring-color: {c.statusRing}; {userStyle}"
+		{...rest}
+	>
+		{#if src && imageOk}
+			<img {src} alt="" />
+		{:else}
+			<span aria-hidden="true">{letters}</span>
+		{/if}
+		{#if status}<span class="status" style="background: {c.status[status]};"></span>{/if}
+	</span>
+{/if}
+
+<style>
+	.ui-avatar {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		width: var(--ui-size);
+		height: var(--ui-size);
+		border-radius: 50%;
+		background: var(--ui-fill);
+		color: var(--ui-text);
+		font: var(--ui-font);
+		user-select: none;
+	}
+	img {
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+	.status {
+		position: absolute;
+		/* Centered on the rim at the bottom right (45°). */
+		right: calc(var(--ui-size) * 0.1464 - var(--ui-dot) / 2);
+		bottom: calc(var(--ui-size) * 0.1464 - var(--ui-dot) / 2);
+		width: var(--ui-dot);
+		height: var(--ui-dot);
+		border-radius: 50%;
+		box-shadow: 0 0 0 var(--ui-ring) var(--ui-ring-color);
+	}
+</style>

package/dist/Avatar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AvatarSize, AvatarStatus, Dimension } from './theme';
+type Props = {
+    name?: string;
+    src?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    color?: string;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/Button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">// Base UI-style button. Renders HTML, or A-Frame entities inside <Space3D>
+// (or with dimension="3d"). Inside a ButtonGroup, unset kind/size/shape/disabled
+// come from the group, and clicks drive the group's selection.
+import Button2D from "./Button2D.svelte";
+import Button3D from "./Button3D.svelte";
+import { getButtonGroup, getDimension } from "./context";
+let { dimension, kind, size, shape, disabled, isSelected, onclick, ...rest } = $props();
+const contextDimension = getDimension();
+const group = getButtonGroup();
+const index = group?.register() ?? -1;
+const resolved = $derived({
+	kind: kind ?? group?.kind,
+	size: size ?? group?.size,
+	shape: shape ?? group?.shape,
+	disabled: disabled ?? group?.disabled ?? false,
+	isSelected: isSelected ?? group?.isSelected(index)
+});
+function handleClick(event) {
+	if (resolved.disabled) return;
+	group?.select(index);
+	onclick?.(event);
+}
+</script>
+
+{#if (dimension ?? contextDimension) === '3d'}
+	<Button3D {...rest} {...resolved} onclick={handleClick} />
+{:else}
+	<Button2D {...rest} {...resolved} onclick={handleClick} />
+{/if}

package/dist/Button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './types';
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Button2D.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">import { resolveButtonStyle } from "./button-style";
+import { getTheme } from "./context";
+let { label = "", children, kind, size, shape, isSelected, disabled = false, inert = false, onclick, class: className = "", style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const s = $derived(resolveButtonStyle(t, {
+	kind,
+	size,
+	shape,
+	selected: isSelected,
+	disabled
+}));
+const vars = $derived([
+	`--ui-height: ${s.height}px`,
+	`--ui-padding-x: ${s.paddingX}px`,
+	`--ui-radius: ${s.radius}px`,
+	`--ui-fill: ${s.fill}`,
+	`--ui-hover: ${s.hoverFill}`,
+	`--ui-active: ${s.activeFill}`,
+	`--ui-text: ${s.text}`,
+	`--ui-focus: ${t.colors.accent}`,
+	`--ui-font: ${s.font.fontWeight} ${s.font.fontSize}px/${s.font.lineHeight}px ${t.typography.fontFamily}`,
+	`--ui-duration: ${t.animation.timing200}ms`,
+	`--ui-easing: ${t.animation.easeOutCurve}`
+].join("; "));
+</script>
+
+<button
+	type="button"
+	class="ui-button {className}"
+	class:square={s.square}
+	style="{vars}; {userStyle}"
+	aria-pressed={isSelected}
+	{disabled}
+	{inert}
+	{onclick}
+	{...rest}
+>
+	{#if children}{@render children()}{:else}{label}{/if}
+</button>
+
+<style>
+	.ui-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		box-sizing: border-box;
+		height: var(--ui-height);
+		min-width: var(--ui-height);
+		padding: 0 var(--ui-padding-x);
+		border: 0;
+		border-radius: var(--ui-radius);
+		background: var(--ui-fill);
+		color: var(--ui-text);
+		font: var(--ui-font);
+		white-space: nowrap;
+		cursor: pointer;
+		transition: background-color var(--ui-duration) var(--ui-easing);
+	}
+	.square {
+		width: var(--ui-height);
+	}
+	.ui-button:hover:not(:disabled) {
+		background: var(--ui-hover);
+	}
+	.ui-button:active:not(:disabled) {
+		background: var(--ui-active);
+	}
+	.ui-button:focus-visible {
+		outline: 3px solid var(--ui-focus);
+		outline-offset: 2px;
+	}
+	.ui-button:disabled {
+		cursor: not-allowed;
+	}
+</style>

package/dist/Button2D.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './types';
+declare const Button2D: import("svelte").Component<ButtonProps, {}, "">;
+type Button2D = ReturnType<typeof Button2D>;
+export default Button2D;

package/dist/Button3D.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">// A-Frame rendering of Button: a `rounded` slab plus a troika label, centered on
+// the entity's position and sized to fit the label. Clicked through the A-Frame
+// cursor: the slab carries `.raycastable` (the raycaster only tests meshes set
+// directly on matching entities), and its events bubble up to the root.
+import { ensure3d } from "./aframe";
+import { watchTextSize } from "./aframe/measure";
+import { resolveButtonStyle } from "./button-style";
+import { getTheme } from "./context";
+import { font3d } from "./fonts";
+import { useSlot } from "./layout.svelte";
+let { label = "", children: _children, kind, size, shape, isSelected, disabled = false, inert = false, onclick, class: className = "", ...rest } = $props();
+// Registers `rounded` before the entities below are created.
+ensure3d();
+const theme = getTheme();
+const t = $derived(theme());
+const s = $derived(resolveButtonStyle(t, {
+	kind,
+	size,
+	shape,
+	selected: isSelected,
+	disabled
+}));
+const m = (px) => px * t.space3d.metersPerPx;
+let hovered = $state(false);
+let pressed = $state(false);
+let textWidth = $state(0);
+let labelEl = $state();
+const interactive = $derived(!disabled && !inert);
+const height = $derived(m(s.height));
+const width = $derived(s.square ? height : Math.max(height, textWidth + 2 * m(s.paddingX)));
+const depth = $derived(t.space3d.depth);
+// Position within a ButtonGroup / Panel, if in one.
+const slot = useSlot(() => ({
+	width,
+	height
+}));
+// Losing interactivity mid-hover never gets a mouseleave, so reset here.
+$effect(() => {
+	if (!interactive) hovered = pressed = false;
+});
+const slab = $derived.by(() => {
+	const glass = s.material === "glass";
+	// Tertiary has no slab until hovered.
+	const hidden = s.material === "none" && !hovered && !pressed;
+	const fill = pressed ? s.activeFill : hovered || hidden ? s.hoverFill : s.fill;
+	return [
+		`width: ${width}`,
+		`height: ${height}`,
+		`depth: ${depth}`,
+		`radius: ${m(s.radius)}`,
+		`glass: ${glass}`,
+		`color: ${glass ? "#FFFFFF" : fill}`,
+		`opacity: ${s.material === "none" ? .8 : 1}`,
+		`enabled: ${!hidden}`
+	].join("; ");
+});
+const text = $derived([
+	`value: ${label.replace(/;/g, ",")}`,
+	`fontSize: ${m(s.font.fontSize) * t.space3d.textScale}`,
+	`color: ${s.text3d}`,
+	`font: ${font3d(t)}`,
+	"anchor: center",
+	"baseline: center"
+].join("; "));
+const scale = $derived(hovered && interactive ? t.space3d.hoverScale : 1);
+const motion = $derived(`dur: ${t.animation.timing100}; easing: ${t.animation.easeOut3d}`);
+// Measure the label once troika has laid it out, to size the slab.
+$effect(() => {
+	if (labelEl) return watchTextSize(labelEl, (w) => textWidth = w);
+});
+</script>
+
+<!-- 3D button clicked via the A-Frame cursor, not a DOM control -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+<a-entity
+	{...rest}
+	class={className}
+	onclick={(event: Event) => interactive && onclick?.(event)}
+	onmouseenter={() => interactive && (hovered = true)}
+	onmouseleave={() => (hovered = pressed = false)}
+	onmousedown={() => interactive && (pressed = true)}
+	onmouseup={() => (pressed = false)}
+>
+	<a-entity position="{slot().x} {slot().y} 0">
+		<a-entity
+			animation__uiscale="property: scale; to: {scale} {scale} 1; {motion}"
+			animation__uipress="property: object3D.position.z; to: {pressed ? -t.space3d.pressDepth : 0}; {motion}"
+		>
+			<a-entity class={interactive ? 'raycastable' : ''} rounded={slab} position="{-width / 2} {-height / 2} 0"></a-entity>
+			<a-entity
+				bind:this={labelEl}
+				troika-text={text}
+				troika-text-material="shader: standard"
+				position="0 0 {depth + 0.002}"
+			></a-entity>
+		</a-entity>
+	</a-entity>
+</a-entity>

package/dist/Button3D.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './types';
+declare const Button3D: import("svelte").Component<ButtonProps, {}, "">;
+type Button3D = ReturnType<typeof Button3D>;
+export default Button3D;

package/dist/ButtonGroup.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { getDimension, getTheme, setButtonGroup, setDimension } from "./context";
+import { createStack, setStack, useSlot } from "./layout.svelte";
+const theme = getTheme();
+let { children, kind, size, shape, disabled = false, mode, selected = $bindable(), gap = theme().sizing.scale300, dimension, style: userStyle = "", ...rest } = $props();
+const contextDimension = getDimension();
+// So the buttons inside follow an explicit `dimension` on the group. Context is set
+// once, so changing `dimension` later has no effect.
+// svelte-ignore state_referenced_locally
+if (dimension) setDimension(dimension);
+let count = 0;
+// 3D layout. Order matters: join the parent's stack before providing our own.
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+const row = is3d ? createStack(() => ({
+	direction: "row",
+	gap: gap * theme().space3d.metersPerPx
+})) : undefined;
+const slot = is3d ? useSlot(() => row.size) : () => ({
+	x: 0,
+	y: 0
+});
+setStack(row);
+setButtonGroup({
+	get kind() {
+		return kind;
+	},
+	get size() {
+		return size;
+	},
+	get shape() {
+		return shape;
+	},
+	get disabled() {
+		return disabled;
+	},
+	register: () => count++,
+	isSelected(index) {
+		if (!mode) return undefined;
+		return Array.isArray(selected) ? selected.includes(index) : selected === index;
+	},
+	select(index) {
+		if (mode === "radio") selected = index;
+		if (mode === "checkbox") {
+			const current = Array.isArray(selected) ? selected : [];
+			selected = current.includes(index) ? current.filter((i) => i !== index) : [...current, index];
+		}
+	}
+});
+</script>
+
+{#if (dimension ?? contextDimension) === '3d'}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">{@render children()}</a-entity>
+	</a-entity>
+{:else}
+	<div role="group" style="display: inline-flex; gap: {gap}px; {userStyle}" {...rest}>
+		{@render children()}
+	</div>
+{/if}

package/dist/ButtonGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ButtonKind, ButtonShape, ButtonSize, Dimension } from './theme';
+type Props = {
+    children: Snippet;
+    kind?: ButtonKind;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    disabled?: boolean;
+    mode?: 'radio' | 'checkbox';
+    selected?: number | number[];
+    gap?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const ButtonGroup: import("svelte").Component<Props, {}, "selected">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/Checkbox.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">// Base UI-style Checkbox, as a box or a toggle switch (`type="toggle"`).
+// 2D wraps a native <input type="checkbox">, so keyboard and screen readers work.
+// 3D: the whole row (control + label) is one click target for the A-Frame cursor.
+import { untrack } from "svelte";
+import { ensure3d } from "./aframe";
+import { watchTextSize } from "./aframe/measure";
+import { resolveCheckboxStyle } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { font3d } from "./fonts";
+import { useSlot } from "./layout.svelte";
+let { checked = $bindable(false), label = "", type = "checkbox", disabled = false, onchange, dimension, style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const s = $derived(resolveCheckboxStyle(t, {
+	type,
+	checked,
+	disabled
+}));
+const toggle = $derived(type === "toggle");
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// ---- 3D ----
+const m = (px) => px * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+let hovered = $state(false);
+let labelSize = $state({
+	width: 0,
+	height: 0
+});
+let labelEl = $state();
+const control = $derived({
+	width: m(s.width),
+	height: m(s.height)
+});
+const gap = $derived(label ? m(t.checkbox.gap) : 0);
+const size = $derived({
+	width: control.width + gap + labelSize.width,
+	height: Math.max(control.height, labelSize.height)
+});
+const slot = is3d ? useSlot(() => size) : () => ({
+	x: 0,
+	y: 0
+});
+const controlX = $derived(-size.width / 2 + control.width / 2);
+const depth = .02;
+const knobX = $derived(checked ? control.width / 2 - control.height / 2 : -control.width / 2 + control.height / 2);
+// The knob's x is driven by its animation; the position attribute only sets where it starts.
+const startKnobX = untrack(() => knobX);
+const scale = $derived(hovered && !disabled ? t.space3d.hoverScale : 1);
+const motion = $derived(`dur: ${t.animation.timing200}; easing: ${t.animation.easeOut3d}`);
+$effect(() => {
+	if (labelEl) return watchTextSize(labelEl, (width, height) => labelSize = {
+		width,
+		height
+	});
+});
+function toggleChecked() {
+	if (disabled) return;
+	checked = !checked;
+	onchange?.(checked);
+}
+</script>
+
+{#if is3d}
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+	<a-entity
+		{...rest}
+		onclick={toggleChecked}
+		onmouseenter={() => (hovered = true)}
+		onmouseleave={() => (hovered = false)}
+	>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<!-- Invisible hit area over control + label (the raycaster ignores `visible`). -->
+			<a-entity
+				class={disabled ? '' : 'raycastable'}
+				geometry="primitive: plane; width: {size.width}; height: {size.height}"
+				material="visible: false"
+				position="0 0 {depth}"
+			></a-entity>
+			<a-entity position="{controlX} 0 0" animation__uiscale="property: scale; to: {scale} {scale} 1; {motion}">
+				<a-entity
+					rounded="width: {control.width}; height: {control.height}; depth: {depth}; radius: {m(s.radius)}; color: {s.fill3d}"
+					position="{-control.width / 2} {-control.height / 2} 0"
+				></a-entity>
+				{#if toggle}
+					<a-entity
+						geometry="primitive: cylinder; radius: {m(s.knob) / 2}; height: 0.008; segmentsRadial: 32"
+						material="color: {s.knobColor}; roughness: 0.4"
+						rotation="90 0 0"
+						position="{startKnobX} 0 {depth + t.space3d.raise / 2}"
+						animation__knob="property: object3D.position.x; to: {knobX}; {motion}"
+					></a-entity>
+				{:else}
+					<a-entity
+						visible={checked}
+						troika-text="value: ✓; fontSize: {control.height * 0.95}; color: {s.mark}; font: {font3d(t)}; anchor: center; baseline: center"
+						troika-text-material="shader: standard"
+						position="0 0 {depth + 0.002}"
+					></a-entity>
+				{/if}
+			</a-entity>
+			{#if label}
+				<a-entity
+					bind:this={labelEl}
+					troika-text="value: {label.replace(/;/g, ',')}; fontSize: {m(s.font.fontSize) * t.space3d.textScale}; color: {s.labelColor}; font: {font3d(t)}; anchor: left; baseline: center"
+					troika-text-material="shader: standard"
+					position="{-size.width / 2 + control.width + gap} 0 0.002"
+				></a-entity>
+			{/if}
+		</a-entity>
+	</a-entity>
+{:else}
+	<label
+		class="ui-checkbox"
+		class:disabled
+		class:checked
+		style="--ui-width: {s.width}px; --ui-height: {s.height}px; --ui-radius: {s.radius}px; --ui-fill: {s.fill}; --ui-border: {s.border}; --ui-mark: {s.mark}; --ui-knob: {s.knob}px; --ui-knob-color: {s.knobColor}; --ui-label: {s.labelColor}; --ui-gap: {t.checkbox.gap}px; --ui-focus: {t.colors.accent}; --ui-font: {s.font.fontWeight} {s.font.fontSize}px/{s.font.lineHeight}px {t.typography.fontFamily}; --ui-duration: {t.animation.timing200}ms; {userStyle}"
+		{...rest}
+	>
+		<input
+			type="checkbox"
+			role={toggle ? 'switch' : undefined}
+			bind:checked
+			{disabled}
+			onchange={() => onchange?.(checked)}
+		/>
+		{#if toggle}
+			<span class="control track"><span class="knob"></span></span>
+		{:else}
+			<span class="control box">
+				<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" /></svg>
+			</span>
+		{/if}
+		{#if label}<span class="label">{label}</span>{/if}
+	</label>
+{/if}
+
+<style>
+	.ui-checkbox {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--ui-gap);
+		font: var(--ui-font);
+		color: var(--ui-label);
+		cursor: pointer;
+		user-select: none;
+	}
+	.ui-checkbox.disabled {
+		cursor: not-allowed;
+	}
+	input {
+		position: absolute;
+		opacity: 0;
+		width: 1px;
+		height: 1px;
+		margin: 0;
+		pointer-events: none;
+	}
+	.control {
+		position: relative;
+		box-sizing: border-box;
+		flex: none;
+		width: var(--ui-width);
+		height: var(--ui-height);
+		border-radius: var(--ui-radius);
+		background: var(--ui-fill);
+		border: 2px solid var(--ui-border);
+		transition: background-color var(--ui-duration), border-color var(--ui-duration);
+	}
+	input:focus-visible + .control {
+		outline: 3px solid var(--ui-focus);
+		outline-offset: 2px;
+	}
+	.box svg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		fill: none;
+		stroke: var(--ui-mark);
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		opacity: 0;
+		transition: opacity var(--ui-duration);
+	}
+	.checked .box svg {
+		opacity: 1;
+	}
+	.track {
+		border: 0;
+	}
+	.knob {
+		position: absolute;
+		top: 50%;
+		left: calc((var(--ui-height) - var(--ui-knob)) / 2);
+		width: var(--ui-knob);
+		height: var(--ui-knob);
+		border-radius: 50%;
+		background: var(--ui-knob-color);
+		transform: translateY(-50%);
+		transition: transform var(--ui-duration);
+	}
+	.checked .knob {
+		transform: translate(calc(var(--ui-width) - var(--ui-height)), -50%);
+	}
+</style>