@cck-ui/core 0.4.8 → 0.4.9

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 (15) hide show
  1. package/package.json +1 -1
  2. package/styles/baseline.css +7 -3
  3. package/styles/baseline.layer.css +7 -3
  4. package/styles/button.css +91 -92
  5. package/styles/button.layer.css +91 -92
  6. package/styles/global.css +13 -29
  7. package/styles/global.layer.css +13 -29
  8. package/styles/group.css +2 -4
  9. package/styles/group.layer.css +2 -4
  10. package/styles/loader.css +15 -15
  11. package/styles/loader.layer.css +15 -15
  12. package/styles/text.css +10 -10
  13. package/styles/text.layer.css +10 -10
  14. package/styles.css +138 -153
  15. package/styles.layer.css +138 -153
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cck-ui/core",
3
- "version": "0.4.8",
3
+ "version": "0.4.9",
4
4
  "description": "Vue component library focused on usability, accessibility and developer experience",
5
5
  "homepage": "https://cck-ui.jackatlas.xyz",
6
6
  "license": "ISC",
package/styles/baseline.css CHANGED
@@ -32,8 +32,12 @@ body,
32
32
 
33
33
  -webkit-font-smoothing: var(--c-webkit-font-smoothing);
34
34
  -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
35
+ }
35
36
 
36
- @media screen and (max-device-width: em(500px)) {
37
- -webkit-text-size-adjust: 100%;
38
- }
37
+ @media screen and (max-device-width: 31.25em) {
38
+
39
+ body,
40
+ :host {
41
+ -webkit-text-size-adjust: 100%
39
42
  }
43
+ }
package/styles/baseline.layer.css CHANGED
@@ -32,9 +32,13 @@ body,
32
32
 
33
33
  -webkit-font-smoothing: var(--c-webkit-font-smoothing);
34
34
  -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
35
+ }
35
36
 
36
- @media screen and (max-device-width: em(500px)) {
37
- -webkit-text-size-adjust: 100%;
38
- }
37
+ @media screen and (max-device-width: 31.25em) {
38
+
39
+ body,
40
+ :host {
41
+ -webkit-text-size-adjust: 100%
39
42
  }
43
+ }
40
44
  }
package/styles/button.css CHANGED
@@ -1,27 +1,27 @@
1
1
  .m_14602a9d {
2
- --button-height-xs: 30px;
3
- --button-height-sm: 36px;
4
- --button-height-md: 42px;
5
- --button-height-lg: 50px;
6
- --button-height-xl: 60px;
7
-
8
- --button-height-compact-xs: 22px;
9
- --button-height-compact-sm: 26px;
10
- --button-height-compact-md: 30px;
11
- --button-height-compact-lg: 34px;
12
- --button-height-compact-xl: 40px;
13
-
14
- --button-padding-x-xs: 14px;
15
- --button-padding-x-sm: 18px;
16
- --button-padding-x-md: 22px;
17
- --button-padding-x-lg: 26px;
18
- --button-padding-x-xl: 32px;
19
-
20
- --button-padding-x-compact-xs: 7px;
21
- --button-padding-x-compact-sm: 8px;
22
- --button-padding-x-compact-md: 10px;
23
- --button-padding-x-compact-lg: 12px;
24
- --button-padding-x-compact-xl: 14px;
2
+ --button-height-xs: calc(1.875rem * var(--c-scale));
3
+ --button-height-sm: calc(2.25rem * var(--c-scale));
4
+ --button-height-md: calc(2.625rem * var(--c-scale));
5
+ --button-height-lg: calc(3.125rem * var(--c-scale));
6
+ --button-height-xl: calc(3.75rem * var(--c-scale));
7
+
8
+ --button-height-compact-xs: calc(1.375rem * var(--c-scale));
9
+ --button-height-compact-sm: calc(1.625rem * var(--c-scale));
10
+ --button-height-compact-md: calc(1.875rem * var(--c-scale));
11
+ --button-height-compact-lg: calc(2.125rem * var(--c-scale));
12
+ --button-height-compact-xl: calc(2.5rem * var(--c-scale));
13
+
14
+ --button-padding-x-xs: calc(0.875rem * var(--c-scale));
15
+ --button-padding-x-sm: calc(1.125rem * var(--c-scale));
16
+ --button-padding-x-md: calc(1.375rem * var(--c-scale));
17
+ --button-padding-x-lg: calc(1.625rem * var(--c-scale));
18
+ --button-padding-x-xl: calc(2rem * var(--c-scale));
19
+
20
+ --button-padding-x-compact-xs: calc(0.4375rem * var(--c-scale));
21
+ --button-padding-x-compact-sm: calc(0.5rem * var(--c-scale));
22
+ --button-padding-x-compact-md: calc(0.625rem * var(--c-scale));
23
+ --button-padding-x-compact-lg: calc(0.75rem * var(--c-scale));
24
+ --button-padding-x-compact-xl: calc(0.875rem * var(--c-scale));
25
25
 
26
26
  --button-height: var(--button-height-sm);
27
27
  --button-padding-x: var(--button-padding-x-sm);
@@ -40,26 +40,27 @@
40
40
  border-radius: var(--button-radius, var(--c-radius-default));
41
41
  font-size: var(--button-fz, var(--c-font-size-sm));
42
42
  background: var(--button-bg, var(--c-color-default));
43
- border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
43
+ border: var(--button-bd, calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border));
44
44
  color: var(--button-color, var(--c-color-default-color));
45
45
  height: var(--button-height, var(--button-height-sm));
46
46
  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
47
47
  vertical-align: middle;
48
+ }
48
49
 
49
- &:where([data-block]) {
50
+ .m_14602a9d:where([data-block]) {
50
51
  display: block;
51
52
  width: 100%;
52
53
  }
53
54
 
54
- &:where([data-with-left-section]) {
55
+ .m_14602a9d:where([data-with-left-section]) {
55
56
  padding-inline-start: calc(var(--button-padding-x) / 1.5);
56
57
  }
57
58
 
58
- &:where([data-with-right-section]) {
59
+ .m_14602a9d:where([data-with-right-section]) {
59
60
  padding-inline-end: calc(var(--button-padding-x) / 1.5);
60
61
  }
61
62
 
62
- &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
63
+ .m_14602a9d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
63
64
  cursor: not-allowed;
64
65
  border-color: transparent;
65
66
  transform: none;
@@ -67,11 +68,11 @@
67
68
  background: var(--c-color-disabled);
68
69
  }
69
70
 
70
- &::before {
71
+ .m_14602a9d::before {
71
72
  content: '';
72
73
  pointer-events: none;
73
74
  position: absolute;
74
- inset: -1px;
75
+ inset: calc(-0.0625rem * var(--c-scale));
75
76
  border-radius: var(--button-radius, var(--c-radius-default));
76
77
  transform: translateY(-100%);
77
78
  opacity: 0;
@@ -79,37 +80,43 @@
79
80
  transition:
80
81
  transform 150ms ease,
81
82
  opacity 100ms ease;
83
+ }
82
84
 
83
- @mixin where-light {
85
+ :where([data-c-color-scheme='light']) .m_14602a9d::before {
84
86
  background-color: rgba(255, 255, 255, 0.15);
85
- }
87
+ }
86
88
 
87
- @mixin where-dark {
89
+ :where([data-c-color-scheme='dark']) .m_14602a9d::before {
88
90
  background-color: rgba(0, 0, 0, 0.15);
89
- }
90
- }
91
+ }
91
92
 
92
- &:where([data-loading]) {
93
+ .m_14602a9d:where([data-loading]) {
93
94
  cursor: not-allowed;
94
95
  transform: none;
96
+ }
95
97
 
96
- &::before {
98
+ .m_14602a9d:where([data-loading])::before {
97
99
  transform: translateY(0);
98
100
  opacity: 1;
99
101
  }
100
102
 
101
- & .m_7725dbfb {
103
+ .m_14602a9d:where([data-loading]) .m_7725dbfb {
102
104
  opacity: 0;
103
105
  transform: translateY(100%);
104
106
  }
105
- }
106
107
 
107
- @mixin hover {
108
- &:where(:not([data-loading], :disabled, [data-disabled])) {
108
+ @media (hover: hover) {
109
+ .m_14602a9d:hover:where(:not([data-loading], :disabled, [data-disabled])) {
110
+ background-color: var(--button-hover, var(--c-color-default-hover));
111
+ color: var(--button-hover-color, var(--button-color));
112
+ }
113
+ }
114
+
115
+ @media (hover: none) {
116
+ .m_14602a9d:active:where(:not([data-loading], :disabled, [data-disabled])) {
109
117
  background-color: var(--button-hover, var(--c-color-default-hover));
110
118
  color: var(--button-hover-color, var(--button-color));
111
119
  }
112
- }
113
120
  }
114
121
 
115
122
  .m_7725dbfb {
@@ -132,24 +139,24 @@
132
139
  opacity: 1;
133
140
  text-box-trim: trim-both;
134
141
  text-box-edge: cap alphabetic;
142
+ }
135
143
 
136
- &:where([data-loading]) {
144
+ .m_774a0c99:where([data-loading]) {
137
145
  opacity: 0.2;
138
146
  }
139
- }
140
147
 
141
148
  .m_462d374a {
142
149
  display: flex;
143
150
  align-items: center;
151
+ }
144
152
 
145
- &:where([data-position='left']) {
153
+ .m_462d374a:where([data-position='left']) {
146
154
  margin-inline-end: var(--c-spacing-xs);
147
155
  }
148
156
 
149
- &:where([data-position='right']) {
157
+ .m_462d374a:where([data-position='right']) {
150
158
  margin-inline-start: var(--c-spacing-xs);
151
159
  }
152
- }
153
160
 
154
161
  .m_72bc570e {
155
162
  position: absolute;
@@ -158,90 +165,82 @@
158
165
  }
159
166
 
160
167
  .m_770b8424 {
161
- --button-border-width: 1px;
168
+ --button-border-width: calc(0.0625rem * var(--c-scale));
162
169
  display: flex;
170
+ }
163
171
 
164
- & :where(.m_14602a9d) {
165
- &:focus {
172
+ .m_770b8424 :where(.m_14602a9d):focus {
166
173
  position: relative;
167
174
  z-index: 1;
168
175
  }
169
- }
170
176
 
171
- &[data-orientation='horizontal'] {
177
+ .m_770b8424[data-orientation='horizontal'] {
172
178
  flex-direction: row;
179
+ }
173
180
 
174
- & .m_14602a9d,
175
- & .m_260a6221 {
176
- &:not(:only-child):first-child {
181
+ .m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):first-child, .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):first-child {
177
182
  border-end-end-radius: 0;
178
183
  border-start-end-radius: 0;
179
184
  border-inline-end-width: calc(var(--button-border-width) / 2);
180
185
  }
181
186
 
182
- &:not(:only-child):last-child {
187
+ .m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):last-child, .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):last-child {
183
188
  border-end-start-radius: 0;
184
189
  border-start-start-radius: 0;
185
190
  border-inline-start-width: calc(var(--button-border-width) / 2);
186
191
  }
187
192
 
188
- &:not(:only-child):not(:first-child):not(:last-child) {
193
+ .m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):not(:first-child):not(:last-child), .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):not(:first-child):not(:last-child) {
189
194
  border-radius: 0;
190
195
  border-inline-width: calc(var(--button-border-width) / 2);
191
196
  }
192
- }
193
- }
194
197
 
195
- &[data-orientation='vertical'] {
198
+ .m_770b8424[data-orientation='vertical'] {
196
199
  flex-direction: column;
200
+ }
197
201
 
198
- & .m_14602a9d,
199
- & .m_260a6221 {
200
- &:not(:only-child):first-child {
202
+ .m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):first-child, .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):first-child {
201
203
  border-end-start-radius: 0;
202
204
  border-end-end-radius: 0;
203
205
  border-bottom-width: calc(var(--button-border-width) / 2);
204
206
  }
205
207
 
206
- &:not(:only-child):last-child {
208
+ .m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):last-child, .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):last-child {
207
209
  border-start-start-radius: 0;
208
210
  border-start-end-radius: 0;
209
211
  border-top-width: calc(var(--button-border-width) / 2);
210
212
  }
211
213
 
212
- &:not(:only-child):not(:first-child):not(:last-child) {
214
+ .m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):not(:first-child):not(:last-child), .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):not(:first-child):not(:last-child) {
213
215
  border-radius: 0;
214
216
  border-bottom-width: calc(var(--button-border-width) / 2);
215
217
  border-top-width: calc(var(--button-border-width) / 2);
216
218
  }
217
- }
218
- }
219
- }
220
219
 
221
220
  .m_260a6221 {
222
- --section-height-xs: 30px;
223
- --section-height-sm: 36px;
224
- --section-height-md: 42px;
225
- --section-height-lg: 50px;
226
- --section-height-xl: 60px;
227
-
228
- --section-height-compact-xs: 22px;
229
- --section-height-compact-sm: 26px;
230
- --section-height-compact-md: 30px;
231
- --section-height-compact-lg: 34px;
232
- --section-height-compact-xl: 40px;
233
-
234
- --section-padding-x-xs: 14px;
235
- --section-padding-x-sm: 18px;
236
- --section-padding-x-md: 22px;
237
- --section-padding-x-lg: 26px;
238
- --section-padding-x-xl: 32px;
239
-
240
- --section-padding-x-compact-xs: 7px;
241
- --section-padding-x-compact-sm: 8px;
242
- --section-padding-x-compact-md: 10px;
243
- --section-padding-x-compact-lg: 12px;
244
- --section-padding-x-compact-xl: 14px;
221
+ --section-height-xs: calc(1.875rem * var(--c-scale));
222
+ --section-height-sm: calc(2.25rem * var(--c-scale));
223
+ --section-height-md: calc(2.625rem * var(--c-scale));
224
+ --section-height-lg: calc(3.125rem * var(--c-scale));
225
+ --section-height-xl: calc(3.75rem * var(--c-scale));
226
+
227
+ --section-height-compact-xs: calc(1.375rem * var(--c-scale));
228
+ --section-height-compact-sm: calc(1.625rem * var(--c-scale));
229
+ --section-height-compact-md: calc(1.875rem * var(--c-scale));
230
+ --section-height-compact-lg: calc(2.125rem * var(--c-scale));
231
+ --section-height-compact-xl: calc(2.5rem * var(--c-scale));
232
+
233
+ --section-padding-x-xs: calc(0.875rem * var(--c-scale));
234
+ --section-padding-x-sm: calc(1.125rem * var(--c-scale));
235
+ --section-padding-x-md: calc(1.375rem * var(--c-scale));
236
+ --section-padding-x-lg: calc(1.625rem * var(--c-scale));
237
+ --section-padding-x-xl: calc(2rem * var(--c-scale));
238
+
239
+ --section-padding-x-compact-xs: calc(0.4375rem * var(--c-scale));
240
+ --section-padding-x-compact-sm: calc(0.5rem * var(--c-scale));
241
+ --section-padding-x-compact-md: calc(0.625rem * var(--c-scale));
242
+ --section-padding-x-compact-lg: calc(0.75rem * var(--c-scale));
243
+ --section-padding-x-compact-xl: calc(0.875rem * var(--c-scale));
245
244
 
246
245
  --section-height: var(--section-height-sm);
247
246
  --section-padding-x: var(--section-padding-x-sm);
@@ -252,7 +251,7 @@
252
251
  border-radius: var(--section-radius, var(--c-radius-default));
253
252
  font-size: var(--section-fz, var(--c-font-size-sm));
254
253
  background: var(--section-bg, var(--c-primary-color-filled));
255
- border: var(--section-bd, rem(1px) solid transparent);
254
+ border: var(--section-bd, calc(0.0625rem * var(--c-scale)) solid transparent);
256
255
  height: var(--section-height, var(--section-height-sm));
257
256
  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
258
257
  vertical-align: middle;
package/styles/button.layer.css CHANGED
@@ -1,27 +1,27 @@
1
1
  @layer cck {.m_14602a9d {
2
- --button-height-xs: 30px;
3
- --button-height-sm: 36px;
4
- --button-height-md: 42px;
5
- --button-height-lg: 50px;
6
- --button-height-xl: 60px;
7
-
8
- --button-height-compact-xs: 22px;
9
- --button-height-compact-sm: 26px;
10
- --button-height-compact-md: 30px;
11
- --button-height-compact-lg: 34px;
12
- --button-height-compact-xl: 40px;
13
-
14
- --button-padding-x-xs: 14px;
15
- --button-padding-x-sm: 18px;
16
- --button-padding-x-md: 22px;
17
- --button-padding-x-lg: 26px;
18
- --button-padding-x-xl: 32px;
19
-
20
- --button-padding-x-compact-xs: 7px;
21
- --button-padding-x-compact-sm: 8px;
22
- --button-padding-x-compact-md: 10px;
23
- --button-padding-x-compact-lg: 12px;
24
- --button-padding-x-compact-xl: 14px;
2
+ --button-height-xs: calc(1.875rem * var(--c-scale));
3
+ --button-height-sm: calc(2.25rem * var(--c-scale));
4
+ --button-height-md: calc(2.625rem * var(--c-scale));
5
+ --button-height-lg: calc(3.125rem * var(--c-scale));
6
+ --button-height-xl: calc(3.75rem * var(--c-scale));
7
+
8
+ --button-height-compact-xs: calc(1.375rem * var(--c-scale));
9
+ --button-height-compact-sm: calc(1.625rem * var(--c-scale));
10
+ --button-height-compact-md: calc(1.875rem * var(--c-scale));
11
+ --button-height-compact-lg: calc(2.125rem * var(--c-scale));
12
+ --button-height-compact-xl: calc(2.5rem * var(--c-scale));
13
+
14
+ --button-padding-x-xs: calc(0.875rem * var(--c-scale));
15
+ --button-padding-x-sm: calc(1.125rem * var(--c-scale));
16
+ --button-padding-x-md: calc(1.375rem * var(--c-scale));
17
+ --button-padding-x-lg: calc(1.625rem * var(--c-scale));
18
+ --button-padding-x-xl: calc(2rem * var(--c-scale));
19
+
20
+ --button-padding-x-compact-xs: calc(0.4375rem * var(--c-scale));
21
+ --button-padding-x-compact-sm: calc(0.5rem * var(--c-scale));
22
+ --button-padding-x-compact-md: calc(0.625rem * var(--c-scale));
23
+ --button-padding-x-compact-lg: calc(0.75rem * var(--c-scale));
24
+ --button-padding-x-compact-xl: calc(0.875rem * var(--c-scale));
25
25
 
26
26
  --button-height: var(--button-height-sm);
27
27
  --button-padding-x: var(--button-padding-x-sm);
@@ -40,26 +40,27 @@
40
40
  border-radius: var(--button-radius, var(--c-radius-default));
41
41
  font-size: var(--button-fz, var(--c-font-size-sm));
42
42
  background: var(--button-bg, var(--c-color-default));
43
- border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
43
+ border: var(--button-bd, calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border));
44
44
  color: var(--button-color, var(--c-color-default-color));
45
45
  height: var(--button-height, var(--button-height-sm));
46
46
  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
47
47
  vertical-align: middle;
48
+ }
48
49
 
49
- &:where([data-block]) {
50
+ .m_14602a9d:where([data-block]) {
50
51
  display: block;
51
52
  width: 100%;
52
53
  }
53
54
 
54
- &:where([data-with-left-section]) {
55
+ .m_14602a9d:where([data-with-left-section]) {
55
56
  padding-inline-start: calc(var(--button-padding-x) / 1.5);
56
57
  }
57
58
 
58
- &:where([data-with-right-section]) {
59
+ .m_14602a9d:where([data-with-right-section]) {
59
60
  padding-inline-end: calc(var(--button-padding-x) / 1.5);
60
61
  }
61
62
 
62
- &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
63
+ .m_14602a9d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
63
64
  cursor: not-allowed;
64
65
  border-color: transparent;
65
66
  transform: none;
@@ -67,11 +68,11 @@
67
68
  background: var(--c-color-disabled);
68
69
  }
69
70
 
70
- &::before {
71
+ .m_14602a9d::before {
71
72
  content: '';
72
73
  pointer-events: none;
73
74
  position: absolute;
74
- inset: -1px;
75
+ inset: calc(-0.0625rem * var(--c-scale));
75
76
  border-radius: var(--button-radius, var(--c-radius-default));
76
77
  transform: translateY(-100%);
77
78
  opacity: 0;
@@ -79,37 +80,43 @@
79
80
  transition:
80
81
  transform 150ms ease,
81
82
  opacity 100ms ease;
83
+ }
82
84
 
83
- @mixin where-light {
85
+ :where([data-c-color-scheme='light']) .m_14602a9d::before {
84
86
  background-color: rgba(255, 255, 255, 0.15);
85
- }
87
+ }
86
88
 
87
- @mixin where-dark {
89
+ :where([data-c-color-scheme='dark']) .m_14602a9d::before {
88
90
  background-color: rgba(0, 0, 0, 0.15);
89
- }
90
- }
91
+ }
91
92
 
92
- &:where([data-loading]) {
93
+ .m_14602a9d:where([data-loading]) {
93
94
  cursor: not-allowed;
94
95
  transform: none;
96
+ }
95
97
 
96
- &::before {
98
+ .m_14602a9d:where([data-loading])::before {
97
99
  transform: translateY(0);
98
100
  opacity: 1;
99
101
  }
100
102
 
101
- & .m_7725dbfb {
103
+ .m_14602a9d:where([data-loading]) .m_7725dbfb {
102
104
  opacity: 0;
103
105
  transform: translateY(100%);
104
106
  }
105
- }
106
107
 
107
- @mixin hover {
108
- &:where(:not([data-loading], :disabled, [data-disabled])) {
108
+ @media (hover: hover) {
109
+ .m_14602a9d:hover:where(:not([data-loading], :disabled, [data-disabled])) {
110
+ background-color: var(--button-hover, var(--c-color-default-hover));
111
+ color: var(--button-hover-color, var(--button-color));
112
+ }
113
+ }
114
+
115
+ @media (hover: none) {
116
+ .m_14602a9d:active:where(:not([data-loading], :disabled, [data-disabled])) {
109
117
  background-color: var(--button-hover, var(--c-color-default-hover));
110
118
  color: var(--button-hover-color, var(--button-color));
111
119
  }
112
- }
113
120
  }
114
121
 
115
122
  .m_7725dbfb {
@@ -132,24 +139,24 @@
132
139
  opacity: 1;
133
140
  text-box-trim: trim-both;
134
141
  text-box-edge: cap alphabetic;
142
+ }
135
143
 
136
- &:where([data-loading]) {
144
+ .m_774a0c99:where([data-loading]) {
137
145
  opacity: 0.2;
138
146
  }
139
- }
140
147
 
141
148
  .m_462d374a {
142
149
  display: flex;
143
150
  align-items: center;
151
+ }
144
152
 
145
- &:where([data-position='left']) {
153
+ .m_462d374a:where([data-position='left']) {
146
154
  margin-inline-end: var(--c-spacing-xs);
147
155
  }
148
156
 
149
- &:where([data-position='right']) {
157
+ .m_462d374a:where([data-position='right']) {
150
158
  margin-inline-start: var(--c-spacing-xs);
151
159
  }
152
- }
153
160
 
154
161
  .m_72bc570e {
155
162
  position: absolute;
@@ -158,90 +165,82 @@
158
165
  }
159
166
 
160
167
  .m_770b8424 {
161
- --button-border-width: 1px;
168
+ --button-border-width: calc(0.0625rem * var(--c-scale));
162
169
  display: flex;
170
+ }
163
171
 
164
- & :where(.m_14602a9d) {
165
- &:focus {
172
+ .m_770b8424 :where(.m_14602a9d):focus {
166
173
  position: relative;
167
174
  z-index: 1;
168
175
  }
169
- }
170
176
 
171
- &[data-orientation='horizontal'] {
177
+ .m_770b8424[data-orientation='horizontal'] {
172
178
  flex-direction: row;
179
+ }
173
180
 
174
- & .m_14602a9d,
175
- & .m_260a6221 {
176
- &:not(:only-child):first-child {
181
+ .m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):first-child, .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):first-child {
177
182
  border-end-end-radius: 0;
178
183
  border-start-end-radius: 0;
179
184
  border-inline-end-width: calc(var(--button-border-width) / 2);
180
185
  }
181
186
 
182
- &:not(:only-child):last-child {
187
+ .m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):last-child, .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):last-child {
183
188
  border-end-start-radius: 0;
184
189
  border-start-start-radius: 0;
185
190
  border-inline-start-width: calc(var(--button-border-width) / 2);
186
191
  }
187
192
 
188
- &:not(:only-child):not(:first-child):not(:last-child) {
193
+ .m_770b8424[data-orientation='horizontal'] .m_14602a9d:not(:only-child):not(:first-child):not(:last-child), .m_770b8424[data-orientation='horizontal'] .m_260a6221:not(:only-child):not(:first-child):not(:last-child) {
189
194
  border-radius: 0;
190
195
  border-inline-width: calc(var(--button-border-width) / 2);
191
196
  }
192
- }
193
- }
194
197
 
195
- &[data-orientation='vertical'] {
198
+ .m_770b8424[data-orientation='vertical'] {
196
199
  flex-direction: column;
200
+ }
197
201
 
198
- & .m_14602a9d,
199
- & .m_260a6221 {
200
- &:not(:only-child):first-child {
202
+ .m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):first-child, .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):first-child {
201
203
  border-end-start-radius: 0;
202
204
  border-end-end-radius: 0;
203
205
  border-bottom-width: calc(var(--button-border-width) / 2);
204
206
  }
205
207
 
206
- &:not(:only-child):last-child {
208
+ .m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):last-child, .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):last-child {
207
209
  border-start-start-radius: 0;
208
210
  border-start-end-radius: 0;
209
211
  border-top-width: calc(var(--button-border-width) / 2);
210
212
  }
211
213
 
212
- &:not(:only-child):not(:first-child):not(:last-child) {
214
+ .m_770b8424[data-orientation='vertical'] .m_14602a9d:not(:only-child):not(:first-child):not(:last-child), .m_770b8424[data-orientation='vertical'] .m_260a6221:not(:only-child):not(:first-child):not(:last-child) {
213
215
  border-radius: 0;
214
216
  border-bottom-width: calc(var(--button-border-width) / 2);
215
217
  border-top-width: calc(var(--button-border-width) / 2);
216
218
  }
217
- }
218
- }
219
- }
220
219
 
221
220
  .m_260a6221 {
222
- --section-height-xs: 30px;
223
- --section-height-sm: 36px;
224
- --section-height-md: 42px;
225
- --section-height-lg: 50px;
226
- --section-height-xl: 60px;
227
-
228
- --section-height-compact-xs: 22px;
229
- --section-height-compact-sm: 26px;
230
- --section-height-compact-md: 30px;
231
- --section-height-compact-lg: 34px;
232
- --section-height-compact-xl: 40px;
233
-
234
- --section-padding-x-xs: 14px;
235
- --section-padding-x-sm: 18px;
236
- --section-padding-x-md: 22px;
237
- --section-padding-x-lg: 26px;
238
- --section-padding-x-xl: 32px;
239
-
240
- --section-padding-x-compact-xs: 7px;
241
- --section-padding-x-compact-sm: 8px;
242
- --section-padding-x-compact-md: 10px;
243
- --section-padding-x-compact-lg: 12px;
244
- --section-padding-x-compact-xl: 14px;
221
+ --section-height-xs: calc(1.875rem * var(--c-scale));
222
+ --section-height-sm: calc(2.25rem * var(--c-scale));
223
+ --section-height-md: calc(2.625rem * var(--c-scale));
224
+ --section-height-lg: calc(3.125rem * var(--c-scale));
225
+ --section-height-xl: calc(3.75rem * var(--c-scale));
226
+
227
+ --section-height-compact-xs: calc(1.375rem * var(--c-scale));
228
+ --section-height-compact-sm: calc(1.625rem * var(--c-scale));
229
+ --section-height-compact-md: calc(1.875rem * var(--c-scale));
230
+ --section-height-compact-lg: calc(2.125rem * var(--c-scale));
231
+ --section-height-compact-xl: calc(2.5rem * var(--c-scale));
232
+
233
+ --section-padding-x-xs: calc(0.875rem * var(--c-scale));
234
+ --section-padding-x-sm: calc(1.125rem * var(--c-scale));
235
+ --section-padding-x-md: calc(1.375rem * var(--c-scale));
236
+ --section-padding-x-lg: calc(1.625rem * var(--c-scale));
237
+ --section-padding-x-xl: calc(2rem * var(--c-scale));
238
+
239
+ --section-padding-x-compact-xs: calc(0.4375rem * var(--c-scale));
240
+ --section-padding-x-compact-sm: calc(0.5rem * var(--c-scale));
241
+ --section-padding-x-compact-md: calc(0.625rem * var(--c-scale));
242
+ --section-padding-x-compact-lg: calc(0.75rem * var(--c-scale));
243
+ --section-padding-x-compact-xl: calc(0.875rem * var(--c-scale));
245
244
 
246
245
  --section-height: var(--section-height-sm);
247
246
  --section-padding-x: var(--section-padding-x-sm);
@@ -252,7 +251,7 @@
252
251
  border-radius: var(--section-radius, var(--c-radius-default));
253
252
  font-size: var(--section-fz, var(--c-font-size-sm));
254
253
  background: var(--section-bg, var(--c-primary-color-filled));
255
- border: var(--section-bd, rem(1px) solid transparent);
254
+ border: var(--section-bd, calc(0.0625rem * var(--c-scale)) solid transparent);
256
255
  height: var(--section-height, var(--section-height-sm));
257
256
  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
258
257
  vertical-align: middle;