bitboss-ui 2.1.130 → 2.1.132

package/dist/ai/BbTable.md

@@ -6,6 +6,7 @@
 <template>
 	<component
 		:is="containerTag"
+		:id="id"
 		ref="containerRef"
 		:aria-busy="loading"
 		:aria-rowcount="hasProvidedAccessibilityData ? props.totalItems : undefined"
@@ -31,11 +32,7 @@
 				<col
 					v-for="track in columnTracks"
 					:key="track.key"
-					:style="{
-						width: track.width,
-						minWidth: track.locked ? track.width : undefined,
-						maxWidth: track.locked ? track.width : undefined,
-					}"
+					:style="{ width: track.width }"
 				/>
 			</colgroup>
 			<thead>
@@ -475,7 +472,6 @@ const props = withDefaults(defineProps<InternalProps<T>>(), {
 	max: Infinity,
 	multiple: true,
 	modelValue: () => [],
-	inheritColumnWidths: true,
 	unselectedItems: () => [],
 });
 
@@ -533,17 +529,29 @@ const {
 			: undefined,
 });
 
-const inheritColumnWidths = computed(() => props.inheritColumnWidths !== false);
+/** Any column pinned to a parent track range — a per-column inherit signal. */
+const hasSnap = computed(() => props.columns.some((c) => c.snap != null));
+
+// Opt-in: inherit when explicitly enabled (`true`, or an ancestor id string),
+// or implicitly when any column carries a `snap` — a snap only resolves against
+// a parent's tracks, so asking for one is asking to inherit. An absent prop with
+// no snaps does not inherit, so a plain nested table stays independent. An
+// explicit `false` is authoritative and overrides the implicit snap signal.
+const inheritColumnWidths = computed(
+	() => !!props.inheritColumnWidths || hasSnap.value
+);
 
 /**
- * Assigned column widths (frozen or inherited) are only authoritative under
- * `table-layout: fixed`; in auto layout they behave like a minimum. So a table
- * that drives widths — explicitly `fixed`, inheriting from a parent, or with a
- * frozen column — uses fixed layout even when `fixed` was not set.
+ * Assigned column widths (frozen, snapped, or inherited) are only authoritative
+ * under `table-layout: fixed`; in auto layout they behave like a minimum. So a
+ * table that drives widths — explicitly `fixed`, inheriting from a parent, or
+ * with a column carrying a `width` or `snap` — uses fixed layout even when
+ * `fixed` was not set. (`snap` is a width definition: the parent track range.)
  */
 const fixedLayout = computed(
 	() =>
 		props.fixed ||
+		hasSnap.value ||
 		props.columns.some((column) => column.width != null) ||
 		(inheritColumnWidths.value && !!parentId.value)
 );
@@ -570,29 +578,6 @@ const toLength = (width: number | string) => {
 	return /^-?\d*\.?\d+$/.test(trimmed) ? `${trimmed}px` : trimmed;
 };
 
-/**
- * Resolves a CSS length to px in the context of `host`.
- * Returns `null` when the value cannot be resolved reliably.
- */
-const resolveLengthToPx = (
-	width: number | string,
-	host: HTMLElement
-): number | null => {
-	const length = toLength(width);
-	if (/^-?\d*\.?\d+px$/.test(length)) return parseFloat(length);
-
-	const probe = document.createElement('div');
-	probe.style.position = 'absolute';
-	probe.style.visibility = 'hidden';
-	probe.style.pointerEvents = 'none';
-	probe.style.width = length;
-	host.appendChild(probe);
-	const px = probe.getBoundingClientRect().width;
-	host.removeChild(probe);
-
-	return Number.isFinite(px) && px > 0 ? px : null;
-};
-
 /** Number of data columns the parent renders (numeric track keys). */
 const parentDataColumns = computed(() => {
 	const tracks = parentNode.value?.tracks;
@@ -803,10 +788,10 @@ const columnTracks = computed(() => {
 		fixedLayout.value && structuralFit[key]
 			? (structuralFit[key] as string)
 			: sync(key);
-	const tracks: { key: string; width: string; locked?: boolean }[] = [];
+	const tracks: { key: string; width: string }[] = [];
 
 	if (props.selectable) {
-		tracks.push({ key: 'select', width: structural('select'), locked: false });
+		tracks.push({ key: 'select', width: structural('select') });
 	}
 
 	const lastIndex = props.columns.length - 1;
@@ -820,7 +805,7 @@ const columnTracks = computed(() => {
 		// track plus the folded edge region plus any deficit. Skipped when the
 		// table overflows: there is no leftover then, and it must content-size.
 		if (index === fillColumnIndex.value && !overflowsParent.value) {
-			tracks.push({ key, width: 'auto', locked: false });
+			tracks.push({ key, width: 'auto' });
 			return;
 		}
 
@@ -855,11 +840,11 @@ const columnTracks = computed(() => {
 			? `calc(${[...offsets, span ?? '0px'].join(' + ')})`
 			: (span ?? 'auto');
 
-		tracks.push({ key, width, locked: frozen != null });
+		tracks.push({ key, width });
 	});
 
 	if (props.actions) {
-		tracks.push({ key: 'actions', width: structural('actions'), locked: false });
+		tracks.push({ key: 'actions', width: structural('actions') });
 	}
 
 	return tracks;
@@ -931,19 +916,27 @@ const measureStructuralFit = () => {
 	const fit = (selector: string) => {
 		let max = 0;
 		table.querySelectorAll<HTMLElement>(selector).forEach((cell) => {
-			// Combined horizontal extent of the children, not the widest one: an
-			// actions cell holds several side-by-side controls whose total width is
-			// what the column must fit. Measured from edges so it stays correct even
-			// when the cell is narrower than its content (controls overflow on
-			// `nowrap`), which keeps the pin-to-content convergence stable.
-			let left = Infinity;
-			let right = -Infinity;
+			// Sum each child's own intrinsic width (plus horizontal margins) — an
+			// actions cell holds several side-by-side controls and the column must
+			// fit them all. Crucially this is *not* their shared extent: the extent
+			// depends on how the cell spreads them across its width, which feeds the
+			// column width back into its own measurement and runs away into the
+			// thousands. A child's own width does not depend on the cell, so this
+			// converges. Out-of-flow children (e.g. an `sr-only` label parked far
+			// off-screen) are skipped so they cannot inflate the result.
+			let content = 0;
 			cell.querySelectorAll<HTMLElement>(':scope > *').forEach((child) => {
-				const rect = child.getBoundingClientRect();
-				left = Math.min(left, rect.left);
-				right = Math.max(right, rect.right);
+				const childStyle = getComputedStyle(child);
+				if (
+					childStyle.position === 'absolute' ||
+					childStyle.position === 'fixed'
+				)
+					return;
+				const margin =
+					parseFloat(childStyle.marginLeft) +
+					parseFloat(childStyle.marginRight);
+				content += child.getBoundingClientRect().width + (margin || 0);
 			});
-			const content = right > left ? right - left : 0;
 			const style = getComputedStyle(cell);
 			const padding =
 				parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
@@ -1016,19 +1009,6 @@ const fillValue = ref(0);
  */
 const naturalTotalWidth = ref<string | null>(null);
 
-/**
- * Width budget for probe distribution. Prefer the immediate parent's visible
- * width (the scroll viewport) over this table's own offset width so a
- * max-content growth loop in ancestors cannot recursively inflate probe output.
- */
-const probeViewportWidth = (container: HTMLElement): number => {
-	const parentWidth = container.parentElement?.clientWidth ?? 0;
-	const selfWidth = container.clientWidth || container.getBoundingClientRect().width;
-	const fallback = container.offsetWidth;
-	const width = parentWidth || selfWidth || fallback;
-	return Number.isFinite(width) && width > 0 ? width : 0;
-};
-
 const runNaturalWidthProbe = () => {
 	const container = containerRef.value;
 	if (!container || !fixedLayout.value) return;
@@ -1041,8 +1021,7 @@ const runNaturalWidthProbe = () => {
 	)
 		return;
 
-	const containerWidth = probeViewportWidth(container);
-	if (containerWidth <= 0) return;
+	const containerWidth = container.offsetWidth;
 	const dataOffset = props.selectable ? 1 : 0;
 
 	// ── Real-table measurements ────────────────────────────────────────────
@@ -1054,21 +1033,17 @@ const runNaturalWidthProbe = () => {
 		? parseFloat(structuralFit.actions)
 		: 0;
 
-	// Live rendered widths from the fixed-layout table. Frozen columns use their
-	// declared width (resolved to px) so an explicit width like `200` remains a
-	// true floor in the probe math even when the live render is under pressure.
-	// `frozenTotal` (declared widths) feeds the stable min-width floor;
-	// `nonFlexTotal` (frozen + inherited) is what the flex columns share.
+	// Live rendered widths from the fixed-layout table. `frozenTotal` (declared
+	// widths) feeds the stable min-width floor; `nonFlexTotal` (frozen + inherited)
+	// is what the flex columns share the remainder of. The inherited part is only
+	// used for that `available` figure — never fed back into min-width, since those
+	// widths stretch with the table and would otherwise lock min-width above
+	// max-content and force a spurious uniform stretch on every column.
 	const realThs = headerCells();
 	let frozenTotal = 0;
 	let nonFlexTotal = 0;
 	props.columns.forEach((col, i) => {
-		const renderedWidth =
-			realThs[dataOffset + i]?.getBoundingClientRect().width ?? 0;
-		const declaredFrozenWidth =
-			col.width != null ? resolveLengthToPx(col.width, container) : null;
-		const width = declaredFrozenWidth ?? renderedWidth;
-
+		const width = realThs[dataOffset + i]?.getBoundingClientRect().width ?? 0;
 		if (col.width != null) frozenTotal += width;
 		if (!isFlexColumn(i)) nonFlexTotal += width;
 	});
@@ -1760,10 +1735,12 @@ export type BbTableProps<Item = any> = {
 	id?: string;
 
 	/**
-	 * Controls whether unfrozen columns inherit their width from an ancestor
-	 * table's matching track, accounting for `select`/`actions` columns.
-	 * - `true` (the default): inherit from the nearest ancestor table.
-	 * - `false`: do not inherit.
+	 * Opt a nested table into inheriting its column widths from an ancestor
+	 * table's matching tracks (accounting for `select`/`actions` columns). This
+	 * also forces `table-layout: fixed`, so it is **off by default** — a nested
+	 * table renders independently unless you ask for alignment.
+	 * - `false` (the default): do not inherit; size independently.
+	 * - `true`: inherit from the nearest ancestor table.
 	 * - a table id (string): inherit from the specific ancestor in the chain with
 	 *   that id rather than the immediate parent. Use this when an intermediate
 	 *   table has a different column count, so the extra columns would otherwise
@@ -2166,27 +2143,15 @@ export type BbTableSlots<Item = any> = {
 	}
 
 	&--fixed {
-		table {
+		> table {
 			table-layout: fixed;
 			width: 100%;
 
 			thead {
-				th {
-					box-sizing: border-box;
-					min-width: 0;
-				}
-
 				.bb-table-header--actions {
 					width: auto;
 				}
 			}
-
-			tbody {
-				td {
-					box-sizing: border-box;
-					min-width: 0;
-				}
-			}
 		}
 	}
 

package/dist/components/BbTable/types.d.ts

@@ -118,10 +118,12 @@ export type BbTableProps<Item = any> = {
      */
     id?: string;
     /**
-     * Controls whether unfrozen columns inherit their width from an ancestor
-     * table's matching track, accounting for `select`/`actions` columns.
-     * - `true` (the default): inherit from the nearest ancestor table.
-     * - `false`: do not inherit.
+     * Opt a nested table into inheriting its column widths from an ancestor
+     * table's matching tracks (accounting for `select`/`actions` columns). This
+     * also forces `table-layout: fixed`, so it is **off by default** — a nested
+     * table renders independently unless you ask for alignment.
+     * - `false` (the default): do not inherit; size independently.
+     * - `true`: inherit from the nearest ancestor table.
      * - a table id (string): inherit from the specific ancestor in the chain with
      *   that id rather than the immediate parent. Use this when an intermediate
      *   table has a different column count, so the extra columns would otherwise