@niche-works/style-layouts 0.2.0 → 0.3.0

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 +8 -22
  16. package/core/center/center.cjs +1 -1
  17. package/core/center/center.mjs +2 -2
  18. package/core/center/styles.css +59 -24
  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 -6
  29. package/core/matrix/matrix.cjs +39 -41
  30. package/core/matrix/matrix.mjs +40 -42
  31. package/core/matrix/styles.css +106 -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 -22
  39. package/core/styles.css +359 -149
  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
@@ -48,14 +48,12 @@
48
48
  .nws-layout-balance.nws-layout-alignY-spaceEvenly {
49
49
  align-items: space-evenly;
50
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);
56
- }
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,14 +19,22 @@
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;
29
24
  flex-grow: 0;
30
25
  flex-shrink: 0;
26
+ margin-top: auto;
27
+ margin-bottom: auto;
28
+ }
29
+ .nws-layout-center.nws-layout-direction-x > *:first-child {
30
+ margin-left: auto;
31
+ }
32
+ .nws-layout-center.nws-layout-direction-x > *:last-child {
33
+ margin-right: auto;
34
+ }
35
+ .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeX > * {
36
+ width: var(--nws-layout-childSizeX);
37
+ flex-basis: var(--nws-layout-childSizeX);
31
38
  }
32
39
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
33
40
  justify-content: stretch;
@@ -57,14 +64,14 @@
57
64
  flex-shrink: 1;
58
65
  flex-basis: var(--nws-layout-childSizeX);
59
66
  }
60
- .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
61
- height: var(--nws-layout-childSizeY);
62
- }
63
67
  .nws-layout-center.nws-layout-direction-x > * {
64
68
  max-height: none;
65
69
  margin-top: auto;
66
70
  margin-bottom: auto;
67
71
  }
72
+ .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
73
+ height: var(--nws-layout-childSizeY);
74
+ }
68
75
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustY-fit {
69
76
  align-items: stretch;
70
77
  }
@@ -86,17 +93,37 @@
86
93
  margin-top: auto;
87
94
  margin-bottom: auto;
88
95
  }
96
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX {
97
+ margin-left: calc(var(--nws-layout-gapX) / -2);
98
+ margin-right: calc(var(--nws-layout-gapX) / -2);
99
+ }
100
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX > * {
101
+ margin-left: calc(var(--nws-layout-gapX) / 2);
102
+ margin-right: calc(var(--nws-layout-gapX) / 2);
103
+ }
104
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX > *:first-child {
105
+ margin-left: auto;
106
+ }
107
+ .nws-layout-center.nws-layout-direction-x.nws-layout-gapX > *:last-child {
108
+ margin-right: auto;
109
+ }
89
110
  .nws-layout-center.nws-layout-direction-y {
90
111
  flex-direction: column;
91
112
  }
92
- .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
93
- width: var(--nws-layout-childSizeX);
94
- }
95
113
  .nws-layout-center.nws-layout-direction-y > * {
96
114
  max-width: none;
97
115
  margin-left: auto;
98
116
  margin-right: auto;
99
117
  }
118
+ .nws-layout-center.nws-layout-direction-y > *:first-child {
119
+ margin-top: auto;
120
+ }
121
+ .nws-layout-center.nws-layout-direction-y > *:last-child {
122
+ margin-bottom: auto;
123
+ }
124
+ .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeX > * {
125
+ width: var(--nws-layout-childSizeX);
126
+ }
100
127
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-fit {
101
128
  align-items: stretch;
102
129
  }
@@ -109,8 +136,8 @@
109
136
  }
110
137
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-grow > * {
111
138
  width: 100%;
112
- max-width: none;
113
139
  min-width: var(--nws-layout-childSizeX);
140
+ max-width: none;
114
141
  }
115
142
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
116
143
  width: var(--nws-layout-childSizeX);
@@ -118,15 +145,15 @@
118
145
  margin-left: auto;
119
146
  margin-right: auto;
120
147
  }
121
- .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
122
- height: var(--nws-layout-childSizeY);
123
- flex-basis: var(--nws-layout-childSizeY);
124
- }
125
148
  .nws-layout-center.nws-layout-direction-y > * {
126
149
  max-height: none;
127
150
  flex-grow: 0;
128
151
  flex-shrink: 0;
129
152
  }
153
+ .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
154
+ height: var(--nws-layout-childSizeY);
155
+ flex-basis: var(--nws-layout-childSizeY);
156
+ }
130
157
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
131
158
  justify-content: stretch;
132
159
  }
@@ -155,12 +182,20 @@
155
182
  flex-shrink: 1;
156
183
  flex-basis: var(--nws-layout-childSizeY);
157
184
  }
158
- .nws-layout-center.nws-layout-childRatio > * {
159
- aspect-ratio: var(--nws-layout-childRatio);
185
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY {
186
+ margin-top: calc(var(--nws-layout-gapY) / -2);
187
+ margin-bottom: calc(var(--nws-layout-gapY) / -2);
160
188
  }
161
- .nws-layout-center.nws-layout-gapX {
162
- column-gap: var(--nws-layout-gapX);
189
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY > * {
190
+ margin-top: calc(var(--nws-layout-gapY) / 2);
191
+ margin-bottom: calc(var(--nws-layout-gapY) / 2);
163
192
  }
164
- .nws-layout-center.nws-layout-gapY {
165
- row-gap: var(--nws-layout-gapY);
193
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY > *:first-child {
194
+ margin-top: auto;
195
+ }
196
+ .nws-layout-center.nws-layout-direction-y.nws-layout-gapY > *:last-child {
197
+ margin-bottom: auto;
198
+ }
199
+ .nws-layout-center.nws-layout-childRatio > * {
200
+ aspect-ratio: var(--nws-layout-childRatio);
166
201
  }
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 };
package/core/constants.d.mts 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 };