You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.0 KiB
Svelte
31 lines
1.0 KiB
Svelte
<script>import { setContext } from "svelte";
|
|
export let display = "inline-flex";
|
|
export let background = "bg-surface-200-700-token";
|
|
export let border = "border-token border-surface-400-500-token";
|
|
export let spacing = "";
|
|
export let rounded = "rounded-token";
|
|
export let padding = "px-4 py-1";
|
|
export let active = "variant-filled";
|
|
export let hover = "hover:variant-soft";
|
|
export let color = "";
|
|
export let fill = "";
|
|
export let regionLabel = "";
|
|
export let labelledby = "";
|
|
setContext("rounded", rounded);
|
|
setContext("padding", padding);
|
|
setContext("active", active);
|
|
setContext("hover", hover);
|
|
setContext("color", color);
|
|
setContext("fill", fill);
|
|
setContext("regionLabel", regionLabel);
|
|
const cBase = "p-1";
|
|
$:
|
|
spacing = `${display.includes("flex-col") ? "" : "space-x-1"}`;
|
|
$:
|
|
classesBase = `${cBase} ${display} ${background} ${border} ${spacing} ${rounded} ${$$props.class ?? ""}`;
|
|
</script>
|
|
|
|
<div class="radio-group {classesBase}" data-testid="radio-group" role="radiogroup" aria-labelledby={labelledby}>
|
|
<slot />
|
|
</div>
|