@niche-works/style-layouts 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.ja.md +11 -0
  2. package/README.md +11 -0
  3. package/balance/index.cjs +1 -1
  4. package/center/index.cjs +1 -1
  5. package/constants.cjs +2 -2
  6. package/constants.d.cts +2 -2
  7. package/constants.d.mts +2 -2
  8. package/constants.mjs +2 -2
  9. package/core/_constants.cjs +58 -78
  10. package/core/_constants.d.cts +57 -71
  11. package/core/_constants.d.mts +57 -71
  12. package/core/_constants.mjs +58 -72
  13. package/core/balance/balance.cjs +1 -1
  14. package/core/balance/balance.mjs +2 -2
  15. package/core/balance/styles.css +14 -28
  16. package/core/center/center.cjs +1 -1
  17. package/core/center/center.mjs +2 -2
  18. package/core/center/styles.css +55 -42
  19. package/core/constants.cjs +18 -20
  20. package/core/constants.d.cts +17 -19
  21. package/core/constants.d.mts +17 -19
  22. package/core/constants.mjs +17 -19
  23. package/core/flow/flow.cjs +7 -7
  24. package/core/flow/flow.mjs +8 -8
  25. package/core/flow/styles.css +24 -20
  26. package/core/layer/layer.cjs +1 -1
  27. package/core/layer/layer.mjs +2 -2
  28. package/core/layer/styles.css +2 -10
  29. package/core/matrix/matrix.cjs +39 -41
  30. package/core/matrix/matrix.mjs +40 -42
  31. package/core/matrix/styles.css +100 -4
  32. package/core/pack/pack.cjs +1 -1
  33. package/core/pack/pack.mjs +2 -2
  34. package/core/pack/styles.css +17 -8
  35. package/core/pin/styles.css +1 -0
  36. package/core/stack/stack.cjs +19 -19
  37. package/core/stack/stack.mjs +20 -20
  38. package/core/stack/styles.css +26 -24
  39. package/core/styles.css +355 -179
  40. package/core/tile/styles.css +116 -43
  41. package/core/tile/tile.cjs +2 -52
  42. package/core/tile/tile.mjs +4 -54
  43. package/flow/index.cjs +1 -1
  44. package/layer/index.cjs +1 -1
  45. package/matrix/index.cjs +1 -1
  46. package/pack/index.cjs +1 -1
  47. package/package.json +1 -1
  48. package/pin/index.cjs +1 -1
  49. package/stack/index.cjs +1 -1
  50. package/tile/index.cjs +1 -1
package/core/_constants.mjs CHANGED
@@ -1,86 +1,72 @@
1
- import { clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY } from "./constants.mjs";
1
+ import { clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutTemplateX, clsLayoutTemplateY, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY } from "./constants.mjs";
2
2
 
3
3
  //#region src/core/_constants.ts
4
4
  /**
5
- * 整列
5
+ * axis毎のクラス
6
6
  */
7
- const clsLayoutDirection = {
8
- x: clsLayoutDirectionX,
9
- y: clsLayoutDirectionY
10
- };
11
- /**
12
- * 横位置・縦位置
13
- */
14
- const clsLayoutAlign = {
15
- x: {
16
- left: clsLayoutAlignXLeft,
17
- center: clsLayoutAlignXCenter,
18
- right: clsLayoutAlignXRight,
19
- "space-between": clsLayoutAlignXSpaceBetween,
20
- "space-around": clsLayoutAlignXSpaceAround,
21
- "space-evenly": clsLayoutAlignXSpaceEvenly
7
+ const clsLayout = {
8
+ direction: {
9
+ x: clsLayoutDirectionX,
10
+ y: clsLayoutDirectionY
11
+ },
12
+ align: {
13
+ x: {
14
+ left: clsLayoutAlignXLeft,
15
+ center: clsLayoutAlignXCenter,
16
+ right: clsLayoutAlignXRight,
17
+ "space-between": clsLayoutAlignXSpaceBetween,
18
+ "space-around": clsLayoutAlignXSpaceAround,
19
+ "space-evenly": clsLayoutAlignXSpaceEvenly
20
+ },
21
+ y: {
22
+ top: clsLayoutAlignYTop,
23
+ middle: clsLayoutAlignYMiddle,
24
+ bottom: clsLayoutAlignYBottom,
25
+ "space-between": clsLayoutAlignYSpaceBetween,
26
+ "space-around": clsLayoutAlignYSpaceAround,
27
+ "space-evenly": clsLayoutAlignYSpaceEvenly
28
+ }
29
+ },
30
+ adjust: {
31
+ x: {
32
+ none: clsLayoutAdjustXNone,
33
+ fit: clsLayoutAdjustXFit,
34
+ grow: clsLayoutAdjustXExpand,
35
+ shrink: clsLayoutAdjustXShrink
36
+ },
37
+ y: {
38
+ none: clsLayoutAdjustYNone,
39
+ fit: clsLayoutAdjustYFit,
40
+ grow: clsLayoutAdjustYExpand,
41
+ shrink: clsLayoutAdjustYShrink
42
+ }
43
+ },
44
+ childSize: {
45
+ x: clsLayoutChildSizeX,
46
+ y: clsLayoutChildSizeY
22
47
  },
23
- y: {
24
- top: clsLayoutAlignYTop,
25
- middle: clsLayoutAlignYMiddle,
26
- bottom: clsLayoutAlignYBottom,
27
- "space-between": clsLayoutAlignYSpaceBetween,
28
- "space-around": clsLayoutAlignYSpaceAround,
29
- "space-evenly": clsLayoutAlignYSpaceEvenly
48
+ template: {
49
+ x: clsLayoutTemplateX,
50
+ y: clsLayoutTemplateY
30
51
  }
31
52
  };
32
53
  /**
33
- * 子要素の幅・高さ調整
54
+ * axis毎の変数
34
55
  */
35
- const clsLayoutAdjust = {
36
- x: {
37
- none: clsLayoutAdjustXNone,
38
- fit: clsLayoutAdjustXFit,
39
- grow: clsLayoutAdjustXExpand,
40
- shrink: clsLayoutAdjustXShrink
56
+ const varLayout = {
57
+ childSize: {
58
+ x: varLayoutChildSizeX,
59
+ y: varLayoutChildSizeY
41
60
  },
42
- y: {
43
- none: clsLayoutAdjustYNone,
44
- fit: clsLayoutAdjustYFit,
45
- grow: clsLayoutAdjustYExpand,
46
- shrink: clsLayoutAdjustYShrink
61
+ template: {
62
+ x: varLayoutTemplateX,
63
+ y: varLayoutTemplateY
64
+ },
65
+ gap: {
66
+ x: varLayoutGapX,
67
+ y: varLayoutGapY
47
68
  }
48
69
  };
49
- /**
50
- * 子要素の幅・高さ
51
- */
52
- const clsLayoutChildSize = {
53
- x: clsLayoutChildSizeX,
54
- y: clsLayoutChildSizeY
55
- };
56
- /**
57
- * 子要素の幅・高さ
58
- */
59
- const varLayoutChildSize = {
60
- x: varLayoutChildSizeX,
61
- y: varLayoutChildSizeY
62
- };
63
- /**
64
- * 子要素のテンプレート
65
- */
66
- const varLayoutTemplate = {
67
- x: varLayoutTemplateX,
68
- y: varLayoutTemplateY
69
- };
70
- /**
71
- * 間隔
72
- */
73
- const varLayoutGap = {
74
- x: varLayoutGapX,
75
- y: varLayoutGapY
76
- };
77
- /**
78
- * 軸に対するサイズプロパティ
79
- */
80
- const cssLayoutAxisSizeProp = {
81
- x: "width",
82
- y: "height"
83
- };
84
70
 
85
71
  //#endregion
86
- export { clsLayoutAdjust, clsLayoutAlign, clsLayoutChildSize, clsLayoutDirection, cssLayoutAxisSizeProp, varLayoutChildSize, varLayoutGap, varLayoutTemplate };
72
+ export { clsLayout, varLayout };
package/core/balance/balance.cjs CHANGED
@@ -22,7 +22,7 @@ const balance = (options = {}) => {
22
22
  alignY: "top"
23
23
  }, { overwriteNull: true });
24
24
  const result = {
25
- className: (0, clsx.default)(require_core_constants.clsLayoutBalance, 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]),
25
+ 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]),
26
26
  style: {}
27
27
  };
28
28
  require_core__internal_applyGap(result, gap, gapX, gapY);
package/core/balance/balance.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsLayoutBalance } from "../constants.mjs";
2
- import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection } from "../_constants.mjs";
2
+ import { clsLayout } from "../_constants.mjs";
3
3
  import applyChildRatio from "../_internal/applyChildRatio.mjs";
4
4
  import applyChildSize from "../_internal/applyChildSize.mjs";
5
5
  import applyGap from "../_internal/applyGap.mjs";
@@ -19,7 +19,7 @@ const balance = (options = {}) => {
19
19
  alignY: "top"
20
20
  }, { overwriteNull: true });
21
21
  const result = {
22
- className: clsx(clsLayoutBalance, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
22
+ className: clsx(clsLayoutBalance, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
23
23
  style: {}
24
24
  };
25
25
  applyGap(result, gap, gapX, gapY);
package/core/balance/styles.css CHANGED
@@ -22,13 +22,13 @@
22
22
  justify-items: flex-end;
23
23
  }
24
24
  .nws-layout-balance.nws-layout-alignX-spaceBetween {
25
- justify-items: space-between;
25
+ justify-content: space-between;
26
26
  }
27
27
  .nws-layout-balance.nws-layout-alignX-spaceAround {
28
- justify-items: space-around;
28
+ justify-content: space-around;
29
29
  }
30
30
  .nws-layout-balance.nws-layout-alignX-spaceEvenly {
31
- justify-items: space-evenly;
31
+ justify-content: space-evenly;
32
32
  }
33
33
  .nws-layout-balance.nws-layout-alignY-top {
34
34
  align-items: flex-start;
@@ -40,22 +40,20 @@
40
40
  align-items: flex-end;
41
41
  }
42
42
  .nws-layout-balance.nws-layout-alignY-spaceBetween {
43
- align-items: space-between;
43
+ align-content: space-between;
44
44
  }
45
45
  .nws-layout-balance.nws-layout-alignY-spaceAround {
46
- align-items: space-around;
46
+ align-content: space-around;
47
47
  }
48
48
  .nws-layout-balance.nws-layout-alignY-spaceEvenly {
49
- align-items: space-evenly;
50
- }
51
- .nws-layout-balance.nws-layout-childSizeX > * {
52
- width: var(--nws-layout-childSizeX);
53
- }
54
- .nws-layout-balance.nws-layout-childSizeY > * {
55
- height: var(--nws-layout-childSizeY);
49
+ align-content: space-evenly;
56
50
  }
57
51
  .nws-layout-balance > * {
58
52
  min-width: 0;
53
+ min-height: 0;
54
+ }
55
+ .nws-layout-balance.nws-layout-childSizeX > * {
56
+ width: var(--nws-layout-childSizeX);
59
57
  }
60
58
  .nws-layout-balance.nws-layout-adjustX-fit {
61
59
  justify-items: stretch;
@@ -63,23 +61,17 @@
63
61
  .nws-layout-balance.nws-layout-adjustX-fit > * {
64
62
  width: auto;
65
63
  }
66
- .nws-layout-balance.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
67
- width: auto;
68
- }
69
- .nws-layout-balance.nws-layout-adjustX-grow > * {
64
+ .nws-layout-balance.nws-layout-adjustX-grow > *, .nws-layout-balance.nws-layout-adjustX-shrink > * {
70
65
  width: 100%;
71
66
  }
72
67
  .nws-layout-balance.nws-layout-adjustX-grow.nws-layout-childSizeX > * {
73
68
  min-width: var(--nws-layout-childSizeX);
74
69
  }
75
- .nws-layout-balance.nws-layout-adjustX-shrink > * {
76
- width: 100%;
77
- }
78
70
  .nws-layout-balance.nws-layout-adjustX-shrink.nws-layout-childSizeX > * {
79
71
  max-width: var(--nws-layout-childSizeX);
80
72
  }
81
- .nws-layout-balance > * {
82
- min-height: 0;
73
+ .nws-layout-balance.nws-layout-childSizeY > * {
74
+ height: var(--nws-layout-childSizeY);
83
75
  }
84
76
  .nws-layout-balance.nws-layout-adjustY-fit {
85
77
  align-items: stretch;
@@ -87,18 +79,12 @@
87
79
  .nws-layout-balance.nws-layout-adjustY-fit > * {
88
80
  height: auto;
89
81
  }
90
- .nws-layout-balance.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
91
- height: auto;
92
- }
93
- .nws-layout-balance.nws-layout-adjustY-grow > * {
82
+ .nws-layout-balance.nws-layout-adjustY-grow > *, .nws-layout-balance.nws-layout-adjustY-shrink > * {
94
83
  height: 100%;
95
84
  }
96
85
  .nws-layout-balance.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
97
86
  min-height: var(--nws-layout-childSizeY);
98
87
  }
99
- .nws-layout-balance.nws-layout-adjustY-shrink > * {
100
- height: 100%;
101
- }
102
88
  .nws-layout-balance.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
103
89
  max-height: var(--nws-layout-childSizeY);
104
90
  }
package/core/center/center.cjs CHANGED
@@ -18,7 +18,7 @@ clsx = require_runtime.__toESM(clsx, 1);
18
18
  const center = (options = {}) => {
19
19
  const { direction, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
20
20
  const result = {
21
- className: (0, clsx.default)(require_core_constants.clsLayoutCenter, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
21
+ 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]),
22
22
  style: {}
23
23
  };
24
24
  require_core__internal_applyGap(result, gap, gapX, gapY);
package/core/center/center.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsLayoutCenter } from "../constants.mjs";
2
- import { clsLayoutAdjust, clsLayoutDirection } from "../_constants.mjs";
2
+ import { clsLayout } from "../_constants.mjs";
3
3
  import applyChildRatio from "../_internal/applyChildRatio.mjs";
4
4
  import applyChildSize from "../_internal/applyChildSize.mjs";
5
5
  import applyGap from "../_internal/applyGap.mjs";
@@ -15,7 +15,7 @@ import clsx from "clsx";
15
15
  const center = (options = {}) => {
16
16
  const { direction, adjustX, adjustY, gap, gapX, gapY, childSizeX, childSizeY, childRatioX, childRatioY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
17
17
  const result = {
18
- className: clsx(clsLayoutCenter, clsLayoutDirection[direction], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
18
+ className: clsx(clsLayoutCenter, clsLayout.direction[direction], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
19
19
  style: {}
20
20
  };
21
21
  applyGap(result, gap, gapX, gapY);
package/core/center/styles.css CHANGED
@@ -5,9 +5,8 @@
5
5
  --nws-layout-childSizeY: auto;
6
6
  --nws-layout-childRatio: auto;
7
7
  display: flex;
8
- justify-content: safe center;
9
- align-content: safe center;
10
- align-items: flex-start;
8
+ justify-content: flex-start;
9
+ align-content: flex-start;
11
10
  flex-wrap: nowrap;
12
11
  }
13
12
  .nws-layout-center > * {
@@ -20,17 +19,23 @@
20
19
  .nws-layout-center.nws-layout-direction-x {
21
20
  flex-direction: row;
22
21
  }
23
- .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeX > * {
24
- width: var(--nws-layout-childSizeX);
25
- flex-basis: var(--nws-layout-childSizeX);
26
- }
27
22
  .nws-layout-center.nws-layout-direction-x > * {
28
23
  max-width: none;
24
+ max-height: none;
29
25
  flex-grow: 0;
30
26
  flex-shrink: 0;
27
+ margin-top: auto;
28
+ margin-bottom: auto;
31
29
  }
32
- .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
33
- justify-content: stretch;
30
+ .nws-layout-center.nws-layout-direction-x > *:first-child {
31
+ margin-left: auto;
32
+ }
33
+ .nws-layout-center.nws-layout-direction-x > *:last-child {
34
+ margin-right: auto;
35
+ }
36
+ .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeX > * {
37
+ width: var(--nws-layout-childSizeX);
38
+ flex-basis: var(--nws-layout-childSizeX);
34
39
  }
35
40
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
36
41
  width: 100%;
@@ -39,32 +44,22 @@
39
44
  flex-shrink: 1;
40
45
  flex-basis: 0%;
41
46
  }
42
- .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
43
- justify-content: stretch;
44
- }
45
47
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
46
48
  width: 100%;
47
49
  min-width: var(--nws-layout-childSizeX);
48
50
  max-width: none;
49
51
  flex-grow: 1;
50
- flex-shrink: 0;
51
52
  flex-basis: var(--nws-layout-childSizeX);
52
53
  }
53
54
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
54
55
  width: var(--nws-layout-childSizeX);
55
56
  max-width: 100%;
56
- flex-grow: 0;
57
57
  flex-shrink: 1;
58
58
  flex-basis: var(--nws-layout-childSizeX);
59
59
  }
60
60
  .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
61
61
  height: var(--nws-layout-childSizeY);
62
62
  }
63
- .nws-layout-center.nws-layout-direction-x > * {
64
- max-height: none;
65
- margin-top: auto;
66
- margin-bottom: auto;
67
- }
68
63
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-fit {
69
64
  align-items: stretch;
70
65
  }
@@ -86,17 +81,40 @@
86
81
  margin-top: auto;
87
82
  margin-bottom: auto;
88
83
  }
84
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX {
85
+ margin-left: calc(var(--nws-layout-gapX) / -2);
86
+ margin-right: calc(var(--nws-layout-gapX) / -2);
87
+ }
88
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX > * {
89
+ margin-left: calc(var(--nws-layout-gapX) / 2);
90
+ margin-right: calc(var(--nws-layout-gapX) / 2);
91
+ }
92
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX > *:first-child {
93
+ margin-left: auto;
94
+ }
95
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX > *:last-child {
96
+ margin-right: auto;
97
+ }
89
98
  .nws-layout-center.nws-layout-direction-y {
90
99
  flex-direction: column;
91
100
  }
92
- .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
93
- width: var(--nws-layout-childSizeX);
94
- }
95
101
  .nws-layout-center.nws-layout-direction-y > * {
96
102
  max-width: none;
103
+ max-height: none;
104
+ flex-grow: 0;
105
+ flex-shrink: 0;
97
106
  margin-left: auto;
98
107
  margin-right: auto;
99
108
  }
109
+ .nws-layout-center.nws-layout-direction-y > *:first-child {
110
+ margin-top: auto;
111
+ }
112
+ .nws-layout-center.nws-layout-direction-y > *:last-child {
113
+ margin-bottom: auto;
114
+ }
115
+ .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
116
+ width: var(--nws-layout-childSizeX);
117
+ }
100
118
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-fit {
101
119
  align-items: stretch;
102
120
  }
@@ -109,8 +127,8 @@
109
127
  }
110
128
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-grow > * {
111
129
  width: 100%;
112
- max-width: none;
113
130
  min-width: var(--nws-layout-childSizeX);
131
+ max-width: none;
114
132
  }
115
133
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
116
134
  width: var(--nws-layout-childSizeX);
@@ -122,14 +140,6 @@
122
140
  height: var(--nws-layout-childSizeY);
123
141
  flex-basis: var(--nws-layout-childSizeY);
124
142
  }
125
- .nws-layout-center.nws-layout-direction-y > * {
126
- max-height: none;
127
- flex-grow: 0;
128
- flex-shrink: 0;
129
- }
130
- .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
131
- justify-content: stretch;
132
- }
133
143
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
134
144
  height: 100%;
135
145
  max-height: none;
@@ -137,30 +147,33 @@
137
147
  flex-shrink: 1;
138
148
  flex-basis: 0%;
139
149
  }
140
- .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
141
- justify-content: stretch;
142
- }
143
150
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
144
151
  height: 100%;
145
152
  min-height: var(--nws-layout-childSizeY);
146
153
  max-height: none;
147
154
  flex-grow: 1;
148
- flex-shrink: 0;
149
155
  flex-basis: var(--nws-layout-childSizeY);
150
156
  }
151
157
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
152
158
  height: var(--nws-layout-childSizeY);
153
159
  max-height: 100%;
154
- flex-grow: 0;
155
160
  flex-shrink: 1;
156
161
  flex-basis: var(--nws-layout-childSizeY);
157
162
  }
158
- .nws-layout-center.nws-layout-childRatio > * {
159
- aspect-ratio: var(--nws-layout-childRatio);
163
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY {
164
+ margin-top: calc(var(--nws-layout-gapY) / -2);
165
+ margin-bottom: calc(var(--nws-layout-gapY) / -2);
166
+ }
167
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY > * {
168
+ margin-top: calc(var(--nws-layout-gapY) / 2);
169
+ margin-bottom: calc(var(--nws-layout-gapY) / 2);
160
170
  }
161
- .nws-layout-center.nws-layout-gapX {
162
- column-gap: var(--nws-layout-gapX);
171
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY > *:first-child {
172
+ margin-top: auto;
163
173
  }
164
- .nws-layout-center.nws-layout-gapY {
165
- row-gap: var(--nws-layout-gapY);
174
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY > *:last-child {
175
+ margin-bottom: auto;
176
+ }
177
+ .nws-layout-center.nws-layout-childRatio > * {
178
+ aspect-ratio: var(--nws-layout-childRatio);
166
179
  }
package/core/constants.cjs CHANGED
@@ -248,25 +248,23 @@ const clsLayoutChildCountX = "nws-layout-childCountX";
248
248
  */
249
249
  const clsLayoutChildCountY = "nws-layout-childCountY";
250
250
  /**
251
- * 変数\
252
- * 間隔: 横方向
251
+ * 横方向のテンプレート
253
252
  */
254
- const varLayoutGapX = "--nws-layout-gapX";
253
+ const clsLayoutTemplateX = "nws-layout-templateX";
255
254
  /**
256
- * 変数\
257
- * 間隔: 縦方向
255
+ * 縦方向のテンプレート
258
256
  */
259
- const varLayoutGapY = "--nws-layout-gapY";
257
+ const clsLayoutTemplateY = "nws-layout-templateY";
260
258
  /**
261
259
  * 変数\
262
- * 子要素の横方向の数
260
+ * 間隔: 横方向
263
261
  */
264
- const varLayoutChildCountX = "--nws-layout-childCountX";
262
+ const varLayoutGapX = "--nws-layout-gapX";
265
263
  /**
266
264
  * 変数\
267
- * 子要素の縦方向の数
265
+ * 間隔: 縦方向
268
266
  */
269
- const varLayoutChildCountY = "--nws-layout-childCountY";
267
+ const varLayoutGapY = "--nws-layout-gapY";
270
268
  /**
271
269
  * 変数\
272
270
  * 子要素の幅
@@ -284,24 +282,24 @@ const varLayoutChildSizeY = "--nws-layout-childSizeY";
284
282
  const varLayoutChildRatio = "--nws-layout-childRatio";
285
283
  /**
286
284
  * 変数\
287
- * 横方向のテンプレート
285
+ * 子要素の横方向の数
288
286
  */
289
- const varLayoutTemplateX = "--nws-layout-templateX";
287
+ const varLayoutChildCountX = "--nws-layout-childCountX";
290
288
  /**
291
289
  * 変数\
292
- * 縦方向のテンプレート
290
+ * 子要素の縦方向の数
293
291
  */
294
- const varLayoutTemplateY = "--nws-layout-templateY";
292
+ const varLayoutChildCountY = "--nws-layout-childCountY";
295
293
  /**
296
294
  * 変数\
297
- * 横方向のオートトラック
295
+ * 横方向のテンプレート
298
296
  */
299
- const varLayoutAutoTracX = "--nws-layout-autoTracX";
297
+ const varLayoutTemplateX = "--nws-layout-templateX";
300
298
  /**
301
299
  * 変数\
302
- * 縦方向のオートトラック
300
+ * 縦方向のテンプレート
303
301
  */
304
- const varLayoutAutoTracY = "--nws-layout-autoTracY";
302
+ const varLayoutTemplateY = "--nws-layout-templateY";
305
303
 
306
304
  //#endregion
307
305
  exports.Adjust = Adjust;
@@ -348,9 +346,9 @@ exports.clsLayoutMatrix = clsLayoutMatrix;
348
346
  exports.clsLayoutPack = clsLayoutPack;
349
347
  exports.clsLayoutPin = clsLayoutPin;
350
348
  exports.clsLayoutStack = clsLayoutStack;
349
+ exports.clsLayoutTemplateX = clsLayoutTemplateX;
350
+ exports.clsLayoutTemplateY = clsLayoutTemplateY;
351
351
  exports.clsLayoutTile = clsLayoutTile;
352
- exports.varLayoutAutoTracX = varLayoutAutoTracX;
353
- exports.varLayoutAutoTracY = varLayoutAutoTracY;
354
352
  exports.varLayoutChildCountX = varLayoutChildCountX;
355
353
  exports.varLayoutChildCountY = varLayoutChildCountY;
356
354
  exports.varLayoutChildRatio = varLayoutChildRatio;
package/core/constants.d.cts CHANGED
@@ -258,25 +258,23 @@ declare const clsLayoutChildCountX = "nws-layout-childCountX";
258
258
  */
259
259
  declare const clsLayoutChildCountY = "nws-layout-childCountY";
260
260
  /**
261
- * 変数\
262
- * 間隔: 横方向
261
+ * 横方向のテンプレート
263
262
  */
264
- declare const varLayoutGapX = "--nws-layout-gapX";
263
+ declare const clsLayoutTemplateX = "nws-layout-templateX";
265
264
  /**
266
- * 変数\
267
- * 間隔: 縦方向
265
+ * 縦方向のテンプレート
268
266
  */
269
- declare const varLayoutGapY = "--nws-layout-gapY";
267
+ declare const clsLayoutTemplateY = "nws-layout-templateY";
270
268
  /**
271
269
  * 変数\
272
- * 子要素の横方向の数
270
+ * 間隔: 横方向
273
271
  */
274
- declare const varLayoutChildCountX = "--nws-layout-childCountX";
272
+ declare const varLayoutGapX = "--nws-layout-gapX";
275
273
  /**
276
274
  * 変数\
277
- * 子要素の縦方向の数
275
+ * 間隔: 縦方向
278
276
  */
279
- declare const varLayoutChildCountY = "--nws-layout-childCountY";
277
+ declare const varLayoutGapY = "--nws-layout-gapY";
280
278
  /**
281
279
  * 変数\
282
280
  * 子要素の幅
@@ -294,23 +292,23 @@ declare const varLayoutChildSizeY = "--nws-layout-childSizeY";
294
292
  declare const varLayoutChildRatio = "--nws-layout-childRatio";
295
293
  /**
296
294
  * 変数\
297
- * 横方向のテンプレート
295
+ * 子要素の横方向の数
298
296
  */
299
- declare const varLayoutTemplateX = "--nws-layout-templateX";
297
+ declare const varLayoutChildCountX = "--nws-layout-childCountX";
300
298
  /**
301
299
  * 変数\
302
- * 縦方向のテンプレート
300
+ * 子要素の縦方向の数
303
301
  */
304
- declare const varLayoutTemplateY = "--nws-layout-templateY";
302
+ declare const varLayoutChildCountY = "--nws-layout-childCountY";
305
303
  /**
306
304
  * 変数\
307
- * 横方向のオートトラック
305
+ * 横方向のテンプレート
308
306
  */
309
- declare const varLayoutAutoTracX = "--nws-layout-autoTracX";
307
+ declare const varLayoutTemplateX = "--nws-layout-templateX";
310
308
  /**
311
309
  * 変数\
312
- * 縦方向のオートトラック
310
+ * 縦方向のテンプレート
313
311
  */
314
- declare const varLayoutAutoTracY = "--nws-layout-autoTracY";
312
+ declare const varLayoutTemplateY = "--nws-layout-templateY";
315
313
  //#endregion
316
- 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 };
314
+ 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 };