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.
45 lines
1.5 KiB
Svelte
45 lines
1.5 KiB
Svelte
<script>import { setContext } from "svelte";
|
|
export let justify = "justify-start";
|
|
export let border = "border-b border-surface-400-500-token";
|
|
export let active = "border-b-2 border-surface-900-50-token";
|
|
export let hover = "hover:variant-soft";
|
|
export let flex = "flex-none";
|
|
export let padding = "px-4 py-2";
|
|
export let rounded = "rounded-tl-container-token rounded-tr-container-token";
|
|
export let spacing = "space-y-1";
|
|
export let regionList = "";
|
|
export let regionPanel = "";
|
|
export let labelledby = "";
|
|
export let panel = "";
|
|
setContext("active", active);
|
|
setContext("hover", hover);
|
|
setContext("flex", flex);
|
|
setContext("padding", padding);
|
|
setContext("rounded", rounded);
|
|
setContext("spacing", spacing);
|
|
const cBase = "space-y-4";
|
|
const cList = "flex overflow-x-auto hide-scrollbar";
|
|
const cPanel = "";
|
|
$:
|
|
classesBase = `${cBase} ${$$props.class ?? ""}`;
|
|
$:
|
|
classesList = `${cList} ${justify} ${border} ${regionList}`;
|
|
$:
|
|
classesPanel = `${cPanel} ${regionPanel}`;
|
|
</script>
|
|
|
|
<!-- FIXME: resolve a11y warnings -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div class="tab-group {classesBase}" data-testid="tab-group" on:click on:keypress on:keydown on:keyup>
|
|
<!-- Tab List -->
|
|
<div class="tab-list {classesList}" role="tablist" aria-labelledby={labelledby}>
|
|
<slot />
|
|
</div>
|
|
<!-- Tab Panel -->
|
|
{#if $$slots.panel}
|
|
<div class="tab-panel {classesPanel}" role="tabpanel" aria-labelledby={panel} tabindex="0">
|
|
<slot name="panel" />
|
|
</div>
|
|
{/if}
|
|
</div>
|