Tabs

<xtyle-tabs variant="underline" label="Account settings" value="profile">
	<button slot="tab" value="profile">Profile</button>
	<div slot="panel">
		<p>Your public profile information.</p>
	</div>

	<button slot="tab" value="billing">Billing</button>
	<div slot="panel">
		<p>Manage your subscription and payment methods.</p>
	</div>

	<button slot="tab" value="api" disabled>API</button>
	<div slot="panel">
		<p>API keys (coming soon).</p>
	</div>
</xtyle-tabs>

<script lang="ts">
	import { Tabs } from "@xtyle/svelte";

	let active = $state("profile");
	const tabs = [
		{ value: "profile", label: "Profile" },
		{ value: "billing", label: "Billing" },
		{ value: "api", label: "API", disabled: true },
	];
</script>

<Tabs {tabs} variant="pill" label="Account settings" bind:value={active}>
	{#snippet panel(value)}
		{#if value === "profile"}<p>Your public profile information.</p>{/if}
		{#if value === "billing"}<p>Manage your subscription and payment methods.</p>{/if}
		{#if value === "api"}<p>API keys (coming soon).</p>{/if}
	{/snippet}
</Tabs>

---
import { Tabs } from "@xtyle/astro";
---

<!-- Astro consumes a child's `slot` attribute to route it, so mark tabs and
     panels with `data-xtyle-tab` / `data-xtyle-panel` here. -->
<Tabs variant="enclosed" label="Account settings" value="profile">
	<span data-xtyle-tab value="profile">Profile</span>
	<div data-xtyle-panel>
		<p>Your public profile information.</p>
	</div>

	<span data-xtyle-tab value="billing">Billing</span>
	<div data-xtyle-panel>
		<p>Manage your subscription and payment methods.</p>
	</div>
</Tabs>

<!-- The default: eighteen tabs flow onto as many rows as they need. -->
<xtyle-tabs variant="pill" label="Project settings" value="overview">
	<span slot="tab" data-value="overview">Overview</span>
	<span slot="tab" data-value="members">Members</span>
	<span slot="tab" data-value="webhooks">Webhooks</span>
	<!-- …fifteen more -->
	<div slot="panel">Overview panel</div>
	<div slot="panel">Members panel</div>
	<div slot="panel">Webhooks panel</div>
</xtyle-tabs>

<!-- One row, scrolled, for a strip whose order carries meaning. -->
<xtyle-tabs variant="pill" overflow="scroll" label="Release timeline" value="v1">
	<span slot="tab" data-value="v1">v1.0</span>
	<span slot="tab" data-value="v2">v1.1</span>
	<div slot="panel">v1.0 notes</div>
	<div slot="panel">v1.1 notes</div>
</xtyle-tabs>

<script lang="ts">
	import { Tabs } from "@xtyle/svelte";

	// A data-driven tab count is exactly the case `wrap` exists for: nothing
	// off screen, no gesture required to reach a tab.
	const tabs = $derived(project.sections.map((s) => ({ value: s.id, label: s.name })));
	let section = $state("overview");
</script>

<Tabs {tabs} bind:value={section} label="Project settings" variant="pill">
	{#snippet panel(value)}
		<SectionBody id={value} />
	{/snippet}
</Tabs>

---
import Tabs from "@xtyle/astro/Tabs.astro";
const sections = await getSections();
---

<Tabs variant="pill" label="Project settings" value={sections[0].id}>
	{sections.map((s) => <span data-xtyle-tab="" data-value={s.id}>{s.name}</span>)}
	{sections.map((s) => <div data-xtyle-panel=""><SectionBody id={s.id} /></div>)}
</Tabs>

<xtyle-tabs id="view-tabs" tablist label="Workspace view" value="editor">
	<button slot="tab" value="editor">Editor</button>
	<button slot="tab" value="preview">Preview</button>
	<button slot="tab" value="diff">Diff</button>
</xtyle-tabs>

<div class="workspace">
	<main id="view"><!-- rendered by your own change listener --></main>
	<aside><!-- persists across tab switches --></aside>
</div>

<script type="module">
	const tabs = document.getElementById("view-tabs");
	tabs.addEventListener("change", (e) => renderView(e.detail.value));
</script>

<script lang="ts">
	import { Tabs } from "@xtyle/svelte";

	let view = $state("editor");
	const tabs = [
		{ value: "editor", label: "Editor" },
		{ value: "preview", label: "Preview" },
		{ value: "diff", label: "Diff" },
	];
</script>

<!-- No panel snippet: Tabs is a bare tablist driving `view`. -->
<Tabs {tabs} label="Workspace view" bind:value={view} />

<div class="workspace">
	<main>
		{#if view === "editor"}<CodeEditor />{/if}
		{#if view === "preview"}<Preview />{/if}
		{#if view === "diff"}<DiffView />{/if}
	</main>
	<!-- The inspector lives outside the tabs, so it keeps its scroll and selection across switches. -->
	<aside><Inspector /></aside>
</div>