svelte-kit-vice/web/routes/uix/lib/SystemAxes.svelte

<script lang="ts">
	/**
	 * System axes — the FOUNDATION knobs that are not component props, applied
	 * to the live stage so you can see any component under any system setting:
	 * density · scaling (zoom) · mode (light/dark, local to the stage) · dir
	 * (RTL) · border-width. The page binds these and applies them to the stage
	 * wrapper (see the canary). Radius / shape / depth that a component exposes
	 * as a prop belong in the Live tab, not here.
	 */
	import { DENSITIES } from './harness.svelte';

	let {
		density = $bindable('comfortable'),
		scaling = $bindable(1),
		mode = $bindable('inherit'),
		dir = $bindable('ltr'),
		borderWidth = $bindable(1)
	}: {
		density?: string;
		scaling?: number;
		mode?: 'inherit' | 'light' | 'dark';
		dir?: 'ltr' | 'rtl';
		borderWidth?: number;
	} = $props();
</script>

<div data-uix-controls>
	<label data-uix-control>
		<span data-uix-control-label>density <span data-uix-control-hint>data-density</span></span>
		<span data-uix-chips role="radiogroup">
			{#each DENSITIES as d}
				<button data-uix-chip data-active={density === d} onclick={() => (density = d)}>{d}</button>
			{/each}
		</span>
	</label>

	<label data-uix-control>
		<span data-uix-control-label>scaling <span data-uix-control-hint>{scaling.toFixed(2)}× · global zoom</span></span>
		<input type="range" min="0.85" max="1.25" step="0.05" bind:value={scaling} />
	</label>

	<label data-uix-control>
		<span data-uix-control-label>mode <span data-uix-control-hint>local to this stage</span></span>
		<span data-uix-chips role="radiogroup">
			{#each ['inherit', 'light', 'dark'] as m}
				<button data-uix-chip data-active={mode === m} onclick={() => (mode = m as typeof mode)}>{m}</button>
			{/each}
		</span>
	</label>

	<label data-uix-control>
		<span data-uix-control-label>direction <span data-uix-control-hint>RTL flips logical props</span></span>
		<span data-uix-chips role="radiogroup">
			{#each ['ltr', 'rtl'] as d}
				<button data-uix-chip data-active={dir === d} onclick={() => (dir = d as typeof dir)}>{d}</button>
			{/each}
		</span>
	</label>

	<label data-uix-control>
		<span data-uix-control-label>border width <span data-uix-control-hint>{borderWidth}px · --border-width</span></span>
		<input type="range" min="0" max="4" step="0.5" bind:value={borderWidth} />
	</label>
</div>