baseline-kit 5.2.0 → 6.0.0

package/dist/remix.mjs

@@ -3,6 +3,7 @@ import { jsx as n, jsxs as r } from "remix/ui/jsx-runtime";
 //#region packages/core/src/config/defaults.ts
 var i = {
 	base: 8,
+	domDiagnostics: !1,
 	baseline: {
 		variant: "line",
 		debugging: "hidden",
@@ -49,20 +50,21 @@ var i = {
 	"box",
 	"padder"
 ], o = (e) => {
-	let { parentConfig: t, base: n } = e, r = {};
+	let { parentConfig: t, base: n, domDiagnostics: r } = e, i = {};
 	for (let n of a) {
-		let i = e[n], a = t[n], o = {
+		let r = e[n], a = t[n], o = {
 			...a,
-			...i
+			...r
 		};
-		i && "colors" in i && i.colors && "colors" in a && (o.colors = {
+		r && "colors" in r && r.colors && "colors" in a && (o.colors = {
 			...a.colors,
-			...i.colors
-		}), r[n] = o;
+			...r.colors
+		}), i[n] = o;
 	}
 	return {
 		base: n ?? t.base,
-		...r
+		domDiagnostics: r ?? t.domDiagnostics ?? !1,
+		...i
 	};
 };
 //#endregion
@@ -250,13 +252,13 @@ function S(e, t, n) {
 }
 //#endregion
 //#region packages/core/src/validation/guide.ts
-var ee = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, C = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || ee.test(e) : !1, te = (e) => Array.isArray(e) && e.length > 0 && e.every(C), w = {
+var C = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, ee = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || C.test(e) : !1, te = (e) => Array.isArray(e) && e.length > 0 && e.every(ee), w = {
 	template: "none",
 	columnsCount: 0,
 	calculatedGap: 0,
 	isValid: !1
 };
-function ne(e, t, n) {
+function T(e, t, n) {
 	let r = t.variant ?? "line", i = t.base ?? 8, a = h(t.gap ?? 0, {
 		base: i,
 		context: n
@@ -318,13 +320,23 @@ function ne(e, t, n) {
 		}
 	}
 }
-var T = (e, t, n) => {
+var E = (e, t, n) => {
 	let r = {};
 	return e === void 0 ? (t !== void 0 && (r.gridColumn = `span ${t}`), n !== void 0 && (r.gridRow = `span ${n}`)) : (r.gridColumn = `span ${e}`, r.gridRow = `span ${e}`), r;
 };
 //#endregion
 //#region packages/core/src/descriptors/guide.ts
-function E({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
+function D(e) {
+	let t = /* @__PURE__ */ new Set([
+		"--bkgd-cl",
+		"--bkgd-cp",
+		"--bkgd-ca",
+		"--bkgd-cf",
+		"--bkgd-line-color"
+	]), n = e.style && Object.keys(e.style).some((e) => !t.has(e));
+	return !e.domDiagnostics && !e.className && !n && e.variant === "fixed" && e.columns === 4 && (e.columnWidth === void 0 || e.columnWidth === 60 || e.columnWidth === "60px") && e.gap === 0 && (e.align || "center") === "center";
+}
+function O({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 	switch (e) {
 		case "line": return {
 			variant: "line",
@@ -357,7 +369,7 @@ function E({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 		base: t
 	};
 }
-var D = (e, t) => ({
+var k = (e, t) => ({
 	"--bkgd-w": "100%",
 	"--bkgd-h": "100%",
 	"--bkgd-mw": "none",
@@ -368,8 +380,8 @@ var D = (e, t) => ({
 	"--bkgd-cl": t,
 	"--bkgd-g": "0"
 });
-function O(e) {
-	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = D(t, n.line), g = {
+function A(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = k(t, n.line), g = {
 		"--bkgd-cl": u ?? n.line,
 		"--bkgd-cp": u ?? n.pattern,
 		"--bkgd-ca": u ?? n.auto,
@@ -426,14 +438,17 @@ function O(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/baseline.ts
-function k(e) {
+function j(e) {
+	return e.domDiagnostics || e.base <= 1 || !Number.isInteger(e.base) || e.className || e.contentHeight >= e.base && Math.abs(e.contentHeight - Math.floor(e.contentHeight / e.base) * e.base) > .001 ? !1 : !Object.keys(e.style ?? {}).some((e) => e.startsWith("background") || e === "--bkbl-b");
+}
+function ne(e) {
 	let { base: t, colors: n, variant: r, width: i, height: a, color: o, containerWidth: s, containerHeight: l, spacing: u, isVisible: d } = e, { top: f, right: p, bottom: h, left: v } = _(u), y = [
 		f,
 		p,
 		h,
 		v
-	].map((e) => e ? `${e}px` : "0").join(" "), b = y === "0 0 0 0" ? void 0 : y, x = m({
-		height: l > 0 ? l : g([void 0, a], [s, 0])[1],
+	].map((e) => e ? `${e}px` : "0").join(" "), b = y === "0 0 0 0" ? void 0 : y, x = l > 0 ? l : g([void 0, a], [s, 0])[1], S = x - f - h, C = m({
+		height: x,
 		top: f,
 		bottom: h,
 		base: t
@@ -447,7 +462,8 @@ function k(e) {
 			"--bkbl-c": r === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)",
 			...b ? { padding: b } : {}
 		},
-		rowCount: x,
+		rowCount: C,
+		contentHeight: S,
 		getRowStyle: (e) => ({
 			"--bkbl-rt": e === 0 ? "0px" : `${e * t}px`,
 			"--bkbl-rh": r === "line" ? "1px" : `${t}px`
@@ -459,12 +475,32 @@ function k(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/box.ts
-function A(e) {
+var re = /* @__PURE__ */ new Set([
+	"background",
+	"backgroundColor",
+	"boxShadow",
+	"color",
+	"cursor",
+	"opacity",
+	"outline",
+	"outlineColor",
+	"outlineOffset",
+	"outlineStyle",
+	"outlineWidth",
+	"pointerEvents",
+	"textDecoration",
+	"textShadow",
+	"visibility"
+]);
+function ie(e) {
+	return e.className || e.width !== void 0 && e.width !== "fit-content" ? !0 : e.style ? Object.keys(e.style).some((e) => !re.has(e)) : !1;
+}
+function ae(e) {
 	let { lineColor: t, width: n, height: r, span: i, colSpan: a, rowSpan: o, isVisible: s } = e, l = {
 		...n === void 0 ? {} : { "--bkbx-w": c(n) },
 		...r === void 0 ? {} : { "--bkbx-h": c(r) },
 		"--bkbx-cl": t
-	}, u = T(i, a, o), d = ["box"];
+	}, u = E(i, a, o), d = ["box"];
 	return s && d.push("v"), {
 		boxStyle: l,
 		gridSpanStyle: u,
@@ -473,7 +509,7 @@ function A(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/spacer.ts
-function j(e) {
+function oe(e) {
 	let { base: t, colors: n, width: r, height: i, color: a, variant: o, isVisible: s } = e, [l, u] = g([r, i], [0, 0], {
 		base: t,
 		suppressWarnings: !0
@@ -494,7 +530,7 @@ function j(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/padder.ts
-function re(e) {
+function se(e) {
 	let { base: t, color: n, width: r, height: i, padding: a, enableSpacers: o, isVisible: s } = e, l = {};
 	if (r !== void 0 && r !== "fit-content" && (l["--bkpd-w"] = c(r)), i !== void 0 && i !== "fit-content" && (l["--bkpd-h"] = c(i)), l["--bkpd-b"] = `${t}px`, l["--bkpd-c"] = n, !o) {
 		let { top: e, right: t, bottom: n, left: r } = a;
@@ -508,11 +544,12 @@ function re(e) {
 }
 //#endregion
 //#region packages/remix/src/Config.ts
-function M(e) {
+function ce(e) {
 	return () => {
 		let t = o({
-			parentConfig: e.props.__baselineConfig ?? e.context.get(N) ?? i,
+			parentConfig: e.props.__baselineConfig ?? e.context.get(M) ?? i,
 			base: e.props.base,
+			domDiagnostics: e.props.domDiagnostics,
 			baseline: e.props.baseline,
 			guide: e.props.guide,
 			spacer: e.props.spacer,
@@ -522,7 +559,7 @@ function M(e) {
 		return e.context.set(t), e.props.children ?? null;
 	};
 }
-var N = M, P = (e) => {
+var M = ce, N = (e) => {
 	let t = null, n = null;
 	return [(...r) => {
 		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
@@ -534,7 +571,7 @@ var N = M, P = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function F(e, t) {
+function le(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -546,7 +583,7 @@ function F(e, t) {
 			};
 			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
 		} catch {}
-	}, [i, a] = P(r);
+	}, [i, a] = N(r);
 	r();
 	let o = new ResizeObserver(i);
 	return o.observe(e), {
@@ -558,7 +595,7 @@ function F(e, t) {
 }
 //#endregion
 //#region packages/dom/src/virtual.ts
-function I(e, t, n) {
+function ue(e, t, n) {
 	let { totalItems: r, itemHeight: i, buffer: a = 0 } = t;
 	if (!Number.isFinite(i) || i <= 0) throw Error("createVirtualTracker requires itemHeight to be greater than 0");
 	if (!Number.isFinite(r) || r < 0) throw Error("createVirtualTracker requires totalItems to be 0 or greater");
@@ -571,7 +608,7 @@ function I(e, t, n) {
 	}, s = {
 		start: 0,
 		end: r
-	}, [c, l] = P(() => {
+	}, [c, l] = N(() => {
 		let e = o();
 		(e.start !== s.start || e.end !== s.end) && (s = e, n(e));
 	}), u = { passive: !0 };
@@ -586,6 +623,21 @@ function I(e, t, n) {
 }
 //#endregion
 //#region packages/remix/src/shared.tsx
+function P(e, t) {
+	return Object.fromEntries(Object.entries(e).filter(([e, n]) => t[e] !== n));
+}
+var F = /* @__PURE__ */ new Set([
+	"id",
+	"title",
+	"role",
+	"tabIndex",
+	"lang",
+	"dir",
+	"hidden"
+]);
+function I(e) {
+	return Object.fromEntries(Object.entries(e).filter(([e]) => e.startsWith("data-") || e.startsWith("aria-") || F.has(e)));
+}
 function L(...e) {
 	return e.filter(Boolean).join(" ");
 }
@@ -603,7 +655,13 @@ function R(...e) {
 function z(e, t, n) {
 	return e.context.get(t) ?? n;
 }
-function B(e, t) {
+function B(e) {
+	return typeof e.domDiagnostics == "boolean" ? e : {
+		...e,
+		domDiagnostics: !1
+	};
+}
+function V(e, t) {
 	let n = e ?? t;
 	return {
 		isShown: n === "visible",
@@ -611,46 +669,46 @@ function B(e, t) {
 		debugging: n
 	};
 }
-var V = 40, H = /* @__PURE__ */ new WeakSet(), U = [], W = !1;
-function G() {
-	W = !1;
-	let e = U.splice(0, V);
+var H = 40, U = /* @__PURE__ */ new WeakSet(), W = [], G = !1;
+function K() {
+	G = !1;
+	let e = W.splice(0, H);
 	for (let t of e) {
 		if (t.signal.aborted) {
-			H.delete(t);
+			U.delete(t);
 			continue;
 		}
 		try {
-			t.update().catch(() => void 0).finally(() => H.delete(t));
+			t.update().catch(() => void 0).finally(() => U.delete(t));
 		} catch {
-			H.delete(t);
+			U.delete(t);
 		}
 	}
-	U.length > 0 && K();
+	W.length > 0 && q();
 }
-function K() {
-	W || (W = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(G) : () => setTimeout(G, 0), 0));
+function q() {
+	G || (G = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(K) : () => setTimeout(K, 0), 0));
 }
-function q(e) {
-	e.signal.aborted || H.has(e) || (H.add(e), U.push(e), K());
+function J(e) {
+	e.signal.aborted || U.has(e) || (U.add(e), W.push(e), q());
 }
-function J(t, r) {
+function Y(t, r) {
 	let a = e(t, r);
 	return ((e) => () => {
-		let t = e.context.get(N), r = e.props.__baselineConfig ?? t ?? i;
+		let t = e.context.get(M), r = e.props.__baselineConfig ?? t ?? i;
 		return /* @__PURE__ */ n(a, {
 			...e.props,
 			__baselineConfig: r
 		});
 	});
 }
-function Y(e) {
+function X(e) {
 	let n = null, r, i = !1, a = 0, o = (e) => {
 		e.aborted || i || a >= 10 || (a += 1, r?.refresh(), requestAnimationFrame(() => o(e)));
 	};
 	return {
 		attach: t((t, s) => {
-			n = t, typeof ResizeObserver < "u" && (r = F(t, (t) => {
+			n = t, typeof ResizeObserver < "u" && (r = le(t, (t) => {
 				i = t.width > 0 || t.height > 0;
 				let n = () => {
 					s.aborted || e(t);
@@ -665,7 +723,7 @@ function Y(e) {
 		getElement: () => n
 	};
 }
-function ie(e, t, n, r = 160) {
+function de(e, t, n, r = 160) {
 	let i, a = "", o = 0, s = {
 		start: 0,
 		end: 0
@@ -680,7 +738,7 @@ function ie(e, t, n, r = 160) {
 			d !== a && (c(), a = d, o = e, s = {
 				start: 0,
 				end: e
-			}, n(s), i = I(u, {
+			}, n(s), i = ue(u, {
 				totalItems: e,
 				itemHeight: l,
 				buffer: r
@@ -699,17 +757,17 @@ function ie(e, t, n, r = 160) {
 }
 //#endregion
 //#region packages/remix/src/Baseline.tsx
-function ae(e) {
+function fe(e) {
 	let t = {
 		width: 0,
 		height: 0
 	}, r = () => {
-		q(e);
-	}, a = Y((e) => {
+		J(e);
+	}, a = X((e) => {
 		(e.width !== t.width || e.height !== t.height) && (t = e, r());
-	}), o = ie(e, a.getElement, r);
+	}), o = de(e, a.getElement, r);
 	return () => {
-		let r = e.props, s = r.__baselineConfig ?? z(e, N, i), l = r.base ?? s.base, u = r.variant ?? s.baseline.variant, d = B(r.debugging, s.baseline.debugging), f = k({
+		let r = e.props, s = B(r.__baselineConfig ?? z(e, M, i)), l = r.base ?? s.base, u = r.variant ?? s.baseline.variant, d = V(r.debugging, s.baseline.debugging), f = ne({
 			base: l,
 			colors: s.baseline.colors,
 			variant: u,
@@ -724,113 +782,173 @@ function ae(e) {
 				inline: r.inline
 			},
 			isVisible: d.isShown
+		}), p = j({
+			base: l,
+			contentHeight: f.contentHeight,
+			domDiagnostics: s.domDiagnostics,
+			className: r.className,
+			style: r.style
 		});
 		if (r.ssrMode) return /* @__PURE__ */ n("div", {
-			className: L("bk-bas", "bk-h", "bk-ssr", r.className),
-			"data-testid": "baseline",
+			className: L("bk-bas", "bk-h", "bk-ssr", `bk-${u}`, r.className),
+			"data-testid": s.domDiagnostics ? "baseline" : void 0,
 			"aria-hidden": !0,
-			style: R(f.containerStyle, {
+			style: R(P(f.containerStyle, {
+				"--bkbl-w": "100%",
+				"--bkbl-h": "100%",
+				"--bkbl-cl": i.baseline.colors.line,
+				"--bkbl-cf": i.baseline.colors.flat,
+				"--bkbl-c": u === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)"
+			}), P({
 				width: c(r.width ?? "100%"),
 				height: c(r.height ?? "100%")
-			}, r.style)
+			}, {
+				width: "100%",
+				height: "100%"
+			}), r.style),
+			...I(r)
 		});
 		d.isShown && e.queueTask(() => o.setConfig(f.rowCount, l));
-		let p = o.getRange(f.rowCount), m = d.isShown ? Array.from({ length: Math.max(0, p.end - p.start) }, (e, t) => {
-			let r = p.start + t;
+		let m = o.getRange(f.rowCount), h = d.isShown && !p ? Array.from({ length: Math.max(0, m.end - m.start) }, (e, t) => {
+			let r = m.start + t;
 			return /* @__PURE__ */ n("div", {
 				className: "bk-row",
-				"data-row-index": r,
+				"data-row-index": s.domDiagnostics ? r : void 0,
 				style: f.getRowStyle(r)
 			}, r);
 		}) : [];
 		return /* @__PURE__ */ n("div", {
-			className: L(...f.classTokens.map((e) => `bk-${e}`), r.className),
-			"data-testid": "baseline",
+			className: L(...f.classTokens.map((e) => `bk-${e}`), `bk-${u}`, p && "bk-compact", r.className),
+			"data-testid": s.domDiagnostics ? "baseline" : void 0,
 			"aria-hidden": !0,
-			style: R(f.containerStyle, {
+			style: R(P({
+				...f.containerStyle,
+				...p ? { "--bkbl-b": `${l}px` } : {}
+			}, {
+				"--bkbl-w": "100%",
+				"--bkbl-h": "100%",
+				"--bkbl-b": "8px",
+				"--bkbl-cl": i.baseline.colors.line,
+				"--bkbl-cf": i.baseline.colors.flat,
+				"--bkbl-c": u === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)"
+			}), P({
 				width: c(r.width ?? "100%"),
 				height: c(r.height ?? "100%")
-			}, r.style),
+			}, {
+				width: "100%",
+				height: "100%"
+			}), r.style),
+			...I(r),
 			mix: typeof window > "u" || r.ssrMode ? void 0 : a.attach,
-			children: m
+			children: h
 		});
 	};
 }
-var oe = J(`${import.meta.url}#Baseline`, ae);
+var pe = Y(`${import.meta.url}#Baseline`, fe);
 //#endregion
 //#region packages/remix/src/Guide.tsx
-function se(e) {
+function me(e) {
 	let t = {
 		width: 0,
 		height: 0
 	}, a = () => {
-		q(e);
-	}, o = Y((e) => {
+		J(e);
+	}, o = X((e) => {
 		(e.width !== t.width || e.height !== t.height) && (t = e, a());
 	});
 	return () => {
-		let a = e.props, s = a.__baselineConfig ?? z(e, N, i), c = a.variant ?? s.guide.variant, l = B(a.debugging, s.guide.debugging), u = E({
-			variant: c,
+		let a = e.props, s = B(a.__baselineConfig ?? z(e, M, i)), l = a.variant ?? s.guide.variant, u = V(a.debugging, s.guide.debugging), d = O({
+			variant: l,
 			base: s.base,
 			gap: a.gap ?? 0,
 			columns: a.columns,
 			columnWidth: a.columnWidth
-		}), d = ne(t.width, u, {
+		}), f = T(t.width, d, {
 			viewportWidth: typeof window > "u" ? void 0 : window.innerWidth,
 			viewportHeight: typeof window > "u" ? void 0 : window.innerHeight
-		}), f = O({
+		}), p = A({
 			base: s.base,
 			colors: s.guide.colors,
-			variant: c,
+			variant: l,
 			align: a.align ?? "center",
 			width: a.width,
 			height: a.height,
 			columnWidth: a.columnWidth,
 			maxWidth: a.maxWidth,
 			color: a.color,
-			template: d.template,
-			columnsCount: d.columnsCount,
-			calculatedGap: d.calculatedGap,
-			isVisible: l.isShown
+			template: f.template,
+			columnsCount: f.columnsCount,
+			calculatedGap: f.calculatedGap,
+			isVisible: u.isShown
+		}), m = D({
+			variant: l,
+			columns: a.columns,
+			columnWidth: a.columnWidth,
+			gap: a.gap ?? 0,
+			align: a.align ?? "center",
+			domDiagnostics: s.domDiagnostics,
+			className: a.className,
+			style: a.style && typeof a.style == "object" ? a.style : void 0
 		});
 		if (a.ssrMode) return /* @__PURE__ */ n("div", {
-			className: L("bk-gde", "bk-h", "bk-ssr", a.className),
-			"data-testid": "guide",
-			"data-variant": c,
+			className: L("bk-gde", "bk-h", "bk-ssr", `bk-${l}`, a.className),
+			"data-testid": s.domDiagnostics ? "guide" : void 0,
+			"data-variant": s.domDiagnostics ? l : void 0,
 			"aria-hidden": !0,
-			style: R({
-				width: a.width ?? "100%",
-				height: a.height ?? "100%",
-				maxWidth: a.maxWidth ?? "none"
-			}, a.style),
+			style: R(P({
+				width: c(a.width ?? "100%"),
+				height: c(a.height ?? "100%"),
+				maxWidth: c(a.maxWidth ?? "none")
+			}, {
+				width: "100%",
+				height: "100%",
+				maxWidth: "none"
+			}), a.style),
+			...I(a),
 			children: a.children
 		});
-		let p = !f.isLineVariant && l.isShown ? Array.from({ length: f.columnsCount }, (e, t) => /* @__PURE__ */ n("div", {
-			className: "bk-col",
-			"data-column-index": t,
-			"data-variant": c
-		}, t)) : null, m = l.isShown ? /* @__PURE__ */ n("div", {
-			className: "bk-cols",
-			"data-variant": c,
-			children: p
+		let h = !p.isLineVariant && u.isShown && !m ? Array.from({ length: p.columnsCount }, (e, t) => /* @__PURE__ */ n("div", {
+			className: L("bk-col", `bk-${l}`),
+			"data-column-index": s.domDiagnostics ? t : void 0,
+			"data-variant": s.domDiagnostics ? l : void 0
+		}, t)) : null, g = u.isShown ? /* @__PURE__ */ n("div", {
+			className: L("bk-cols", `bk-${l}`, m && "bk-cols-compact-fixed"),
+			"data-variant": s.domDiagnostics ? l : void 0,
+			children: h
 		}) : null;
 		return /* @__PURE__ */ r("div", {
-			className: L(...f.classTokens.map((e) => `bk-${e}`), a.className),
-			"data-testid": "guide",
-			"data-variant": c,
+			className: L(...p.classTokens.map((e) => `bk-${e}`), !p.classTokens.includes(l) && `bk-${l}`, a.className),
+			"data-testid": s.domDiagnostics ? "guide" : void 0,
+			"data-variant": s.domDiagnostics ? l : void 0,
 			"aria-hidden": !0,
-			style: R(f.containerStyle, a.style),
+			style: R(P(p.containerStyle, {
+				"--bkgd-w": "100%",
+				"--bkgd-h": "100%",
+				"--bkgd-mw": "none",
+				"--bkgd-cw": "60px",
+				"--bkgd-n": "12",
+				"--bkgd-b": "0",
+				"--bkgd-cl": i.guide.colors.line,
+				"--bkgd-cp": i.guide.colors.pattern,
+				"--bkgd-ca": i.guide.colors.auto,
+				"--bkgd-cf": i.guide.colors.fixed,
+				"--bkgd-g": "0px",
+				"--bkgd-j": "center",
+				"--bkgd-t": "none",
+				"--bkgd-line-color": "var(--bkgd-cl)"
+			}), a.style),
+			...I(a),
 			mix: typeof window > "u" || a.ssrMode ? void 0 : o.attach,
-			children: [m, a.children]
+			children: [g, a.children]
 		});
 	};
 }
-var ce = J(`${import.meta.url}#Guide`, se);
+var he = Y(`${import.meta.url}#Guide`, me);
 //#endregion
 //#region packages/remix/src/Spacer.tsx
-function le(e) {
+function Z(e) {
 	return () => {
-		let t = e.props, a = t.__baselineConfig ?? z(e, N, i), o = t.base ?? a.base, s = t.variant ?? a.spacer.variant, c = B(t.debugging, a.spacer.debugging), l = j({
+		let t = e.props, a = B(t.__baselineConfig ?? z(e, M, i)), o = t.base ?? a.base, s = t.variant ?? a.spacer.variant, c = V(t.debugging, a.spacer.debugging), l = oe({
 			base: o,
 			colors: a.spacer.colors,
 			width: t.width,
@@ -849,30 +967,35 @@ function le(e) {
 		}, "width")] : null;
 		return /* @__PURE__ */ r("div", {
 			className: L(...l.classTokens.map((e) => `bk-${e}`), t.className),
-			"data-testid": "spacer",
-			"data-variant": s,
-			"data-height": `${l.normHeight}px`,
-			style: R(l.style, t.style),
+			"data-testid": a.domDiagnostics ? "spacer" : void 0,
+			"data-variant": a.domDiagnostics ? s : void 0,
+			"data-height": a.domDiagnostics ? `${l.normHeight}px` : void 0,
+			style: R(P(l.style, {
+				"--bksp-w": "var(--bk-wf, 100%)",
+				"--bksp-h": "var(--bk-hf, auto)",
+				"--bksp-b": "8px",
+				"--bksp-cl": i.spacer.colors.line,
+				"--bksp-cf": i.spacer.colors.flat,
+				"--bksp-ct": i.spacer.colors.text
+			}), t.style),
+			...I(t),
 			children: [u, t.children]
 		});
 	};
 }
-var X = J(`${import.meta.url}#Spacer`, le), ue = X, Z = { gridColumn: "1 / -1" }, Q = { gridRow: "2 / 3" }, de = {
-	gridRow: "2 / 3",
-	gridColumn: "2 / 3"
-};
-function fe(e) {
-	let t = i.base, r = _({}), a = null, o = Y(({ height: n }) => {
-		e.props.ssrMode || a || n === 0 || (a = x(n, t, r, "height"), q(e));
+var Q = Y(`${import.meta.url}#Spacer`, Z), ge = Q;
+function _e(e) {
+	let t = i.base, r = _({}), a = null, o = X(({ height: n }) => {
+		e.props.ssrMode || a || n === 0 || (a = x(n, t, r, "height"), J(e));
 	});
 	return () => {
-		let s = e.props, c = s.__baselineConfig ?? z(e, N, i), l = B(s.debugging, c.padder.debugging);
+		let s = e.props, c = B(s.__baselineConfig ?? z(e, M, i)), l = V(s.debugging, c.padder.debugging);
 		t = c.base, r = _({
 			padding: s.padding,
 			block: s.block,
 			inline: s.inline
 		});
-		let u = s.ssrMode ? r : a ?? r, d = typeof window > "u" || s.ssrMode ? void 0 : o.attach, f = re({
+		let u = s.ssrMode ? r : a ?? r, d = typeof window > "u" || s.ssrMode ? void 0 : o.attach, f = se({
 			base: c.base,
 			color: c.padder.color,
 			width: s.width,
@@ -883,12 +1006,22 @@ function fe(e) {
 		});
 		if (l.isNone) return /* @__PURE__ */ n("div", {
 			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
-			"data-testid": "padder",
+			"data-testid": c.domDiagnostics ? "padder" : void 0,
 			mix: d,
-			style: R(f.containerStyle, s.style),
-			children: s.children
+			style: R(P(f.containerStyle, {
+				"--bkpd-w": "auto",
+				"--bkpd-h": "auto",
+				"--bkpd-b": "8px",
+				"--bkpd-c": i.padder.color
+			}), s.style),
+			...I(s),
+			children: s.preserveContentHost ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-content",
+				"data-testid": c.domDiagnostics ? "padder-content" : void 0,
+				children: s.children
+			}, "content") : s.children
 		});
-		let p = c.spacer.variant, m = (e, t) => /* @__PURE__ */ n(ue, {
+		let p = c.spacer.variant, m = (e, t) => /* @__PURE__ */ n(ge, {
 			__baselineConfig: c,
 			width: e === "100%" ? void 0 : e,
 			height: t === "100%" ? void 0 : t,
@@ -896,89 +1029,119 @@ function fe(e) {
 			debugging: l.debugging,
 			indicatorNode: s.indicatorNode
 		}), h = [
-			u.top >= 0 ? /* @__PURE__ */ n("div", {
-				style: Z,
+			u.top > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-top",
 				children: m("100%", u.top)
 			}, "top") : null,
-			u.left >= 0 ? /* @__PURE__ */ n("div", {
-				style: Q,
+			u.left > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-left",
 				children: m(u.left, "100%")
 			}, "left") : null,
 			/* @__PURE__ */ n("div", {
 				className: "bk-pad-content",
-				"data-testid": "padder-content",
-				style: de,
+				"data-testid": c.domDiagnostics ? "padder-content" : void 0,
 				children: s.children
 			}, "content"),
-			u.right >= 0 ? /* @__PURE__ */ n("div", {
-				style: Q,
+			u.right > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-right",
 				children: m(u.right, "100%")
 			}, "right") : null,
-			u.bottom >= 0 ? /* @__PURE__ */ n("div", {
-				style: Z,
+			u.bottom > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-bottom",
 				children: m("100%", u.bottom)
 			}, "bottom") : null
 		];
 		return /* @__PURE__ */ n("div", {
 			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
-			"data-testid": "padder",
+			"data-testid": c.domDiagnostics ? "padder" : void 0,
 			mix: d,
-			style: R(f.containerStyle, s.style),
+			style: R(P(f.containerStyle, {
+				"--bkpd-w": "auto",
+				"--bkpd-h": "auto",
+				"--bkpd-b": "8px",
+				"--bkpd-c": i.padder.color
+			}), s.style),
+			...I(s),
 			children: h
 		});
 	};
 }
-var $ = J(`${import.meta.url}#Padder`, fe), pe = N;
-function me(e) {
-	let t = i.base, r = "clamp", a = "bottom", o = _({}), s = null, c = () => {
-		q(e);
-	}, l = Y((e) => {
-		r === "none" || s || e.height === 0 || (s = x(e.height, t, o, {
+var $ = Y(`${import.meta.url}#Padder`, _e), ve = $, ye = $, be = M;
+function xe(e) {
+	let t = i.base, r = "clamp", a = "bottom", s = _({}), c = null, l = () => {
+		J(e);
+	}, u = X((e) => {
+		r === "none" || c || e.height === 0 || (c = x(e.height, t, s, {
 			mode: r,
 			snapEdge: a
-		}), c());
+		}), l());
 	});
 	return () => {
-		let c = e.props, u = c.__baselineConfig ?? z(e, N, i), d = c.snapping ?? "clamp", f = c.snapEdge ?? "bottom", p = B(c.debugging, u.box.debugging), m = _({
-			padding: c.padding,
-			block: c.block,
-			inline: c.inline
+		let l = e.props, d = B(l.__baselineConfig ?? z(e, M, i)), f = l.snapping ?? "clamp", p = l.snapEdge ?? "bottom", m = V(l.debugging, d.box.debugging), h = _({
+			padding: l.padding,
+			block: l.block,
+			inline: l.inline
 		});
-		t = u.base, r = d, a = f, o = m;
-		let h = d === "none" ? m : s ?? m, g = A({
-			base: u.base,
-			lineColor: u.box.colors.line,
-			width: c.width,
-			height: c.height,
-			span: c.span,
-			colSpan: c.colSpan,
-			rowSpan: c.rowSpan,
-			isVisible: p.isShown
-		}), v = /* @__PURE__ */ n($, {
-			block: [h.top, h.bottom],
-			inline: [h.left, h.right],
-			width: "fit-content",
-			height: c.height,
-			debugging: p.debugging,
-			ssrMode: !0,
-			children: c.children
+		t = d.base, r = f, a = p, s = h;
+		let g = f === "none" ? h : c ?? h, v = o({
+			parentConfig: d,
+			base: 1,
+			spacer: { variant: "flat" }
+		}), y = ie({
+			className: l.className,
+			style: l.style,
+			width: l.width
+		}), b = ae({
+			base: d.base,
+			lineColor: d.box.colors.line,
+			width: l.width,
+			height: l.height,
+			span: l.span,
+			colSpan: l.colSpan,
+			rowSpan: l.rowSpan,
+			isVisible: m.isShown
+		}), x = y ? void 0 : P({
+			...g.top > 0 || g.bottom > 0 ? { gridTemplateRows: `${g.top}px 1fr ${g.bottom}px` } : {},
+			...g.left > 0 || g.right > 0 ? { gridTemplateColumns: `${g.left}px 1fr ${g.right}px` } : {}
+		}, {
+			gridTemplateRows: "auto 1fr auto",
+			gridTemplateColumns: "auto 1fr auto"
 		});
 		return /* @__PURE__ */ n("div", {
-			className: L(...g.classTokens.map((e) => `bk-${e}`), c.className),
-			"data-testid": "box",
-			style: R(g.boxStyle, g.gridSpanStyle, c.style),
-			mix: typeof window > "u" || c.ssrMode || d === "none" ? void 0 : l.attach,
-			children: /* @__PURE__ */ n(pe, {
-				__baselineConfig: u,
+			className: L(...b.classTokens.map((e) => `bk-${e}`), y && "bk-box-separate-padder", m.isShown && !y && "bk-box-pad-visible", l.className),
+			"data-testid": d.domDiagnostics ? "box" : void 0,
+			style: R(P(b.boxStyle, {
+				"--bkbx-w": "fit-content",
+				"--bkbx-h": "fit-content",
+				"--bkbx-cl": i.box.colors.line
+			}), y ? void 0 : R(x, m.isShown ? P({ "--bkpd-c": d.padder.color }, { "--bkpd-c": i.padder.color }) : void 0), b.gridSpanStyle, l.style),
+			...I(l),
+			mix: typeof window > "u" || l.ssrMode || f === "none" ? void 0 : u.attach,
+			children: /* @__PURE__ */ n(be, {
+				__baselineConfig: d,
 				base: 1,
 				spacer: { variant: "flat" },
-				children: v
+				children: y ? /* @__PURE__ */ n(ye, {
+					__baselineConfig: v,
+					block: [g.top, g.bottom],
+					inline: [g.left, g.right],
+					width: "fit-content",
+					height: l.height,
+					debugging: m.debugging,
+					preserveContentHost: !0,
+					ssrMode: !0,
+					children: l.children
+				}) : /* @__PURE__ */ n("div", {
+					className: "bk-pad-content",
+					"data-testid": d.domDiagnostics ? "padder-content" : void 0,
+					children: l.children
+				})
 			})
 		});
 	};
 }
-var he = J(`${import.meta.url}#Box`, me);
+var Se = Y(`${import.meta.url}#Box`, xe);
 //#endregion
-export { oe as Baseline, he as Box, N as Config, ce as Guide, $ as Padder, X as Spacer };
+export { pe as Baseline, Se as Box, M as Config, he as Guide, ve as Padder, Q as Spacer };
 
 //# sourceMappingURL=remix.mjs.map