@niche-works/style-layouts 0.3.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 (9) hide show
  1. package/README.ja.md +8 -8
  2. package/README.md +8 -8
  3. package/core/balance/styles.css +6 -6
  4. package/core/center/styles.css +4 -26
  5. package/core/layer/styles.css +0 -4
  6. package/core/matrix/styles.css +0 -6
  7. package/core/stack/styles.css +0 -2
  8. package/core/styles.css +10 -44
  9. package/package.json +1 -1
package/README.ja.md CHANGED
@@ -317,14 +317,14 @@ type StyleLayoutResult = {
317
317
 
318
318
  ## 動作環境（対応ブラウザー）
319
319
 
320
- 本ライブラリはモダンCSSの標準仕様を用いて設計されており、使用するオプションによって対応ブラウザーが異なります。
321
-
322
- | ブラウザー | 標準 | `childRatioX` / `childRatioY` 使用時 |
323
- | --------------- | :--------: | :----------------------------------: |
324
- | Google Chrome | 2019年以降 | 2023年以降 |
325
- | Microsoft Edge | 2019年以降 | 2023年以降 |
326
- | Mozilla Firefox | 2019年以降 | 2023年以降 |
327
- | Apple Safari | 2019年以降 | 2023年以降 |
320
+ 本ライブラリはモダンCSSの標準仕様を用いて設計されており、下記のメジャーなブラウザーのバージョンに対応しています。
321
+
322
+ | ブラウザー | 対応バージョン |
323
+ | --------------- | :-----------------: |
324
+ | Google Chrome | 88 (2021年1月) 以降 |
325
+ | Microsoft Edge | 88 (2021年1月) 以降 |
326
+ | Mozilla Firefox | 89 (2021年6月) 以降 |
327
+ | Apple Safari | 15 (2021年9月) 以降 |
328
328
 
329
329
  ## ライセンス
330
330
 
package/README.md CHANGED
@@ -317,14 +317,14 @@ type StyleLayoutResult = {
317
317
 
318
318
  ## Browser Support
319
319
 
320
- This library is built on modern CSS standards. Supported browsers vary depending on the options used.
321
-
322
- | Browser | Standard | When using `childRatioX` / `childRatioY` |
323
- | --------------- | :------: | :--------------------------------------: |
324
- | Google Chrome | 2019+ | 2023+ |
325
- | Microsoft Edge | 2019+ | 2023+ |
326
- | Mozilla Firefox | 2019+ | 2023+ |
327
- | Apple Safari | 2019+ | 2023+ |
320
+ This library is built on modern CSS standards and supports the following major browser versions.
321
+
322
+ | Browser | Supported Versions |
323
+ | --------------- | :----------------------: |
324
+ | Google Chrome | 88 (January 2021) and later |
325
+ | Microsoft Edge | 88 (January 2021) and later |
326
+ | Mozilla Firefox | 89 (June 2021) and later |
327
+ | Apple Safari | 15 (September 2021) and later |
328
328
 
329
329
  ## License
330
330
 
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,13 +40,13 @@
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;
49
+ align-content: space-evenly;
50
50
  }
51
51
  .nws-layout-balance > * {
52
52
  min-width: 0;
package/core/center/styles.css CHANGED
@@ -21,6 +21,7 @@
21
21
  }
22
22
  .nws-layout-center.nws-layout-direction-x > * {
23
23
  max-width: none;
24
+ max-height: none;
24
25
  flex-grow: 0;
25
26
  flex-shrink: 0;
26
27
  margin-top: auto;
@@ -36,9 +37,6 @@
36
37
  width: var(--nws-layout-childSizeX);
37
38
  flex-basis: var(--nws-layout-childSizeX);
38
39
  }
39
- .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
40
- justify-content: stretch;
41
- }
42
40
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
43
41
  width: 100%;
44
42
  max-width: none;
@@ -46,29 +44,19 @@
46
44
  flex-shrink: 1;
47
45
  flex-basis: 0%;
48
46
  }
49
- .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
50
- justify-content: stretch;
51
- }
52
47
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
53
48
  width: 100%;
54
49
  min-width: var(--nws-layout-childSizeX);
55
50
  max-width: none;
56
51
  flex-grow: 1;
57
- flex-shrink: 0;
58
52
  flex-basis: var(--nws-layout-childSizeX);
59
53
  }
60
54
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
61
55
  width: var(--nws-layout-childSizeX);
62
56
  max-width: 100%;
63
- flex-grow: 0;
64
57
  flex-shrink: 1;
65
58
  flex-basis: var(--nws-layout-childSizeX);
66
59
  }
67
- .nws-layout-center.nws-layout-direction-x > * {
68
- max-height: none;
69
- margin-top: auto;
70
- margin-bottom: auto;
71
- }
72
60
  .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
73
61
  height: var(--nws-layout-childSizeY);
74
62
  }
@@ -112,6 +100,9 @@
112
100
  }
113
101
  .nws-layout-center.nws-layout-direction-y > * {
114
102
  max-width: none;
103
+ max-height: none;
104
+ flex-grow: 0;
105
+ flex-shrink: 0;
115
106
  margin-left: auto;
116
107
  margin-right: auto;
117
108
  }
@@ -145,18 +136,10 @@
145
136
  margin-left: auto;
146
137
  margin-right: auto;
147
138
  }
148
- .nws-layout-center.nws-layout-direction-y > * {
149
- max-height: none;
150
- flex-grow: 0;
151
- flex-shrink: 0;
152
- }
153
139
  .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
154
140
  height: var(--nws-layout-childSizeY);
155
141
  flex-basis: var(--nws-layout-childSizeY);
156
142
  }
157
- .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
158
- justify-content: stretch;
159
- }
160
143
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
161
144
  height: 100%;
162
145
  max-height: none;
@@ -164,21 +147,16 @@
164
147
  flex-shrink: 1;
165
148
  flex-basis: 0%;
166
149
  }
167
- .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
168
- justify-content: stretch;
169
- }
170
150
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
171
151
  height: 100%;
172
152
  min-height: var(--nws-layout-childSizeY);
173
153
  max-height: none;
174
154
  flex-grow: 1;
175
- flex-shrink: 0;
176
155
  flex-basis: var(--nws-layout-childSizeY);
177
156
  }
178
157
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
179
158
  height: var(--nws-layout-childSizeY);
180
159
  max-height: 100%;
181
- flex-grow: 0;
182
160
  flex-shrink: 1;
183
161
  flex-basis: var(--nws-layout-childSizeY);
184
162
  }
package/core/layer/styles.css CHANGED
@@ -40,8 +40,6 @@
40
40
  }
41
41
  .nws-layout-layer.nws-layout-adjustX-shrink > * {
42
42
  width: clamp(0px, 100%, var(--nws-layout-childSizeX));
43
- min-width: 0;
44
- max-width: 100%;
45
43
  }
46
44
  .nws-layout-layer.nws-layout-adjustY-fit > *, .nws-layout-layer.nws-layout-adjustY-grow > * {
47
45
  align-self: stretch;
@@ -52,8 +50,6 @@
52
50
  }
53
51
  .nws-layout-layer.nws-layout-adjustY-shrink > * {
54
52
  height: clamp(0px, 100%, var(--nws-layout-childSizeY));
55
- min-height: 0;
56
- max-height: 100%;
57
53
  }
58
54
  .nws-layout-layer.nws-layout-childRatio > * {
59
55
  aspect-ratio: var(--nws-layout-childRatio);
package/core/matrix/styles.css CHANGED
@@ -91,9 +91,6 @@
91
91
  .nws-layout-matrix.nws-layout-adjustX-grow.nws-layout-childCountX {
92
92
  grid-template-columns: repeat(var(--nws-layout-childCountX), 1fr);
93
93
  }
94
- .nws-layout-matrix.nws-layout-adjustX-shrink {
95
- grid-template-columns: repeat(auto-fit, auto);
96
- }
97
94
  .nws-layout-matrix.nws-layout-adjustX-shrink.nws-layout-childSizeX {
98
95
  grid-template-columns: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeX)));
99
96
  }
@@ -142,9 +139,6 @@
142
139
  .nws-layout-matrix.nws-layout-adjustY-grow.nws-layout-childCountY {
143
140
  grid-template-rows: repeat(var(--nws-layout-childCountY), 1fr);
144
141
  }
145
- .nws-layout-matrix.nws-layout-adjustY-shrink {
146
- grid-template-rows: repeat(auto-fit, auto);
147
- }
148
142
  .nws-layout-matrix.nws-layout-adjustY-shrink.nws-layout-childSizeY {
149
143
  grid-template-rows: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeY)));
150
144
  }
package/core/stack/styles.css CHANGED
@@ -79,7 +79,6 @@
79
79
  min-height: 100%;
80
80
  }
81
81
  .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
82
- min-height: 0;
83
82
  max-height: 100%;
84
83
  }
85
84
  .nws-layout-stack.nws-layout-direction-y {
@@ -135,7 +134,6 @@
135
134
  min-width: 100%;
136
135
  }
137
136
  .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
138
- min-width: 0;
139
137
  max-width: 100%;
140
138
  }
141
139
  .nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {
package/core/styles.css CHANGED
@@ -79,7 +79,6 @@
79
79
  min-height: 100%;
80
80
  }
81
81
  .nws-layout-stack.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
82
- min-height: 0;
83
82
  max-height: 100%;
84
83
  }
85
84
  .nws-layout-stack.nws-layout-direction-y {
@@ -135,7 +134,6 @@
135
134
  min-width: 100%;
136
135
  }
137
136
  .nws-layout-stack.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
138
- min-width: 0;
139
137
  max-width: 100%;
140
138
  }
141
139
  .nws-layout-stack.nws-layout-direction-y.nws-layout-childSizeY > * {
@@ -624,9 +622,6 @@
624
622
  .nws-layout-matrix.nws-layout-adjustX-grow.nws-layout-childCountX {
625
623
  grid-template-columns: repeat(var(--nws-layout-childCountX), 1fr);
626
624
  }
627
- .nws-layout-matrix.nws-layout-adjustX-shrink {
628
- grid-template-columns: repeat(auto-fit, auto);
629
- }
630
625
  .nws-layout-matrix.nws-layout-adjustX-shrink.nws-layout-childSizeX {
631
626
  grid-template-columns: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeX)));
632
627
  }
@@ -675,9 +670,6 @@
675
670
  .nws-layout-matrix.nws-layout-adjustY-grow.nws-layout-childCountY {
676
671
  grid-template-rows: repeat(var(--nws-layout-childCountY), 1fr);
677
672
  }
678
- .nws-layout-matrix.nws-layout-adjustY-shrink {
679
- grid-template-rows: repeat(auto-fit, auto);
680
- }
681
673
  .nws-layout-matrix.nws-layout-adjustY-shrink.nws-layout-childSizeY {
682
674
  grid-template-rows: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeY)));
683
675
  }
@@ -720,6 +712,7 @@
720
712
  }
721
713
  .nws-layout-center.nws-layout-direction-x > * {
722
714
  max-width: none;
715
+ max-height: none;
723
716
  flex-grow: 0;
724
717
  flex-shrink: 0;
725
718
  margin-top: auto;
@@ -735,9 +728,6 @@
735
728
  width: var(--nws-layout-childSizeX);
736
729
  flex-basis: var(--nws-layout-childSizeX);
737
730
  }
738
- .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit {
739
- justify-content: stretch;
740
- }
741
731
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-fit > * {
742
732
  width: 100%;
743
733
  max-width: none;
@@ -745,29 +735,19 @@
745
735
  flex-shrink: 1;
746
736
  flex-basis: 0%;
747
737
  }
748
- .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow {
749
- justify-content: stretch;
750
- }
751
738
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-grow > * {
752
739
  width: 100%;
753
740
  min-width: var(--nws-layout-childSizeX);
754
741
  max-width: none;
755
742
  flex-grow: 1;
756
- flex-shrink: 0;
757
743
  flex-basis: var(--nws-layout-childSizeX);
758
744
  }
759
745
  .nws-layout-center.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
760
746
  width: var(--nws-layout-childSizeX);
761
747
  max-width: 100%;
762
- flex-grow: 0;
763
748
  flex-shrink: 1;
764
749
  flex-basis: var(--nws-layout-childSizeX);
765
750
  }
766
- .nws-layout-center.nws-layout-direction-x > * {
767
- max-height: none;
768
- margin-top: auto;
769
- margin-bottom: auto;
770
- }
771
751
  .nws-layout-center.nws-layout-direction-x.nws-layout-childSizeY > * {
772
752
  height: var(--nws-layout-childSizeY);
773
753
  }
@@ -811,6 +791,9 @@
811
791
  }
812
792
  .nws-layout-center.nws-layout-direction-y > * {
813
793
  max-width: none;
794
+ max-height: none;
795
+ flex-grow: 0;
796
+ flex-shrink: 0;
814
797
  margin-left: auto;
815
798
  margin-right: auto;
816
799
  }
@@ -844,18 +827,10 @@
844
827
  margin-left: auto;
845
828
  margin-right: auto;
846
829
  }
847
- .nws-layout-center.nws-layout-direction-y > * {
848
- max-height: none;
849
- flex-grow: 0;
850
- flex-shrink: 0;
851
- }
852
830
  .nws-layout-center.nws-layout-direction-y.nws-layout-childSizeY > * {
853
831
  height: var(--nws-layout-childSizeY);
854
832
  flex-basis: var(--nws-layout-childSizeY);
855
833
  }
856
- .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit {
857
- justify-content: stretch;
858
- }
859
834
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-fit > * {
860
835
  height: 100%;
861
836
  max-height: none;
@@ -863,21 +838,16 @@
863
838
  flex-shrink: 1;
864
839
  flex-basis: 0%;
865
840
  }
866
- .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow {
867
- justify-content: stretch;
868
- }
869
841
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-grow > * {
870
842
  height: 100%;
871
843
  min-height: var(--nws-layout-childSizeY);
872
844
  max-height: none;
873
845
  flex-grow: 1;
874
- flex-shrink: 0;
875
846
  flex-basis: var(--nws-layout-childSizeY);
876
847
  }
877
848
  .nws-layout-center.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
878
849
  height: var(--nws-layout-childSizeY);
879
850
  max-height: 100%;
880
- flex-grow: 0;
881
851
  flex-shrink: 1;
882
852
  flex-basis: var(--nws-layout-childSizeY);
883
853
  }
@@ -969,13 +939,13 @@
969
939
  justify-items: flex-end;
970
940
  }
971
941
  .nws-layout-balance.nws-layout-alignX-spaceBetween {
972
- justify-items: space-between;
942
+ justify-content: space-between;
973
943
  }
974
944
  .nws-layout-balance.nws-layout-alignX-spaceAround {
975
- justify-items: space-around;
945
+ justify-content: space-around;
976
946
  }
977
947
  .nws-layout-balance.nws-layout-alignX-spaceEvenly {
978
- justify-items: space-evenly;
948
+ justify-content: space-evenly;
979
949
  }
980
950
  .nws-layout-balance.nws-layout-alignY-top {
981
951
  align-items: flex-start;
@@ -987,13 +957,13 @@
987
957
  align-items: flex-end;
988
958
  }
989
959
  .nws-layout-balance.nws-layout-alignY-spaceBetween {
990
- align-items: space-between;
960
+ align-content: space-between;
991
961
  }
992
962
  .nws-layout-balance.nws-layout-alignY-spaceAround {
993
- align-items: space-around;
963
+ align-content: space-around;
994
964
  }
995
965
  .nws-layout-balance.nws-layout-alignY-spaceEvenly {
996
- align-items: space-evenly;
966
+ align-content: space-evenly;
997
967
  }
998
968
  .nws-layout-balance > * {
999
969
  min-width: 0;
@@ -1087,8 +1057,6 @@
1087
1057
  }
1088
1058
  .nws-layout-layer.nws-layout-adjustX-shrink > * {
1089
1059
  width: clamp(0px, 100%, var(--nws-layout-childSizeX));
1090
- min-width: 0;
1091
- max-width: 100%;
1092
1060
  }
1093
1061
  .nws-layout-layer.nws-layout-adjustY-fit > *, .nws-layout-layer.nws-layout-adjustY-grow > * {
1094
1062
  align-self: stretch;
@@ -1099,8 +1067,6 @@
1099
1067
  }
1100
1068
  .nws-layout-layer.nws-layout-adjustY-shrink > * {
1101
1069
  height: clamp(0px, 100%, var(--nws-layout-childSizeY));
1102
- min-height: 0;
1103
- max-height: 100%;
1104
1070
  }
1105
1071
  .nws-layout-layer.nws-layout-childRatio > * {
1106
1072
  aspect-ratio: var(--nws-layout-childRatio);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@niche-works/style-layouts",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "keywords": [
5
5
  "css",
6
6
  "style",