BbTabs

<template>
	<div class="max-w-md">
		<!-- One slot per item key. The slot name is the key. -->
		<BbTabs v-model="active" :items="tabs">
			<template #overview>
				<p class="m-0 text-sm opacity-70">
					Checkout latency is down 18% since June. Two open risks, both owned.
				</p>
			</template>

			<template #activity>
				<p class="m-0 text-sm opacity-70">
					Billing retries shipped on Tuesday; the avatar upload timeout was
					fixed the same day.
				</p>
			</template>

			<template #members>
				<ul class="m-0 grid list-none gap-1 p-0 text-sm opacity-70">
					<li v-for="person in members" :key="person.id">
						{{ person.fullName }} — {{ person.jobTitle }}
					</li>
				</ul>
			</template>
		</BbTabs>

		<p class="mt-3 text-sm opacity-70">Active key: {{ active }}</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';
import { users } from '~/demo-data';

type Section = 'overview' | 'activity' | 'members';

const tabs: Array<BbTabsItem<Section>> = [
	{ key: 'overview', label: 'Overview' },
	{ key: 'activity', label: 'Activity' },
	{ key: 'members', label: 'Members' },
];

// Drop the v-model entirely and the first enabled tab is selected for you.
const active = ref<Section>('overview');

const members = users.slice(0, 4);
</script>

<template>
	<div class="max-w-md">
		<!--
			The strip is one tab stop. Focus a trigger, then use the arrows: the
			selection moves with the focus, Home and End jump to the ends, and the
			disabled tab is skipped in both directions.
		-->
		<BbTabs v-model="active" :items="tabs">
			<template v-for="status in tabs" :key="status.key" #[status.key]>
				<p class="m-0 text-sm opacity-70">
					{{ counts[status.key] }} orders are {{ status.label.toLowerCase() }}.
				</p>
			</template>
		</BbTabs>

		<p class="mt-3 text-sm opacity-70">
			Tab moves focus into the strip, then out of it to the panel — one stop
			each, not one per trigger.
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';
import { orders } from '~/demo-data';

type Status = 'pending' | 'shipped' | 'delivered' | 'refunded';

// `label` is optional on BbTabsItem; narrowing it here keeps the pane copy
// below free of non-null assertions.
type StatusTab = BbTabsItem<Status> & { label: string };

const tabs: StatusTab[] = [
	{ key: 'pending', label: 'Pending' },
	{ key: 'shipped', label: 'Shipped' },
	{ key: 'delivered', label: 'Delivered' },
	// A disabled tab stays visible, is skipped by the arrows, and can never
	// become the default selection.
	{ key: 'refunded', label: 'Refunded', disabled: true },
];

const active = ref<Status>('pending');

const counts = computed<Record<Status, number>>(() => ({
	pending: orders.filter((order) => order.status === 'pending').length,
	shipped: orders.filter((order) => order.status === 'shipped').length,
	delivered: orders.filter((order) => order.status === 'delivered').length,
	refunded: orders.filter((order) => order.status === 'refunded').length,
}));
</script>

<template>
	<div class="max-w-md">
		<BbTabs v-model="active" compact :items="tabs">
			<!--
				`label:inbox` decorates one trigger. The slot name is the normalized
				key, and what goes in it is presentation only — the trigger is
				already the control, so never nest a button or a link here.
			-->
			<template #label:inbox="{ text }">
				<span class="inline-flex items-center gap-1.5">
					{{ text }}
					<BbBadge size="sm" variant="secondary">{{ unread }}</BbBadge>
				</span>
			</template>

			<template #inbox>
				<ul class="m-0 grid list-none gap-2 p-0">
					<li v-for="thread in threads" :key="thread.id" class="text-sm">
						<span class="font-medium">{{ thread.subject }}</span>
						<span class="opacity-70"> — {{ thread.from }}</span>
					</li>
				</ul>
			</template>

			<template #sent>
				<p class="m-0 text-sm opacity-70">12 messages sent this week.</p>
			</template>

			<template #archive>
				<p class="m-0 text-sm opacity-70">
					Everything older than 90 days lands here.
				</p>
			</template>
		</BbTabs>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbBadge, BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type Folder = 'inbox' | 'sent' | 'archive';

const tabs: Array<BbTabsItem<Folder>> = [
	{ key: 'inbox', label: 'Inbox' },
	{ key: 'sent', label: 'Sent' },
	{ key: 'archive', label: 'Archive' },
];

const active = ref<Folder>('inbox');
const unread = 12;

const threads = [
	{ id: 1, subject: 'Invoice INV-1042 is overdue', from: 'billing@acme.co' },
	{ id: 2, subject: 'Seat upgrade confirmed', from: 'hello@bitboss.io' },
	{ id: 3, subject: 'Weekly product digest', from: 'product@northwind.io' },
];
</script>

<template>
	<div class="max-w-md">
		<p class="m-0 mb-3 text-sm font-medium">{{ product.name }}</p>

		<BbTabs v-model="active" :items="tabs">
			<template #description>
				<p class="m-0 text-sm opacity-70">
					A sit-stand desk with a 160 cm top, dual motors and a memory
					controller for three heights.
				</p>
			</template>

			<template #specifications>
				<dl class="m-0 grid grid-cols-2 gap-x-4 gap-y-1 text-sm opacity-70">
					<dt>SKU</dt>
					<dd class="m-0">{{ product.sku }}</dd>
					<dt>Category</dt>
					<dd class="m-0">{{ product.category }}</dd>
					<dt>Price</dt>
					<dd class="m-0">{{ product.price }} {{ product.currency }}</dd>
					<dt>Updated</dt>
					<dd class="m-0">{{ product.updatedAt }}</dd>
				</dl>
			</template>

			<template #reviews>
				<p class="m-0 text-sm opacity-70">
					Rated {{ product.rating }} out of 5 across 214 reviews.
				</p>
			</template>
		</BbTabs>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';
import { products } from '~/demo-data';

type Pane = 'description' | 'specifications' | 'reviews';

const product = products[1]!;

const tabs: Array<BbTabsItem<Pane>> = [
	{ key: 'description', label: 'Description' },
	// Only this pane is eager: its table is the part a search engine should
	// find, and it is in the page source whether or not the tab is ever opened.
	{ key: 'specifications', label: 'Specifications', eager: true },
	{ key: 'reviews', label: 'Reviews' },
];

const active = ref<Pane>('description');
</script>

<template>
	<div class="max-w-md">
		<!--
			A mode switch, not a journey: sliding the panes sideways would suggest
			the two views sit next to each other. Both axes off makes the swap
			instant.
		-->
		<BbTabs
			v-model="mode"
			compact
			disable-animate-x
			disable-animate-y
			:items="tabs"
		>
			<template #write>
				<BbTextarea
					id="tabs-composer-body"
					v-model="draft"
					compact
					label="Comment"
					name="body"
					:rows="4"
				/>
			</template>

			<template #preview>
				<div
					class="min-h-[92px] rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3 text-sm"
				>
					<p v-for="(line, index) in lines" :key="index" class="m-0">
						{{ line }}
					</p>
				</div>
			</template>
		</BbTabs>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTabs, BbTextarea } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type Mode = 'write' | 'preview';

const tabs: Array<BbTabsItem<Mode>> = [
	{ key: 'write', label: 'Write' },
	{ key: 'preview', label: 'Preview' },
];

const mode = ref<Mode>('write');

// The draft lives here, not inside the pane, so the default lazy panes have
// nothing to lose when you switch back and forth.
const draft = ref<string | null>(
	'Shipping the retry fix today.\nThe timeout regression is next.'
);

const lines = computed(() => (draft.value ?? '').split('\n'));
</script>

<template>
	<div class="max-w-md">
		<!--
			`navigation` writes the active tab into the query, `query-key` names
			the parameter, and `replace` keeps Back pointing at the page you came
			from instead of at your last tab click.
		-->
		<BbTabs
			v-model="view"
			compact
			:items="tabs"
			navigation
			query-key="demo-tab"
			replace
		>
			<template #open>
				<p class="m-0 text-sm opacity-70">
					{{ counts.open }} incidents are waiting for triage.
				</p>
			</template>

			<!-- The slot name is the normalized key: `inReview` becomes `inreview`. -->
			<template #inreview>
				<p class="m-0 text-sm opacity-70">
					{{ counts.inReview }} incidents have an owner and a mitigation.
				</p>
			</template>

			<template #closed>
				<p class="m-0 text-sm opacity-70">
					{{ counts.closed }} incidents were resolved this quarter.
				</p>
			</template>
		</BbTabs>

		<p class="mt-3 text-sm opacity-70">
			Switch tabs and watch the address bar. Query:
			<code>?demo-tab={{ slug }}</code>
		</p>
		<p class="mt-1 text-sm opacity-70">
			Bound key, unchanged: <code>{{ view }}</code>
		</p>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type View = 'open' | 'inReview' | 'closed';

const tabs: Array<BbTabsItem<View>> = [
	{ key: 'open', label: 'Open' },
	{ key: 'inReview', label: 'In review' },
	{ key: 'closed', label: 'Closed' },
];

// This page is prerendered with no query, so the static HTML always carries
// this tab. The URL only takes over once the browser has the page.
const view = ref<View>('open');

// The URL carries the normalized slug, never the raw key.
const slug = computed(() => view.value.toLowerCase());

const counts = { open: 6, inReview: 3, closed: 41 };
</script>

<template>
	<div class="max-w-md">
		<!--
			`block` stretches the strip to its container and gives every trigger the
			width of the widest one, so the row reads as a segmented control.
			`compact` drops the whole scale a notch to match compact fields.
		-->
		<BbTabs v-model="range" block compact :items="tabs">
			<template v-for="tab in tabs" :key="tab.key" #[tab.key]>
				<p class="m-0 text-sm opacity-70">
					{{ revenue[tab.key] }} € booked over the {{ tab.label }} window.
				</p>
			</template>
		</BbTabs>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type Range = 'week' | 'month' | 'quarter';

const tabs: Array<BbTabsItem<Range> & { label: string }> = [
	{ key: 'week', label: 'This week' },
	{ key: 'month', label: 'This month' },
	{ key: 'quarter', label: 'This quarter' },
];

const range = ref<Range>('month');

const revenue: Record<Range, string> = {
	week: '4,120',
	month: '18,640',
	quarter: '52,905',
};
</script>

<template>
	<div class="max-w-lg">
		<!--
			The strip becomes a column beside the panes. `--max-w` caps its width —
			a maximum, not a width, so short labels keep their natural size and long
			ones ellipse instead of widening the column.
		-->
		<BbTabs
			v-model="section"
			compact
			direction="vertical"
			:items="tabs"
			style="--max-w: 150px"
		>
			<template #general>
				<p class="m-0 text-sm opacity-70">
					Workspace name, default language and the region your data lives in.
				</p>
			</template>

			<template #security>
				<p class="m-0 text-sm opacity-70">
					Session length, two-factor enforcement and the SSO connection.
				</p>
			</template>

			<template #tokens>
				<p class="m-0 text-sm opacity-70">
					Personal access tokens, their scopes and when each was last used.
				</p>
			</template>
		</BbTabs>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type Section = 'general' | 'security' | 'tokens';

const tabs: Array<BbTabsItem<Section>> = [
	{ key: 'general', label: 'General' },
	{ key: 'security', label: 'Security' },
	{ key: 'tokens', label: 'Personal access tokens' },
];

const section = ref<Section>('general');
</script>

<template>
	<div class="max-w-md">
		<BbTabs v-model="active" compact :items="tabs">
			<!--
				The two header slots sit outside the scrollable list. Bind each
				arrow's `disabled` to the matching can-scroll flag so it dims at the
				end of the strip, and give an icon-only button an accessible name.
			-->
			<template #header:prepend="{ canScrollLeft, scroll }">
				<BbButton
					aria-label="Scroll tabs left"
					class="mr-1 shrink-0"
					:disabled="!canScrollLeft"
					icon="lucide:chevron-left"
					size="sm"
					variant="ghost"
					@click="scroll('left')"
				/>
			</template>

			<template #header:append="{ canScrollRight, scroll }">
				<BbButton
					aria-label="Scroll tabs right"
					class="ml-1 shrink-0"
					:disabled="!canScrollRight"
					icon="lucide:chevron-right"
					size="sm"
					variant="ghost"
					@click="scroll('right')"
				/>
			</template>

			<template v-for="tab in tabs" :key="tab.key" #[tab.key]>
				<p class="m-0 text-sm opacity-70">Release notes for {{ tab.label }}.</p>
			</template>
		</BbTabs>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbButton, BbTabs } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

const months = [
	'January',
	'February',
	'March',
	'April',
	'May',
	'June',
	'July',
	'August',
	'September',
];

// Keys are already lowercase slugs, so `#[tab.key]` below names the pane slot
// correctly. A key of `v3-1` would need the slot `v3_1`.
const tabs: Array<BbTabsItem & { label: string }> = months.map((month) => ({
	key: month.toLowerCase(),
	label: `${month} 2026`,
}));

const active = ref('january');
</script>

<template>
	<div class="max-w-md">
		<!--
			BbTabsRoot renders nothing itself: it owns the state and publishes it,
			so the list and the panes can sit anywhere below it — here with a
			toolbar and a rule between them.
		-->
		<BbTabsRoot v-model="active" compact :items="tabs">
			<template #default="{ goTo, isFirst, isLast }">
				<div class="flex items-center justify-between gap-2">
					<BbTabsList class="min-w-0 flex-1" />
					<div class="flex shrink-0 gap-1">
						<BbButton
							:disabled="isFirst"
							size="sm"
							variant="outline"
							@click="goTo('previous')"
						>
							Previous
						</BbButton>
						<BbButton
							:disabled="isLast"
							size="sm"
							variant="outline"
							@click="goTo('next')"
						>
							Next
						</BbButton>
					</div>
				</div>

				<div class="my-3 border-t border-[color:var(--bb-border)]" />

				<BbTabsPanes>
					<template #overview>
						<p class="m-0 text-sm opacity-70">
							Two owners, one open risk, latency down 18% since June.
						</p>
					</template>
					<template #activity>
						<p class="m-0 text-sm opacity-70">
							Billing retries shipped Tuesday; avatar upload timeout fixed.
						</p>
					</template>
					<template #members>
						<p class="m-0 text-sm opacity-70">
							14 editors, 23 viewers, 3 billing administrators.
						</p>
					</template>
				</BbTabsPanes>
			</template>
		</BbTabsRoot>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbButton, BbTabsList, BbTabsPanes, BbTabsRoot } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type Section = 'overview' | 'activity' | 'members';

const tabs: Array<BbTabsItem<Section>> = [
	{ key: 'overview', label: 'Overview' },
	{ key: 'activity', label: 'Activity' },
	{ key: 'members', label: 'Members' },
];

const active = ref<Section>('overview');
</script>

<template>
	<div class="flex max-w-md flex-col gap-3">
		<!--
			This banner is not inside the tabs, so there is no context to inject and
			no template ref to reach for. `useBbTabsContext` finds the group by the
			same id the component was given.
		-->
		<div
			class="flex items-center justify-between gap-3 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
		>
			<p class="m-0 text-sm">Two sessions have no second factor.</p>
			<BbButton size="sm" variant="outline" @click="select('security')">
				Review
			</BbButton>
		</div>

		<BbTabs id="workspace-settings" v-model="section" compact :items="tabs">
			<template #general>
				<p class="m-0 text-sm opacity-70">Workspace name and default region.</p>
			</template>
			<template #security>
				<p class="m-0 text-sm opacity-70">
					Session length, two-factor enforcement and the SSO connection.
				</p>
			</template>
			<template #billing>
				<p class="m-0 text-sm opacity-70">Plan, seats and invoice history.</p>
			</template>
		</BbTabs>

		<p class="m-0 text-sm opacity-70">
			Reported by the handle: {{ current ?? 'not mounted yet' }}
		</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbButton, BbTabs, useBbTabsContext } from 'bitboss-ui';
import type { BbTabsItem } from 'bitboss-ui';

type Section = 'general' | 'security' | 'billing';

const tabs: Array<BbTabsItem<Section>> = [
	{ key: 'general', label: 'General' },
	{ key: 'security', label: 'Security' },
	{ key: 'billing', label: 'Billing' },
];

const section = ref<Section>('general');

// The id must be the one you passed to the component — generated ids are not
// addressable. The handle is empty on the server and until the tabs mount.
const { current, select } = useBbTabsContext<Section>('workspace-settings');
</script>