BbTabs

<template>
	<div
		class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-4"
	>
		<div>
			<p class="m-0 text-sm font-medium">Checkout redesign</p>
			<p class="m-0 text-xs text-[color:var(--bb-text-muted)]">
				Vantera web · ships 14 October
			</p>
		</div>

		<!-- One slot per item value. The slot name is the value, and that slot is the panel. -->
		<BbTabs v-model="active" :items="tabs">
			<template #overview>
				<dl class="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
					<dt class="text-[color:var(--bb-text-muted)]">Status</dt>
					<dd class="m-0">On track, two open risks</dd>
					<dt class="text-[color:var(--bb-text-muted)]">Owner</dt>
					<dd class="m-0">{{ members[0]?.fullName }}</dd>
					<dt class="text-[color:var(--bb-text-muted)]">Latency</dt>
					<dd class="m-0">Down 18% since June</dd>
				</dl>
			</template>

			<template #activity>
				<ul class="m-0 grid list-none gap-1 p-0 text-sm">
					<li>Billing retries shipped on Tuesday.</li>
					<li>Avatar upload timeout fixed the same day.</li>
					<li>Address autocomplete moved to the next sprint.</li>
				</ul>
			</template>

			<template #members>
				<ul class="m-0 grid list-none gap-1 p-0 text-sm">
					<li v-for="person in members" :key="person.id" class="flex justify-between gap-3">
						<span>{{ person.fullName }}</span>
						<span class="text-[color:var(--bb-text-muted)]">{{ person.jobTitle }}</span>
					</li>
				</ul>
			</template>
		</BbTabs>
	</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>> = [
	{ value: 'overview', label: 'Overview' },
	{ value: 'activity', label: 'Activity' },
	{ value: '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. Tab then lands on the panel.
		-->
		<BbTabs
			v-model="active"
			compact
			:items="tabs"
			aria-label="Orders by status"
		>
			<template v-for="status in tabs" :key="status.value" #[slotKey(status.value)]>
				<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
					{{ counts[status.value] }} orders are {{ status.label.toLowerCase() }}.
				</p>
			</template>
		</BbTabs>

		<p class="mt-3 text-sm text-[color:var(--bb-text-muted)]">
			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, slotKey } 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 panel copy
// below free of non-null assertions.
type StatusTab = BbTabsItem<Status> & { label: string };

const tabs: StatusTab[] = [
	{ value: 'pending', label: 'Pending' },
	{ value: 'shipped', label: 'Shipped' },
	{ value: 'delivered', label: 'Delivered' },
	// A disabled tab stays visible, is skipped by the arrows, and can never
	// become the default selection.
	{ value: '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">
			<!--
				`inbox:label` decorates one trigger. The slot name is the value in
				kebab-case, and what goes in it is presentation only: the trigger is
				already the control, so never nest a button or a link here.
			-->
			<template #inbox:label="{ label }">
				<span class="inline-flex items-center gap-1.5">
					<BbIcon icon="lucide:inbox" size="sm" />
					{{ label }}
					<BbBadge size="sm" variant="secondary">{{ unread }}</BbBadge>
				</span>
			</template>

			<!-- `label` is the fallback for every trigger without its own slot. -->
			<template #label="{ label, value }">
				<span class="inline-flex items-center gap-1.5">
					<BbIcon :icon="icons[value]" size="sm" />
					{{ label }}
				</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="grid text-sm">
						<span class="font-medium">{{ thread.subject }}</span>
						<span class="text-xs text-[color:var(--bb-text-muted)]">{{ thread.from }}</span>
					</li>
				</ul>
			</template>

			<template #sent>
				<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
					12 messages sent this week.
				</p>
			</template>

			<template #archive>
				<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
					Everything older than 90 days lands here.
				</p>
			</template>
		</BbTabs>
	</div>
</template>

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

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

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

const icons: Record<Folder, string> = {
	inbox: 'lucide:inbox',
	sent: 'lucide:send',
	archive: 'lucide:archive',
};

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

const threads = [
	{ id: 1, subject: 'Invoice INV-1042 is overdue', from: '[email protected]' },
	{ id: 2, subject: 'Seat upgrade confirmed', from: '[email protected]' },
	{ id: 3, subject: 'Weekly product digest', from: '[email protected]' },
];
</script>

<template>
	<div
		class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-4"
	>
		<div>
			<p class="m-0 text-sm font-medium">{{ product.name }}</p>
			<p class="m-0 text-xs text-[color:var(--bb-text-muted)]">
				€{{ product.price.toFixed(2) }} · {{ product.sku }}
			</p>
		</div>

		<!--
			Each panel renders a DraftField, a stand-in for your own panel component
			that keeps its draft in local state. The lazy panel loses the draft on
			every switch away; the eager one stays mounted and keeps it.
		-->
		<BbTabs v-model="active" :items="tabs">
			<template #description>
				<p class="m-0 text-sm">
					A sit-stand desk with a 160 cm top, dual motors and a memory
					controller for three heights.
				</p>
			</template>

			<template #question>
				<DraftField
					id="tabs-eager-question"
					label="Your question (lazy panel)"
					name="question"
					placeholder="Does it fit a 180 cm top?"
				/>
			</template>

			<template #review>
				<DraftField
					id="tabs-eager-review"
					label="Your review (eager panel)"
					name="review"
					placeholder="Quiet motors, sturdy at full height."
				/>
			</template>
		</BbTabs>
	</div>
</template>

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

type Panel = 'description' | 'question' | 'review';

const product = products[1]!;

const tabs: Array<BbTabsItem<Panel>> = [
	{ value: 'description', label: 'Description' },
	{ value: 'question', label: 'Ask a question' },
	// Only this panel is eager: mounted from the first render and never
	// unmounted, so what you type survives a switch.
	{ value: 'review', label: 'Write a review', eager: true },
];

const active = ref<Panel>('review');

// A panel component with its own state: the draft lives and dies with it.
const DraftField = defineComponent({
	props: {
		id: { type: String, required: true },
		label: { type: String, required: true },
		name: { type: String, required: true },
		placeholder: { type: String, required: true },
	},
	setup(props) {
		const draft = ref<string | null>(null);
		// `as Component` keeps h() from expanding every overload of the field.
		return () =>
			h(BbTextarea as Component, {
				...props,
				compact: true,
				rows: 3,
				modelValue: draft.value,
				'onUpdate:modelValue': (value: string | null) => (draft.value = value),
			});
	},
});
</script>

<template>
	<div class="max-w-md">
		<!--
			A mode switch, not a journey: sliding the panels 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 #rendered>
				<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' | 'rendered';

const tabs: Array<BbTabsItem<Mode>> = [
	{ value: 'write', label: 'Write' },
	{ value: 'rendered', label: 'Rendered' },
];

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

// The draft lives here, not inside the panel, so the default lazy panels 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">
					{{ counts.open }} incidents are waiting for triage.
				</p>
			</template>

			<!-- The slot name is the value in kebab-case: `inReview` is `#in-review`. -->
			<template #in-review>
				<p class="m-0 text-sm">
					{{ counts.inReview }} incidents have an owner and a mitigation.
				</p>
			</template>

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

		<dl
			class="mt-4 mb-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm text-[color:var(--bb-text-muted)]"
		>
			<dt>In the URL</dt>
			<!-- The URL carries `slotKey(value)`, the same kebab-case slug as the slot names. -->
			<dd class="m-0"><code>?demo-tab={{ slotKey(view) }}</code></dd>
			<dt>Bound value</dt>
			<dd class="m-0"><code>{{ view }}</code></dd>
		</dl>
	</div>
</template>

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

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

const tabs: Array<BbTabsItem<View>> = [
	{ value: 'open', label: 'Open' },
	{ value: 'inReview', label: 'In review' },
	{ value: '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');

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.value" #[slotKey(tab.value)]>
				<p class="m-0 text-sm">
					<span class="text-lg font-semibold tabular-nums">€{{ revenue[tab.value] }}</span>
					<span class="text-[color:var(--bb-text-muted)]"> booked {{ tab.label.toLowerCase() }}</span>
				</p>
			</template>
		</BbTabs>
	</div>
</template>

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

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

const tabs: Array<BbTabsItem<Range> & { label: string }> = [
	{ value: 'week', label: 'This week' },
	{ value: 'month', label: 'This month' },
	{ value: '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 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3">
		<!--
			The strip becomes a column beside the panels. `block` stretches every
			trigger to the width of the column, so the rows line up like a nav.
		-->
		<BbTabs
			v-model="section"
			block
			compact
			direction="vertical"
			:items="tabs"
		>
			<template v-for="tab in tabs" :key="tab.value" #[slotKey(tab.value)]>
				<div class="grid gap-1 pt-1">
					<p class="m-0 text-sm font-medium">{{ tab.label }}</p>
					<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
						{{ tab.summary }}
					</p>
				</div>
			</template>
		</BbTabs>
	</div>
</template>

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

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

const tabs: Array<BbTabsItem<Section> & { label: string; summary: string }> = [
	{ value: 'general', label: 'General', summary: 'Workspace name, default language and the region your data lives in.' },
	{ value: 'security', label: 'Security', summary: 'Session length, two-factor enforcement and the SSO connection.' },
	{ value: 'tokens', label: 'Access tokens', summary: 'Personal access tokens, their scopes and when each was last used.' },
	{ value: 'billing', label: 'Billing', summary: 'Plan, seats and invoice history.' },
];

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

<template>
	<div class="max-w-md">
		<BbTabs v-model="active" compact :items="tabs">
			<!--
				The two wrapper 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 #wrapper: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 #wrapper: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.value" #[slotKey(tab.value)]>
				<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">Release notes for {{ tab.label }}.</p>
			</template>
		</BbTabs>
	</div>
</template>

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

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

const tabs: Array<BbTabsItem & { label: string }> = months.map((month) => ({
	value: month.toLowerCase(),
	label: `${month} 2026`,
}));

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

<template>
	<div class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]">
		<!--
			BbTabsRoot renders no element: it owns the state, and the list and the
			panels sit anywhere below it. Here a status row lives between them,
			which a plain BbTabs cannot hold. The root takes no `pt`; each piece
			takes its own.
		-->
		<BbTabsRoot v-model="active" :items="tabs" variant="line">
			<!-- The header draws the rule across the whole card, so the strip's
			     own baseline (`--list-border`, which stops after the last trigger)
			     is turned off on BbTabsList's root. -->
			<div class="grid gap-3 border-b border-[color:var(--bb-border)] px-4 pt-4">
				<p class="m-0 text-sm font-medium">Checkout redesign</p>
				<BbTabsList :pt="{ root: { style: { '--list-border': 'transparent' } } }" />
			</div>

			<div
				class="flex items-center justify-between gap-2 px-4 py-2 text-xs text-[color:var(--bb-text-muted)]"
			>
				<span class="min-w-0 truncate">{{ owner.fullName }} · ships 14 October</span>
				<BbButton
					class="shrink-0"
					prepend:icon="lucide:link"
					size="xs"
					variant="ghost"
					@click="copied = true"
				>
					{{ copied ? 'Link copied' : 'Copy link' }}
				</BbButton>
			</div>

			<BbTabsPanels pt:root="px-4 pb-4 pt-1">
				<template #overview>
					<p class="m-0 text-sm">Two open risks, both owned. Latency is down 18% since June.</p>
				</template>
				<template #activity>
					<p class="m-0 text-sm">Billing retries shipped Tuesday; the avatar upload timeout is fixed.</p>
				</template>
				<template #members>
					<p class="m-0 text-sm">14 editors, 23 viewers and 3 billing administrators.</p>
				</template>
			</BbTabsPanels>
		</BbTabsRoot>
	</div>
</template>

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

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

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

const active = ref<Section>('overview');
const owner = users[0]!;
const copied = ref(false);
</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 text-[color:var(--bb-text-muted)]">Workspace name and default region.</p>
			</template>
			<template #security>
				<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
					Session length, two-factor enforcement and the SSO connection.
				</p>
			</template>
			<template #billing>
				<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">Plan, seats and invoice history.</p>
			</template>
		</BbTabs>

		<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">
			Active section: {{ labelOf(current) }}
		</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>> = [
	{ value: 'general', label: 'General' },
	{ value: 'security', label: 'Security' },
	{ value: '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');

const labelOf = (value: Section | null | undefined) =>
	tabs.find((tab) => tab.value === value)?.label ?? 'General';
</script>

<template>
	<div class="grid max-w-lg gap-6">
		<section v-for="look in looks" :key="look.variant" class="grid gap-2">
			<p class="m-0 text-sm">
				<code>{{ look.variant }}</code>
				<span class="text-[color:var(--bb-text-muted)]"> for {{ look.use }}</span>
			</p>
			<!--
				`variant` changes the paint only: items, v-model, keyboard and
				panels behave the same under all three. `none` paints nothing, so
				its look is the strip's own tokens, passed inline through `pt`.
			-->
			<BbTabs
				:items="look.items"
				:pt="look.variant === 'none' ? chips : undefined"
				:variant="look.variant"
			>
				<template #label="{ label, value }">
					<span class="inline-flex items-center gap-1.5">
						{{ label }}
						<BbBadge v-if="counts[value]" size="sm" variant="secondary">{{ counts[value] }}</BbBadge>
					</span>
				</template>
				<template v-for="item in look.items" :key="item.value" #[slotKey(item.value)]>
					<p class="m-0 text-sm text-[color:var(--bb-text-muted)]">{{ item.panel }}</p>
				</template>
			</BbTabs>
		</section>
	</div>
</template>

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

// Counts ride in the `label` slot, keyed by tab.
const counts: Record<string, number> = { activity: 12, members: 4 };

// A filter row built on `none`: rounded triggers and a soft wash under the
// active one (the indicator still slides). Custom properties in `style` land
// inline on the strip, so they win with no stylesheet at all.
const chips: BbTabsProps['pt'] = {
	wrapper: {
		style: {
			'--trigger-px': '0.75rem',
			'--trigger-gap': '0.25rem',
			'--trigger-r': '999px',
			'--indicator-r': '999px',
			'--indicator-bg': 'color-mix(in oklab, var(--bb-text) 8%, transparent)',
			'--list-fg': 'var(--bb-text-muted)',
			'--hover-fg': 'var(--bb-text)',
			'--active-fg': 'var(--bb-text)',
		},
	},
};

type Look = {
	variant: 'pill' | 'line' | 'none';
	use: string;
	items: Array<BbTabsItem & { panel: string }>;
};

const looks: Look[] = [
	{
		variant: 'pill',
		use: 'views of one list',
		items: [
			{ value: 'board', label: 'Board', panel: 'Cards grouped by status: 4 to do, 3 in progress, 9 done.' },
			{ value: 'table', label: 'Table', panel: 'One row per task, sortable by due date.' },
			{ value: 'calendar', label: 'Calendar', panel: 'Due dates on a month grid.' },
		],
	},
	{
		variant: 'line',
		use: 'the sections of one record',
		items: [
			{ value: 'overview', label: 'Overview', panel: `Checkout redesign, owned by ${users[0]!.fullName}, ships 14 October.` },
			{ value: 'activity', label: 'Activity', panel: '12 events this week, newest first.' },
			{ value: 'members', label: 'Members', panel: 'Four people can edit this project.' },
		],
	},
	{
		variant: 'none',
		use: 'a look of your own',
		items: [
			{ value: 'week', label: 'This week', panel: '1,284 orders, up 6% on last week.' },
			{ value: 'month', label: 'This month', panel: '5,310 orders so far in September.' },
			{ value: 'year', label: 'This year', panel: '48,902 orders since January.' },
		],
	},
];
</script>