|
|
<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>
|
