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

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
@@ -466,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.
 		 *
@@ -569,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. */
@@ -581,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;
 };
@@ -607,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> = {
 	/**
@@ -619,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,
@@ -636,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. */
@@ -654,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
@@ -735,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.
 		 *
@@ -838,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. */
@@ -850,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;
 };
@@ -876,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> = {
 	/**
@@ -888,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,
@@ -905,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. */
@@ -923,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> = {

package/dist/ai/source/BbTabsPanels.md

@@ -46,7 +46,7 @@ export type { BbTabsPanelsProps, BbTabsPanelsSlots } from './types';
 
 defineOptions({ inheritAttrs: false });
 /**
- * The tab panels — one `section` per item, keyed by the item `key`, rendered
+ * The tab panels — one `section` per item, keyed by the item `value`, rendered
  * from the nearest `BbTabsRoot`/`BbTabs` context. Discovery is automatic; the
  * only props are its `pt`. Honors the root's `eager` and
  * `disableAnimateX`/`disableAnimateY` settings.
@@ -196,9 +196,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.
 	 */
@@ -215,7 +219,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
@@ -416,9 +420,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.
 		 *
@@ -519,8 +523,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. */
@@ -531,10 +535,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;
 };
@@ -557,7 +561,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> = {
 	/**
@@ -569,16 +573,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,
@@ -586,16 +590,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. */
@@ -604,8 +608,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> = {