@soroush.tech/styled-system 6.0.0-alpha.0 → 6.0.0-alpha.2

package/dist/background.d.cts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-Bwpwvg1h.cjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cv5WjcVA.cjs";
+import { t as background } from "./index-IfEDsoFj.cjs";
+import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cj6Jx5LX.cjs";
 export { type BackgroundImageProps, type BackgroundPositionProps, type BackgroundProps, type BackgroundRepeatProps, type BackgroundSizeProps, background, background as default };

package/dist/background.d.mts

@@ -1,3 +1,3 @@
-import { t as background } from "./index-DKz4zEeT.mjs";
-import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cv5WjcVA.mjs";
+import { t as background } from "./index-Xh-lC-ge.mjs";
+import { c as BackgroundProps, l as BackgroundRepeatProps, o as BackgroundImageProps, s as BackgroundPositionProps, u as BackgroundSizeProps } from "./types-Cj6Jx5LX.mjs";
 export { type BackgroundImageProps, type BackgroundPositionProps, type BackgroundProps, type BackgroundRepeatProps, type BackgroundSizeProps, background, background as default };

package/dist/border.d.cts

@@ -1,3 +1,3 @@
-import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-Cv5WjcVA.cjs";
-import { t as border } from "./index-D5xp7RWT.cjs";
+import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-Cj6Jx5LX.cjs";
+import { t as border } from "./index-C8kegqfi.cjs";
 export { type BorderBottomProps, type BorderColorProps, type BorderLeftProps, type BorderProps, type BorderRadiusProps, type BorderRightProps, type BorderStyleProps, type BorderTopProps, type BorderWidthProps, border, border as default };

package/dist/border.d.mts

@@ -1,3 +1,3 @@
-import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-Cv5WjcVA.mjs";
-import { t as border } from "./index-CQWZd4iQ.mjs";
+import { _ as BorderStyleProps, d as BorderBottomProps, f as BorderColorProps, g as BorderRightProps, h as BorderRadiusProps, m as BorderProps, p as BorderLeftProps, v as BorderTopProps, y as BorderWidthProps } from "./types-Cj6Jx5LX.mjs";
+import { t as border } from "./index-BgSrVqHI.mjs";
 export { type BorderBottomProps, type BorderColorProps, type BorderLeftProps, type BorderProps, type BorderRadiusProps, type BorderRightProps, type BorderStyleProps, type BorderTopProps, type BorderWidthProps, border, border as default };

package/dist/color.d.cts

@@ -1,3 +1,3 @@
-import { Mt as TextColorProps, a as BackgroundColorProps, ht as OpacityProps, w as ColorProps } from "./types-Cv5WjcVA.cjs";
-import { t as color } from "./index-ByDfI1go.cjs";
+import { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cj6Jx5LX.cjs";
+import { t as color } from "./index-DOzfQDfG.cjs";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/color.d.mts

@@ -1,3 +1,3 @@
-import { Mt as TextColorProps, a as BackgroundColorProps, ht as OpacityProps, w as ColorProps } from "./types-Cv5WjcVA.mjs";
-import { t as color } from "./index-90_abc05.mjs";
+import { Nt as TextColorProps, a as BackgroundColorProps, gt as OpacityProps, w as ColorProps } from "./types-Cj6Jx5LX.mjs";
+import { t as color } from "./index-fuBvJDhs.mjs";
 export { type BackgroundColorProps, type ColorProps, type OpacityProps, type TextColorProps, color, color as default };

package/dist/core.cjs

@@ -56,33 +56,30 @@ const parseResponsiveObject = (keyed, sx, scale, raw, props) => {
 	}
 	return styles;
 };
+const queriesFor = (cache, theme) => {
+	const breakpoints = get(theme, "breakpoints", defaults.breakpoints);
+	if (theme?.disableStyledSystemCache || cache.breakpoints !== breakpoints || !cache.queries) {
+		cache.breakpoints = breakpoints;
+		cache.queries = require_media.responsiveQueries(breakpoints);
+	}
+	return cache.queries;
+};
 const createParser = (config) => {
 	const cache = {};
 	const parse = ((props) => {
 		let styles = {};
 		let shouldSort = false;
-		const isCacheDisabled = props.theme?.disableStyledSystemCache;
 		for (const key in props) {
 			if (!config[key]) continue;
 			const sx = config[key];
 			const raw = props[key];
 			const scale = get(props.theme, sx.scale, sx.defaults);
 			if (typeof raw === "object") {
-				const breakpoints = get(props.theme, "breakpoints", defaults.breakpoints);
-				if (isCacheDisabled || cache.breakpoints !== breakpoints || !cache.queries) {
-					cache.breakpoints = breakpoints;
-					cache.queries = require_media.responsiveQueries(breakpoints);
-				}
-				const queries = cache.queries;
-				if (Array.isArray(raw)) {
-					styles = merge(styles, parseResponsiveStyle(queries.array, sx, scale, raw, props));
-					shouldSort = true;
-					continue;
-				}
-				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(queries.keyed, sx, scale, raw, props));
-					shouldSort = true;
-				}
+				if (raw === null) continue;
+				const { array, keyed } = queriesFor(cache, props.theme);
+				const responsive = Array.isArray(raw) ? parseResponsiveStyle(array, sx, scale, raw, props) : parseResponsiveObject(keyed, sx, scale, raw, props);
+				styles = merge(styles, responsive);
+				shouldSort = true;
 				continue;
 			}
 			Object.assign(styles, sx(raw, scale, props));

package/dist/core.mjs

@@ -55,33 +55,30 @@ const parseResponsiveObject = (keyed, sx, scale, raw, props) => {
 	}
 	return styles;
 };
+const queriesFor = (cache, theme) => {
+	const breakpoints = get(theme, "breakpoints", defaults.breakpoints);
+	if (theme?.disableStyledSystemCache || cache.breakpoints !== breakpoints || !cache.queries) {
+		cache.breakpoints = breakpoints;
+		cache.queries = responsiveQueries(breakpoints);
+	}
+	return cache.queries;
+};
 const createParser = (config) => {
 	const cache = {};
 	const parse = ((props) => {
 		let styles = {};
 		let shouldSort = false;
-		const isCacheDisabled = props.theme?.disableStyledSystemCache;
 		for (const key in props) {
 			if (!config[key]) continue;
 			const sx = config[key];
 			const raw = props[key];
 			const scale = get(props.theme, sx.scale, sx.defaults);
 			if (typeof raw === "object") {
-				const breakpoints = get(props.theme, "breakpoints", defaults.breakpoints);
-				if (isCacheDisabled || cache.breakpoints !== breakpoints || !cache.queries) {
-					cache.breakpoints = breakpoints;
-					cache.queries = responsiveQueries(breakpoints);
-				}
-				const queries = cache.queries;
-				if (Array.isArray(raw)) {
-					styles = merge(styles, parseResponsiveStyle(queries.array, sx, scale, raw, props));
-					shouldSort = true;
-					continue;
-				}
-				if (raw !== null) {
-					styles = merge(styles, parseResponsiveObject(queries.keyed, sx, scale, raw, props));
-					shouldSort = true;
-				}
+				if (raw === null) continue;
+				const { array, keyed } = queriesFor(cache, props.theme);
+				const responsive = Array.isArray(raw) ? parseResponsiveStyle(array, sx, scale, raw, props) : parseResponsiveObject(keyed, sx, scale, raw, props);
+				styles = merge(styles, responsive);
+				shouldSort = true;
 				continue;
 			}
 			Object.assign(styles, sx(raw, scale, props));

package/dist/flexbox.d.cts

@@ -1,3 +1,3 @@
-import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, gt as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-Cv5WjcVA.cjs";
-import { t as flexbox } from "./index-CQyvhO-h.cjs";
+import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, _t as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-Cj6Jx5LX.cjs";
+import { t as flexbox } from "./index-ILo8rb05.cjs";
 export { type AlignContentProps, type AlignItemsProps, type AlignSelfProps, type FlexBasisProps, type FlexDirectionProps, type FlexGrowProps, type FlexProps, type FlexShrinkProps, type FlexWrapProps, type FlexboxProps, type JustifyContentProps, type JustifyItemsProps, type JustifySelfProps, type OrderProps, flexbox as default, flexbox };

package/dist/flexbox.d.mts

@@ -1,3 +1,3 @@
-import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, gt as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-Cv5WjcVA.mjs";
-import { t as flexbox } from "./index-aRomguCQ.mjs";
+import { A as FlexDirectionProps, F as FlexboxProps, M as FlexProps, N as FlexShrinkProps, P as FlexWrapProps, _t as OrderProps, j as FlexGrowProps, k as FlexBasisProps, n as AlignItemsProps, nt as JustifyItemsProps, r as AlignSelfProps, rt as JustifySelfProps, t as AlignContentProps, tt as JustifyContentProps } from "./types-Cj6Jx5LX.mjs";
+import { t as flexbox } from "./index-D8sNCYCo.mjs";
 export { type AlignContentProps, type AlignItemsProps, type AlignSelfProps, type FlexBasisProps, type FlexDirectionProps, type FlexGrowProps, type FlexProps, type FlexShrinkProps, type FlexWrapProps, type FlexboxProps, type JustifyContentProps, type JustifyItemsProps, type JustifySelfProps, type OrderProps, flexbox as default, flexbox };

package/dist/grid-CAuvylKs.mjs

@@ -0,0 +1,158 @@
+import { o as responsiveQueries } from "./media-Bho3l7WK.mjs";
+import { get, system } from "./core.mjs";
+//#region src/grid/grid.ts
+const spaceScale = [
+	0,
+	4,
+	8,
+	16,
+	32,
+	64,
+	128,
+	256,
+	512
+];
+const grid = system({
+	gridGap: {
+		property: "gridGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridColumnGap: {
+		property: "gridColumnGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridRowGap: {
+		property: "gridRowGap",
+		scale: "space",
+		defaultScale: spaceScale
+	},
+	gridColumn: true,
+	gridRow: true,
+	gridAutoFlow: true,
+	gridAutoColumns: true,
+	gridAutoRows: true,
+	gridTemplateColumns: true,
+	gridTemplateRows: true,
+	gridTemplateAreas: true,
+	gridArea: true
+});
+//#endregion
+//#region src/grid/layoutGrid.ts
+const spaceValue = (theme, value) => {
+	const resolved = get(theme, `space.${value}`, value);
+	return typeof resolved === "number" ? `${resolved}px` : resolved;
+};
+const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
+	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
+	return {
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: width ?? "none",
+		marginInline: width === void 0 ? 0 : `max(0px, calc((100% - ${width}) / 2))`
+	};
+};
+const columnDeclarations = (theme, display, { columns, gutter }) => {
+	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
+	return {
+		"--layout-columns": columns,
+		"--layout-gutter": gap,
+		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
+		columnGap: gap
+	};
+};
+const declarations = (theme, parts, entry) => {
+	const styles = Object.assign({}, ...parts.map((part) => part === "frame" ? frameDeclarations(theme, entry) : columnDeclarations(theme, part, entry)));
+	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
+};
+const DISPLAY = {
+	frame: {},
+	grid: { display: "grid" },
+	flex: {
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap"
+	}
+};
+const layoutStyles = (theme, value, parts) => {
+	if (!value) return {};
+	const breakpoints = get(theme, "breakpoints", {});
+	const layout = get(theme, "layout", {});
+	const fields = typeof value === "object" ? Object.entries(value) : [];
+	const everywhere = Object.fromEntries(fields.filter(([, field]) => typeof field !== "object"));
+	const overrides = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
+	const hasEverywhere = Object.keys(everywhere).length > 0;
+	const { keyed } = responsiveQueries(breakpoints);
+	const styles = Object.assign({}, ...parts.map((part) => DISPLAY[part]));
+	let themed = {};
+	let overridden = false;
+	for (const key of Object.keys(breakpoints)) {
+		const layer = layout[key]?.content;
+		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const override = hasEverywhere || named ? {
+			...everywhere,
+			...named
+		} : void 0;
+		themed = {
+			...themed,
+			...layer
+		};
+		if (layer || override || overridden) {
+			const block = declarations(theme, parts, {
+				...themed,
+				...override
+			});
+			const media = keyed.get(key);
+			if (media) styles[media] = block;
+			else Object.assign(styles, block);
+		}
+		overridden = override !== void 0;
+	}
+	return styles;
+};
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
+* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
+* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
+* breakpoint is back to the theme. Every written block carries the full set, so no block
+* inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+* `maxWidth` on the same element does not override it; rows take `rowGap`.
+*/
+const layoutGridStyles = (theme, value, display = "grid") => layoutStyles(theme, value, [display, "frame"]);
+const layoutParser = (part) => Object.assign((props) => layoutStyles(props.theme, props.layout, [part]), {
+	config: {},
+	propNames: ["layout"],
+	cache: {}
+});
+/**
+* The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+* width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+* or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+*/
+const layoutFrame = layoutParser("frame");
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
+const layoutGrid = layoutParser("grid");
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
+const layoutFlex = layoutParser("flex");
+const flexSpan = (n) => {
+	const columns = "var(--layout-columns)";
+	const gutter = "var(--layout-gutter)";
+	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
+};
+/**
+* The `span` prop: how many layout-grid columns an element takes. It writes both
+* `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
+* `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
+* other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+* layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
+*/
+const span = system({ span: (n) => n === "full" ? {
+	gridColumn: "1 / -1",
+	flex: "0 0 100%"
+} : {
+	gridColumn: `span ${n}`,
+	flex: flexSpan(n)
+} });
+//#endregion
+export { span as a, layoutGridStyles as i, layoutFrame as n, grid as o, layoutGrid as r, layoutFlex as t };

package/dist/{grid-BlMUPDJM.cjs → grid-Cv-XGWcr.cjs}

@@ -45,49 +45,61 @@ const spaceValue = (theme, value) => {
 	const resolved = require_core.get(theme, `space.${value}`, value);
 	return typeof resolved === "number" ? `${resolved}px` : resolved;
 };
-const declarations = (theme, display, entry) => {
-	const { columns, margin, gutter, mode, maxWidth } = entry;
-	const isFixed = mode === "fixed";
+const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
+	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
+	return {
+		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
+		maxWidth: width ?? "none",
+		marginInline: width === void 0 ? 0 : `max(0px, calc((100% - ${width}) / 2))`
+	};
+};
+const columnDeclarations = (theme, display, { columns, gutter }) => {
 	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	const styles = {
+	return {
 		"--layout-columns": columns,
 		"--layout-gutter": gap,
 		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap,
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: isFixed && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : "none",
-		marginInline: isFixed ? "auto" : 0
+		columnGap: gap
 	};
+};
+const declarations = (theme, parts, entry) => {
+	const styles = Object.assign({}, ...parts.map((part) => part === "frame" ? frameDeclarations(theme, entry) : columnDeclarations(theme, part, entry)));
 	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
 };
-/**
-* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. An entry in `value` replaces the
-* theme's at the breakpoint it names only; the next breakpoint is back to the theme. Every
-* written block carries the full set, so no block inherits a stale `max-width`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => {
+const DISPLAY = {
+	frame: {},
+	grid: { display: "grid" },
+	flex: {
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap"
+	}
+};
+const layoutStyles = (theme, value, parts) => {
 	if (!value) return {};
 	const breakpoints = require_core.get(theme, "breakpoints", {});
 	const layout = require_core.get(theme, "layout", {});
-	const overrides = typeof value === "object" ? value : {};
+	const fields = typeof value === "object" ? Object.entries(value) : [];
+	const everywhere = Object.fromEntries(fields.filter(([, field]) => typeof field !== "object"));
+	const overrides = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
+	const hasEverywhere = Object.keys(everywhere).length > 0;
 	const { keyed } = require_media.responsiveQueries(breakpoints);
-	const styles = display === "grid" ? { display: "grid" } : {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	};
+	const styles = Object.assign({}, ...parts.map((part) => DISPLAY[part]));
 	let themed = {};
 	let overridden = false;
 	for (const key of Object.keys(breakpoints)) {
 		const layer = layout[key]?.content;
-		const override = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
+		const override = hasEverywhere || named ? {
+			...everywhere,
+			...named
+		} : void 0;
 		themed = {
 			...themed,
 			...layer
 		};
 		if (layer || override || overridden) {
-			const block = declarations(theme, display, {
+			const block = declarations(theme, parts, {
 				...themed,
 				...override
 			});
@@ -99,30 +111,50 @@ const layoutGridStyles = (theme, value, display = "grid") => {
 	}
 	return styles;
 };
-const layoutParser = (display) => Object.assign((props) => layoutGridStyles(props.theme, props.layout, display), {
+/**
+* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
+* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
+* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
+* breakpoint is back to the theme. Every written block carries the full set, so no block
+* inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+* `maxWidth` on the same element does not override it; rows take `rowGap`.
+*/
+const layoutGridStyles = (theme, value, display = "grid") => layoutStyles(theme, value, [display, "frame"]);
+const layoutParser = (part) => Object.assign((props) => layoutStyles(props.theme, props.layout, [part]), {
 	config: {},
 	propNames: ["layout"],
 	cache: {}
 });
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
+/**
+* The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+* width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+* or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+*/
+const layoutFrame = layoutParser("frame");
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
 const layoutGrid = layoutParser("grid");
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
 const layoutFlex = layoutParser("flex");
 const flexSpan = (n) => {
-	const columns = "var(--layout-columns, 1)";
-	const gutter = "var(--layout-gutter, 0px)";
+	const columns = "var(--layout-columns)";
+	const gutter = "var(--layout-gutter)";
 	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
 };
 /**
 * The `span` prop: how many layout-grid columns an element takes. It writes both
 * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
 * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
-* other's property. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
+* other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+* layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
 */
-const span = require_core.system({ span: (n) => ({
+const span = require_core.system({ span: (n) => n === "full" ? {
+	gridColumn: "1 / -1",
+	flex: "0 0 100%"
+} : {
 	gridColumn: `span ${n}`,
 	flex: flexSpan(n)
-}) });
+} });
 //#endregion
 Object.defineProperty(exports, "grid", {
 	enumerable: true,
@@ -136,6 +168,12 @@ Object.defineProperty(exports, "layoutFlex", {
 		return layoutFlex;
 	}
 });
+Object.defineProperty(exports, "layoutFrame", {
+	enumerable: true,
+	get: function() {
+		return layoutFrame;
+	}
+});
 Object.defineProperty(exports, "layoutGrid", {
 	enumerable: true,
 	get: function() {

package/dist/grid.cjs

@@ -2,10 +2,11 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_grid = require("./grid-BlMUPDJM.cjs");
+const require_grid = require("./grid-Cv-XGWcr.cjs");
 exports.default = require_grid.grid;
 exports.grid = require_grid.grid;
 exports.layoutFlex = require_grid.layoutFlex;
+exports.layoutFrame = require_grid.layoutFrame;
 exports.layoutGrid = require_grid.layoutGrid;
 exports.layoutGridStyles = require_grid.layoutGridStyles;
 exports.span = require_grid.span;

package/dist/grid.d.cts

@@ -1,3 +1,3 @@
-import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Ot as SpanProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, it as LayoutGridProps, q as GridGapProps } from "./types-Cv5WjcVA.cjs";
-import { a as layoutGrid, c as grid, i as layoutFlex, n as LayoutGridEntry, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridDisplay } from "./index-CXK27dY_.cjs";
-export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };
+import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, at as LayoutGridProps, it as LayoutFrameProps, kt as SpanProps, q as GridGapProps } from "./types-Cj6Jx5LX.cjs";
+import { a as layoutFrame, c as span, i as layoutFlex, l as grid, n as LayoutGridEntry, o as layoutGrid, r as LayoutGridValue, s as layoutGridStyles, t as LayoutGridDisplay } from "./index-DHAamdKa.cjs";
+export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, type LayoutFrameProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/grid.d.mts

@@ -1,3 +1,3 @@
-import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Ot as SpanProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, it as LayoutGridProps, q as GridGapProps } from "./types-Cv5WjcVA.mjs";
-import { a as layoutGrid, c as grid, i as layoutFlex, n as LayoutGridEntry, o as layoutGridStyles, r as LayoutGridValue, s as span, t as LayoutGridDisplay } from "./index-D7IZ8-Zq.mjs";
-export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };
+import { $ as GridTemplateRowsProps, G as GridColumnGapProps, H as GridAutoColumnsProps, J as GridProps, K as GridColumnProps, Q as GridTemplateColumnsProps, U as GridAutoFlowProps, V as GridAreaProps, W as GridAutoRowsProps, X as GridRowProps, Y as GridRowGapProps, Z as GridTemplateAreasProps, at as LayoutGridProps, it as LayoutFrameProps, kt as SpanProps, q as GridGapProps } from "./types-Cj6Jx5LX.mjs";
+import { a as layoutFrame, c as span, i as layoutFlex, l as grid, n as LayoutGridEntry, o as layoutGrid, r as LayoutGridValue, s as layoutGridStyles, t as LayoutGridDisplay } from "./index-C0X-fL6a.mjs";
+export { type GridAreaProps, type GridAutoColumnsProps, type GridAutoFlowProps, type GridAutoRowsProps, type GridColumnGapProps, type GridColumnProps, type GridGapProps, type GridProps, type GridRowGapProps, type GridRowProps, type GridTemplateAreasProps, type GridTemplateColumnsProps, type GridTemplateRowsProps, type LayoutFrameProps, LayoutGridDisplay, LayoutGridEntry, type LayoutGridProps, LayoutGridValue, type SpanProps, grid as default, grid, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/grid.mjs

@@ -1,2 +1,2 @@
-import { a as grid, i as span, n as layoutGrid, r as layoutGridStyles, t as layoutFlex } from "./grid-CYjL4-gb.mjs";
-export { grid as default, grid, layoutFlex, layoutGrid, layoutGridStyles, span };
+import { a as span, i as layoutGridStyles, n as layoutFrame, o as grid, r as layoutGrid, t as layoutFlex } from "./grid-CAuvylKs.mjs";
+export { grid as default, grid, layoutFlex, layoutFrame, layoutGrid, layoutGridStyles, span };

package/dist/{index-ClbGlQxq.d.mts → index-4_E8pg8R.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/variant/variant.d.ts
 interface VariantOptions {
   scale?: string;

package/dist/{index-Csbxj8Yo.d.cts → index-B7YL_4tg.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-Cv5WjcVA.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/variant/variant.d.ts
 interface VariantOptions {
   scale?: string;

package/dist/{index-CQWZd4iQ.d.mts → index-BgSrVqHI.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/border/border.d.ts
 declare const border: Parser;
 //#endregion

package/dist/{index-BQPI7z-B.d.mts → index-BnfK4WNL.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/space/space.d.ts
 declare const margin: Parser;
 declare const padding: Parser;

package/dist/{index-nfjmLzHF.d.mts → index-BvyUTPw5.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/typography/typography.d.ts
 declare const typography: Parser;
 //#endregion

package/dist/index-C0X-fL6a.d.mts

@@ -0,0 +1,55 @@
+import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
+import "./types-Cj6Jx5LX.mjs";
+//#region src/grid/grid.d.ts
+declare const grid: Parser;
+//#endregion
+//#region src/grid/layoutGrid.d.ts
+/** The layout grid at one breakpoint - the `content` part of a `theme.layout` entry. */
+interface LayoutGridEntry {
+  /** Equal columns. */
+  columns?: number;
+  /** Inline padding - a `theme.space` key or a CSS length. */
+  margin?: string | number;
+  /** Gap between columns - a `theme.space` key or a CSS length. */
+  gutter?: string | number;
+  /** `fluid` spans the space; `fixed` is a container centred at `maxWidth`. */
+  mode?: 'fluid' | 'fixed';
+  maxWidth?: string | number;
+}
+/**
+ * `true` for the theme's layout grid, or an entry: its fields replace the theme's at every
+ * breakpoint, and entries under breakpoint names replace it at that breakpoint only.
+ */
+type LayoutGridValue = boolean | Record<string, LayoutGridEntry | LayoutGridEntry[keyof LayoutGridEntry]>;
+/** The container a layout grid is drawn on: column tracks, or a wrapping flex row. */
+type LayoutGridDisplay = 'grid' | 'flex';
+/**
+ * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
+ * margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
+ * theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
+ * there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
+ * breakpoint is back to the theme. Every written block carries the full set, so no block
+ * inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
+ * `maxWidth` on the same element does not override it; rows take `rowGap`.
+ */
+declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
+/**
+ * The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
+ * width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
+ * or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
+ */
+declare const layoutFrame: Parser;
+/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
+declare const layoutGrid: Parser;
+/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
+declare const layoutFlex: Parser;
+/**
+ * The `span` prop: how many layout-grid columns an element takes. It writes both
+ * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
+ * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
+ * other's property. `span="full"` takes the whole row whatever the column count - in any grid,
+ * layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
+ */
+declare const span: Parser;
+//#endregion
+export { layoutFrame as a, span as c, layoutFlex as i, grid as l, LayoutGridEntry as n, layoutGrid as o, LayoutGridValue as r, layoutGridStyles as s, LayoutGridDisplay as t };

package/dist/{index-D5xp7RWT.d.cts → index-C8kegqfi.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-Cv5WjcVA.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/border/border.d.ts
 declare const border: Parser;
 //#endregion

package/dist/{index-Bxh1FNcS.d.cts → index-CnHK2xHk.d.cts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-iVqAMF2L.cjs";
-import "./types-Cv5WjcVA.cjs";
+import "./types-Cj6Jx5LX.cjs";
 //#region src/layout/layout.d.ts
 declare const layout: Parser;
 //#endregion

package/dist/{index-C1IdMVtQ.d.mts → index-CnVRmFIZ.d.mts}

@@ -1,5 +1,5 @@
 import { a as Parser } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.mjs";
+import "./types-Cj6Jx5LX.mjs";
 //#region src/shadow/shadow.d.ts
 declare const shadow: Parser;
 //#endregion