@niche-works/style-layouts 0.2.0 → 0.3.0

package/core/constants.mjs

@@ -246,25 +246,23 @@ const clsLayoutChildCountX = "nws-layout-childCountX";
 */
 const clsLayoutChildCountY = "nws-layout-childCountY";
 /**
-* 変数\
-* 間隔: 横方向
+* 横方向のテンプレート
 */
-const varLayoutGapX = "--nws-layout-gapX";
+const clsLayoutTemplateX = "nws-layout-templateX";
 /**
-* 変数\
-* 間隔: 縦方向
+* 縦方向のテンプレート
 */
-const varLayoutGapY = "--nws-layout-gapY";
+const clsLayoutTemplateY = "nws-layout-templateY";
 /**
 * 変数\
-* 子要素の横方向の数
+* 間隔: 横方向
 */
-const varLayoutChildCountX = "--nws-layout-childCountX";
+const varLayoutGapX = "--nws-layout-gapX";
 /**
 * 変数\
-* 子要素の縦方向の数
+* 間隔: 縦方向
 */
-const varLayoutChildCountY = "--nws-layout-childCountY";
+const varLayoutGapY = "--nws-layout-gapY";
 /**
 * 変数\
 * 子要素の幅
@@ -282,24 +280,24 @@ const varLayoutChildSizeY = "--nws-layout-childSizeY";
 const varLayoutChildRatio = "--nws-layout-childRatio";
 /**
 * 変数\
-* 横方向のテンプレート
+* 子要素の横方向の数
 */
-const varLayoutTemplateX = "--nws-layout-templateX";
+const varLayoutChildCountX = "--nws-layout-childCountX";
 /**
 * 変数\
-* 縦方向のテンプレート
+* 子要素の縦方向の数
 */
-const varLayoutTemplateY = "--nws-layout-templateY";
+const varLayoutChildCountY = "--nws-layout-childCountY";
 /**
 * 変数\
-* 横方向のオートトラック
+* 横方向のテンプレート
 */
-const varLayoutAutoTracX = "--nws-layout-autoTracX";
+const varLayoutTemplateX = "--nws-layout-templateX";
 /**
 * 変数\
-* 縦方向のオートトラック
+* 縦方向のテンプレート
 */
-const varLayoutAutoTracY = "--nws-layout-autoTracY";
+const varLayoutTemplateY = "--nws-layout-templateY";
 
 //#endregion
-export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };
+export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };

package/core/flow/flow.cjs

@@ -25,7 +25,7 @@ const flow = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutFlow, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY]),
+		className: (0, clsx.default)(require_core_constants.clsLayoutFlow, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);
@@ -46,10 +46,10 @@ const flow = (options = {}) => {
 * stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
 */
 function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
-	const result = { className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]) };
+	const result = { className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]) };
 	if (require_core__internal_hasValue(childSize)) {
-		result.className = (0, clsx.default)(result.className, require_core__constants.clsLayoutChildSize[axis]);
-		result.style = { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) };
+		result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
+		result.style = { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) };
 	}
 	return result;
 }
@@ -61,10 +61,10 @@ function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getFlowCrossAxisStyle(axis, align, childSize) {
 	if (require_core__internal_hasValue(childSize)) return {
-		className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutChildSize[axis]),
-		style: { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) }
+		className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.childSize[axis]),
+		style: { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) }
 	};
-	else return { className: require_core__constants.clsLayoutAlign[axis][align] };
+	else return { className: require_core__constants.clsLayout.align[axis][align] };
 }
 
 //#endregion

package/core/flow/flow.mjs

@@ -1,5 +1,5 @@
 import { clsLayoutFlow } from "../constants.mjs";
-import { clsLayoutAdjust, clsLayoutAlign, clsLayoutChildSize, clsLayoutDirection, varLayoutChildSize } from "../_constants.mjs";
+import { clsLayout, varLayout } from "../_constants.mjs";
 import hasValue from "../_internal/hasValue.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import unit from "../_internal/unit.mjs";
@@ -22,7 +22,7 @@ const flow = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutFlow, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY]),
+		className: clsx(clsLayoutFlow, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);
@@ -43,10 +43,10 @@ const flow = (options = {}) => {
 * stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
 */
 function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
-	const result = { className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]) };
+	const result = { className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
 	if (hasValue(childSize)) {
-		result.className = clsx(result.className, clsLayoutChildSize[axis]);
-		result.style = { [varLayoutChildSize[axis]]: unit(childSize) };
+		result.className = clsx(result.className, clsLayout.childSize[axis]);
+		result.style = { [varLayout.childSize[axis]]: unit(childSize) };
 	}
 	return result;
 }
@@ -58,10 +58,10 @@ function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
 */
 function _getFlowCrossAxisStyle(axis, align, childSize) {
 	if (hasValue(childSize)) return {
-		className: clsx(clsLayoutAlign[axis][align], clsLayoutChildSize[axis]),
-		style: { [varLayoutChildSize[axis]]: unit(childSize) }
+		className: clsx(clsLayout.align[axis][align], clsLayout.childSize[axis]),
+		style: { [varLayout.childSize[axis]]: unit(childSize) }
 	};
-	else return { className: clsLayoutAlign[axis][align] };
+	else return { className: clsLayout.align[axis][align] };
 }
 
 //#endregion

package/core/flow/styles.css

@@ -49,16 +49,14 @@
 .nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-spaceEvenly {
   align-content: space-evenly;
 }
-.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
-  flex-basis: var(--nws-layout-childSizeX);
-}
-.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
-  height: var(--nws-layout-childSizeY);
-}
 .nws-layout-flow.nws-layout-direction-x > * {
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 0;
+  min-height: 0;
+}
+.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
+  flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit {
   justify-content: flex-start;
@@ -67,7 +65,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  min-width: 0;
 }
 .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
   flex-basis: var(--nws-layout-childSizeX);
@@ -78,8 +75,8 @@
 .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
   flex-shrink: 1;
 }
-.nws-layout-flow.nws-layout-direction-x > * {
-  min-height: 0;
+.nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
 }
 .nws-layout-flow.nws-layout-direction-y {
   flex-direction: column;
@@ -123,20 +120,18 @@
 .nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-spaceEvenly {
   justify-content: space-evenly;
 }
+.nws-layout-flow.nws-layout-direction-y > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+}
 .nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeX > * {
   width: var(--nws-layout-childSizeX);
 }
 .nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeY > * {
   flex-basis: var(--nws-layout-childSizeY);
 }
-.nws-layout-flow.nws-layout-direction-y > * {
-  min-width: 0;
-}
-.nws-layout-flow.nws-layout-direction-y > * {
-  flex-grow: 0;
-  flex-shrink: 0;
-  min-height: 0;
-}
 .nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit {
   justify-content: flex-start;
 }
@@ -144,7 +139,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  min-height: 0;
 }
 .nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
   flex-basis: var(--nws-layout-childSizeY);
@@ -159,8 +153,18 @@
   aspect-ratio: var(--nws-layout-childRatio);
 }
 .nws-layout-flow.nws-layout-gapX {
-  column-gap: var(--nws-layout-gapX);
+  margin-left: calc(var(--nws-layout-gapX) / -2);
+  margin-right: calc(var(--nws-layout-gapX) / -2);
+}
+.nws-layout-flow.nws-layout-gapX > * {
+  margin-left: calc(var(--nws-layout-gapX) / 2);
+  margin-right: calc(var(--nws-layout-gapX) / 2);
 }
 .nws-layout-flow.nws-layout-gapY {
-  row-gap: var(--nws-layout-gapY);
+  margin-top: calc(var(--nws-layout-gapY) / -2);
+  margin-bottom: calc(var(--nws-layout-gapY) / -2);
+}
+.nws-layout-flow.nws-layout-gapY > * {
+  margin-top: calc(var(--nws-layout-gapY) / 2);
+  margin-bottom: calc(var(--nws-layout-gapY) / 2);
 }

package/core/layer/layer.cjs

@@ -22,7 +22,7 @@ const layer = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutLayer, require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
+		className: (0, clsx.default)(require_core_constants.clsLayoutLayer, require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	require_core__internal_applyChildSize(result, childSizeX, childSizeY);

package/core/layer/layer.mjs

@@ -1,5 +1,5 @@
 import { clsLayoutLayer } from "../constants.mjs";
-import { clsLayoutAdjust, clsLayoutAlign } from "../_constants.mjs";
+import { clsLayout } from "../_constants.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
@@ -19,7 +19,7 @@ const layer = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutLayer, clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+		className: clsx(clsLayoutLayer, clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	applyChildSize(result, childSizeX, childSizeY);

package/core/layer/styles.css

@@ -31,13 +31,11 @@
 .nws-layout-layer.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
-.nws-layout-layer.nws-layout-adjustX-fit > * {
+.nws-layout-layer.nws-layout-adjustX-fit > *, .nws-layout-layer.nws-layout-adjustX-grow > * {
   justify-self: stretch;
   width: auto;
 }
 .nws-layout-layer.nws-layout-adjustX-grow > * {
-  justify-self: stretch;
-  width: auto;
   min-width: var(--nws-layout-childSizeX);
 }
 .nws-layout-layer.nws-layout-adjustX-shrink > * {
@@ -45,13 +43,11 @@
   min-width: 0;
   max-width: 100%;
 }
-.nws-layout-layer.nws-layout-adjustY-fit > * {
+.nws-layout-layer.nws-layout-adjustY-fit > *, .nws-layout-layer.nws-layout-adjustY-grow > * {
   align-self: stretch;
   height: auto;
 }
 .nws-layout-layer.nws-layout-adjustY-grow > * {
-  align-self: stretch;
-  height: auto;
   min-height: var(--nws-layout-childSizeY);
 }
 .nws-layout-layer.nws-layout-adjustY-shrink > * {

package/core/matrix/matrix.cjs

@@ -1,11 +1,12 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_core_constants = require('../constants.cjs');
 const require_core__constants = require('../_constants.cjs');
-const require_core__internal_hasValue = require('../_internal/hasValue.cjs');
 const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
 const require_core__internal_unit = require('../_internal/unit.cjs');
+const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
 const require_core__internal_applyGap = require('../_internal/applyGap.cjs');
 const require_core__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.cjs');
+const require_core__internal_applyChildCount = require('../_internal/applyChildCount.cjs');
 let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
 _niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
 let clsx = require("clsx");
@@ -23,17 +24,33 @@ const matrix = (options) => {
 		alignX: "left",
 		alignY: "top"
 	}, { overwriteNull: true });
-	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutMatrix, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
+	let result = {
+		className: (0, clsx.default)(require_core_constants.clsLayoutMatrix, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);
 	require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
-	return require_core__internal_mergeLayoutResults([
-		result,
-		_getGridTemplate("x", adjustX, childSizeX, childCountX, tracksX),
-		_getGridTemplate("y", adjustY, childSizeY, childCountY, tracksY)
-	]);
+	let sizeX;
+	let sizeY;
+	let countX;
+	let countY;
+	let trxX;
+	let trxY;
+	if (Array.isArray(tracksX)) trxX = tracksX;
+	else {
+		sizeX = childSizeX;
+		countX = childCountX;
+	}
+	if (Array.isArray(tracksY)) trxY = tracksY;
+	else {
+		sizeY = childSizeY;
+		countY = childCountY;
+	}
+	require_core__internal_applyChildSize(result, sizeX, sizeY);
+	require_core__internal_applyChildCount(result, countX, countY);
+	if (trxX) result = require_core__internal_mergeLayoutResults([result, _getTemplate("x", adjustX, trxX)]);
+	if (trxY) result = require_core__internal_mergeLayoutResults([result, _getTemplate("y", adjustY, trxY)]);
+	return result;
 };
 /**
 * gridTemplateColumns / gridTemplateRowsを生成する
@@ -41,38 +58,19 @@ const matrix = (options) => {
 * @param adjust 子要素のサイズ調整
 * @param childSize 子要素のサイズ
 * @param childCount 子要素数
-* @param child 子要素数 & サイズ
+* @param tracks 子要素数 & サイズ
 * @returns
 */
-function _getGridTemplate(axis, adjust, childSize, childCount, child) {
-	let template;
-	if (Array.isArray(child)) {
-		const pxTotal = child.reduce((sum, value) => {
-			const px = _extractPx(value);
-			return px !== null ? sum + px : sum;
-		}, 0);
-		template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
-	} else {
-		const hasChildSize = require_core__internal_hasValue(childSize);
-		const hasCount = require_core__internal_hasValue(childCount);
-		if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${require_core__internal_unit(childSize)}), 1fr))`;
-		else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${require_core__internal_unit(childSize)}), 1fr))`;
-		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
-		else template = "repeat(auto-fit, 1fr)";
-		else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
-		else if (hasChildSize) template = `repeat(auto-fit, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
-		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
-		else template = "repeat(auto-fit, 1fr)";
-		else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${require_core__internal_unit(childSize)}))`;
-		else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${require_core__internal_unit(childSize)}))`;
-		else if (hasCount) template = `repeat(${childCount}, auto)`;
-		else template = "repeat(auto-fit, auto)";
-		else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${require_core__internal_unit(childSize)})`;
-		else if (hasChildSize) template = `repeat(auto-fit, ${require_core__internal_unit(childSize)})`;
-		else if (hasCount) template = `repeat(${childCount}, auto)`;
-		else template = "repeat(auto-fit, auto)";
-	}
-	return { style: { [require_core__constants.varLayoutTemplate[axis]]: template } };
+function _getTemplate(axis, adjust, tracks) {
+	const pxTotal = tracks.reduce((sum, value) => {
+		const px = _extractPx(value);
+		return px !== null ? sum + px : sum;
+	}, 0);
+	const template = tracks.map((value) => _applyAdjustToTrack(axis, adjust, value, tracks.length, pxTotal)).join(" ");
+	return {
+		className: require_core__constants.clsLayout.template[axis],
+		style: { [require_core__constants.varLayout.template[axis]]: template }
+	};
 }
 /**
 * tracksX/tracksYの各トラック値にadjustを適用する
@@ -85,13 +83,13 @@ function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
 	const pxValue = _extractPx(size);
 	const isPx = pxValue !== null;
 	if (adjust === "fit") {
-		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${require_core__constants.varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
 		return isFr ? childSize : `minmax(0, ${childSize})`;
 	} else if (adjust === "grow") {
-		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1))))`;
+		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require_core__constants.varLayout.gap[axis]}) * ${childCount - 1})))`;
 		return isFr ? childSize : `minmax(${childSize}, 1fr)`;
 	} else if (adjust === "shrink") {
-		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require_core__constants.varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
 		return isFr ? childSize : `minmax(0, ${childSize})`;
 	}
 	return childSize;

package/core/matrix/matrix.mjs

@@ -1,10 +1,11 @@
 import { clsLayoutMatrix } from "../constants.mjs";
-import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection, varLayoutGap, varLayoutTemplate } from "../_constants.mjs";
-import hasValue from "../_internal/hasValue.mjs";
+import { clsLayout, varLayout } from "../_constants.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import unit from "../_internal/unit.mjs";
+import applyChildSize from "../_internal/applyChildSize.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
+import applyChildCount from "../_internal/applyChildCount.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
 import clsx from "clsx";
 
@@ -20,17 +21,33 @@ const matrix = (options) => {
 		alignX: "left",
 		alignY: "top"
 	}, { overwriteNull: true });
-	const result = {
-		className: clsx(clsLayoutMatrix, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+	let result = {
+		className: clsx(clsLayoutMatrix, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);
 	applyChildRatio(result, childRatioX, childRatioY);
-	return mergeLayoutResults([
-		result,
-		_getGridTemplate("x", adjustX, childSizeX, childCountX, tracksX),
-		_getGridTemplate("y", adjustY, childSizeY, childCountY, tracksY)
-	]);
+	let sizeX;
+	let sizeY;
+	let countX;
+	let countY;
+	let trxX;
+	let trxY;
+	if (Array.isArray(tracksX)) trxX = tracksX;
+	else {
+		sizeX = childSizeX;
+		countX = childCountX;
+	}
+	if (Array.isArray(tracksY)) trxY = tracksY;
+	else {
+		sizeY = childSizeY;
+		countY = childCountY;
+	}
+	applyChildSize(result, sizeX, sizeY);
+	applyChildCount(result, countX, countY);
+	if (trxX) result = mergeLayoutResults([result, _getTemplate("x", adjustX, trxX)]);
+	if (trxY) result = mergeLayoutResults([result, _getTemplate("y", adjustY, trxY)]);
+	return result;
 };
 /**
 * gridTemplateColumns / gridTemplateRowsを生成する
@@ -38,38 +55,19 @@ const matrix = (options) => {
 * @param adjust 子要素のサイズ調整
 * @param childSize 子要素のサイズ
 * @param childCount 子要素数
-* @param child 子要素数 & サイズ
+* @param tracks 子要素数 & サイズ
 * @returns
 */
-function _getGridTemplate(axis, adjust, childSize, childCount, child) {
-	let template;
-	if (Array.isArray(child)) {
-		const pxTotal = child.reduce((sum, value) => {
-			const px = _extractPx(value);
-			return px !== null ? sum + px : sum;
-		}, 0);
-		template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
-	} else {
-		const hasChildSize = hasValue(childSize);
-		const hasCount = hasValue(childCount);
-		if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${unit(childSize)}), 1fr))`;
-		else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${unit(childSize)}), 1fr))`;
-		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
-		else template = "repeat(auto-fit, 1fr)";
-		else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${unit(childSize)}, 1fr))`;
-		else if (hasChildSize) template = `repeat(auto-fit, minmax(${unit(childSize)}, 1fr))`;
-		else if (hasCount) template = `repeat(${childCount}, 1fr)`;
-		else template = "repeat(auto-fit, 1fr)";
-		else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${unit(childSize)}))`;
-		else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${unit(childSize)}))`;
-		else if (hasCount) template = `repeat(${childCount}, auto)`;
-		else template = "repeat(auto-fit, auto)";
-		else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${unit(childSize)})`;
-		else if (hasChildSize) template = `repeat(auto-fit, ${unit(childSize)})`;
-		else if (hasCount) template = `repeat(${childCount}, auto)`;
-		else template = "repeat(auto-fit, auto)";
-	}
-	return { style: { [varLayoutTemplate[axis]]: template } };
+function _getTemplate(axis, adjust, tracks) {
+	const pxTotal = tracks.reduce((sum, value) => {
+		const px = _extractPx(value);
+		return px !== null ? sum + px : sum;
+	}, 0);
+	const template = tracks.map((value) => _applyAdjustToTrack(axis, adjust, value, tracks.length, pxTotal)).join(" ");
+	return {
+		className: clsLayout.template[axis],
+		style: { [varLayout.template[axis]]: template }
+	};
 }
 /**
 * tracksX/tracksYの各トラック値にadjustを適用する
@@ -82,13 +80,13 @@ function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
 	const pxValue = _extractPx(size);
 	const isPx = pxValue !== null;
 	if (adjust === "fit") {
-		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
 		return isFr ? childSize : `minmax(0, ${childSize})`;
 	} else if (adjust === "grow") {
-		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayoutGap[axis]}) * (${childCount} - 1))))`;
+		if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayout.gap[axis]}) * ${childCount - 1})))`;
 		return isFr ? childSize : `minmax(${childSize}, 1fr)`;
 	} else if (adjust === "shrink") {
-		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
+		if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
 		return isFr ? childSize : `minmax(0, ${childSize})`;
 	}
 	return childSize;