bitboss-ui 3.0.0-beta.48 → 3.0.0-beta.49

package/dist/ai/BbTabs.md

@@ -44,18 +44,18 @@ shared context:
   can place arbitrary markup between the strip and the panels. Reach for it only
   when the layout demands it.
 
-### Tabs with a panel per key
+### Tabs with a panel per value
 
-Pass `items` (`{ key, label }`), bind the active key with `v-model`, and provide
-one slot named for each item `key` — that is the panel. Slot names go through
+Pass `items` (`{ value, label }`), bind the active value with `v-model`, and
+provide one slot named for each item's `value` — that is the panel. Slot names go through
 `slotKey`, which is kebab-case: words split at separators, camelCase humps and
-digits, lowercased, joined by `-`. So key `'Billing info'` or `'billing_info'`
+digits, lowercased, joined by `-`. So the value `'Billing info'` or `'billing_info'`
 is the panel `#billing-info` (and its label `#billing-info:label`), `'inReview'`
 is `#in-review`, and `'2026-10-06'` stays `#2026-10-06`. A computed name needs
 the same treatment: a `<template v-for="stage in stages" #[stage]>` over
 `'inReview'` fills `#inReview` while the tab reads `#in-review`, so the panel
 stays empty. Write `#[slotKey(stage)]` (`slotKey` is exported from
-`bitboss-ui`), which is also the safe spelling for any key with accents,
+`bitboss-ui`), which is also the safe spelling for any value with accents,
 non-Latin letters or punctuation; `bitboss-ui check` flags the raw form when
 `stages` is a literal array in the same file. With no
 `v-model` the
@@ -119,14 +119,14 @@ import { ref } from 'vue';
 import { BbTabs } from 'bitboss-ui';
 import type { BbTabsItem } from 'bitboss-ui';
 
-// `v-model` binds the active tab to a plain key ref. Seed it with a starting
-// key; drop the binding entirely and BbTabs selects the first enabled tab.
+// `v-model` binds the active tab to a plain value ref. Seed it with a starting
+// value; drop the binding entirely and BbTabs selects the first enabled tab.
 type Section = 'overview' | 'activity' | 'members';
 
 const tabs: Array<BbTabsItem<Section>> = [
-	{ key: 'overview', label: 'Overview' },
-	{ key: 'activity', label: 'Activity' },
-	{ key: 'members', label: 'Members' },
+	{ value: 'overview', label: 'Overview' },
+	{ value: 'activity', label: 'Activity' },
+	{ value: 'members', label: 'Members' },
 ];
 
 const active = ref<Section>('overview');
@@ -146,12 +146,12 @@ const members = [
 ```
 
 `v-model` is the whole event surface: the component emits `update:modelValue`
-with the new key whenever the selection changes — from a click, a keyboard move,
+with the new value whenever the selection changes — from a click, a keyboard move,
 URL navigation, or the companion composable — and it emits once on mount when a
-URL query or the first-enabled fallback resolves a key the parent didn't set, so
+URL query or the first-enabled fallback resolves a value the parent didn't set, so
 your binding starts aligned. You rarely listen to the event directly; bind
 `v-model` and read it. When `items` is generated, drive the panels with a
-dynamic-name slot instead of writing one block per key:
+dynamic-name slot instead of writing one block per value:
 
 **Dynamic panel slots from generated items**
 
@@ -160,9 +160,9 @@ dynamic-name slot instead of writing one block per key:
 	<BbTabs
 		compact
 		:items="[
-			{ key: 'draft', label: 'Draft' },
-			{ key: 'review', label: 'In review' },
-			{ key: 'published', label: 'Published' },
+			{ value: 'draft', label: 'Draft' },
+			{ value: 'review', label: 'In review' },
+			{ value: 'published', label: 'Published' },
 		]"
 	>
 		<template
@@ -178,9 +178,9 @@ dynamic-name slot instead of writing one block per key:
 
 ### Rich labels and badges
 
-Replace a tab's plain text with the `<key>:label` slot (one specific tab) or the
-`label` slot (the fallback for every tab). Both receive the tab's state — `text`
-(the item's `label`), `value` (its `key`), `selected`, `disabled`, plus the
+Replace a tab's plain text with the `<value>:label` slot (one specific tab) or
+the `label` slot (the fallback for every tab). Both receive the tab's state —
+`label`, `value`, `selected`, `disabled`, plus the
 group's `current` / `currentIndex` / `isFirst` / `isLast` and a `goTo` callback —
 so a label can carry a count pill, an icon, or a status dot. Keep the whole
 trigger the interactive target; put only presentation in the slot (do not nest a
@@ -192,9 +192,9 @@ button or link inside a label — the trigger is already the control).
 <template>
 	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<BbTabs v-model="active" compact :items="tabs">
-			<template #inbox:label="{ text }">
+			<template #inbox:label="{ label }">
 				<span class="inline-flex items-center gap-1.5">
-					{{ text }}
+					{{ label }}
 					<BbBadge size="sm" variant="soft-blue">{{ unread }}</BbBadge>
 				</span>
 			</template>
@@ -230,14 +230,14 @@ import { ref } from 'vue';
 import { BbBadge, BbTabs } from 'bitboss-ui';
 import type { BbTabsItem } from 'bitboss-ui';
 
-// Count pills ride in `<key>:label` — presentation only; the trigger stays the
+// Count pills ride in `<value>:label` — presentation only; the trigger stays the
 // control. Soft badge palette from design-language.md § Using color.
 type Folder = 'inbox' | 'sent' | 'spam';
 
 const tabs: Array<BbTabsItem<Folder>> = [
-	{ key: 'inbox', label: 'Inbox' },
-	{ key: 'sent', label: 'Sent' },
-	{ key: 'spam', label: 'Spam' },
+	{ value: 'inbox', label: 'Inbox' },
+	{ value: 'sent', label: 'Sent' },
+	{ value: 'spam', label: 'Spam' },
 ];
 
 const active = ref<Folder>('inbox');
@@ -279,7 +279,7 @@ const inbox = [
 </style>
 ```
 
-Use `<key>:label` when only some tabs need decoration and `label` when every tab
+Use `<value>:label` when only some tabs need decoration and `label` when every tab
 follows one template (an icon + count for all). A badge that changes size after
 mount — a count ticking up — is fine: the strip re-measures the sliding pill and
 equal-width fit when label content resizes, so the layout keeps up on its own.
@@ -298,7 +298,7 @@ inactive. Two reasons to reach for it:
 - **SEO / SSR** — content in inactive panels is in the server-rendered HTML.
 
 `eager` works at two granularities: on the component (every panel eager) or on a
-single `items` entry (`{ key, label, eager: true }`) when only one panel is
+single `items` entry (`{ value, label, eager: true }`) when only one panel is
 expensive to lose. The example keeps a draft message alive while the user checks
 the Audience and Schedule tabs:
 
@@ -361,9 +361,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Section = 'message' | 'audience' | 'schedule';
 
 const tabs: Array<BbTabsItem<Section>> = [
-	{ key: 'message', label: 'Message' },
-	{ key: 'audience', label: 'Audience' },
-	{ key: 'schedule', label: 'Schedule' },
+	{ value: 'message', label: 'Message' },
+	{ value: 'audience', label: 'Audience' },
+	{ value: 'schedule', label: 'Schedule' },
 ];
 
 const active = ref<Section>('message');
@@ -438,8 +438,8 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Mode = 'code' | 'preview';
 
 const tabs: Array<BbTabsItem<Mode>> = [
-	{ key: 'code', label: 'Code' },
-	{ key: 'preview', label: 'Preview' },
+	{ value: 'code', label: 'Code' },
+	{ value: 'preview', label: 'Preview' },
 ];
 
 const draft = ref<string | null>(
@@ -564,9 +564,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Section = 'general' | 'members' | 'billing';
 
 const tabs: Array<BbTabsItem<Section>> = [
-	{ key: 'general', label: 'General' },
-	{ key: 'members', label: 'Members' },
-	{ key: 'billing', label: 'Billing' },
+	{ value: 'general', label: 'General' },
+	{ value: 'members', label: 'Members' },
+	{ value: 'billing', label: 'Billing' },
 ];
 
 const section = ref<Section>('general');
@@ -591,9 +591,9 @@ const onSaveGeneral = async () => {
 		block
 		compact
 		:items="[
-			{ key: 'summary', label: 'Summary' },
-			{ key: 'integrations', label: 'Integrations' },
-			{ key: 'billing', label: 'Billing', disabled: true },
+			{ value: 'summary', label: 'Summary' },
+			{ value: 'integrations', label: 'Integrations' },
+			{ value: 'billing', label: 'Billing', disabled: true },
 		]"
 	>
 		<template #summary><p class="pt-3 text-sm text-(--bb-text-muted)">Environment status at a glance.</p></template>
@@ -611,9 +611,9 @@ const onSaveGeneral = async () => {
 		compact
 		direction="vertical"
 		:items="[
-			{ key: 'general', label: 'General' },
-			{ key: 'security', label: 'Security' },
-			{ key: 'api', label: 'API keys' },
+			{ value: 'general', label: 'General' },
+			{ value: 'security', label: 'Security' },
+			{ value: 'api', label: 'API keys' },
 		]"
 	>
 		<template #general><p class="px-3 text-sm text-(--bb-text-muted)">Workspace basics.</p></template>
@@ -653,9 +653,9 @@ every variant. Three ship:
 <div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 	<BbTabs
 		:items="[
-			{ key: 'board', label: 'Board' },
-			{ key: 'table', label: 'Table' },
-			{ key: 'calendar', label: 'Calendar' },
+			{ value: 'board', label: 'Board' },
+			{ value: 'table', label: 'Table' },
+			{ value: 'calendar', label: 'Calendar' },
 		]"
 	>
 		<template #board><p class="pt-3 text-sm text-(--bb-text-muted)">Cards by status.</p></template>
@@ -671,9 +671,9 @@ every variant. Three ship:
 <div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 	<BbTabs
 		:items="[
-			{ key: 'overview', label: 'Overview' },
-			{ key: 'activity', label: 'Activity' },
-			{ key: 'settings', label: 'Settings' },
+			{ value: 'overview', label: 'Overview' },
+			{ value: 'activity', label: 'Activity' },
+			{ value: 'settings', label: 'Settings' },
 		]"
 		variant="line"
 	>
@@ -696,9 +696,9 @@ and the bar keeps sliding — it is the same measured element as the pill.
 		compact
 		direction="vertical"
 		:items="[
-			{ key: 'profile', label: 'Profile' },
-			{ key: 'sessions', label: 'Sessions' },
-			{ key: 'tokens', label: 'API tokens' },
+			{ value: 'profile', label: 'Profile' },
+			{ value: 'sessions', label: 'Sessions' },
+			{ value: 'tokens', label: 'API tokens' },
 		]"
 		variant="line"
 	>
@@ -719,9 +719,9 @@ active through `pt:item:active`:
 <div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 	<BbTabs
 		:items="[
-			{ key: 'week', label: 'This week' },
-			{ key: 'month', label: 'This month' },
-			{ key: 'year', label: 'This year' },
+			{ value: 'week', label: 'This week' },
+			{ value: 'month', label: 'This month' },
+			{ value: 'year', label: 'This year' },
 		]"
 		pt:item="border-b-2 border-transparent text-(--bb-text-muted) uppercase tracking-wide text-xs"
 		pt:item:active="border-(--bb-text) text-(--bb-text)"
@@ -772,14 +772,14 @@ look in the example's `sideNav` object:
 			:pt="sideNav"
 			variant="none"
 		>
-			<template #label="{ value, text }">
+			<template #label="{ value, label }">
 				<span class="flex items-center gap-2">
 					<BbIcon
 						aria-hidden="true"
 						:icon="icons[value as Section]"
 						size="16"
 					/>
-					{{ text }}
+					{{ label }}
 				</span>
 			</template>
 			<template #profile>
@@ -809,10 +809,10 @@ import type { BbTabsItem, BbTabsProps } from 'bitboss-ui';
 type Section = 'profile' | 'notifications' | 'members' | 'billing';
 
 const sections: Array<BbTabsItem<Section>> = [
-	{ key: 'profile', label: 'Profile' },
-	{ key: 'notifications', label: 'Notifications' },
-	{ key: 'members', label: 'Members' },
-	{ key: 'billing', label: 'Billing' },
+	{ value: 'profile', label: 'Profile' },
+	{ value: 'notifications', label: 'Notifications' },
+	{ value: 'members', label: 'Members' },
+	{ value: 'billing', label: 'Billing' },
 ];
 const icons: Record<Section, string> = {
 	profile: 'lucide:user',
@@ -938,9 +938,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Filter = 'all' | 'unread' | 'starred';
 
 const filters: Array<BbTabsItem<Filter>> = [
-	{ key: 'all', label: 'All' },
-	{ key: 'unread', label: 'Unread' },
-	{ key: 'starred', label: 'Starred' },
+	{ value: 'all', label: 'All' },
+	{ value: 'unread', label: 'Unread' },
+	{ value: 'starred', label: 'Starred' },
 ];
 const filter = ref<Filter>('unread');
 </script>
@@ -1001,9 +1001,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Panel = 'code' | 'preview' | 'diff';
 
 const panels: Array<BbTabsItem<Panel>> = [
-	{ key: 'code', label: 'Code' },
-	{ key: 'preview', label: 'Preview' },
-	{ key: 'diff', label: 'Diff' },
+	{ value: 'code', label: 'Code' },
+	{ value: 'preview', label: 'Preview' },
+	{ value: 'diff', label: 'Diff' },
 ];
 const panel = ref<Panel>('code');
 </script>
@@ -1083,16 +1083,16 @@ ends.
 				/>
 			</template>
 			<!--
-				`slotKey(...)`, never the raw key. A panel's slot name is the
-				NORMALIZED key: `v3.0` becomes `v3_0`, so `#[release.key]` would
+				`slotKey(...)`, never the raw value. A panel's slot name is the
+				NORMALIZED value: `v3.0` becomes `v-3-0`, so `#[release.value]` would
 				name a slot that never matches and every panel would silently render
-				empty. The keys here carry a dot on purpose — with slug-safe keys
+				empty. The values here carry a dot on purpose — with slug-safe values
 				(`v1`…`v9`) the mistake is invisible.
 			-->
 			<template
 				v-for="release in releases"
-				:key="release.key"
-				#[slotKey(release.key)]
+				:key="release.value"
+				#[slotKey(release.value)]
 			>
 				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					{{ release.label }} shipped the design-token overhaul and the tabs
@@ -1124,7 +1124,7 @@ const months = [
 // Realistic release tags: `v3.0` … `v3.8`. The dot is what makes the
 // `slotKey` call in the template load-bearing (see the note there).
 const releases: BbTabsItem[] = months.map((label, index) => ({
-	key: `v3.${index}`,
+	value: `v3.${index}`,
 	label: `${label} · v3.${index}`,
 }));
 
@@ -1218,9 +1218,9 @@ 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' },
+	{ value: 'overview', label: 'Overview' },
+	{ value: 'activity', label: 'Activity' },
+	{ value: 'members', label: 'Members' },
 ];
 
 const active = ref<Section>('overview');
@@ -1238,13 +1238,14 @@ are only relocating the list and the panels.
 Give a tab group an explicit `id` and read or steer it from any component on the
 client with `useBbTabsContext(id)` — no template ref, no shared subtree, no
 being inside the tabs' tree. Pass the same `id` you gave the component (auto-
-generated ids are not addressable) and optionally the key union to type
+generated ids are not addressable) and optionally the value union to type
 `current` / `select`. The returned handle is safe to destructure:
 
-- `current` — a **writable** ref: reading it gives the active key (`null` until
-  the tabs mount), and assigning a key selects it, exactly like `select(key)`.
+- `current` — a **writable** ref: reading it gives the active value (`null`
+  until the tabs mount), and assigning a value selects it, exactly like
+  `select(value)`.
   Assigning `null` warns and is ignored — a tab is always selected.
-- `select(key)` — select by key; unknown keys warn and leave the selection
+- `select(value)` — select by value; unknown values warn and leave the selection
   untouched.
 - `goTo('first' | 'previous' | 'next' | 'last')` — relative navigation, skipping
   disabled tabs.
@@ -1345,9 +1346,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type SectionKey = 'profile' | 'security' | 'notifications';
 
 const tabs: Array<BbTabsItem<SectionKey>> = [
-	{ key: 'profile', label: 'Profile' },
-	{ key: 'security', label: 'Security' },
-	{ key: 'notifications', label: 'Notifications' },
+	{ value: 'profile', label: 'Profile' },
+	{ value: 'security', label: 'Security' },
+	{ value: 'notifications', label: 'Notifications' },
 ];
 
 const section = ref<SectionKey>('profile');
@@ -1357,7 +1358,7 @@ const profile = reactive({
 });
 
 // The alert banner lives OUTSIDE the tabs subtree: it reaches the group purely
-// by id. `current` is a readable/writable ref, `select` jumps straight to a key.
+// by id. `current` is a readable/writable ref, `select` jumps straight to a value.
 const { current, select } = useBbTabsContext<SectionKey>(
 	'account-settings-tabs'
 );
@@ -1393,9 +1394,9 @@ programmatic "go there", not the keyboard.
 <BbTabs
 	manual-activation
 	:items="[
-		{ key: 'summary', label: 'Summary' },
-		{ key: 'invoices', label: 'Invoices' },
-		{ key: 'audit', label: 'Audit log' },
+		{ value: 'summary', label: 'Summary' },
+		{ value: 'invoices', label: 'Invoices' },
+		{ value: 'audit', label: 'Audit log' },
 	]"
 >
 	<template #summary>Summary panel</template>
@@ -1410,22 +1411,22 @@ Set `navigation` to keep the active tab in the URL query (`query-key`, default
 `tab`) so a tab is deep-linkable and survives reload. On load the query wins over
 `modelValue`; thereafter switching writes the query.
 
-**The URL carries a normalized slug, never the raw tab key.** The query value
+**The URL carries a normalized slug, never the raw tab value.** The query value
 goes through `slotKey`, the same kebab-case rule as the slot names, so a tab
-keyed `'In Review'` (or `inReview`, or `in_review`) appears in the URL as
+whose value is `'In Review'` (or `inReview`, or `in_review`) appears in the URL as
 `in-review`. The component round-trips this itself; the surprise lands on
 anything ELSE reading the query — a server matching `?tab=` against camelCase
-keys silently never matches. Compare against `slotKey(key)` server-side, or
-use lowercase kebab keys for server-matched tabs.
+values silently never matches. Compare against `slotKey(value)` server-side, or
+use lowercase kebab values for server-matched tabs.
 
 #### URL values changed in 3.0.0-beta.41
 
 Before the slot-naming reset the slug rule was "non-word runs become `_`,
 lowercased": `?tab=in_review`, `?tab=reviewstatus`. It is now kebab-case:
 `?tab=in-review`, `?tab=review-status`. One rule for slot names and URLs, and
-camelCase keys stay readable instead of squashed.
+camelCase values stay readable instead of squashed.
 
-| Tab key          | Old URL value  | New URL value   |
+| Tab value        | Old URL value  | New URL value   |
 | ---------------- | -------------- | --------------- |
 | `'In Review'`    | `in_review`    | `in-review`     |
 | `'reviewStatus'` | `reviewstatus` | `review-status` |
@@ -1442,7 +1443,7 @@ app writes a tab value: search for `BbTabs` with `navigation` or `query-key`,
 hard-coded `?tab=` / `?<queryKey>=` links, `router.push` / `visit` / `href`
 calls that build a tab value, server redirects, and emails or notifications
 that link to a tab, and rewrite each legacy (underscore or squashed) value to
-its kebab form — `slotKey(key)` gives it.
+its kebab form — `slotKey(value)` gives it.
 
 **Back/forward re-selects the tab, on every platform.** On Vue Router/Nuxt the
 re-selection watcher tracks the route's own query (`$route.query[queryKey]`),
@@ -1522,9 +1523,9 @@ to roll back:
 ```vue
 <BbTabs
 	:items="[
-		{ key: 'overview', label: 'Overview', href: '/project/overview' },
+		{ value: 'overview', label: 'Overview', href: '/project/overview' },
 		{
-			key: 'activity',
+			value: 'activity',
 			label: 'Activity',
 			href: '/project/activity',
 			server: true,
@@ -1651,9 +1652,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Section = 'general' | 'members' | 'billing';
 
 const tabs: Array<BbTabsItem<Section>> = [
-	{ key: 'general', label: 'General' },
-	{ key: 'members', label: 'Members' },
-	{ key: 'billing', label: 'Billing' },
+	{ value: 'general', label: 'General' },
+	{ value: 'members', label: 'Members' },
+	{ value: 'billing', label: 'Billing' },
 ];
 
 const section = ref<Section>('general');
@@ -1725,9 +1726,9 @@ import type { BbTabsItem } from 'bitboss-ui';
 type Section = 'profile' | 'notifications' | 'security';
 
 const sections: Array<BbTabsItem<Section>> = [
-	{ key: 'profile', label: 'Profile' },
-	{ key: 'notifications', label: 'Notifications' },
-	{ key: 'security', label: 'Security' },
+	{ value: 'profile', label: 'Profile' },
+	{ value: 'notifications', label: 'Notifications' },
+	{ value: 'security', label: 'Security' },
 ];
 
 const section = ref<Section>('profile');
@@ -1744,7 +1745,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 ### Works well with
 
 - **`BbBadge` / count pills in `label` slots** — status dots and unread counts
-  ride in the `<key>:label` or `label` slot; the strip re-measures when they
+  ride in the `<value>:label` or `label` slot; the strip re-measures when they
   resize.
 - **`BbButton` for Prev/Next** — feed `goTo` from the `BbTabsRoot` default slot
   or from `useBbTabsContext`, binding `:disabled` to `isFirst`/`isLast`.
@@ -1839,7 +1840,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `id` | `string \| undefined` |  |  | The root's `id`, and the key `useBbTabsContext(id)` pairs by. Generated when omitted. |
 | `items` | `BbTabsItem<K>[]` |  | yes | Array of items that define the tabs in the component. |
 | `manualActivation` | `boolean \| undefined` | ``undefined` (on when `server` is set on the strip or an item…` |  | Arrow keys only move focus; Enter or Space opens the tab (APG manual activation). Home and End move focus too; a click still opens a tab at once. When unset it is on for a strip that makes server visits (`server` on the strip or on any item), where opening a tab on every arrow press would fire a visit per tab passed, and off everywhere else (automatic activation: the arrow keys open the tab they land on). `href` alone does not turn it on: that is a client-side URL rewrite. `true` / `false` override either way. The Radix / Reka / Ark spelling of the same thing is `activationMode="manual"` / `"automatic"`. |
-| `modelValue` | `K \| null \| undefined` |  |  | The current tab key. Used by v-model. |
+| `modelValue` | `K \| null \| undefined` |  |  | The active tab's `value`. Used by v-model. |
 | `navigation` | `boolean \| undefined` | `false` |  | Synchronizes the current tab with the URL query parameter. Pair it with `replace` unless a tab is genuinely a separate destination — see the `replace` prop. |
 | `onBefore` | `(() => boolean \| void) \| undefined` |  |  | Inertia lifecycle hook — fired just before the request is sent. Return `false` to cancel the visit. |
 | `onCancel` | `(() => void) \| undefined` |  |  | Inertia lifecycle hook — fired when the request is cancelled. |
@@ -1883,11 +1884,11 @@ States are listed in precedence order: when two are on at once and their entries
 
 ## Slots
 
-- `label` — scope: `BbTabsSlotProps<K>` `{ current: K \| null; currentIndex: number; disabled: boolean; isFirst: boolean; isLast: boolean; selected: boolean; text: string; value: K; goTo: (target: "first" \| "previous" \| "next" \| "last") => void }` — Fallback slot used for all tab labels when no per-tab `<key>:label` slot is provided.
+- `label` — scope: `BbTabsSlotProps<K>` `{ current: K \| null; currentIndex: number; disabled: boolean; isFirst: boolean; isLast: boolean; selected: boolean; label: string; value: K; goTo: (target: "first" \| "previous" \| "next" \| "last") => void }` — Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided.
 - `wrapper:append` — scope: `BbTabsScrollSlotProps` `{ isScrolling: boolean; canScrollLeft: boolean; canScrollRight: boolean; scroll: (direction: "left" \| "right") => void }` — Content rendered after the scrollable tab label list (e.g. a right scroll arrow).
 - `wrapper:prepend` — scope: `BbTabsScrollSlotProps` `{ isScrolling: boolean; canScrollLeft: boolean; canScrollRight: boolean; scroll: (direction: "left" \| "right") => void }` — Content rendered before the scrollable tab label list (e.g. a left scroll arrow).
-- `#<key>` (named from data) — scope: `BbTabsSlotProps<K>` — One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel). Reserved keys (their slot is one of this component's own, so a key spelled like them is an error): `label`.
-- `#<key>:label` (named from data) — scope: `BbTabsSlotProps<K>` — One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+- `#<value>` (named from data) — scope: `BbTabsSlotProps<K>` — One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel). Reserved names (their slot is one of this component's own, so an item value or column key spelled like them is an error): `label`.
+- `#<value>:label` (named from data) — scope: `BbTabsSlotProps<K>` — One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
 
 ## CSS custom properties
 

package/dist/ai/BbTabsList.md

@@ -47,10 +47,10 @@ States are listed in precedence order: when two are on at once and their entries
 
 ## Slots
 
-- `label` — scope: `BbTabsSlotProps<string>` `{ current: K \| null; currentIndex: number; disabled: boolean; isFirst: boolean; isLast: boolean; selected: boolean; text: string; value: K; goTo: (target: "first" \| "previous" \| "next" \| "last") => void }` — Fallback slot used for all tab labels when no per-tab `<key>:label` slot is provided.
+- `label` — scope: `BbTabsSlotProps<string>` `{ current: K \| null; currentIndex: number; disabled: boolean; isFirst: boolean; isLast: boolean; selected: boolean; label: string; value: K; goTo: (target: "first" \| "previous" \| "next" \| "last") => void }` — Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided.
 - `wrapper:append` — scope: `BbTabsScrollSlotProps` `{ isScrolling: boolean; canScrollLeft: boolean; canScrollRight: boolean; scroll: (direction: "left" \| "right") => void }` — Content rendered after the scrollable tab label list (e.g. a right scroll arrow).
 - `wrapper:prepend` — scope: `BbTabsScrollSlotProps` `{ isScrolling: boolean; canScrollLeft: boolean; canScrollRight: boolean; scroll: (direction: "left" \| "right") => void }` — Content rendered before the scrollable tab label list (e.g. a left scroll arrow).
-- `#<key>:label` (named from data) — scope: `BbTabsSlotProps<K>` — One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+- `#<value>:label` (named from data) — scope: `BbTabsSlotProps<K>` — One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
 
 ## CSS custom properties
 

package/dist/ai/BbTabsPanels.md

@@ -36,7 +36,7 @@ States are listed in precedence order: when two are on at once and their entries
 
 ## Slots
 
-- `#<key>` (named from data) — scope: `BbTabsSlotProps<K>` — One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
+- `#<value>` (named from data) — scope: `BbTabsSlotProps<K>` — One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
 
 ## CSS custom properties
 

package/dist/ai/BbTabsRoot.md

@@ -27,7 +27,7 @@
 | `id` | `string \| undefined` |  |  | The root's `id`, and the key `useBbTabsContext(id)` pairs by. Generated when omitted. |
 | `items` | `BbTabsItem<K>[]` |  | yes | Array of items that define the tabs in the component. |
 | `manualActivation` | `boolean \| undefined` | ``undefined` (on when `server` is set on the strip or an item…` |  | Arrow keys only move focus; Enter or Space opens the tab (APG manual activation). Home and End move focus too; a click still opens a tab at once. When unset it is on for a strip that makes server visits (`server` on the strip or on any item), where opening a tab on every arrow press would fire a visit per tab passed, and off everywhere else (automatic activation: the arrow keys open the tab they land on). `href` alone does not turn it on: that is a client-side URL rewrite. `true` / `false` override either way. The Radix / Reka / Ark spelling of the same thing is `activationMode="manual"` / `"automatic"`. |
-| `modelValue` | `K \| null \| undefined` |  |  | The current tab key. Used by v-model. |
+| `modelValue` | `K \| null \| undefined` |  |  | The active tab's `value`. Used by v-model. |
 | `navigation` | `boolean \| undefined` | `false` |  | Synchronizes the current tab with the URL query parameter. Pair it with `replace` unless a tab is genuinely a separate destination — see the `replace` prop. |
 | `onBefore` | `(() => boolean \| void) \| undefined` |  |  | Inertia lifecycle hook — fired just before the request is sent. Return `false` to cancel the visit. |
 | `onCancel` | `(() => void) \| undefined` |  |  | Inertia lifecycle hook — fired when the request is cancelled. |
@@ -50,7 +50,7 @@
 
 ## Slots
 
-- `default` — scope: `BbTabsRootSlotProps<K>` `{ current: K \| null; currentIndex: number; isFirst: boolean; isLast: boolean; goTo: (target: "first" \| "previous" \| "next" \| "last") => void; select: (key: K) => void }` — Arbitrary layout hosting `BbTabsList` / `BbTabsPanels` anywhere in its subtree.
+- `default` — scope: `BbTabsRootSlotProps<K>` `{ current: K \| null; currentIndex: number; isFirst: boolean; isLast: boolean; goTo: (target: "first" \| "previous" \| "next" \| "last") => void; select: (value: K) => void }` — Arbitrary layout hosting `BbTabsList` / `BbTabsPanels` anywhere in its subtree.
 
 ## See Also
 

package/dist/ai/BbTooltip.md

@@ -131,7 +131,8 @@ bitbossUi({ tooltipVariants: ['info', 'success'] });
 The most common real use: a compact row of icon-only actions, each named by a
 tooltip. This companion frames a shared-document chrome — title, muted meta, and
 `size="xs"` ghost buttons grouped with thin dividers. A `:delay="400"` keeps the
-bubbles from flickering while the pointer crosses the dense toolbar.
+bubbles from flickering while the pointer crosses the dense toolbar; once one
+hint shows, its neighbours open at once (the skip delay, below).
 
 **Icon toolbar with tooltips**
 
@@ -248,10 +249,21 @@ is concerned — the whole label (shortcut included) is flattened into the
 
 - `placement` — as above; the `top`/`right`/`bottom`/`left` families with
   `-start`/`-end` variants, auto-flipping near an edge.
-- `delay` (ms, default `0`) holds the tooltip back until the pointer settles —
-  useful on dense toolbars to avoid a flicker of bubbles while the cursor passes
-  over. It delays only the **open**; the close is always a short debounce (so the
-  pointer can travel from the trigger into the bubble without it vanishing).
+- `delay` (ms, default `100`) holds the tooltip back until the pointer settles,
+  so a cursor passing over a row of buttons doesn't flash a bubble at each one;
+  raise it on dense toolbars. It delays only the **open**, and only for a
+  pointer; the close is always a short debounce (so the pointer can travel from
+  the trigger into the bubble without it vanishing).
+- **Keyboard focus shows the hint at once**, whatever `delay` says: a Tab onto a
+  control is never an accident.
+- **The skip delay:** while a tooltip shows, or for 300 ms after one closes, the
+  next tooltip the pointer reaches opens at once. Run the pointer along a
+  toolbar and every hint after the first appears without a wait. It is shared by
+  every `BbTooltip` and `v-bb-tooltip`, needs no setup, and leaves hover cards
+  alone (they keep their own 350 ms). A tooltip that hid because a menu or
+  dialog opened doesn't count.
+- `:delay="0"` shows the tooltip on hover at once (the default before
+  3.0.0-beta.49).
 - `width` caps the bubble so long hints wrap instead of stretching across the
   screen. It is a **maximum, not a fixed width** — the bubble still shrinks to
   short text, so a one-line hint never sits in an oversized box. A bare number
@@ -510,7 +522,8 @@ type ToolbarAction = {
 // Same document-toolbar hints as `IconButtonTooltips.vue`, restyled through
 // passthrough: a muted wash on `pt:panel` (the bubble — default is the
 // inverted primary), `pt:root:open` adds a drop shadow while showing. Hover
-// a glyph to see the pt; delay 400 matches dense toolbars.
+// a glyph to see the pt; `delay` 400 (the default is 100) holds the first hint
+// back in a dense toolbar, and the next glyph's hint opens at once (skip delay).
 const actions: ToolbarAction[] = [
 	{ label: 'Undo', icon: 'lucide:undo-2' },
 	{ label: 'Redo', icon: 'lucide:redo-2' },
@@ -564,9 +577,10 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
   The node it points at is `hidden`: read as the activator's description, never
   as page text of its own, and still read inside an open `BbDialog` (the
   directive's node lives at the end of `<body>`, which a modal makes inert).
-- The tooltip opens on keyboard focus (`:focus-visible`) and on hover, and closes
-  on blur, mouse-leave, or `Escape`. A mouse click does not open it (hover
-  already covers the pointer), so it never pops over the thing you just clicked.
+- The tooltip opens on keyboard focus (`:focus-visible`, at once) and on hover
+  (after `delay`), and closes on blur, mouse-leave, or `Escape`. A mouse click
+  does not open it (hover already covers the pointer), so it never pops over the
+  thing you just clicked.
 - Because the bubble is not focusable and holds no interactive content, never
   place a link or button inside it — use `BbPopover` for that.
 - The tooltip supplements an accessible name; it does not provide one. Icon-only
@@ -584,7 +598,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `activator` | `ElementOrComponentRef \| undefined` |  |  | External activator element or component ref. When provided, the activator slot is not rendered and event listeners are attached programmatically to the referenced element. |
 | `arrowPadding` | `number \| undefined` | `10` |  | Space the arrow will maintain to the edge of the tooltip bubble. Useful when the floating element has border radius so it won't appear broken |
 | `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the tooltip within a bounding element. When provided, the tooltip will not overflow this container's bounds (e.g. a sidebar). Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
-| `delay` | `number \| undefined` | `0` |  | The delay in milliseconds before the tooltip is shown. |
+| `delay` | `number \| undefined` | `100` |  | How long, in milliseconds, a pointer has to rest on the activator before the tooltip shows; it keeps hints from flashing under a pointer passing by. Keyboard focus shows it at once whatever this says, and so does a pointer arriving while another tooltip shows or within 300 ms of one closing (the skip delay, shared by every tooltip). `0` shows it on hover at once. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component |
 | `eager` | `boolean \| undefined` | `false` |  | Renders the tooltip's popover and content at mount instead of on the first open. The description screen readers hear exists from mount either way. |
 | `hideArrow` | `boolean \| undefined` | `false` |  | Hides the tooltip arrow. A tooltip shows its arrow by default (it's the one popover-family surface where an arrow is meaningful — a speech bubble pointing at its anchor); set this to drop it. |