@niche-works/style-layouts 0.3.0 → 0.4.0

package/core/_internal/applyChildRatio.cjs

@@ -1,8 +1,6 @@
-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('./hasValue.cjs');
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx, 1);
+const require_core__internal_mergeClassName = require('./mergeClassName.cjs');
 
 //#region src/core/_internal/applyChildRatio.ts
 /**
@@ -13,8 +11,8 @@ clsx = require_runtime.__toESM(clsx, 1);
 */
 function applyChildRatio(result, childRatioX, childRatioY) {
 	if (require_core__internal_hasValue(childRatioX) || require_core__internal_hasValue(childRatioY)) {
-		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutChildRatio);
-		result.style[require_core_constants.varLayoutChildRatio] = `${childRatioX ?? 1} / ${childRatioY ?? 1}`;
+		result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayoutChildRatio);
+		result.style[require_core__constants.varLayoutChildRatio] = `${childRatioX ?? 1} / ${childRatioY ?? 1}`;
 	}
 }
 

package/core/_internal/applyChildRatio.mjs

@@ -1,6 +1,6 @@
-import { clsLayoutChildRatio, varLayoutChildRatio } from "../constants.mjs";
+import { clsLayoutChildRatio, varLayoutChildRatio } from "../_constants.mjs";
 import hasValue from "./hasValue.mjs";
-import clsx from "clsx";
+import mergeClassName from "./mergeClassName.mjs";
 
 //#region src/core/_internal/applyChildRatio.ts
 /**
@@ -11,7 +11,7 @@ import clsx from "clsx";
 */
 function applyChildRatio(result, childRatioX, childRatioY) {
 	if (hasValue(childRatioX) || hasValue(childRatioY)) {
-		result.className = clsx(result.className, clsLayoutChildRatio);
+		result.className = mergeClassName(result.className, clsLayoutChildRatio);
 		result.style[varLayoutChildRatio] = `${childRatioX ?? 1} / ${childRatioY ?? 1}`;
 	}
 }

package/core/_internal/applyChildSize.cjs

@@ -1,9 +1,7 @@
-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('./hasValue.cjs');
+const require_core__internal_mergeClassName = require('./mergeClassName.cjs');
 const require_core__internal_unit = require('./unit.cjs');
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx, 1);
 
 //#region src/core/_internal/applyChildSize.ts
 /**
@@ -14,12 +12,12 @@ clsx = require_runtime.__toESM(clsx, 1);
 */
 function applyChildSize(result, childSizeX, childSizeY) {
 	if (require_core__internal_hasValue(childSizeX)) {
-		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutChildSizeX);
-		result.style[require_core_constants.varLayoutChildSizeX] = require_core__internal_unit(childSizeX);
+		result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayoutChildSizeX);
+		result.style[require_core__constants.varLayoutChildSizeX] = require_core__internal_unit(childSizeX);
 	}
 	if (require_core__internal_hasValue(childSizeY)) {
-		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutChildSizeY);
-		result.style[require_core_constants.varLayoutChildSizeY] = require_core__internal_unit(childSizeY);
+		result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayoutChildSizeY);
+		result.style[require_core__constants.varLayoutChildSizeY] = require_core__internal_unit(childSizeY);
 	}
 }
 

package/core/_internal/applyChildSize.mjs

@@ -1,7 +1,7 @@
-import { clsLayoutChildSizeX, clsLayoutChildSizeY, varLayoutChildSizeX, varLayoutChildSizeY } from "../constants.mjs";
+import { clsLayoutChildSizeX, clsLayoutChildSizeY, varLayoutChildSizeX, varLayoutChildSizeY } from "../_constants.mjs";
 import hasValue from "./hasValue.mjs";
+import mergeClassName from "./mergeClassName.mjs";
 import unit from "./unit.mjs";
-import clsx from "clsx";
 
 //#region src/core/_internal/applyChildSize.ts
 /**
@@ -12,11 +12,11 @@ import clsx from "clsx";
 */
 function applyChildSize(result, childSizeX, childSizeY) {
 	if (hasValue(childSizeX)) {
-		result.className = clsx(result.className, clsLayoutChildSizeX);
+		result.className = mergeClassName(result.className, clsLayoutChildSizeX);
 		result.style[varLayoutChildSizeX] = unit(childSizeX);
 	}
 	if (hasValue(childSizeY)) {
-		result.className = clsx(result.className, clsLayoutChildSizeY);
+		result.className = mergeClassName(result.className, clsLayoutChildSizeY);
 		result.style[varLayoutChildSizeY] = unit(childSizeY);
 	}
 }

package/core/_internal/applyGap.cjs

@@ -1,9 +1,7 @@
-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('./hasValue.cjs');
+const require_core__internal_mergeClassName = require('./mergeClassName.cjs');
 const require_core__internal_unit = require('./unit.cjs');
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx, 1);
 
 //#region src/core/_internal/applyGap.ts
 /**
@@ -16,13 +14,13 @@ clsx = require_runtime.__toESM(clsx, 1);
 function applyGap(result, gap, gapX, gapY) {
 	gapX = gapX ?? gap;
 	if (require_core__internal_hasValue(gapX)) {
-		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutGapX);
-		result.style[require_core_constants.varLayoutGapX] = require_core__internal_unit(gapX);
+		result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayoutGapX);
+		result.style[require_core__constants.varLayoutGapX] = require_core__internal_unit(gapX);
 	}
 	gapY = gapY ?? gap;
 	if (require_core__internal_hasValue(gapY)) {
-		result.className = (0, clsx.default)(result.className, require_core_constants.clsLayoutGapY);
-		result.style[require_core_constants.varLayoutGapY] = require_core__internal_unit(gapY);
+		result.className = require_core__internal_mergeClassName(result.className, require_core__constants.clsLayoutGapY);
+		result.style[require_core__constants.varLayoutGapY] = require_core__internal_unit(gapY);
 	}
 }
 

package/core/_internal/applyGap.mjs

@@ -1,7 +1,7 @@
-import { clsLayoutGapX, clsLayoutGapY, varLayoutGapX, varLayoutGapY } from "../constants.mjs";
+import { clsLayoutGapX, clsLayoutGapY, varLayoutGapX, varLayoutGapY } from "../_constants.mjs";
 import hasValue from "./hasValue.mjs";
+import mergeClassName from "./mergeClassName.mjs";
 import unit from "./unit.mjs";
-import clsx from "clsx";
 
 //#region src/core/_internal/applyGap.ts
 /**
@@ -14,12 +14,12 @@ import clsx from "clsx";
 function applyGap(result, gap, gapX, gapY) {
 	gapX = gapX ?? gap;
 	if (hasValue(gapX)) {
-		result.className = clsx(result.className, clsLayoutGapX);
+		result.className = mergeClassName(result.className, clsLayoutGapX);
 		result.style[varLayoutGapX] = unit(gapX);
 	}
 	gapY = gapY ?? gap;
 	if (hasValue(gapY)) {
-		result.className = clsx(result.className, clsLayoutGapY);
+		result.className = mergeClassName(result.className, clsLayoutGapY);
 		result.style[varLayoutGapY] = unit(gapY);
 	}
 }

package/core/_internal/mergeClassName.cjs

@@ -0,0 +1,11 @@
+
+//#region src/core/_internal/mergeClassName.ts
+function mergeClassName(...classNames) {
+	return classNames.reduce((result, className) => {
+		if (className) result.push(className);
+		return result;
+	}, []).join(" ");
+}
+
+//#endregion
+module.exports = mergeClassName;

package/core/_internal/mergeClassName.d.cts

@@ -0,0 +1,3 @@
+//#region src/core/_internal/mergeClassName.d.ts
+declare function mergeClassName(...classNames: (string | null | undefined)[]): string;
+export = mergeClassName;

package/core/_internal/mergeClassName.d.mts

@@ -0,0 +1,4 @@
+//#region src/core/_internal/mergeClassName.d.ts
+declare function mergeClassName(...classNames: (string | null | undefined)[]): string;
+//#endregion
+export { mergeClassName as default };

package/core/_internal/mergeClassName.mjs

@@ -0,0 +1,10 @@
+//#region src/core/_internal/mergeClassName.ts
+function mergeClassName(...classNames) {
+	return classNames.reduce((result, className) => {
+		if (className) result.push(className);
+		return result;
+	}, []).join(" ");
+}
+
+//#endregion
+export { mergeClassName as default };

package/core/_internal/mergeLayoutResults.cjs

@@ -1,11 +1,9 @@
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx, 1);
+const require_core__internal_mergeClassName = require('./mergeClassName.cjs');
 
 //#region src/core/_internal/mergeLayoutResults.ts
 function mergeLayoutResults(results) {
 	return results.reduce((layoutResult, result) => {
-		if (result.className) layoutResult.className = (0, clsx.default)(layoutResult.className, result.className);
+		if (result.className) layoutResult.className = require_core__internal_mergeClassName(layoutResult.className, result.className);
 		if (result.style) layoutResult.style = {
 			...layoutResult.style,
 			...result.style

package/core/_internal/mergeLayoutResults.mjs

@@ -1,9 +1,9 @@
-import clsx from "clsx";
+import mergeClassName from "./mergeClassName.mjs";
 
 //#region src/core/_internal/mergeLayoutResults.ts
 function mergeLayoutResults(results) {
 	return results.reduce((layoutResult, result) => {
-		if (result.className) layoutResult.className = clsx(layoutResult.className, result.className);
+		if (result.className) layoutResult.className = mergeClassName(layoutResult.className, result.className);
 		if (result.style) layoutResult.style = {
 			...layoutResult.style,
 			...result.style

package/core/_types.d.cts

@@ -1,14 +1,6 @@
 import { Adjust, AlignX, AlignY, Direction } from "./constants.cjs";
-import CSS from "csstype";
 
 //#region src/core/_types.d.ts
-/**
- * CSSカスタムプロパティ(変数)
- */
-type CSSCustomProperties = {
-  [key: `--${string}`]: string | number | undefined;
-};
-type CSSProperties = CSS.Properties<string | number>;
 /**
  * 子要素を並べる方向
  */
@@ -120,4 +112,4 @@ type TracksOptions = {
   tracksY?: (string | number)[] | null;
 };
 //#endregion
-export { AdjustOptions, AlignOptions, CSSCustomProperties, CSSProperties, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions };
+export { AdjustOptions, AlignOptions, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions };

package/core/_types.d.mts

@@ -1,14 +1,6 @@
 import { Adjust, AlignX, AlignY, Direction } from "./constants.mjs";
-import CSS from "csstype";
 
 //#region src/core/_types.d.ts
-/**
- * CSSカスタムプロパティ(変数)
- */
-type CSSCustomProperties = {
-  [key: `--${string}`]: string | number | undefined;
-};
-type CSSProperties = CSS.Properties<string | number>;
 /**
  * 子要素を並べる方向
  */
@@ -120,4 +112,4 @@ type TracksOptions = {
   tracksY?: (string | number)[] | null;
 };
 //#endregion
-export { AdjustOptions, AlignOptions, CSSCustomProperties, CSSProperties, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions };
+export { AdjustOptions, AlignOptions, ChildCountOptions, ChildRatioOptions, ChildSizeOptions, DirectionOptions, GapOptions, TracksOptions };

package/core/balance/balance.cjs

@@ -1,19 +1,19 @@
 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_mergeClassName = require('../_internal/mergeClassName.cjs');
 const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
 const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
 const require_core__internal_applyGap = require('../_internal/applyGap.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");
-clsx = require_runtime.__toESM(clsx, 1);
 
 //#region src/core/balance/balance.ts
 /**
 * balanceレイアウト
 *
 * - 子要素を均等に配置する
+* - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+* - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
 */
 const balance = (options = {}) => {
 	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
@@ -22,7 +22,7 @@ const balance = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutBalance, 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]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayoutBalance, 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);

package/core/balance/balance.d.cts

@@ -6,6 +6,8 @@ import { BalanceLayoutOptions } from "./types.cjs";
  * balanceレイアウト
  *
  * - 子要素を均等に配置する
+ * - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+ * - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
  */
 declare const balance: StyleLayout<BalanceLayoutOptions>;
 export = balance;

package/core/balance/balance.d.mts

@@ -6,6 +6,8 @@ import { BalanceLayoutOptions } from "./types.mjs";
  * balanceレイアウト
  *
  * - 子要素を均等に配置する
+ * - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+ * - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
  */
 declare const balance: StyleLayout<BalanceLayoutOptions>;
 //#endregion

package/core/balance/balance.mjs

@@ -1,16 +1,17 @@
-import { clsLayoutBalance } from "../constants.mjs";
-import { clsLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutBalance } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/balance/balance.ts
 /**
 * balanceレイアウト
 *
 * - 子要素を均等に配置する
+* - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+* - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
 */
 const balance = (options = {}) => {
 	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = maybeDefault(options, {
@@ -19,7 +20,7 @@ const balance = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutBalance, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		className: mergeClassName(clsLayoutBalance, 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);

package/core/balance/styles.css

@@ -8,9 +8,29 @@
 }
 .nws-layout-balance.nws-layout-direction-x {
   grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+.nws-layout-balance.nws-layout-direction-x.nws-layout-adjustX-grow, .nws-layout-balance.nws-layout-direction-x.nws-layout-adjustX-fit {
+  grid-auto-columns: auto;
+}
+.nws-layout-balance.nws-layout-direction-x.nws-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, max-content);
+}
+.nws-layout-balance.nws-layout-direction-x.nws-layout-childSizeX {
+  grid-auto-columns: auto;
 }
 .nws-layout-balance.nws-layout-direction-y {
   grid-auto-flow: row;
+  grid-auto-rows: max-content;
+}
+.nws-layout-balance.nws-layout-direction-y.nws-layout-adjustY-grow, .nws-layout-balance.nws-layout-direction-y.nws-layout-adjustY-fit {
+  grid-auto-rows: auto;
+}
+.nws-layout-balance.nws-layout-direction-y.nws-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, max-content);
+}
+.nws-layout-balance.nws-layout-direction-y.nws-layout-childSizeY {
+  grid-auto-rows: auto;
 }
 .nws-layout-balance.nws-layout-alignX-left {
   justify-items: flex-start;
@@ -22,13 +42,13 @@
   justify-items: flex-end;
 }
 .nws-layout-balance.nws-layout-alignX-spaceBetween {
-  justify-items: space-between;
+  justify-content: space-between;
 }
 .nws-layout-balance.nws-layout-alignX-spaceAround {
-  justify-items: space-around;
+  justify-content: space-around;
 }
 .nws-layout-balance.nws-layout-alignX-spaceEvenly {
-  justify-items: space-evenly;
+  justify-content: space-evenly;
 }
 .nws-layout-balance.nws-layout-alignY-top {
   align-items: flex-start;
@@ -40,13 +60,13 @@
   align-items: flex-end;
 }
 .nws-layout-balance.nws-layout-alignY-spaceBetween {
-  align-items: space-between;
+  align-content: space-between;
 }
 .nws-layout-balance.nws-layout-alignY-spaceAround {
-  align-items: space-around;
+  align-content: space-around;
 }
 .nws-layout-balance.nws-layout-alignY-spaceEvenly {
-  align-items: space-evenly;
+  align-content: space-evenly;
 }
 .nws-layout-balance > * {
   min-width: 0;
@@ -64,9 +84,15 @@
 .nws-layout-balance.nws-layout-adjustX-grow > *, .nws-layout-balance.nws-layout-adjustX-shrink > * {
   width: 100%;
 }
+.nws-layout-balance.nws-layout-adjustX-grow > * {
+  min-width: max-content;
+}
 .nws-layout-balance.nws-layout-adjustX-grow.nws-layout-childSizeX > * {
   min-width: var(--nws-layout-childSizeX);
 }
+.nws-layout-balance.nws-layout-adjustX-shrink > * {
+  max-width: max-content;
+}
 .nws-layout-balance.nws-layout-adjustX-shrink.nws-layout-childSizeX > * {
   max-width: var(--nws-layout-childSizeX);
 }
@@ -82,9 +108,15 @@
 .nws-layout-balance.nws-layout-adjustY-grow > *, .nws-layout-balance.nws-layout-adjustY-shrink > * {
   height: 100%;
 }
+.nws-layout-balance.nws-layout-adjustY-grow:not(.nws-layout-childSizeY) > * {
+  min-height: max-content;
+}
 .nws-layout-balance.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
   min-height: var(--nws-layout-childSizeY);
 }
+.nws-layout-balance.nws-layout-adjustY-shrink:not(.nws-layout-childSizeY) > * {
+  max-height: max-content;
+}
 .nws-layout-balance.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
   max-height: var(--nws-layout-childSizeY);
 }

package/core/center/center.cjs

@@ -1,24 +1,23 @@
 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_mergeClassName = require('../_internal/mergeClassName.cjs');
 const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
 const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
 const require_core__internal_applyGap = require('../_internal/applyGap.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");
-clsx = require_runtime.__toESM(clsx, 1);
 
 //#region src/core/center/center.ts
 /**
 * centerレイアウト
 *
 * - 子要素を中央に配置する
+* - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
 */
 const center = (options = {}) => {
 	const { direction, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutCenter, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
+		className: require_core__internal_mergeClassName(require_core__constants.clsLayoutCenter, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);

package/core/center/center.d.cts

@@ -6,6 +6,7 @@ import { CenterLayoutOptions } from "./types.cjs";
  * centerレイアウト
  *
  * - 子要素を中央に配置する
+ * - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
  */
 declare const center: StyleLayout<CenterLayoutOptions>;
 export = center;

package/core/center/center.d.mts

@@ -6,6 +6,7 @@ import { CenterLayoutOptions } from "./types.mjs";
  * centerレイアウト
  *
  * - 子要素を中央に配置する
+ * - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
  */
 declare const center: StyleLayout<CenterLayoutOptions>;
 //#endregion

package/core/center/center.mjs

@@ -1,21 +1,21 @@
-import { clsLayoutCenter } from "../constants.mjs";
-import { clsLayout } from "../_constants.mjs";
+import { clsLayout, clsLayoutCenter } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 import applyGap from "../_internal/applyGap.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
-import clsx from "clsx";
 
 //#region src/core/center/center.ts
 /**
 * centerレイアウト
 *
 * - 子要素を中央に配置する
+* - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
 */
 const center = (options = {}) => {
 	const { direction, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutCenter, clsLayout.direction[direction], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		className: mergeClassName(clsLayoutCenter, clsLayout.direction[direction], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	applyGap(result, gap, gapX, gapY);

package/core/center/styles.css

@@ -21,6 +21,7 @@
 }
 .nws-layout-center.nws-layout-direction-x > * {
   max-width: none;
+  max-height: none;
   flex-grow: 0;
   flex-shrink: 0;
   margin-top: auto;
@@ -36,9 +37,6 @@
   width: var(--nws-layout-childSizeX);
   flex-basis: var(--nws-layout-childSizeX);
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
   width: 100%;
   max-width: none;
@@ -46,29 +44,19 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
-.nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
   width: 100%;
   min-width: var(--nws-layout-childSizeX);
   max-width: none;
   flex-grow: 1;
-  flex-shrink: 0;
   flex-basis: var(--nws-layout-childSizeX);
 }
 .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
   width: var(--nws-layout-childSizeX);
   max-width: 100%;
-  flex-grow: 0;
   flex-shrink: 1;
   flex-basis: var(--nws-layout-childSizeX);
 }
-.nws-layout-center.nws-layout-direction-x > * {
-  max-height: none;
-  margin-top: auto;
-  margin-bottom: auto;
-}
 .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
@@ -112,6 +100,9 @@
 }
 .nws-layout-center.nws-layout-direction-y > * {
   max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
   margin-left: auto;
   margin-right: auto;
 }
@@ -145,18 +136,10 @@
   margin-left: auto;
   margin-right: auto;
 }
-.nws-layout-center.nws-layout-direction-y > * {
-  max-height: none;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
   flex-basis: var(--nws-layout-childSizeY);
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
   height: 100%;
   max-height: none;
@@ -164,21 +147,16 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
-.nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
-  justify-content: stretch;
-}
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
   height: 100%;
   min-height: var(--nws-layout-childSizeY);
   max-height: none;
   flex-grow: 1;
-  flex-shrink: 0;
   flex-basis: var(--nws-layout-childSizeY);
 }
 .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
   height: var(--nws-layout-childSizeY);
   max-height: 100%;
-  flex-grow: 0;
   flex-shrink: 1;
   flex-basis: var(--nws-layout-childSizeY);
 }