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

package/dist/ai/source/BbSlider.md

@@ -25,7 +25,7 @@
 		:layout="layout"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -52,7 +52,7 @@
 					'bb-slider__body--errors': fieldHasErrors,
 					'bb-slider__body--warnings':
 						Boolean(fieldHasWarnings) && !fieldHasErrors,
-					'bb-slider__body--readonly': readonly,
+					'bb-slider__body--readonly': fieldReadonly,
 				}"
 			>
 				<slot :decrease="decrease" :increase="increase" name="prepend"></slot>
@@ -128,7 +128,7 @@
 						:aria-disabled="disabled ? 'true' : undefined"
 						:aria-labelledby="thumbLabelledby(fieldId, 'lower')"
 						aria-orientation="horizontal"
-						:aria-readonly="readonly ? 'true' : undefined"
+						:aria-readonly="fieldReadonly ? 'true' : undefined"
 						:aria-valuemax="max"
 						:aria-valuemin="min"
 						:aria-valuenow="valueNowLower"
@@ -170,7 +170,7 @@
 						:aria-disabled="disabled ? 'true' : undefined"
 						:aria-labelledby="thumbLabelledby(fieldId, 'higher')"
 						aria-orientation="horizontal"
-						:aria-readonly="readonly ? 'true' : undefined"
+						:aria-readonly="fieldReadonly ? 'true' : undefined"
 						:aria-valuemax="max"
 						:aria-valuemin="min"
 						:aria-valuenow="valueNowHigher"
@@ -279,6 +279,7 @@ const {
 	emit,
 	showAsterisk,
 	errors: fieldErrors,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbSlider',
 	identifierFallback: () => declaredProps.label,
@@ -1494,9 +1495,9 @@ export type BbSliderSlots = {
 	flex-grow: 1;
 	min-height: calc(var(--control-h) + var(--inside-label-clearance));
 	min-width: 100px;
+	padding-inline-end: var(--px);
+	padding-inline-start: var(--px);
 	padding-bottom: var(--py);
-	padding-left: var(--px);
-	padding-right: var(--px);
 	padding-top: var(--py);
 	position: relative;
 	-webkit-touch-callout: none;
@@ -1524,8 +1525,10 @@ export type BbSliderSlots = {
 	cursor: pointer;
 	display: block;
 	height: var(--track);
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	left: var(--track-inset);
 	position: absolute;
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	right: var(--track-inset);
 	top: var(--centre);
 	transform: translateY(-50%);
@@ -1534,11 +1537,14 @@ export type BbSliderSlots = {
 /* The bar: the selected span, positioned and sized from JS. */
 .bb-slider__bar {
 	background-color: var(--accent);
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	border-bottom-left-radius: var(--r);
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	border-top-left-radius: var(--r);
 	cursor: pointer;
 	display: block;
 	height: 100%;
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	left: 0;
 	position: absolute;
 	top: 0;

package/dist/ai/source/BbSwitch.md

@@ -26,7 +26,7 @@
 		:layout="layout"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -71,7 +71,7 @@
 					:has-errors="!!fieldHasErrors"
 					:has-warnings="!!fieldHasWarnings && !fieldHasErrors"
 					:indeterminate="!!indeterminate"
-					:readonly="!!readonly"
+					:readonly="!!fieldReadonly"
 					v-bind="passthrough.icon"
 				/>
 				<!-- eslint-enable vue/attributes-order -->
@@ -137,6 +137,7 @@ const {
 	showAsterisk,
 	errors: fieldErrors,
 	ariaRequired: fieldAriaRequired,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbSwitch',
 	identifierFallback: () => declaredProps.label,

package/dist/ai/source/BbSwitchGroup.md

@@ -29,7 +29,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="containerPassthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -112,7 +112,7 @@
 							:has-errors="!!fieldHasErrors"
 							:has-warnings="!!fieldHasWarnings && !fieldHasErrors"
 							:indeterminate="false"
-							:readonly="!!readonly"
+							:readonly="!!fieldReadonly"
 							v-bind="passthrough.part('icon', rowStates, option.item)"
 						/>
 						<!-- eslint-enable vue/attributes-order -->
@@ -197,6 +197,7 @@ const {
 	emit,
 	showAsterisk,
 	errors: fieldErrors,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbSwitchGroup',
 	identifierFallback: () => declaredProps.legend,
@@ -301,6 +302,7 @@ const { options } = useBaseOptions({
 	itemText: props.itemText as any,
 	itemProps: toRef(props, 'itemProps'),
 	itemValue: props.itemValue as any,
+	optionDefaults: true,
 	// A ref, not the setup-time number: a runtime `:max` change must re-gate rows.
 	max: toRef(props, 'max'),
 	selectable: toRef(props, 'selectable'),
@@ -639,6 +641,7 @@ export type BbSwitchGroupSlots<T> = {
 .bb-switch-group {
 	.bb-field__layout--horizontal {
 		.bb-field__label {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- support: `float: inline-start` needs Chrome 118, above the 114 floor */
 			float: left;
 		}
 	}

package/dist/ai/source/BbTable.md

@@ -561,6 +561,7 @@
 			when there is content, since an empty `rowgroup` fails the required
 			owned-elements check. -->
 			<div
+				ref="footRef"
 				class="bb-table__foot"
 				:role="slots.tfoot ? 'rowgroup' : undefined"
 				v-bind="passthrough.foot"
@@ -3584,11 +3585,15 @@ watch(
 	{ flush: 'post' }
 );
 
-/** Builds accessible label for selection controls from row content. */
+/**
+ * Builds accessible label for selection controls from row content. The row's
+ * text fills a template (`Select {0}`, `{0} auswählen`, `{0}を選択`), so each
+ * locale puts the verb where its grammar wants it.
+ */
 const getAccessibleLabel = (columns: MappedCell[], item: any) =>
 	props.accessibleLabel
 		? props.accessibleLabel(columns, item)
-		: [t('table.select').value, ...columns.map((col) => col.content)].join(' ');
+		: t('table.select', columns.map((col) => col.content).join(' ')).value;
 
 const containerTag = computed(() => (props.selectable ? 'fieldset' : 'div'));
 
@@ -6485,11 +6490,8 @@ const tableBindings = computed(() => {
 						? 'true'
 						: undefined,
 				'aria-rowcount':
-					hasProvidedAccessibilityData.value && contextState.totalItems != null
-						? contextState.totalItems +
-							1 +
-							Number(edgeRows.value.first) +
-							Number(edgeRows.value.last)
+					lastBodyRowIndex.value !== undefined
+						? lastBodyRowIndex.value + footRowCount.value
 						: undefined,
 				// The grid grammar, delegated: a plain table carries no listener.
 				...(gridMode.value
@@ -6593,18 +6595,94 @@ const edgeRowContext = computed<EdgeRowContext>(() => ({
  * `flatRows`), `last` the table's final row (`aria-rowcount`).
  */
 const edgeRowIndex = computed(() => {
-	if (!hasProvidedAccessibilityData.value || contextState.totalItems == null)
+	if (lastBodyRowIndex.value === undefined)
 		return { first: undefined, last: undefined };
 	const offset = ((contextState.page ?? 1) - 1) * (contextState.perPage ?? 0);
-	return {
-		first: offset + 2,
-		last:
-			contextState.totalItems +
-			1 +
-			Number(edgeRows.value.first) +
-			Number(edgeRows.value.last),
-	};
+	return { first: offset + 2, last: lastBodyRowIndex.value };
+});
+
+/**
+ * Q61.10: the `aria-rowindex` of the body's final row, once the pager facts
+ * are known — the header, every item (`totalItems`, not the page or the
+ * virtual window), the edge rows and the open expand rows. Expand rows are
+ * counted where the table knows them: the rows it holds (every row under
+ * `virtual`, this page under pagination). The empty state and the default
+ * skeleton are rows too, numbered from 2, so the count never ends above them.
+ */
+const lastBodyRowIndex = computed(() => {
+	if (!hasProvidedAccessibilityData.value || contextState.totalItems == null)
+		return undefined;
+	const items = contextState.totalItems + 1;
+	if (hasTbodySlot.value) return items;
+	if (!options.value.length) {
+		if (!props.loading) return Math.max(items, 2);
+		return slots.loading ? items : Math.max(items, skeletonLength.value + 1);
+	}
+	const expandRows = flatRows.value.length - baseOptions.value.length;
+	return (
+		items +
+		Number(edgeRows.value.first) +
+		Number(edgeRows.value.last) +
+		expandRows
+	);
+});
+
+/**
+ * Q61.10: the `#tfoot` rows. They are the consumer's markup, so the table
+ * numbers them after render: each `role="row"` the foot rowgroup owns gets the
+ * next `aria-rowindex` after the body, kept current as the footer's content or
+ * the body's count changes, and counts in `aria-rowcount`. An `aria-rowindex`
+ * the consumer wrote is left alone — a row is the table's to number only while
+ * it carries no index or the one the table last wrote (`stampedFootIndex`).
+ */
+const footRef = ref<HTMLElement | null>(null);
+const footRowCount = ref(0);
+const stampedFootIndex = new WeakMap<Element, string>();
+const footRows = (foot: HTMLElement) =>
+	Array.from(foot.querySelectorAll('[role="row"]')).filter(
+		(row) =>
+			row.parentElement?.closest(
+				'[role="rowgroup"], [role="table"], [role="grid"], [role="treegrid"]'
+			) === foot
+	);
+const syncFootRows = () => {
+	const foot = footRef.value;
+	const rows = foot && slots.tfoot ? footRows(foot) : [];
+	footRowCount.value = rows.length;
+	const last = lastBodyRowIndex.value;
+	rows.forEach((row, index) => {
+		const current = row.getAttribute('aria-rowindex');
+		const ours = current === null || stampedFootIndex.get(row) === current;
+		if (!ours) {
+			stampedFootIndex.delete(row);
+			return;
+		}
+		if (last === undefined) {
+			if (current !== null) row.removeAttribute('aria-rowindex');
+			stampedFootIndex.delete(row);
+			return;
+		}
+		const value = String(last + 1 + index);
+		if (current !== value) row.setAttribute('aria-rowindex', value);
+		stampedFootIndex.set(row, value);
+	});
+};
+let footObserver: MutationObserver | undefined;
+onMounted(() => {
+	syncFootRows();
+	if (!footRef.value || typeof MutationObserver === 'undefined') return;
+	footObserver = new MutationObserver(syncFootRows);
+	// `aria-rowindex` is watched so a consumer re-binding it is seen; the
+	// table's own writes settle on the next pass (the value is already there).
+	footObserver.observe(footRef.value, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ['role', 'aria-rowindex'],
+	});
 });
+watch(lastBodyRowIndex, syncFootRows, { flush: 'post' });
+onBeforeUnmount(() => footObserver?.disconnect());
 
 /**
  * The pins, resolved from keys to RENDERED positions for the sticky pass:
@@ -8082,12 +8160,14 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 
 	&--align {
 		&-left {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- geometry: the column `align` prop names a physical side */
 			text-align: left;
 		}
 		&-center {
 			text-align: center;
 		}
 		&-right {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- geometry: the column `align` prop names a physical side */
 			text-align: right;
 		}
 	}
@@ -8383,11 +8463,13 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 	}
 	[data-pin-edge='left']::after {
 		background: linear-gradient(to right, var(--cue), transparent);
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: a pinned column side is physical (`pin` names it) */
 		left: 100%;
 		width: var(--cue-l);
 	}
 	[data-pin-edge='right']::after {
 		background: linear-gradient(to left, var(--cue), transparent);
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: a pinned column side is physical (`pin` names it) */
 		right: 100%;
 		width: var(--cue-r);
 	}
@@ -8477,6 +8559,7 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 		}
 
 		&--right {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- geometry: the column `align` prop names a physical side */
 			text-align: right;
 		}
 	}
@@ -8704,7 +8787,7 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 		font-size: var(--bb-fs);
 		font-weight: 500;
 		inset: auto;
-		left: 0;
+		inset-inline-start: 0;
 		margin: 0;
 		overflow: visible;
 		padding: 4px 10px;
@@ -9043,6 +9126,7 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 		}
 
 		&--right {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- geometry: the column `align` prop names a physical side */
 			text-align: right;
 		}
 
@@ -9057,7 +9141,7 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 			   side rather than a wrapped stack. */
 			white-space: nowrap;
 			> *:not(:first-child) {
-				margin-left: var(--actions-spacing);
+				margin-inline-start: var(--actions-spacing);
 			}
 		}
 	}

package/dist/ai/source/BbTabs.md

@@ -92,13 +92,13 @@ defineSlots<BbTabsSlots<K>>();
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbTabs', removedPropsFor('BbTabs'), {
-		slotKeys: () => (props.items ?? []).map((item) => item.key),
+		slotKeys: () => (props.items ?? []).map((item) => item.value),
 		family: 'BbTabs',
 	});
 
 // Untyped view of the received slots: every slot (*:label, panels, wrapper:*)
 // is forwarded verbatim to both subcomponents; each renders only the names
-// it owns, so the fallback chain (`<key>:label` → `label` → text) is kept.
+// it owns, so the fallback chain (`<value>:label` → `label` → text) is kept.
 const forwardedSlots = useSlots();
 
 const { id, direction, block, compact, disabled } = createTabsContext(
@@ -246,9 +246,13 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
 	 */
 	href?: string;
 	/**
-	 * String that identifies the tab.
+	 * Identifies the tab: what `v-model` holds while it is the active one, the
+	 * name of its slots (`#<value>` for its panel, `#<value>:label` for its
+	 * trigger, through `slotKey`) and, with `navigation`, the URL slug.
 	 */
-	key: K;
+	value: K;
+	/** Tabs have no `key` (that is `value`). Guards against the old shape. */
+	key?: never;
 	/**
 	 * Label to use as the tab text.
 	 */
@@ -265,7 +269,7 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
  * Passthrough parts of `BbTabs` (plans/passthrough/BbTabs.md). Tabs do not
  * "open", so there is no `open` state.
  *
- * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `key`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
+ * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `value`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
  *
  * @part root - The tabs' outer element, around the strip and the panels.
  * @part wrapper - The strip's outer element: the `wrapper:prepend` slot, the
@@ -415,7 +419,9 @@ export type BbTabsRootProps<K extends string = string> =
 		 */
 		disabled?: boolean;
 		/**
-		 * Prevents rendering content before it's made visible.
+		 * Renders every tab's panel at mount and keeps it mounted, hidden while
+		 * inactive, instead of only the active one. One tab alone: its item's
+		 * `eager`.
 		 */
 		eager?: boolean;
 		/**
@@ -464,9 +470,9 @@ export type BbTabsRootProps<K extends string = string> =
 		 */
 		manualActivation?: boolean;
 		/**
-		 * The current tab key. Used by v-model.
+		 * The active tab's `value`. Used by v-model.
 		 */
-		modelValue?: null | BbTabsItem<K>['key'];
+		modelValue?: null | BbTabsItem<K>['value'];
 		/**
 		 * Synchronizes the current tab with the URL query parameter.
 		 *
@@ -567,8 +573,8 @@ export type BbTabsRootEvents<K extends string = string> = BbTabsEvents<K>;
 
 /** Props exposed by the per-tab label slots and the generic `label` fallback slot. */
 export type BbTabsSlotProps<K extends string = string> = {
-	/** The key of the currently active tab. */
-	current: BbTabsItem<K>['key'] | null;
+	/** The `value` of the currently active tab. */
+	current: BbTabsItem<K>['value'] | null;
 	/** Zero-based index of the currently active tab. */
 	currentIndex: number;
 	/** Whether this tab is disabled. */
@@ -579,10 +585,10 @@ export type BbTabsSlotProps<K extends string = string> = {
 	isLast: boolean;
 	/** Whether this specific tab is currently active. */
 	selected: boolean;
-	/** The `label` value of this tab item. */
-	text: BbTabsItem<K>['label'];
-	/** The `key` value of this tab item. */
-	value: BbTabsItem<K>['key'];
+	/** This tab's `label`. */
+	label: BbTabsItem<K>['label'];
+	/** This tab's `value`. */
+	value: BbTabsItem<K>['value'];
 	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
 	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
 };
@@ -605,7 +611,7 @@ export type BbTabsScrollSlotProps = {
 /**
  * Slots rendered by the tab list (the strip of triggers).
  *
- * @dynamicSlot `<key>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+ * @dynamicSlot `<value>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
  */
 export type BbTabsListSlots<K extends string = string> = {
 	/**
@@ -617,16 +623,16 @@ export type BbTabsListSlots<K extends string = string> = {
 	 */
 	'wrapper:append'?: (props: BbTabsScrollSlotProps) => any;
 	/**
-	 * Fallback slot used for all tab labels when no per-tab `<key>:label` slot is provided.
+	 * Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided.
 	 */
 	label?: (props: BbTabsSlotProps<K>) => any;
 } & Record<string, ((props: BbTabsSlotProps<K>) => any) | undefined>;
 
 /**
  * Slots rendered by the tab panels — one per tab, keyed by the normalized
- * `slotKey(key)`.
+ * `slotKey(value)`.
  *
- * @dynamicSlot `<key>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
+ * @dynamicSlot `<value>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
  */
 export type BbTabsPanelsSlots<K extends string = string> = Record<
 	string,
@@ -634,16 +640,16 @@ export type BbTabsPanelsSlots<K extends string = string> = Record<
 >;
 
 /**
- * @dynamicSlot `<key>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
- * @dynamicSlot `<key>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+ * @dynamicSlot `<value>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
+ * @dynamicSlot `<value>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
  */
 export type BbTabsSlots<K extends string = string> = BbTabsListSlots<K> &
 	BbTabsPanelsSlots<K>;
 
 /** Props exposed by the `BbTabsRoot` default slot. */
 export type BbTabsRootSlotProps<K extends string = string> = {
-	/** The key of the currently active tab. */
-	current: BbTabsItem<K>['key'] | null;
+	/** The `value` of the currently active tab. */
+	current: BbTabsItem<K>['value'] | null;
 	/** Zero-based index of the currently active tab. */
 	currentIndex: number;
 	/** Whether the active tab is the first tab. */
@@ -652,8 +658,8 @@ export type BbTabsRootSlotProps<K extends string = string> = {
 	isLast: boolean;
 	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
 	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
-	/** Select a tab by key. */
-	select: (key: BbTabsItem<K>['key']) => void;
+	/** Select a tab by its `value`. */
+	select: (value: BbTabsItem<K>['value']) => void;
 };
 
 export type BbTabsRootSlots<K extends string = string> = {

package/dist/ai/source/BbTabsList.md

@@ -154,7 +154,7 @@ const context =
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbTabsList', removedPropsFor('BbTabsList'), {
-		slotKeys: () => context.items.value.map((item) => item.key),
+		slotKeys: () => context.items.value.map((item) => item.value),
 		family: 'BbTabs',
 	});
 
@@ -515,9 +515,13 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
 	 */
 	href?: string;
 	/**
-	 * String that identifies the tab.
+	 * Identifies the tab: what `v-model` holds while it is the active one, the
+	 * name of its slots (`#<value>` for its panel, `#<value>:label` for its
+	 * trigger, through `slotKey`) and, with `navigation`, the URL slug.
 	 */
-	key: K;
+	value: K;
+	/** Tabs have no `key` (that is `value`). Guards against the old shape. */
+	key?: never;
 	/**
 	 * Label to use as the tab text.
 	 */
@@ -534,7 +538,7 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
  * Passthrough parts of `BbTabs` (plans/passthrough/BbTabs.md). Tabs do not
  * "open", so there is no `open` state.
  *
- * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `key`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
+ * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `value`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
  *
  * @part root - The tabs' outer element, around the strip and the panels.
  * @part wrapper - The strip's outer element: the `wrapper:prepend` slot, the
@@ -684,7 +688,9 @@ export type BbTabsRootProps<K extends string = string> =
 		 */
 		disabled?: boolean;
 		/**
-		 * Prevents rendering content before it's made visible.
+		 * Renders every tab's panel at mount and keeps it mounted, hidden while
+		 * inactive, instead of only the active one. One tab alone: its item's
+		 * `eager`.
 		 */
 		eager?: boolean;
 		/**
@@ -733,9 +739,9 @@ export type BbTabsRootProps<K extends string = string> =
 		 */
 		manualActivation?: boolean;
 		/**
-		 * The current tab key. Used by v-model.
+		 * The active tab's `value`. Used by v-model.
 		 */
-		modelValue?: null | BbTabsItem<K>['key'];
+		modelValue?: null | BbTabsItem<K>['value'];
 		/**
 		 * Synchronizes the current tab with the URL query parameter.
 		 *
@@ -836,8 +842,8 @@ export type BbTabsRootEvents<K extends string = string> = BbTabsEvents<K>;
 
 /** Props exposed by the per-tab label slots and the generic `label` fallback slot. */
 export type BbTabsSlotProps<K extends string = string> = {
-	/** The key of the currently active tab. */
-	current: BbTabsItem<K>['key'] | null;
+	/** The `value` of the currently active tab. */
+	current: BbTabsItem<K>['value'] | null;
 	/** Zero-based index of the currently active tab. */
 	currentIndex: number;
 	/** Whether this tab is disabled. */
@@ -848,10 +854,10 @@ export type BbTabsSlotProps<K extends string = string> = {
 	isLast: boolean;
 	/** Whether this specific tab is currently active. */
 	selected: boolean;
-	/** The `label` value of this tab item. */
-	text: BbTabsItem<K>['label'];
-	/** The `key` value of this tab item. */
-	value: BbTabsItem<K>['key'];
+	/** This tab's `label`. */
+	label: BbTabsItem<K>['label'];
+	/** This tab's `value`. */
+	value: BbTabsItem<K>['value'];
 	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
 	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
 };
@@ -874,7 +880,7 @@ export type BbTabsScrollSlotProps = {
 /**
  * Slots rendered by the tab list (the strip of triggers).
  *
- * @dynamicSlot `<key>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+ * @dynamicSlot `<value>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
  */
 export type BbTabsListSlots<K extends string = string> = {
 	/**
@@ -886,16 +892,16 @@ export type BbTabsListSlots<K extends string = string> = {
 	 */
 	'wrapper:append'?: (props: BbTabsScrollSlotProps) => any;
 	/**
-	 * Fallback slot used for all tab labels when no per-tab `<key>:label` slot is provided.
+	 * Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided.
 	 */
 	label?: (props: BbTabsSlotProps<K>) => any;
 } & Record<string, ((props: BbTabsSlotProps<K>) => any) | undefined>;
 
 /**
  * Slots rendered by the tab panels — one per tab, keyed by the normalized
- * `slotKey(key)`.
+ * `slotKey(value)`.
  *
- * @dynamicSlot `<key>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
+ * @dynamicSlot `<value>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
  */
 export type BbTabsPanelsSlots<K extends string = string> = Record<
 	string,
@@ -903,16 +909,16 @@ export type BbTabsPanelsSlots<K extends string = string> = Record<
 >;
 
 /**
- * @dynamicSlot `<key>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
- * @dynamicSlot `<key>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+ * @dynamicSlot `<value>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
+ * @dynamicSlot `<value>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
  */
 export type BbTabsSlots<K extends string = string> = BbTabsListSlots<K> &
 	BbTabsPanelsSlots<K>;
 
 /** Props exposed by the `BbTabsRoot` default slot. */
 export type BbTabsRootSlotProps<K extends string = string> = {
-	/** The key of the currently active tab. */
-	current: BbTabsItem<K>['key'] | null;
+	/** The `value` of the currently active tab. */
+	current: BbTabsItem<K>['value'] | null;
 	/** Zero-based index of the currently active tab. */
 	currentIndex: number;
 	/** Whether the active tab is the first tab. */
@@ -921,8 +927,8 @@ export type BbTabsRootSlotProps<K extends string = string> = {
 	isLast: boolean;
 	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
 	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
-	/** Select a tab by key. */
-	select: (key: BbTabsItem<K>['key']) => void;
+	/** Select a tab by its `value`. */
+	select: (value: BbTabsItem<K>['value']) => void;
 };
 
 export type BbTabsRootSlots<K extends string = string> = {