@charcoal-ui/react 5.8.0-beta.0 → 5.8.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 (31) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.css +611 -591
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/layered.css +611 -591
  8. package/dist/layered.css.map +1 -1
  9. package/package.json +5 -5
  10. package/src/components/Button/index.css +120 -105
  11. package/src/components/Checkbox/index.css +7 -7
  12. package/src/components/Clickable/index.css +11 -11
  13. package/src/components/DropdownSelector/index.css +33 -33
  14. package/src/components/FieldLabel/index.css +6 -6
  15. package/src/components/HintText/index.css +7 -5
  16. package/src/components/IconButton/index.css +89 -87
  17. package/src/components/LoadingSpinner/index.css +9 -11
  18. package/src/components/Modal/index.css +5 -5
  19. package/src/components/MultiSelect/__snapshots__/index.css.snap +3 -3
  20. package/src/components/MultiSelect/index.css +82 -74
  21. package/src/components/Pagination/__snapshots__/index.css.snap +10 -15
  22. package/src/components/Pagination/index.css +80 -79
  23. package/src/components/Radio/index.css +4 -4
  24. package/src/components/SegmentedControl/index.css +25 -23
  25. package/src/components/Switch/index.css +7 -7
  26. package/src/components/TagItem/__snapshots__/index.css.snap +0 -2
  27. package/src/components/TagItem/index.css +71 -80
  28. package/src/components/TextArea/index.css +23 -24
  29. package/src/components/TextEllipsis/index.css +10 -10
  30. package/src/components/TextField/index.css +21 -19
  31. package/src/index.ts +4 -0
package/dist/layered.css CHANGED
@@ -31,112 +31,127 @@
31
31
  0.2s background-color,
32
32
  0.2s box-shadow;
33
33
  height: 40px;
34
+ }
34
35
 
35
- &:disabled,
36
- &[aria-disabled]:not([aria-disabled='false']) {
37
- cursor: default;
38
- opacity: 0.32;
39
- }
36
+ .charcoal-button:disabled,
37
+ .charcoal-button[aria-disabled]:not([aria-disabled='false']) {
38
+ cursor: default;
39
+ opacity: 0.32;
40
+ }
40
41
 
41
- &:not(:disabled):not([aria-disabled]):focus-visible,
42
- &[aria-disabled='false']:focus-visible {
43
- outline: none;
44
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
45
- }
42
+ .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,
43
+ .charcoal-button[aria-disabled='false']:focus-visible {
44
+ outline: none;
45
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
46
+ }
46
47
 
47
- &:not(:disabled):not([aria-disabled]):hover,
48
- &[aria-disabled='false']:hover {
49
- color: var(--charcoal-text2-hover);
50
- background-color: var(--charcoal-surface3-hover);
51
- }
48
+ .charcoal-button:not(:disabled):not([aria-disabled]):hover,
49
+ .charcoal-button[aria-disabled='false']:hover {
50
+ color: var(--charcoal-text2-hover);
51
+ background-color: var(--charcoal-surface3-hover);
52
+ }
52
53
 
53
- &:not(:disabled):not([aria-disabled]):active,
54
- &[aria-disabled='false']:active,
55
- &[data-active='true'] {
56
- color: var(--charcoal-text2-press);
57
- background-color: var(--charcoal-surface3-press);
58
- }
54
+ .charcoal-button:not(:disabled):not([aria-disabled]):active,
55
+ .charcoal-button[aria-disabled='false']:active,
56
+ .charcoal-button[data-active='true'] {
57
+ color: var(--charcoal-text2-press);
58
+ background-color: var(--charcoal-surface3-press);
59
+ }
59
60
 
60
- &[data-variant='Primary'] {
61
- color: var(--charcoal-text5);
62
- background-color: var(--charcoal-brand);
63
-
64
- &:hover:not(:disabled):not([aria-disabled]),
65
- &:hover[aria-disabled='false'] {
66
- color: var(--charcoal-text5-hover);
67
- background-color: var(--charcoal-brand-hover);
68
- }
69
-
70
- &:active:not(:disabled):not([aria-disabled]),
71
- &:active[aria-disabled='false'],
72
- &[data-active='true'] {
73
- color: var(--charcoal-text5-press);
74
- background-color: var(--charcoal-brand-press);
75
- }
76
- }
61
+ .charcoal-button[data-variant='Primary'] {
62
+ color: var(--charcoal-text5);
63
+ background-color: var(--charcoal-brand);
64
+ }
77
65
 
78
- &[data-variant='Overlay'] {
79
- color: var(--charcoal-text5);
80
- background-color: var(--charcoal-surface4);
81
-
82
- &:hover:not(:disabled):not([aria-disabled]),
83
- &:hover[aria-disabled='false'] {
84
- color: var(--charcoal-text5-hover);
85
- background-color: var(--charcoal-surface4-hover);
86
- }
87
-
88
- &:active:not(:disabled):not([aria-disabled]),
89
- &:active[aria-disabled='false'],
90
- &[data-active='true'] {
91
- color: var(--charcoal-text5-press);
92
- background-color: var(--charcoal-surface4-press);
93
- }
94
- }
66
+ .charcoal-button[data-variant='Primary']:hover:not(:disabled):not(
67
+ [aria-disabled]
68
+ ),
69
+ .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
70
+ color: var(--charcoal-text5-hover);
71
+ background-color: var(--charcoal-brand-hover);
72
+ }
95
73
 
96
- &[data-variant='Navigation'] {
97
- color: var(--charcoal-text5);
98
- background-color: var(--charcoal-surface6);
99
-
100
- &:hover:not(:disabled):not([aria-disabled]),
101
- &:hover[aria-disabled='false'] {
102
- color: var(--charcoal-text5-hover);
103
- background-color: var(--charcoal-surface6-hover);
104
- }
105
-
106
- &:active:not(:disabled):not([aria-disabled]),
107
- &:active[aria-disabled='false'],
108
- &[data-active='true'] {
109
- color: var(--charcoal-text5-press);
110
- background-color: var(--charcoal-surface6-press);
111
- }
112
- }
74
+ .charcoal-button[data-variant='Primary']:active:not(:disabled):not(
75
+ [aria-disabled]
76
+ ),
77
+ .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
78
+ .charcoal-button[data-variant='Primary'][data-active='true'] {
79
+ color: var(--charcoal-text5-press);
80
+ background-color: var(--charcoal-brand-press);
81
+ }
113
82
 
114
- &[data-variant='Danger'] {
115
- color: var(--charcoal-text5);
116
- background-color: var(--charcoal-assertive);
117
-
118
- &:hover:not(:disabled):not([aria-disabled]),
119
- &:hover[aria-disabled='false'] {
120
- color: var(--charcoal-text5-hover);
121
- background-color: var(--charcoal-assertive-hover);
122
- }
123
-
124
- &:active:not(:disabled):not([aria-disabled]),
125
- &:active[aria-disabled='false'],
126
- &[data-active='true'] {
127
- color: var(--charcoal-text5-press);
128
- background-color: var(--charcoal-assertive-press);
129
- }
130
- }
83
+ .charcoal-button[data-variant='Overlay'] {
84
+ color: var(--charcoal-text5);
85
+ background-color: var(--charcoal-surface4);
86
+ }
131
87
 
132
- &[data-size='S'] {
133
- padding: 0 16px;
134
- height: 32px;
135
- }
88
+ .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not(
89
+ [aria-disabled]
90
+ ),
91
+ .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
92
+ color: var(--charcoal-text5-hover);
93
+ background-color: var(--charcoal-surface4-hover);
94
+ }
136
95
 
137
- &[data-full-width='true'] {
138
- width: 100%;
139
- }
96
+ .charcoal-button[data-variant='Overlay']:active:not(:disabled):not(
97
+ [aria-disabled]
98
+ ),
99
+ .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
100
+ .charcoal-button[data-variant='Overlay'][data-active='true'] {
101
+ color: var(--charcoal-text5-press);
102
+ background-color: var(--charcoal-surface4-press);
103
+ }
104
+
105
+ .charcoal-button[data-variant='Navigation'] {
106
+ color: var(--charcoal-text5);
107
+ background-color: var(--charcoal-surface6);
108
+ }
109
+
110
+ .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not(
111
+ [aria-disabled]
112
+ ),
113
+ .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
114
+ color: var(--charcoal-text5-hover);
115
+ background-color: var(--charcoal-surface6-hover);
116
+ }
117
+
118
+ .charcoal-button[data-variant='Navigation']:active:not(:disabled):not(
119
+ [aria-disabled]
120
+ ),
121
+ .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
122
+ .charcoal-button[data-variant='Navigation'][data-active='true'] {
123
+ color: var(--charcoal-text5-press);
124
+ background-color: var(--charcoal-surface6-press);
125
+ }
126
+
127
+ .charcoal-button[data-variant='Danger'] {
128
+ color: var(--charcoal-text5);
129
+ background-color: var(--charcoal-assertive);
130
+ }
131
+ .charcoal-button[data-variant='Danger']:hover:not(:disabled):not(
132
+ [aria-disabled]
133
+ ),
134
+ .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
135
+ color: var(--charcoal-text5-hover);
136
+ background-color: var(--charcoal-assertive-hover);
137
+ }
138
+
139
+ .charcoal-button[data-variant='Danger']:active:not(:disabled):not(
140
+ [aria-disabled]
141
+ ),
142
+ .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
143
+ .charcoal-button[data-variant='Danger'][data-active='true'] {
144
+ color: var(--charcoal-text5-press);
145
+ background-color: var(--charcoal-assertive-press);
146
+ }
147
+
148
+ .charcoal-button[data-size='S'] {
149
+ padding: 0 16px;
150
+ height: 32px;
151
+ }
152
+
153
+ .charcoal-button[data-full-width='true'] {
154
+ width: 100%;
140
155
  }
141
156
 
142
157
  .charcoal-clickable {
@@ -165,20 +180,20 @@
165
180
 
166
181
  /* Remove the inheritance of text transform in Firefox. */
167
182
  text-transform: none;
183
+ }
168
184
 
169
- &:disabled,
170
- &[aria-disabled]:not([aria-disabled='false']) {
171
- cursor: default;
172
- }
185
+ .charcoal-clickable:disabled,
186
+ .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
187
+ cursor: default;
188
+ }
173
189
 
174
- &:focus {
175
- outline: none;
176
- }
190
+ .charcoal-clickable:focus {
191
+ outline: none;
192
+ }
177
193
 
178
- &::-moz-focus-inner {
179
- border-style: none;
180
- padding: 0;
181
- }
194
+ .charcoal-clickable::-moz-focus-inner {
195
+ border-style: none;
196
+ padding: 0;
182
197
  }
183
198
 
184
199
  .charcoal-icon-button {
@@ -206,98 +221,100 @@
206
221
  transition:
207
222
  0.2s background-color,
208
223
  0.2s box-shadow;
224
+ }
209
225
 
210
- &:disabled,
211
- &[aria-disabled]:not([aria-disabled='false']) {
212
- cursor: default;
213
- opacity: 0.32;
214
- }
215
-
216
- &:focus {
217
- outline: none;
218
- }
219
-
220
- &::-moz-focus-inner {
221
- border-style: none;
222
- padding: 0;
223
- }
224
-
225
- &[data-size='XS'] {
226
- width: 20px;
227
- height: 20px;
228
- }
229
-
230
- &[data-size='S'] {
231
- width: 32px;
232
- height: 32px;
233
- }
234
-
235
- &[data-size='M'] {
236
- width: 40px;
237
- height: 40px;
238
- }
239
-
240
- &[data-variant='Default'] {
241
- color: var(--charcoal-text3);
242
- background-color: var(--charcoal-transparent);
243
-
244
- &[data-active='true']:not(:disabled):not([aria-disabled]),
245
- &[data-active='true'][aria-disabled='false'] {
246
- color: var(--charcoal-text3-press);
247
- background-color: var(--charcoal-transparent-press);
248
- }
249
-
250
- &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
251
- &[data-active='false'][aria-disabled='false']:hover {
252
- color: var(--charcoal-text3-hover);
253
- background-color: var(--charcoal-transparent-hover);
254
- }
255
-
256
- &[data-active='false']:not(:disabled):not([aria-disabled]):active,
257
- &[data-active='false'][aria-disabled='false']:active {
258
- color: var(--charcoal-text3-press);
259
- background-color: var(--charcoal-transparent-press);
260
- }
261
- }
226
+ .charcoal-icon-button:disabled,
227
+ .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
228
+ cursor: default;
229
+ opacity: 0.32;
230
+ }
231
+ .charcoal-icon-button:focus {
232
+ outline: none;
233
+ }
234
+ .charcoal-icon-button::-moz-focus-inner {
235
+ border-style: none;
236
+ padding: 0;
237
+ }
262
238
 
263
- &[data-variant='Overlay'] {
264
- color: var(--charcoal-text5);
265
- background-color: var(--charcoal-surface4);
266
-
267
- &[data-active='true']:not(:disabled):not([aria-disabled]),
268
- &[data-active='true'][aria-disabled='false'] {
269
- color: var(--charcoal-text5-press);
270
- background-color: var(--charcoal-surface4-press);
271
- }
272
-
273
- &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
274
- &[data-active='false'][aria-disabled='false']:hover {
275
- color: var(--charcoal-text5-hover);
276
- background-color: var(--charcoal-surface4-hover);
277
- }
278
-
279
- &[data-active='false']:not(:disabled):not([aria-disabled]):active,
280
- &[data-active='false'][aria-disabled='false']:active {
281
- color: var(--charcoal-text5-press);
282
- background-color: var(--charcoal-surface4-press);
283
- }
284
- }
239
+ .charcoal-icon-button[data-size='XS'] {
240
+ width: 20px;
241
+ height: 20px;
242
+ }
243
+ .charcoal-icon-button[data-size='S'] {
244
+ width: 32px;
245
+ height: 32px;
246
+ }
247
+ .charcoal-icon-button[data-size='M'] {
248
+ width: 40px;
249
+ height: 40px;
250
+ }
285
251
 
286
- &:not(:disabled):not([aria-disabled]):focus,
287
- &[aria-disabled='false']:focus {
288
- outline: none;
289
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
290
- }
252
+ .charcoal-icon-button[data-variant='Default'] {
253
+ color: var(--charcoal-text3);
254
+ background-color: var(--charcoal-transparent);
255
+ }
256
+ .charcoal-icon-button[data-variant='Default'][data-active='true']:not(
257
+ :disabled
258
+ ):not([aria-disabled]),
259
+ .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
260
+ color: var(--charcoal-text3-press);
261
+ background-color: var(--charcoal-transparent-press);
262
+ }
263
+ .charcoal-icon-button[data-variant='Default'][data-active='false']:not(
264
+ :disabled
265
+ ):not([aria-disabled]):hover,
266
+ .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
267
+ color: var(--charcoal-text3-hover);
268
+ background-color: var(--charcoal-transparent-hover);
269
+ }
270
+ .charcoal-icon-button[data-variant='Default'][data-active='false']:not(
271
+ :disabled
272
+ ):not([aria-disabled]):active,
273
+ .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
274
+ color: var(--charcoal-text3-press);
275
+ background-color: var(--charcoal-transparent-press);
276
+ }
291
277
 
292
- &:not(:disabled):not([aria-disabled]):focus-visible,
293
- &[aria-disabled='false']:focus-visible {
294
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
295
- }
278
+ .charcoal-icon-button[data-variant='Overlay'] {
279
+ color: var(--charcoal-text5);
280
+ background-color: var(--charcoal-surface4);
281
+ }
282
+ .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(
283
+ :disabled
284
+ ):not([aria-disabled]),
285
+ .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
286
+ color: var(--charcoal-text5-press);
287
+ background-color: var(--charcoal-surface4-press);
288
+ }
289
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
290
+ :disabled
291
+ ):not([aria-disabled]):hover,
292
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
293
+ color: var(--charcoal-text5-hover);
294
+ background-color: var(--charcoal-surface4-hover);
295
+ }
296
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
297
+ :disabled
298
+ ):not([aria-disabled]):active,
299
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
300
+ color: var(--charcoal-text5-press);
301
+ background-color: var(--charcoal-surface4-press);
302
+ }
296
303
 
297
- &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
298
- &[aria-disabled='false']:focus:not(:focus-visible) {
299
- box-shadow: none;
300
- }
304
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
305
+ .charcoal-icon-button[aria-disabled='false']:focus {
306
+ outline: none;
307
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
308
+ }
309
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
310
+ .charcoal-icon-button[aria-disabled='false']:focus-visible {
311
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
312
+ }
313
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(
314
+ :focus-visible
315
+ ),
316
+ .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {
317
+ box-shadow: none;
301
318
  }
302
319
 
303
320
  .charcoal-radio__label {
@@ -306,11 +323,11 @@
306
323
  grid-gap: 4px;
307
324
  align-items: center;
308
325
  cursor: pointer;
326
+ }
309
327
 
310
- &[aria-disabled]:not([aria-disabled='false']) {
311
- opacity: 0.32;
312
- cursor: default;
313
- }
328
+ .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
329
+ opacity: 0.32;
330
+ cursor: default;
314
331
  }
315
332
 
316
333
  .charcoal-radio__label_div {
@@ -419,12 +436,12 @@
419
436
  position: relative;
420
437
  cursor: pointer;
421
438
  gap: 4px;
439
+ }
422
440
 
423
- &:disabled,
424
- &[aria-disabled]:not([aria-disabled='false']) {
425
- opacity: 0.32;
426
- cursor: default;
427
- }
441
+ .charcoal-multi-select:disabled,
442
+ .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
443
+ opacity: 0.32;
444
+ cursor: default;
428
445
  }
429
446
 
430
447
  .charcoal-multi-select-label {
@@ -433,22 +450,22 @@
433
450
  font-size: 14px;
434
451
  line-height: 22px;
435
452
  color: var(--charcoal-text2);
453
+ }
436
454
 
437
- &::before {
438
- display: block;
439
- width: 0;
440
- height: 0;
441
- content: '';
442
- margin-top: -4px;
443
- }
455
+ .charcoal-multi-select-label::before {
456
+ display: block;
457
+ width: 0;
458
+ height: 0;
459
+ content: '';
460
+ margin-top: -4px;
461
+ }
444
462
 
445
- &::after {
446
- display: block;
447
- width: 0;
448
- height: 0;
449
- content: '';
450
- margin-bottom: -4px;
451
- }
463
+ .charcoal-multi-select-label::after {
464
+ display: block;
465
+ width: 0;
466
+ height: 0;
467
+ content: '';
468
+ margin-bottom: -4px;
452
469
  }
453
470
 
454
471
  .charcoal-multi-select-input[type='checkbox'] {
@@ -462,57 +479,65 @@
462
479
  transition:
463
480
  0.2s background-color,
464
481
  0.2s box-shadow;
482
+ }
465
483
 
466
- &:checked {
467
- background-color: var(--charcoal-brand);
468
- }
484
+ .charcoal-multi-select-input[type='checkbox']:checked {
485
+ background-color: var(--charcoal-brand);
486
+ }
469
487
 
470
- &:focus {
471
- outline: none;
472
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
473
- }
488
+ .charcoal-multi-select-input[type='checkbox']:focus {
489
+ outline: none;
490
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
491
+ }
474
492
 
475
- &:focus-visible {
476
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
477
- }
493
+ .charcoal-multi-select-input[type='checkbox']:focus-visible {
494
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
495
+ }
478
496
 
479
- &:focus:not(:focus-visible) {
480
- box-shadow: none;
481
- }
497
+ .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
498
+ box-shadow: none;
499
+ }
482
500
 
483
- &:hover:not(:disabled):not([aria-disabled]),
484
- &:hover[aria-disabled='false'] {
485
- background-color: var(--charcoal-text3-hover);
486
- }
501
+ .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not(
502
+ [aria-disabled]
503
+ ),
504
+ .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
505
+ background-color: var(--charcoal-text3-hover);
506
+ }
487
507
 
488
- &:active:not(:disabled):not([aria-disabled]),
489
- &:active[aria-disabled='false'] {
490
- background-color: var(--charcoal-text3-press);
491
- }
508
+ .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not(
509
+ [aria-disabled]
510
+ ),
511
+ .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
512
+ background-color: var(--charcoal-text3-press);
513
+ }
492
514
 
493
- &:checked:hover:not(:disabled):not([aria-disabled]),
494
- &:checked:hover[aria-disabled='false'] {
495
- background-color: var(--charcoal-brand-hover);
496
- }
515
+ .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not(
516
+ [aria-disabled]
517
+ ),
518
+ .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
519
+ background-color: var(--charcoal-brand-hover);
520
+ }
497
521
 
498
- &:checked:active:not(:disabled):not([aria-disabled]),
499
- &:checked:active[aria-disabled='false'] {
500
- background-color: var(--charcoal-brand-press);
501
- }
522
+ .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not(
523
+ [aria-disabled]
524
+ ),
525
+ .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
526
+ background-color: var(--charcoal-brand-press);
527
+ }
502
528
 
503
- &[aria-invalid='true'][data-overlay='false']:not(:disabled):not(
504
- [aria-disabled]
505
- ) {
506
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
507
- }
529
+ .charcoal-multi-select-input[aria-invalid='true'][data-overlay='false']:not(
530
+ :disabled
531
+ ):not([aria-disabled]) {
532
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
533
+ }
508
534
 
509
- &[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
510
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
511
- }
535
+ .charcoal-multi-select-input[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
536
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
537
+ }
512
538
 
513
- &[data-overlay='true'] {
514
- background-color: var(--charcoal-surface4);
515
- }
539
+ .charcoal-multi-select-input[data-overlay='true'] {
540
+ background-color: var(--charcoal-surface4);
516
541
  }
517
542
 
518
543
  .charcoal-multi-select-overlay {
@@ -528,22 +553,22 @@
528
553
  border-radius: 999999px;
529
554
  color: var(--charcoal-text5);
530
555
  transition: 0.2s box-shadow;
556
+ }
531
557
 
532
- &[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
533
- [aria-disabled]
534
- ) {
535
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
536
- }
558
+ .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(
559
+ :disabled
560
+ ):not([aria-disabled]) {
561
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
562
+ }
537
563
 
538
- &[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
539
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
540
- }
564
+ .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
565
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
566
+ }
541
567
 
542
- &[data-overlay='true'] {
543
- border-color: var(--charcoal-text5);
544
- border-width: 2px;
545
- border-style: solid;
546
- }
568
+ .charcoal-multi-select-overlay[data-overlay='true'] {
569
+ border-color: var(--charcoal-text5);
570
+ border-width: 2px;
571
+ border-style: solid;
547
572
  }
548
573
 
549
574
  .charcoal-switch__label {
@@ -553,15 +578,15 @@
553
578
  cursor: pointer;
554
579
  outline: 0;
555
580
  gap: 4px;
581
+ }
556
582
 
557
- &[aria-disabled='true'] {
558
- opacity: 0.32;
559
- cursor: default;
583
+ .charcoal-switch__label[aria-disabled='true'] {
584
+ opacity: 0.32;
585
+ cursor: default;
586
+ }
560
587
 
561
- & > input {
562
- opacity: 1;
563
- }
564
- }
588
+ .charcoal-switch__label[aria-disabled='true'] > input {
589
+ opacity: 1;
565
590
  }
566
591
 
567
592
  .charcoal-switch__label_div {
@@ -657,10 +682,10 @@
657
682
  display: grid;
658
683
  grid-template-columns: 1fr;
659
684
  grid-gap: 4px;
685
+ }
660
686
 
661
- &[aria-disabled='true'] {
662
- opacity: 0.32;
663
- }
687
+ .charcoal-text-field-root[aria-disabled='true'] {
688
+ opacity: 0.32;
664
689
  }
665
690
 
666
691
  .charcoal-text-field-container {
@@ -675,23 +700,25 @@
675
700
  padding: 0 8px;
676
701
  line-height: 22px;
677
702
  font-size: 14px;
703
+ }
678
704
 
679
- &[data-invalid='true'] {
680
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
681
- }
705
+ .charcoal-text-field-container[data-invalid='true'] {
706
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
707
+ }
682
708
 
683
- &:not([aria-disabled='true']):hover {
684
- background-color: var(--charcoal-surface3-hover);
685
- }
709
+ .charcoal-text-field-container:not([aria-disabled='true']):hover {
710
+ background-color: var(--charcoal-surface3-hover);
711
+ }
686
712
 
687
- &:not([aria-disabled='true']):focus-within {
688
- outline: none;
689
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
690
- }
713
+ .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
714
+ outline: none;
715
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
716
+ }
691
717
 
692
- &:not([aria-disabled='true'])[data-invalid='true']:focus-within {
693
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
694
- }
718
+ .charcoal-text-field-container:not(
719
+ [aria-disabled='true']
720
+ )[data-invalid='true']:focus-within {
721
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
695
722
  }
696
723
 
697
724
  .charcoal-text-field-prefix {
@@ -729,10 +756,10 @@
729
756
  background: transparent;
730
757
 
731
758
  color: var(--charcoal-text2);
759
+ }
732
760
 
733
- &::placeholder {
734
- color: var(--charcoal-text3);
735
- }
761
+ .charcoal-text-field-input::placeholder {
762
+ color: var(--charcoal-text3);
736
763
  }
737
764
 
738
765
  .charcoal-text-field-line-counter {
@@ -769,14 +796,14 @@
769
796
  .charcoal-field-label-root {
770
797
  display: inline-flex;
771
798
  align-items: center;
799
+ }
772
800
 
773
- & > .charcoal-field-label-required-text {
774
- margin-left: 4px;
775
- }
801
+ .charcoal-field-label-root > .charcoal-field-label-required-text {
802
+ margin-left: 4px;
803
+ }
776
804
 
777
- & > .charcoal-field-label-sub-label {
778
- margin-left: auto;
779
- }
805
+ .charcoal-field-label-root > .charcoal-field-label-sub-label {
806
+ margin-left: auto;
780
807
  }
781
808
 
782
809
  .charcoal-text-field-assistive-text {
@@ -794,10 +821,10 @@
794
821
  display: grid;
795
822
  grid-template-columns: 1fr;
796
823
  grid-gap: 4px;
824
+ }
797
825
 
798
- &[aria-disabled='true'] {
799
- opacity: 0.32;
800
- }
826
+ .charcoal-text-area-root[aria-disabled='true'] {
827
+ opacity: 0.32;
801
828
  }
802
829
 
803
830
  .charcoal-text-area-container {
@@ -811,23 +838,23 @@
811
838
  0.2s background-color,
812
839
  0.2s box-shadow;
813
840
  height: calc(22px * var(--charcoal-text-area-rows) + 18px);
841
+ }
814
842
 
815
- &[aria-invalid='true'] {
816
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
817
- }
843
+ .charcoal-text-area-container[aria-invalid='true'] {
844
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
845
+ }
818
846
 
819
- &:focus-within {
820
- outline: none;
821
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
822
- }
847
+ .charcoal-text-area-container:focus-within {
848
+ outline: none;
849
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
850
+ }
823
851
 
824
- &:not([aria-disabled='true']):hover {
825
- background-color: var(--charcoal-surface3-hover);
826
- }
852
+ .charcoal-text-area-container:not([aria-disabled='true']):hover {
853
+ background-color: var(--charcoal-surface3-hover);
854
+ }
827
855
 
828
- &[aria-invalid='true']:focus-within {
829
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
830
- }
856
+ .charcoal-text-area-container[aria-invalid='true']:focus-within {
857
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
831
858
  }
832
859
 
833
860
  .charcoal-text-area-textarea {
@@ -851,15 +878,14 @@
851
878
  appearance: none;
852
879
 
853
880
  background: none;
881
+ }
882
+ .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
883
+ padding: calc(9px / 0.875) calc(8px / 0.875) 0;
884
+ height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
885
+ }
854
886
 
855
- &[data-no-bottom-padding='true'] {
856
- padding: calc(9px / 0.875) calc(8px / 0.875) 0;
857
- height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
858
- }
859
-
860
- &::placeholder {
861
- color: var(--charcoal-text3);
862
- }
887
+ .charcoal-text-area-textarea::placeholder {
888
+ color: var(--charcoal-text3);
863
889
  }
864
890
 
865
891
  .charcoal-text-area-counter {
@@ -930,12 +956,12 @@
930
956
  box-sizing: border-box;
931
957
 
932
958
  background-color: var(--charcoal-surface4);
959
+ }
933
960
 
934
- @media (max-width: 743px) {
935
- &[data-bottom-sheet='true'],
936
- &[data-bottom-sheet='full'] {
937
- padding: 0;
938
- }
961
+ @media (max-width: 743px) {
962
+ .charcoal-modal-background[data-bottom-sheet='true'],
963
+ .charcoal-modal-background[data-bottom-sheet='full'] {
964
+ padding: 0;
939
965
  }
940
966
  }
941
967
 
@@ -1006,10 +1032,9 @@
1006
1032
  opacity: 0.84;
1007
1033
  color: var(--charcoal-text4);
1008
1034
  background-color: var(--charcoal-background1);
1009
-
1010
- &[data-transparent='true'] {
1011
- background-color: var(--charcoal-transparent);
1012
- }
1035
+ }
1036
+ .charcoal-loading-spinner[data-transparent='true'] {
1037
+ background-color: var(--charcoal-transparent);
1013
1038
  }
1014
1039
 
1015
1040
  @keyframes charcoal-loading-spinner-icon-scale-out {
@@ -1030,14 +1055,13 @@
1030
1055
  background-color: currentColor;
1031
1056
  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
1032
1057
  animation-iteration-count: infinite;
1058
+ }
1033
1059
 
1034
- &[data-reset-animation] {
1035
- animation: none;
1036
- }
1037
-
1038
- &[data-once='true'] {
1039
- animation-iteration-count: 1;
1040
- }
1060
+ .charcoal-loading-spinner-icon[data-reset-animation] {
1061
+ animation: none;
1062
+ }
1063
+ .charcoal-loading-spinner-icon[data-once='true'] {
1064
+ animation-iteration-count: 1;
1041
1065
  }
1042
1066
 
1043
1067
  .charcoal-dropdown-selector-root {
@@ -1045,11 +1069,11 @@
1045
1069
  grid-template-columns: 1fr;
1046
1070
  grid-gap: 4px;
1047
1071
  width: 100%;
1072
+ }
1048
1073
 
1049
- &[aria-disabled='true'] {
1050
- cursor: default;
1051
- opacity: 0.32;
1052
- }
1074
+ .charcoal-dropdown-selector-root[aria-disabled='true'] {
1075
+ cursor: default;
1076
+ opacity: 0.32;
1053
1077
  }
1054
1078
 
1055
1079
  .charcoal-dropdown-selector-button {
@@ -1073,39 +1097,39 @@
1073
1097
  transition:
1074
1098
  0.2s box-shadow,
1075
1099
  0.2s background-color;
1100
+ }
1076
1101
 
1077
- &:disabled {
1078
- cursor: default;
1079
- }
1102
+ .charcoal-dropdown-selector-button:disabled {
1103
+ cursor: default;
1104
+ }
1080
1105
 
1081
- &:not(:disabled) {
1082
- &:focus {
1083
- outline: none;
1084
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1085
- }
1106
+ .charcoal-dropdown-selector-button:not(:disabled):focus {
1107
+ outline: none;
1108
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1109
+ }
1086
1110
 
1087
- &:focus-visible {
1088
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1089
- }
1111
+ .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
1112
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1113
+ }
1090
1114
 
1091
- &[data-active='true'],
1092
- &:active {
1093
- background-color: var(--charcoal-surface3-press);
1094
- }
1115
+ .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
1116
+ .charcoal-dropdown-selector-button:not(:disabled):active {
1117
+ background-color: var(--charcoal-surface3-press);
1118
+ }
1095
1119
 
1096
- &:hover {
1097
- background-color: var(--charcoal-surface3-hover);
1098
- }
1120
+ .charcoal-dropdown-selector-button:not(:disabled):hover {
1121
+ background-color: var(--charcoal-surface3-hover);
1122
+ }
1099
1123
 
1100
- &:focus:not(:focus-visible) {
1101
- box-shadow: none;
1102
- }
1103
- }
1124
+ .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
1125
+ box-shadow: none;
1126
+ }
1104
1127
 
1105
- &[aria-invalid='true'],
1106
- &:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
1107
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1108
- }
1128
+ .charcoal-dropdown-selector-button[aria-invalid='true'],
1129
+ .charcoal-dropdown-selector-button:not(
1130
+ :disabled
1131
+ )[aria-invalid='true']:focus:not(:focus-visible) {
1132
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1109
1133
  }
1110
1134
 
1111
1135
  .charcoal-ui-dropdown-selector-text {
@@ -1117,10 +1141,10 @@
1117
1141
  overflow: hidden;
1118
1142
  text-overflow: ellipsis;
1119
1143
  white-space: nowrap;
1144
+ }
1120
1145
 
1121
- &[data-placeholder='true'] {
1122
- color: var(--charcoal-text3);
1123
- }
1146
+ .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
1147
+ color: var(--charcoal-text3);
1124
1148
  }
1125
1149
 
1126
1150
  .charcoal-ui-dropdown-selector-icon {
@@ -1144,6 +1168,31 @@
1144
1168
  margin: 0;
1145
1169
  }
1146
1170
 
1171
+ .charcoal-list-item {
1172
+ list-style: none;
1173
+ display: flex;
1174
+ align-items: center;
1175
+ min-height: 40px;
1176
+ cursor: pointer;
1177
+ outline: none;
1178
+
1179
+ padding-right: 16px;
1180
+ padding-left: 16px;
1181
+
1182
+ transition: background-color 0.2s;
1183
+ }
1184
+
1185
+ .charcoal-list-item:not([aria-disabled='true']):hover,
1186
+ .charcoal-list-item:not([aria-disabled='true']):focus,
1187
+ .charcoal-list-item:not([aria-disabled='true']):focus-within {
1188
+ background-color: var(--charcoal-surface3);
1189
+ }
1190
+
1191
+ .charcoal-list-item[aria-disabled='true'] {
1192
+ opacity: 0.32;
1193
+ cursor: default;
1194
+ }
1195
+
1147
1196
  .charcoal-dropdown-selector-menu-item {
1148
1197
  font-size: 14px;
1149
1198
  line-height: 22px;
@@ -1181,31 +1230,6 @@
1181
1230
  margin-left: 20px;
1182
1231
  }
1183
1232
 
1184
- .charcoal-list-item {
1185
- list-style: none;
1186
- display: flex;
1187
- align-items: center;
1188
- min-height: 40px;
1189
- cursor: pointer;
1190
- outline: none;
1191
-
1192
- padding-right: 16px;
1193
- padding-left: 16px;
1194
-
1195
- transition: background-color 0.2s;
1196
- }
1197
-
1198
- .charcoal-list-item:not([aria-disabled='true']):hover,
1199
- .charcoal-list-item:not([aria-disabled='true']):focus,
1200
- .charcoal-list-item:not([aria-disabled='true']):focus-within {
1201
- background-color: var(--charcoal-surface3);
1202
- }
1203
-
1204
- .charcoal-list-item[aria-disabled='true'] {
1205
- opacity: 0.32;
1206
- cursor: default;
1207
- }
1208
-
1209
1233
  .charcoal-menu-item-group {
1210
1234
  display: block;
1211
1235
  }
@@ -1232,18 +1256,18 @@
1232
1256
 
1233
1257
  background-color: var(--charcoal-surface3);
1234
1258
  border-radius: 16px;
1259
+ }
1235
1260
 
1236
- &[data-uniform-segment-width='true'],
1237
- &[data-full-width='true'] {
1238
- display: inline-grid;
1239
- grid-auto-columns: minmax(80px, 1fr);
1240
- grid-auto-rows: 32px;
1241
- grid-auto-flow: column;
1242
- }
1261
+ .charcoal-segmented-control[data-uniform-segment-width='true'],
1262
+ .charcoal-segmented-control[data-full-width='true'] {
1263
+ display: inline-grid;
1264
+ grid-auto-columns: minmax(80px, 1fr);
1265
+ grid-auto-rows: 32px;
1266
+ grid-auto-flow: column;
1267
+ }
1243
1268
 
1244
- &[data-full-width='true'] {
1245
- width: 100%;
1246
- }
1269
+ .charcoal-segmented-control[data-full-width='true'] {
1270
+ width: 100%;
1247
1271
  }
1248
1272
 
1249
1273
  .charcoal-segmented-control-radio__label {
@@ -1261,22 +1285,24 @@
1261
1285
 
1262
1286
  font-size: 14px;
1263
1287
  line-height: 22px;
1288
+ }
1264
1289
 
1265
- &[aria-disabled]:not([aria-disabled='false']) {
1266
- cursor: default;
1267
- opacity: 0.32;
1268
- }
1290
+ .charcoal-segmented-control-radio__label[aria-disabled]:not(
1291
+ [aria-disabled='false']
1292
+ ) {
1293
+ cursor: default;
1294
+ opacity: 0.32;
1295
+ }
1269
1296
 
1270
- &[data-checked='true'] {
1271
- background-color: var(--charcoal-brand);
1272
- color: var(--charcoal-text5);
1273
- }
1297
+ .charcoal-segmented-control-radio__label[data-checked='true'] {
1298
+ background-color: var(--charcoal-brand);
1299
+ color: var(--charcoal-text5);
1300
+ }
1274
1301
 
1275
- &[data-uniform-segment-width='true'],
1276
- &[data-full-width='true'] {
1277
- justify-content: center;
1278
- white-space: nowrap;
1279
- }
1302
+ .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
1303
+ .charcoal-segmented-control-radio__label[data-full-width='true'] {
1304
+ justify-content: center;
1305
+ white-space: nowrap;
1280
1306
  }
1281
1307
 
1282
1308
  .charcoal-segmented-control-radio__input {
@@ -1299,15 +1325,15 @@
1299
1325
  cursor: pointer;
1300
1326
  display: flex;
1301
1327
  gap: 4px;
1328
+ }
1302
1329
 
1303
- &[aria-disabled='true'] {
1304
- cursor: default;
1305
- opacity: 0.32;
1330
+ .charcoal-checkbox__label[aria-disabled='true'] {
1331
+ cursor: default;
1332
+ opacity: 0.32;
1333
+ }
1306
1334
 
1307
- & > input {
1308
- opacity: 1;
1309
- }
1310
- }
1335
+ .charcoal-checkbox__label[aria-disabled='true'] > input {
1336
+ opacity: 1;
1311
1337
  }
1312
1338
 
1313
1339
  .charcoal-checkbox__label_div {
@@ -1462,76 +1488,72 @@
1462
1488
  border-radius: 4px;
1463
1489
 
1464
1490
  transition: 0.2s box-shadow;
1491
+ }
1465
1492
 
1466
- &[data-size='M'] {
1467
- --charcoal-tag-item-size: 40px;
1468
- --charcoal-tag-item-padding-left: 24px;
1469
- --charcoal-tag-item-padding-right: 24px;
1470
- }
1471
-
1472
- &[data-size='S'] {
1473
- --charcoal-tag-item-size: 32px;
1474
- --charcoal-tag-item-padding-left: 16px;
1475
- --charcoal-tag-item-padding-right: 16px;
1476
- }
1477
-
1478
- &[data-state='inactive'] {
1479
- --charcoal-tag-item-color: var(--charcoal-text2);
1480
- }
1481
-
1482
- &[data-state='active'] {
1483
- --charcoal-tag-item-padding-left: 16px;
1484
- --charcoal-tag-item-padding-right: 8px;
1485
- }
1486
-
1487
- &:disabled,
1488
- &[aria-disabled]:not([aria-disabled='false']) {
1489
- opacity: 0.32;
1490
- cursor: default;
1491
- }
1492
-
1493
- &:not(:disabled):not([aria-disabled]):focus-visible,
1494
- &[aria-disabled='false']:focus-visible {
1495
- outline: none;
1496
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1497
- }
1498
-
1499
- &:not(:disabled):not([aria-disabled]):focus,
1500
- &[aria-disabled='false']:focus {
1501
- outline: none;
1502
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1503
- }
1493
+ .charcoal-tag-item[data-size='M'] {
1494
+ --charcoal-tag-item-size: 40px;
1495
+ --charcoal-tag-item-padding-left: 24px;
1496
+ --charcoal-tag-item-padding-right: 24px;
1497
+ }
1498
+ .charcoal-tag-item[data-size='S'] {
1499
+ --charcoal-tag-item-size: 32px;
1500
+ --charcoal-tag-item-padding-left: 16px;
1501
+ --charcoal-tag-item-padding-right: 16px;
1502
+ }
1503
+ .charcoal-tag-item[data-state='inactive'] {
1504
+ --charcoal-tag-item-color: var(--charcoal-text2);
1505
+ }
1506
+ .charcoal-tag-item[data-state='active'] {
1507
+ --charcoal-tag-item-padding-left: 16px;
1508
+ --charcoal-tag-item-padding-right: 8px;
1509
+ }
1504
1510
 
1505
- &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1506
- &[aria-disabled='false']:focus:not(:focus-visible) {
1507
- box-shadow: none;
1508
- }
1511
+ .charcoal-tag-item:disabled,
1512
+ .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
1513
+ opacity: 0.32;
1514
+ cursor: default;
1515
+ }
1516
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
1517
+ .charcoal-tag-item[aria-disabled='false']:focus-visible {
1518
+ outline: none;
1519
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1520
+ }
1521
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
1522
+ .charcoal-tag-item[aria-disabled='false']:focus {
1523
+ outline: none;
1524
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1525
+ }
1526
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(
1527
+ :focus-visible
1528
+ ),
1529
+ .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
1530
+ box-shadow: none;
1509
1531
  }
1510
1532
 
1511
1533
  .charcoal-tag-item__bg {
1512
1534
  background-color: var(--charcoal-tag-item-bg);
1535
+ }
1513
1536
 
1514
- &[data-bg-variant='image'] {
1515
- background-color: var(--charcoal-surface4);
1516
-
1517
- &::before {
1518
- content: '';
1519
- position: absolute;
1520
- z-index: 1;
1521
- top: 0;
1522
- left: 0;
1523
- width: 100%;
1524
- height: 100%;
1525
- background-position: center;
1526
- background-size: cover;
1527
- background-image: var(--charcoal-tag-item-bg);
1528
- mix-blend-mode: overlay;
1529
- }
1530
- }
1537
+ .charcoal-tag-item__bg[data-bg-variant='image'] {
1538
+ background-color: var(--charcoal-surface4);
1539
+ }
1531
1540
 
1532
- &[data-state='inactive'] {
1533
- background-color: var(--charcoal-surface3);
1534
- }
1541
+ .charcoal-tag-item__bg[data-bg-variant='image']::before {
1542
+ content: '';
1543
+ position: absolute;
1544
+ z-index: 1;
1545
+ top: 0;
1546
+ left: 0;
1547
+ width: 100%;
1548
+ height: 100%;
1549
+ background-position: center;
1550
+ background-size: cover;
1551
+ background-image: var(--charcoal-tag-item-bg);
1552
+ mix-blend-mode: overlay;
1553
+ }
1554
+
1555
+ .charcoal-tag-item__bg[data-state='inactive'] {
1556
+ background-color: var(--charcoal-surface3);
1535
1557
  }
1536
1558
 
1537
1559
  .charcoal-tag-item__label {
@@ -1540,20 +1562,18 @@
1540
1562
  flex-direction: column;
1541
1563
  align-items: center;
1542
1564
  justify-content: center;
1543
-
1544
- &[data-has-translate='true'] {
1545
- justify-content: space-between;
1546
- }
1565
+ }
1566
+ .charcoal-tag-item__label[data-has-translate='true'] {
1567
+ justify-content: space-between;
1547
1568
  }
1548
1569
 
1549
1570
  .charcoal-tag-item__label__translated {
1550
1571
  --charcoal-tag-item-text-font-size: 12px;
1551
1572
  --charcoal-tag-item-text-line-height: 20px;
1552
1573
  font-weight: bold;
1553
-
1554
- &::before {
1555
- display: none;
1556
- }
1574
+ }
1575
+ .charcoal-tag-item__label__translated::before {
1576
+ display: none;
1557
1577
  }
1558
1578
 
1559
1579
  .charcoal-tag-item__label__text {
@@ -1567,15 +1587,12 @@
1567
1587
  color: inherit;
1568
1588
  white-space: nowrap;
1569
1589
  text-overflow: ellipsis;
1570
-
1571
- &[data-has-translate='true'] {
1572
- --charcoal-tag-item-text-font-size: 10px;
1573
- --charcoal-tag-item-text-line-height: 14px;
1574
- font-weight: normal;
1575
- }
1576
1590
  }
1577
-
1578
- /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
1591
+ .charcoal-tag-item__label__text[data-has-translate='true'] {
1592
+ --charcoal-tag-item-text-font-size: 10px;
1593
+ --charcoal-tag-item-text-line-height: 14px;
1594
+ font-weight: normal;
1595
+ }
1579
1596
  .charcoal-tag-item__labe__text[data-has-translate='true']::after {
1580
1597
  display: none;
1581
1598
  }
@@ -1586,13 +1603,15 @@
1586
1603
  padding: 12px 16px;
1587
1604
  display: flex;
1588
1605
  align-items: flex-start;
1606
+ }
1589
1607
 
1590
- &[data-context='page'] {
1591
- justify-content: center;
1608
+ .charcoal-hint-text[data-context='page'] {
1609
+ justify-content: center;
1610
+ }
1592
1611
 
1593
- @media (min-width: 744px) {
1594
- padding: 20px 40px;
1595
- }
1612
+ @media (min-width: 744px) {
1613
+ .charcoal-hint-text[data-context='page'] {
1614
+ padding: 20px 40px;
1596
1615
  }
1597
1616
  }
1598
1617
 
@@ -1620,38 +1639,27 @@
1620
1639
  display: -webkit-box;
1621
1640
  -webkit-box-orient: vertical;
1622
1641
  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
1642
+ }
1623
1643
 
1624
- &[data-has-line-height='true'] {
1625
- line-height: var(--charcoal-text-ellipsis-line-height);
1626
- }
1644
+ .charcoal-text-ellipsis[data-has-line-height='true'] {
1645
+ line-height: var(--charcoal-text-ellipsis-line-height);
1646
+ }
1627
1647
 
1628
- &[data-has-line-height='false'] {
1629
- line-height: inherit;
1630
- }
1648
+ .charcoal-text-ellipsis[data-has-line-height='false'] {
1649
+ line-height: inherit;
1650
+ }
1631
1651
 
1632
- &[data-line-limit='1'][data-use-nowrap='true'] {
1633
- text-overflow: ellipsis;
1634
- white-space: nowrap;
1635
- }
1652
+ .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
1653
+ text-overflow: ellipsis;
1654
+ white-space: nowrap;
1636
1655
  }
1637
1656
 
1638
1657
  .charcoal-pagination {
1639
1658
  display: flex;
1640
1659
  justify-content: center;
1641
1660
  align-items: center;
1642
-
1643
- &[data-size='S'] .charcoal-pagination-button {
1644
- min-width: 32px;
1645
- min-height: 32px;
1646
- }
1647
-
1648
- &[data-size='M'] .charcoal-pagination-button {
1649
- min-width: 40px;
1650
- min-height: 40px;
1651
- }
1652
1661
  }
1653
1662
 
1654
- /* stylelint-disable no-descending-specificity */
1655
1663
  .charcoal-pagination-button {
1656
1664
  cursor: pointer;
1657
1665
  appearance: none;
@@ -1683,81 +1691,93 @@
1683
1691
  transition:
1684
1692
  0.2s background-color,
1685
1693
  0.2s box-shadow;
1694
+ }
1686
1695
 
1687
- &:focus {
1688
- outline: none;
1689
- }
1696
+ .charcoal-pagination-button:focus {
1697
+ outline: none;
1698
+ }
1690
1699
 
1691
- &::-moz-focus-inner {
1692
- border-style: none;
1693
- padding: 0;
1694
- }
1700
+ .charcoal-pagination-button::-moz-focus-inner {
1701
+ border-style: none;
1702
+ padding: 0;
1703
+ }
1695
1704
 
1696
- &[hidden] {
1697
- visibility: hidden;
1698
- display: block;
1699
- }
1705
+ .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
1706
+ min-width: 32px;
1707
+ min-height: 32px;
1708
+ }
1700
1709
 
1701
- &:not(:disabled):not([aria-disabled]):hover,
1702
- &[aria-disabled='false']:hover {
1703
- color: var(--charcoal-text3);
1704
- background-color: var(--charcoal-surface3);
1705
- }
1710
+ .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
1711
+ min-width: 40px;
1712
+ min-height: 40px;
1713
+ }
1706
1714
 
1707
- &:not(:disabled):not([aria-disabled]):active,
1708
- &[aria-disabled='false']:active {
1709
- color: var(--charcoal-text3);
1710
- background-color: var(--charcoal-surface10);
1711
- }
1715
+ .charcoal-pagination-button[hidden] {
1716
+ visibility: hidden;
1717
+ display: block;
1718
+ }
1712
1719
 
1713
- &:not(:disabled):not([aria-disabled]):focus,
1714
- &[aria-disabled='false']:focus {
1715
- outline: none;
1716
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1717
- }
1720
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
1721
+ .charcoal-pagination-button[aria-disabled='false']:hover {
1722
+ color: var(--charcoal-text3);
1723
+ background-color: var(--charcoal-surface3);
1724
+ }
1718
1725
 
1719
- &:not(:disabled):not([aria-disabled]):focus-visible,
1720
- &[aria-disabled='false']:focus-visible {
1721
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1722
- }
1726
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
1727
+ .charcoal-pagination-button[aria-disabled='false']:active {
1728
+ color: var(--charcoal-text3);
1729
+ background-color: var(--charcoal-surface10);
1730
+ }
1723
1731
 
1724
- &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1725
- &[aria-disabled='false']:focus:not(:focus-visible) {
1726
- box-shadow: none;
1727
- }
1732
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
1733
+ .charcoal-pagination-button[aria-disabled='false']:focus {
1734
+ outline: none;
1735
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1736
+ }
1728
1737
 
1729
- &[aria-current] {
1730
- cursor: default;
1731
- background-color: var(--charcoal-surface6);
1732
- color: var(--charcoal-text5);
1738
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
1739
+ .charcoal-pagination-button[aria-disabled='false']:focus-visible {
1740
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1741
+ }
1733
1742
 
1734
- &:not(:disabled):not([aria-disabled]):hover,
1735
- &:not(:disabled):not([aria-disabled]):active {
1736
- background-color: var(--charcoal-surface6);
1737
- color: var(--charcoal-text5);
1738
- }
1739
- }
1743
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(
1744
+ :focus-visible
1745
+ ),
1746
+ .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
1747
+ box-shadow: none;
1748
+ }
1749
+
1750
+ .charcoal-pagination-button[aria-current] {
1751
+ cursor: default;
1752
+ background-color: var(--charcoal-surface6);
1753
+ color: var(--charcoal-text5);
1754
+ }
1755
+
1756
+ .charcoal-pagination-button[aria-current]:not(:disabled):not(
1757
+ [aria-disabled]
1758
+ ):hover,
1759
+ .charcoal-pagination-button[aria-current]:not(:disabled):not(
1760
+ [aria-disabled]
1761
+ ):active {
1762
+ background-color: var(--charcoal-surface6);
1763
+ color: var(--charcoal-text5);
1740
1764
  }
1741
- /* stylelint-enable no-descending-specificity */
1742
1765
 
1743
- /* Kept flat: different root class from .charcoal-pagination-button */
1744
1766
  .charcoal-pagination-nav-button[hidden] {
1745
1767
  visibility: hidden;
1746
1768
  display: block;
1747
1769
  }
1748
1770
 
1749
- .charcoal-pagination-spacer {
1750
- &,
1751
- &:hover,
1752
- &:active {
1753
- cursor: default;
1754
- color: var(--charcoal-text3);
1755
- background: none;
1756
- }
1771
+ .charcoal-pagination-spacer,
1772
+ .charcoal-pagination-spacer:hover,
1773
+ .charcoal-pagination-spacer:active {
1774
+ cursor: default;
1775
+ color: var(--charcoal-text3);
1776
+ background: none;
1777
+ }
1757
1778
 
1758
- &.charcoal-icon-button:disabled {
1759
- opacity: 1;
1760
- }
1779
+ .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1780
+ opacity: 1;
1761
1781
  }
1762
1782
 
1763
1783