@fringeworks/style-layouts 0.8.0 → 0.8.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 (31) hide show
  1. package/README.ja.md +3 -3
  2. package/README.md +3 -3
  3. package/_constants.cjs +49 -49
  4. package/_constants.d.cts +55 -55
  5. package/_constants.d.mts +55 -55
  6. package/_constants.mjs +49 -49
  7. package/balance/styles.css +55 -55
  8. package/center/styles.css +59 -59
  9. package/flow/styles.css +60 -60
  10. package/helpers/extractBalanceOptions.d.cts +1 -1
  11. package/helpers/extractBalanceOptions.d.mts +1 -1
  12. package/helpers/extractCenterOptions.d.cts +1 -1
  13. package/helpers/extractCenterOptions.d.mts +1 -1
  14. package/helpers/extractFlowOptions.d.cts +1 -1
  15. package/helpers/extractFlowOptions.d.mts +1 -1
  16. package/helpers/extractLayerOptions.d.cts +1 -1
  17. package/helpers/extractLayerOptions.d.mts +1 -1
  18. package/helpers/extractMatrixOptions.d.cts +1 -1
  19. package/helpers/extractMatrixOptions.d.mts +1 -1
  20. package/helpers/extractStackOptions.d.cts +1 -1
  21. package/helpers/extractStackOptions.d.mts +1 -1
  22. package/helpers/extractTileOptions.d.cts +1 -1
  23. package/helpers/extractTileOptions.d.mts +1 -1
  24. package/layer/styles.css +27 -27
  25. package/matrix/styles.css +82 -82
  26. package/pack/styles.css +13 -13
  27. package/package.json +1 -1
  28. package/pin/styles.css +11 -11
  29. package/stack/styles.css +64 -64
  30. package/styles.css +453 -453
  31. package/tile/styles.css +82 -82
package/balance/styles.css CHANGED
@@ -1,131 +1,131 @@
1
- .lx-layout-balance {
2
- --lx-layout-gapX: 0px;
3
- --lx-layout-gapY: 0px;
4
- --lx-layout-itemSizeX: auto;
5
- --lx-layout-itemSizeY: auto;
6
- --lx-layout-itemRatio: auto;
1
+ .frg-layout-balance {
2
+ --frg-layout-gapX: 0px;
3
+ --frg-layout-gapY: 0px;
4
+ --frg-layout-itemSizeX: auto;
5
+ --frg-layout-itemSizeY: auto;
6
+ --frg-layout-itemRatio: auto;
7
7
  display: grid;
8
8
  }
9
- .lx-layout-balance.lx-layout-direction-x {
9
+ .frg-layout-balance.frg-layout-direction-x {
10
10
  grid-auto-flow: column;
11
11
  grid-auto-columns: max-content;
12
12
  }
13
- .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-grow, .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-fit {
13
+ .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-grow, .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-fit {
14
14
  grid-auto-columns: auto;
15
15
  }
16
- .lx-layout-balance.lx-layout-direction-x.lx-layout-adjustX-shrink {
16
+ .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-shrink {
17
17
  grid-auto-columns: minmax(0, max-content);
18
18
  }
19
- .lx-layout-balance.lx-layout-direction-x.lx-layout-itemSizeX {
19
+ .frg-layout-balance.frg-layout-direction-x.frg-layout-itemSizeX {
20
20
  grid-auto-columns: auto;
21
21
  }
22
- .lx-layout-balance.lx-layout-direction-y {
22
+ .frg-layout-balance.frg-layout-direction-y {
23
23
  grid-auto-flow: row;
24
24
  grid-auto-rows: max-content;
25
25
  }
26
- .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-grow, .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-fit {
26
+ .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-grow, .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-fit {
27
27
  grid-auto-rows: auto;
28
28
  }
29
- .lx-layout-balance.lx-layout-direction-y.lx-layout-adjustY-shrink {
29
+ .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-shrink {
30
30
  grid-auto-rows: minmax(0, max-content);
31
31
  }
32
- .lx-layout-balance.lx-layout-direction-y.lx-layout-itemSizeY {
32
+ .frg-layout-balance.frg-layout-direction-y.frg-layout-itemSizeY {
33
33
  grid-auto-rows: auto;
34
34
  }
35
- .lx-layout-balance.lx-layout-alignX-left {
35
+ .frg-layout-balance.frg-layout-alignX-left {
36
36
  justify-items: flex-start;
37
37
  }
38
- .lx-layout-balance.lx-layout-alignX-center {
38
+ .frg-layout-balance.frg-layout-alignX-center {
39
39
  justify-items: center;
40
40
  }
41
- .lx-layout-balance.lx-layout-alignX-right {
41
+ .frg-layout-balance.frg-layout-alignX-right {
42
42
  justify-items: flex-end;
43
43
  }
44
- .lx-layout-balance.lx-layout-alignX-spaceBetween {
44
+ .frg-layout-balance.frg-layout-alignX-spaceBetween {
45
45
  justify-content: space-between;
46
46
  }
47
- .lx-layout-balance.lx-layout-alignX-spaceAround {
47
+ .frg-layout-balance.frg-layout-alignX-spaceAround {
48
48
  justify-content: space-around;
49
49
  }
50
- .lx-layout-balance.lx-layout-alignX-spaceEvenly {
50
+ .frg-layout-balance.frg-layout-alignX-spaceEvenly {
51
51
  justify-content: space-evenly;
52
52
  }
53
- .lx-layout-balance.lx-layout-alignY-top {
53
+ .frg-layout-balance.frg-layout-alignY-top {
54
54
  align-items: flex-start;
55
55
  }
56
- .lx-layout-balance.lx-layout-alignY-middle {
56
+ .frg-layout-balance.frg-layout-alignY-middle {
57
57
  align-items: center;
58
58
  }
59
- .lx-layout-balance.lx-layout-alignY-bottom {
59
+ .frg-layout-balance.frg-layout-alignY-bottom {
60
60
  align-items: flex-end;
61
61
  }
62
- .lx-layout-balance.lx-layout-alignY-spaceBetween {
62
+ .frg-layout-balance.frg-layout-alignY-spaceBetween {
63
63
  align-content: space-between;
64
64
  }
65
- .lx-layout-balance.lx-layout-alignY-spaceAround {
65
+ .frg-layout-balance.frg-layout-alignY-spaceAround {
66
66
  align-content: space-around;
67
67
  }
68
- .lx-layout-balance.lx-layout-alignY-spaceEvenly {
68
+ .frg-layout-balance.frg-layout-alignY-spaceEvenly {
69
69
  align-content: space-evenly;
70
70
  }
71
- .lx-layout-balance > * {
71
+ .frg-layout-balance > * {
72
72
  min-width: 0;
73
73
  min-height: 0;
74
74
  }
75
- .lx-layout-balance.lx-layout-itemSizeX > * {
76
- width: var(--lx-layout-itemSizeX);
75
+ .frg-layout-balance.frg-layout-itemSizeX > * {
76
+ width: var(--frg-layout-itemSizeX);
77
77
  }
78
- .lx-layout-balance.lx-layout-adjustX-fit {
78
+ .frg-layout-balance.frg-layout-adjustX-fit {
79
79
  justify-items: stretch;
80
80
  }
81
- .lx-layout-balance.lx-layout-adjustX-fit > * {
81
+ .frg-layout-balance.frg-layout-adjustX-fit > * {
82
82
  width: auto;
83
83
  }
84
- .lx-layout-balance.lx-layout-adjustX-grow > *, .lx-layout-balance.lx-layout-adjustX-shrink > * {
84
+ .frg-layout-balance.frg-layout-adjustX-grow > *, .frg-layout-balance.frg-layout-adjustX-shrink > * {
85
85
  width: 100%;
86
86
  }
87
- .lx-layout-balance.lx-layout-adjustX-grow > * {
87
+ .frg-layout-balance.frg-layout-adjustX-grow > * {
88
88
  min-width: max-content;
89
89
  }
90
- .lx-layout-balance.lx-layout-adjustX-grow.lx-layout-itemSizeX > * {
91
- min-width: var(--lx-layout-itemSizeX);
90
+ .frg-layout-balance.frg-layout-adjustX-grow.frg-layout-itemSizeX > * {
91
+ min-width: var(--frg-layout-itemSizeX);
92
92
  }
93
- .lx-layout-balance.lx-layout-adjustX-shrink > * {
93
+ .frg-layout-balance.frg-layout-adjustX-shrink > * {
94
94
  max-width: max-content;
95
95
  }
96
- .lx-layout-balance.lx-layout-adjustX-shrink.lx-layout-itemSizeX > * {
97
- max-width: var(--lx-layout-itemSizeX);
96
+ .frg-layout-balance.frg-layout-adjustX-shrink.frg-layout-itemSizeX > * {
97
+ max-width: var(--frg-layout-itemSizeX);
98
98
  }
99
- .lx-layout-balance.lx-layout-itemSizeY > * {
100
- height: var(--lx-layout-itemSizeY);
99
+ .frg-layout-balance.frg-layout-itemSizeY > * {
100
+ height: var(--frg-layout-itemSizeY);
101
101
  }
102
- .lx-layout-balance.lx-layout-adjustY-fit {
102
+ .frg-layout-balance.frg-layout-adjustY-fit {
103
103
  align-items: stretch;
104
104
  }
105
- .lx-layout-balance.lx-layout-adjustY-fit > * {
105
+ .frg-layout-balance.frg-layout-adjustY-fit > * {
106
106
  height: auto;
107
107
  }
108
- .lx-layout-balance.lx-layout-adjustY-grow > *, .lx-layout-balance.lx-layout-adjustY-shrink > * {
108
+ .frg-layout-balance.frg-layout-adjustY-grow > *, .frg-layout-balance.frg-layout-adjustY-shrink > * {
109
109
  height: 100%;
110
110
  }
111
- .lx-layout-balance.lx-layout-adjustY-grow:not(.lx-layout-itemSizeY) > * {
111
+ .frg-layout-balance.frg-layout-adjustY-grow:not(.frg-layout-itemSizeY) > * {
112
112
  min-height: max-content;
113
113
  }
114
- .lx-layout-balance.lx-layout-adjustY-grow.lx-layout-itemSizeY > * {
115
- min-height: var(--lx-layout-itemSizeY);
114
+ .frg-layout-balance.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
115
+ min-height: var(--frg-layout-itemSizeY);
116
116
  }
117
- .lx-layout-balance.lx-layout-adjustY-shrink:not(.lx-layout-itemSizeY) > * {
117
+ .frg-layout-balance.frg-layout-adjustY-shrink:not(.frg-layout-itemSizeY) > * {
118
118
  max-height: max-content;
119
119
  }
120
- .lx-layout-balance.lx-layout-adjustY-shrink.lx-layout-itemSizeY > * {
121
- max-height: var(--lx-layout-itemSizeY);
120
+ .frg-layout-balance.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
121
+ max-height: var(--frg-layout-itemSizeY);
122
122
  }
123
- .lx-layout-balance.lx-layout-itemRatio > * {
124
- aspect-ratio: var(--lx-layout-itemRatio);
123
+ .frg-layout-balance.frg-layout-itemRatio > * {
124
+ aspect-ratio: var(--frg-layout-itemRatio);
125
125
  }
126
- .lx-layout-balance.lx-layout-gapX {
127
- column-gap: var(--lx-layout-gapX);
126
+ .frg-layout-balance.frg-layout-gapX {
127
+ column-gap: var(--frg-layout-gapX);
128
128
  }
129
- .lx-layout-balance.lx-layout-gapY {
130
- row-gap: var(--lx-layout-gapY);
129
+ .frg-layout-balance.frg-layout-gapY {
130
+ row-gap: var(--frg-layout-gapY);
131
131
  }
package/center/styles.css CHANGED
@@ -1,25 +1,25 @@
1
- .lx-layout-center {
2
- --lx-layout-gapX: 0px;
3
- --lx-layout-gapY: 0px;
4
- --lx-layout-itemSizeX: auto;
5
- --lx-layout-itemSizeY: auto;
6
- --lx-layout-itemRatio: auto;
1
+ .frg-layout-center {
2
+ --frg-layout-gapX: 0px;
3
+ --frg-layout-gapY: 0px;
4
+ --frg-layout-itemSizeX: auto;
5
+ --frg-layout-itemSizeY: auto;
6
+ --frg-layout-itemRatio: auto;
7
7
  display: flex;
8
8
  justify-content: flex-start;
9
9
  align-content: flex-start;
10
10
  flex-wrap: nowrap;
11
11
  }
12
- .lx-layout-center > * {
12
+ .frg-layout-center > * {
13
13
  min-width: 0;
14
14
  max-width: 100%;
15
15
  min-height: 0;
16
16
  max-height: 100%;
17
17
  margin: 0;
18
18
  }
19
- .lx-layout-center.lx-layout-direction-x {
19
+ .frg-layout-center.frg-layout-direction-x {
20
20
  flex-direction: row;
21
21
  }
22
- .lx-layout-center.lx-layout-direction-x > * {
22
+ .frg-layout-center.frg-layout-direction-x > * {
23
23
  max-width: none;
24
24
  max-height: none;
25
25
  flex-grow: 0;
@@ -27,64 +27,64 @@
27
27
  margin-top: auto;
28
28
  margin-bottom: auto;
29
29
  }
30
- .lx-layout-center.lx-layout-direction-x > *:first-child {
30
+ .frg-layout-center.frg-layout-direction-x > *:first-child {
31
31
  margin-left: auto;
32
32
  }
33
- .lx-layout-center.lx-layout-direction-x > *:last-child {
33
+ .frg-layout-center.frg-layout-direction-x > *:last-child {
34
34
  margin-right: auto;
35
35
  }
36
- .lx-layout-center.lx-layout-direction-x.lx-layout-itemSizeX > * {
37
- width: var(--lx-layout-itemSizeX);
38
- flex-basis: var(--lx-layout-itemSizeX);
36
+ .frg-layout-center.frg-layout-direction-x.frg-layout-itemSizeX > * {
37
+ width: var(--frg-layout-itemSizeX);
38
+ flex-basis: var(--frg-layout-itemSizeX);
39
39
  }
40
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-fit > * {
40
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-fit > * {
41
41
  width: 100%;
42
42
  max-width: none;
43
43
  flex-grow: 1;
44
44
  flex-shrink: 1;
45
45
  flex-basis: 0%;
46
46
  }
47
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-grow > * {
47
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-grow > * {
48
48
  width: 100%;
49
- min-width: var(--lx-layout-itemSizeX);
49
+ min-width: var(--frg-layout-itemSizeX);
50
50
  max-width: none;
51
51
  flex-grow: 1;
52
- flex-basis: var(--lx-layout-itemSizeX);
52
+ flex-basis: var(--frg-layout-itemSizeX);
53
53
  }
54
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
55
- width: var(--lx-layout-itemSizeX);
54
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
55
+ width: var(--frg-layout-itemSizeX);
56
56
  max-width: 100%;
57
57
  flex-shrink: 1;
58
- flex-basis: var(--lx-layout-itemSizeX);
58
+ flex-basis: var(--frg-layout-itemSizeX);
59
59
  }
60
- .lx-layout-center.lx-layout-direction-x.lx-layout-itemSizeY > * {
61
- height: var(--lx-layout-itemSizeY);
60
+ .frg-layout-center.frg-layout-direction-x.frg-layout-itemSizeY > * {
61
+ height: var(--frg-layout-itemSizeY);
62
62
  }
63
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-fit {
63
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-fit {
64
64
  align-items: stretch;
65
65
  }
66
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-fit > * {
66
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-fit > * {
67
67
  height: 100%;
68
68
  max-height: none;
69
69
  }
70
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-grow {
70
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-grow {
71
71
  align-items: stretch;
72
72
  }
73
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-grow > * {
73
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-grow > * {
74
74
  height: 100%;
75
- min-height: var(--lx-layout-itemSizeY);
75
+ min-height: var(--frg-layout-itemSizeY);
76
76
  max-height: none;
77
77
  }
78
- .lx-layout-center.lx-layout-direction-x.lx-layout-adjustY-shrink > * {
79
- height: var(--lx-layout-itemSizeY);
78
+ .frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
79
+ height: var(--frg-layout-itemSizeY);
80
80
  max-height: 100%;
81
81
  margin-top: auto;
82
82
  margin-bottom: auto;
83
83
  }
84
- .lx-layout-center.lx-layout-direction-y {
84
+ .frg-layout-center.frg-layout-direction-y {
85
85
  flex-direction: column;
86
86
  }
87
- .lx-layout-center.lx-layout-direction-y > * {
87
+ .frg-layout-center.frg-layout-direction-y > * {
88
88
  max-width: none;
89
89
  max-height: none;
90
90
  flex-grow: 0;
@@ -92,66 +92,66 @@
92
92
  margin-left: auto;
93
93
  margin-right: auto;
94
94
  }
95
- .lx-layout-center.lx-layout-direction-y > *:first-child {
95
+ .frg-layout-center.frg-layout-direction-y > *:first-child {
96
96
  margin-top: auto;
97
97
  }
98
- .lx-layout-center.lx-layout-direction-y > *:last-child {
98
+ .frg-layout-center.frg-layout-direction-y > *:last-child {
99
99
  margin-bottom: auto;
100
100
  }
101
- .lx-layout-center.lx-layout-direction-y.lx-layout-itemSizeX > * {
102
- width: var(--lx-layout-itemSizeX);
101
+ .frg-layout-center.frg-layout-direction-y.frg-layout-itemSizeX > * {
102
+ width: var(--frg-layout-itemSizeX);
103
103
  }
104
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-fit {
104
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-fit {
105
105
  align-items: stretch;
106
106
  }
107
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-fit > * {
107
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-fit > * {
108
108
  width: 100%;
109
109
  max-width: none;
110
110
  }
111
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-grow {
111
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-grow {
112
112
  align-items: stretch;
113
113
  }
114
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-grow > * {
114
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-grow > * {
115
115
  width: 100%;
116
- min-width: var(--lx-layout-itemSizeX);
116
+ min-width: var(--frg-layout-itemSizeX);
117
117
  max-width: none;
118
118
  }
119
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustX-shrink > * {
120
- width: var(--lx-layout-itemSizeX);
119
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
120
+ width: var(--frg-layout-itemSizeX);
121
121
  max-width: 100%;
122
122
  margin-left: auto;
123
123
  margin-right: auto;
124
124
  }
125
- .lx-layout-center.lx-layout-direction-y.lx-layout-itemSizeY > * {
126
- height: var(--lx-layout-itemSizeY);
127
- flex-basis: var(--lx-layout-itemSizeY);
125
+ .frg-layout-center.frg-layout-direction-y.frg-layout-itemSizeY > * {
126
+ height: var(--frg-layout-itemSizeY);
127
+ flex-basis: var(--frg-layout-itemSizeY);
128
128
  }
129
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-fit > * {
129
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-fit > * {
130
130
  height: 100%;
131
131
  max-height: none;
132
132
  flex-grow: 1;
133
133
  flex-shrink: 1;
134
134
  flex-basis: 0%;
135
135
  }
136
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-grow > * {
136
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-grow > * {
137
137
  height: 100%;
138
- min-height: var(--lx-layout-itemSizeY);
138
+ min-height: var(--frg-layout-itemSizeY);
139
139
  max-height: none;
140
140
  flex-grow: 1;
141
- flex-basis: var(--lx-layout-itemSizeY);
141
+ flex-basis: var(--frg-layout-itemSizeY);
142
142
  }
143
- .lx-layout-center.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
144
- height: var(--lx-layout-itemSizeY);
143
+ .frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
144
+ height: var(--frg-layout-itemSizeY);
145
145
  max-height: 100%;
146
146
  flex-shrink: 1;
147
- flex-basis: var(--lx-layout-itemSizeY);
147
+ flex-basis: var(--frg-layout-itemSizeY);
148
148
  }
149
- .lx-layout-center.lx-layout-itemRatio > * {
150
- aspect-ratio: var(--lx-layout-itemRatio);
149
+ .frg-layout-center.frg-layout-itemRatio > * {
150
+ aspect-ratio: var(--frg-layout-itemRatio);
151
151
  }
152
- .lx-layout-center.lx-layout-gapX {
153
- column-gap: var(--lx-layout-gapX);
152
+ .frg-layout-center.frg-layout-gapX {
153
+ column-gap: var(--frg-layout-gapX);
154
154
  }
155
- .lx-layout-center.lx-layout-gapY {
156
- row-gap: var(--lx-layout-gapY);
155
+ .frg-layout-center.frg-layout-gapY {
156
+ row-gap: var(--frg-layout-gapY);
157
157
  }
package/flow/styles.css CHANGED
@@ -1,160 +1,160 @@
1
- .lx-layout-flow {
2
- --lx-layout-gapX: 0px;
3
- --lx-layout-gapY: 0px;
4
- --lx-layout-itemSizeX: auto;
5
- --lx-layout-itemSizeY: auto;
6
- --lx-layout-itemRatio: auto;
1
+ .frg-layout-flow {
2
+ --frg-layout-gapX: 0px;
3
+ --frg-layout-gapY: 0px;
4
+ --frg-layout-itemSizeX: auto;
5
+ --frg-layout-itemSizeY: auto;
6
+ --frg-layout-itemRatio: auto;
7
7
  display: flex;
8
8
  flex-wrap: wrap;
9
9
  }
10
- .lx-layout-flow.lx-layout-direction-x {
10
+ .frg-layout-flow.frg-layout-direction-x {
11
11
  flex-direction: row;
12
12
  }
13
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-left {
13
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-left {
14
14
  justify-content: flex-start;
15
15
  }
16
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-center {
16
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-center {
17
17
  justify-content: center;
18
18
  }
19
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-right {
19
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-right {
20
20
  justify-content: flex-end;
21
21
  }
22
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceBetween {
22
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-spaceBetween {
23
23
  justify-content: space-between;
24
24
  }
25
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceAround {
25
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-spaceAround {
26
26
  justify-content: space-around;
27
27
  }
28
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignX-spaceEvenly {
28
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignX-spaceEvenly {
29
29
  justify-content: space-evenly;
30
30
  }
31
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-top {
31
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-top {
32
32
  align-items: flex-start;
33
33
  align-content: flex-start;
34
34
  }
35
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-middle {
35
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-middle {
36
36
  align-items: center;
37
37
  align-content: center;
38
38
  }
39
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-bottom {
39
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-bottom {
40
40
  align-items: flex-end;
41
41
  align-content: flex-end;
42
42
  }
43
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceBetween {
43
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-spaceBetween {
44
44
  align-content: space-between;
45
45
  }
46
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceAround {
46
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-spaceAround {
47
47
  align-content: space-around;
48
48
  }
49
- .lx-layout-flow.lx-layout-direction-x.lx-layout-alignY-spaceEvenly {
49
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-alignY-spaceEvenly {
50
50
  align-content: space-evenly;
51
51
  }
52
- .lx-layout-flow.lx-layout-direction-x > * {
52
+ .frg-layout-flow.frg-layout-direction-x > * {
53
53
  flex-grow: 0;
54
54
  flex-shrink: 0;
55
55
  min-width: 0;
56
56
  min-height: 0;
57
57
  }
58
- .lx-layout-flow.lx-layout-direction-x.lx-layout-itemSizeX > * {
59
- flex-basis: var(--lx-layout-itemSizeX);
58
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-itemSizeX > * {
59
+ flex-basis: var(--frg-layout-itemSizeX);
60
60
  }
61
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit {
61
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-fit {
62
62
  justify-content: flex-start;
63
63
  }
64
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit > * {
64
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-fit > * {
65
65
  flex-grow: 1;
66
66
  flex-shrink: 1;
67
67
  flex-basis: auto;
68
68
  }
69
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-fit.lx-layout-itemSizeX > * {
70
- flex-basis: var(--lx-layout-itemSizeX);
69
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX > * {
70
+ flex-basis: var(--frg-layout-itemSizeX);
71
71
  }
72
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-grow > * {
72
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-grow > * {
73
73
  flex-grow: 1;
74
74
  }
75
- .lx-layout-flow.lx-layout-direction-x.lx-layout-adjustX-shrink > * {
75
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
76
76
  flex-shrink: 1;
77
77
  }
78
- .lx-layout-flow.lx-layout-direction-x.lx-layout-itemSizeY > * {
79
- height: var(--lx-layout-itemSizeY);
78
+ .frg-layout-flow.frg-layout-direction-x.frg-layout-itemSizeY > * {
79
+ height: var(--frg-layout-itemSizeY);
80
80
  }
81
- .lx-layout-flow.lx-layout-direction-y {
81
+ .frg-layout-flow.frg-layout-direction-y {
82
82
  flex-direction: column;
83
83
  }
84
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-left {
84
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-left {
85
85
  align-items: flex-start;
86
86
  align-content: flex-start;
87
87
  }
88
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-center {
88
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-center {
89
89
  align-items: center;
90
90
  align-content: center;
91
91
  }
92
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-right {
92
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-right {
93
93
  align-items: flex-end;
94
94
  align-content: flex-end;
95
95
  }
96
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceBetween {
96
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-spaceBetween {
97
97
  align-content: space-between;
98
98
  }
99
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceAround {
99
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-spaceAround {
100
100
  align-content: space-around;
101
101
  }
102
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignX-spaceEvenly {
102
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignX-spaceEvenly {
103
103
  align-content: space-evenly;
104
104
  }
105
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-top {
105
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-top {
106
106
  justify-content: flex-start;
107
107
  }
108
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-middle {
108
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-middle {
109
109
  justify-content: center;
110
110
  }
111
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-bottom {
111
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-bottom {
112
112
  justify-content: flex-end;
113
113
  }
114
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceBetween {
114
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-spaceBetween {
115
115
  justify-content: space-between;
116
116
  }
117
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceAround {
117
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-spaceAround {
118
118
  justify-content: space-around;
119
119
  }
120
- .lx-layout-flow.lx-layout-direction-y.lx-layout-alignY-spaceEvenly {
120
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-alignY-spaceEvenly {
121
121
  justify-content: space-evenly;
122
122
  }
123
- .lx-layout-flow.lx-layout-direction-y > * {
123
+ .frg-layout-flow.frg-layout-direction-y > * {
124
124
  flex-grow: 0;
125
125
  flex-shrink: 0;
126
126
  min-width: 0;
127
127
  min-height: 0;
128
128
  }
129
- .lx-layout-flow.lx-layout-direction-y.lx-layout-itemSizeX > * {
130
- width: var(--lx-layout-itemSizeX);
129
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-itemSizeX > * {
130
+ width: var(--frg-layout-itemSizeX);
131
131
  }
132
- .lx-layout-flow.lx-layout-direction-y.lx-layout-itemSizeY > * {
133
- flex-basis: var(--lx-layout-itemSizeY);
132
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-itemSizeY > * {
133
+ flex-basis: var(--frg-layout-itemSizeY);
134
134
  }
135
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit {
135
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-fit {
136
136
  justify-content: flex-start;
137
137
  }
138
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit > * {
138
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-fit > * {
139
139
  flex-grow: 1;
140
140
  flex-shrink: 1;
141
141
  flex-basis: auto;
142
142
  }
143
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-fit.lx-layout-itemSizeY > * {
144
- flex-basis: var(--lx-layout-itemSizeY);
143
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY > * {
144
+ flex-basis: var(--frg-layout-itemSizeY);
145
145
  }
146
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-grow > * {
146
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-grow > * {
147
147
  flex-grow: 1;
148
148
  }
149
- .lx-layout-flow.lx-layout-direction-y.lx-layout-adjustY-shrink > * {
149
+ .frg-layout-flow.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
150
150
  flex-shrink: 1;
151
151
  }
152
- .lx-layout-flow.lx-layout-itemRatio > * {
153
- aspect-ratio: var(--lx-layout-itemRatio);
152
+ .frg-layout-flow.frg-layout-itemRatio > * {
153
+ aspect-ratio: var(--frg-layout-itemRatio);
154
154
  }
155
- .lx-layout-flow.lx-layout-gapX {
156
- column-gap: var(--lx-layout-gapX);
155
+ .frg-layout-flow.frg-layout-gapX {
156
+ column-gap: var(--frg-layout-gapX);
157
157
  }
158
- .lx-layout-flow.lx-layout-gapY {
159
- row-gap: var(--lx-layout-gapY);
158
+ .frg-layout-flow.frg-layout-gapY {
159
+ row-gap: var(--frg-layout-gapY);
160
160
  }
package/helpers/extractBalanceOptions.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AdjustOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
2
2
  import { BalanceLayoutOptions } from "../balance/types.cjs";
3
3
  //#region src/helpers/extractBalanceOptions.d.ts
4
- declare const _default: <T extends Record<string, unknown>>(record: T) => [BalanceLayoutOptions, Omit<T, "direction" | keyof AdjustOptions | keyof GapOptions | keyof ItemSizeOptions | keyof ItemRatioOptions | "alignX" | "alignY">];
4
+ declare const _default: <T extends Record<string, unknown>>(record: T) => [BalanceLayoutOptions, Omit<T, "alignY" | "alignX" | keyof AdjustOptions | keyof ItemSizeOptions | keyof ItemRatioOptions | "direction" | keyof GapOptions>];
5
5
  export = _default;
package/helpers/extractBalanceOptions.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { AdjustOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
2
2
  import { BalanceLayoutOptions } from "../balance/types.mjs";
3
3
  //#region src/helpers/extractBalanceOptions.d.ts
4
- declare const _default: <T extends Record<string, unknown>>(record: T) => [BalanceLayoutOptions, Omit<T, "direction" | keyof AdjustOptions | keyof GapOptions | keyof ItemSizeOptions | keyof ItemRatioOptions | "alignX" | "alignY">];
4
+ declare const _default: <T extends Record<string, unknown>>(record: T) => [BalanceLayoutOptions, Omit<T, "alignY" | "alignX" | keyof AdjustOptions | keyof ItemSizeOptions | keyof ItemRatioOptions | "direction" | keyof GapOptions>];
5
5
  //#endregion
6
6
  export { _default as default };
package/helpers/extractCenterOptions.d.cts CHANGED
@@ -2,5 +2,5 @@ import { AdjustOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "..
2
2
  import { CenterLayoutOptions } from "../center/types.cjs";
3
3
 
4
4
  //#region src/helpers/extractCenterOptions.d.ts
5
- declare const _default: <T extends Record<string, unknown>>(record: T) => [CenterLayoutOptions, Omit<T, "direction" | keyof AdjustOptions | keyof GapOptions | keyof ItemSizeOptions | keyof ItemRatioOptions>];
5
+ declare const _default: <T extends Record<string, unknown>>(record: T) => [CenterLayoutOptions, Omit<T, keyof AdjustOptions | keyof ItemSizeOptions | keyof ItemRatioOptions | "direction" | keyof GapOptions>];
6
6
  export = _default;