@charcoal-ui/react 5.8.0-beta.0 → 5.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 (37) hide show
  1. package/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts +1 -0
  2. package/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts.map +1 -1
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +613 -589
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.d.ts +1 -0
  8. package/dist/index.d.ts.map +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/index.js.map +1 -1
  11. package/dist/layered.css +613 -589
  12. package/dist/layered.css.map +1 -1
  13. package/package.json +5 -5
  14. package/src/components/Button/index.css +120 -105
  15. package/src/components/Checkbox/index.css +7 -7
  16. package/src/components/Clickable/index.css +11 -11
  17. package/src/components/DropdownSelector/DropdownMenuItem/index.css +4 -0
  18. package/src/components/DropdownSelector/DropdownMenuItem/index.tsx +12 -3
  19. package/src/components/DropdownSelector/index.css +33 -33
  20. package/src/components/FieldLabel/index.css +6 -6
  21. package/src/components/HintText/index.css +7 -5
  22. package/src/components/IconButton/index.css +89 -87
  23. package/src/components/LoadingSpinner/index.css +9 -11
  24. package/src/components/Modal/index.css +5 -5
  25. package/src/components/MultiSelect/__snapshots__/index.css.snap +3 -3
  26. package/src/components/MultiSelect/index.css +82 -74
  27. package/src/components/Pagination/__snapshots__/index.css.snap +10 -15
  28. package/src/components/Pagination/index.css +80 -79
  29. package/src/components/Radio/index.css +4 -4
  30. package/src/components/SegmentedControl/index.css +25 -23
  31. package/src/components/Switch/index.css +7 -7
  32. package/src/components/TagItem/__snapshots__/index.css.snap +0 -2
  33. package/src/components/TagItem/index.css +71 -80
  34. package/src/components/TextArea/index.css +23 -24
  35. package/src/components/TextEllipsis/index.css +10 -10
  36. package/src/components/TextField/index.css +21 -19
  37. 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,29 +1230,8 @@
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;
1233
+ .charcoal-dropdown-selector-menu-fullwidth {
1234
+ width: 100%;
1207
1235
  }
1208
1236
 
1209
1237
  .charcoal-menu-item-group {
@@ -1232,18 +1260,18 @@
1232
1260
 
1233
1261
  background-color: var(--charcoal-surface3);
1234
1262
  border-radius: 16px;
1263
+ }
1235
1264
 
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
- }
1265
+ .charcoal-segmented-control[data-uniform-segment-width='true'],
1266
+ .charcoal-segmented-control[data-full-width='true'] {
1267
+ display: inline-grid;
1268
+ grid-auto-columns: minmax(80px, 1fr);
1269
+ grid-auto-rows: 32px;
1270
+ grid-auto-flow: column;
1271
+ }
1243
1272
 
1244
- &[data-full-width='true'] {
1245
- width: 100%;
1246
- }
1273
+ .charcoal-segmented-control[data-full-width='true'] {
1274
+ width: 100%;
1247
1275
  }
1248
1276
 
1249
1277
  .charcoal-segmented-control-radio__label {
@@ -1261,22 +1289,24 @@
1261
1289
 
1262
1290
  font-size: 14px;
1263
1291
  line-height: 22px;
1292
+ }
1264
1293
 
1265
- &[aria-disabled]:not([aria-disabled='false']) {
1266
- cursor: default;
1267
- opacity: 0.32;
1268
- }
1294
+ .charcoal-segmented-control-radio__label[aria-disabled]:not(
1295
+ [aria-disabled='false']
1296
+ ) {
1297
+ cursor: default;
1298
+ opacity: 0.32;
1299
+ }
1269
1300
 
1270
- &[data-checked='true'] {
1271
- background-color: var(--charcoal-brand);
1272
- color: var(--charcoal-text5);
1273
- }
1301
+ .charcoal-segmented-control-radio__label[data-checked='true'] {
1302
+ background-color: var(--charcoal-brand);
1303
+ color: var(--charcoal-text5);
1304
+ }
1274
1305
 
1275
- &[data-uniform-segment-width='true'],
1276
- &[data-full-width='true'] {
1277
- justify-content: center;
1278
- white-space: nowrap;
1279
- }
1306
+ .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
1307
+ .charcoal-segmented-control-radio__label[data-full-width='true'] {
1308
+ justify-content: center;
1309
+ white-space: nowrap;
1280
1310
  }
1281
1311
 
1282
1312
  .charcoal-segmented-control-radio__input {
@@ -1299,15 +1329,15 @@
1299
1329
  cursor: pointer;
1300
1330
  display: flex;
1301
1331
  gap: 4px;
1332
+ }
1302
1333
 
1303
- &[aria-disabled='true'] {
1304
- cursor: default;
1305
- opacity: 0.32;
1334
+ .charcoal-checkbox__label[aria-disabled='true'] {
1335
+ cursor: default;
1336
+ opacity: 0.32;
1337
+ }
1306
1338
 
1307
- & > input {
1308
- opacity: 1;
1309
- }
1310
- }
1339
+ .charcoal-checkbox__label[aria-disabled='true'] > input {
1340
+ opacity: 1;
1311
1341
  }
1312
1342
 
1313
1343
  .charcoal-checkbox__label_div {
@@ -1462,76 +1492,72 @@
1462
1492
  border-radius: 4px;
1463
1493
 
1464
1494
  transition: 0.2s box-shadow;
1495
+ }
1465
1496
 
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
- }
1497
+ .charcoal-tag-item[data-size='M'] {
1498
+ --charcoal-tag-item-size: 40px;
1499
+ --charcoal-tag-item-padding-left: 24px;
1500
+ --charcoal-tag-item-padding-right: 24px;
1501
+ }
1502
+ .charcoal-tag-item[data-size='S'] {
1503
+ --charcoal-tag-item-size: 32px;
1504
+ --charcoal-tag-item-padding-left: 16px;
1505
+ --charcoal-tag-item-padding-right: 16px;
1506
+ }
1507
+ .charcoal-tag-item[data-state='inactive'] {
1508
+ --charcoal-tag-item-color: var(--charcoal-text2);
1509
+ }
1510
+ .charcoal-tag-item[data-state='active'] {
1511
+ --charcoal-tag-item-padding-left: 16px;
1512
+ --charcoal-tag-item-padding-right: 8px;
1513
+ }
1504
1514
 
1505
- &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1506
- &[aria-disabled='false']:focus:not(:focus-visible) {
1507
- box-shadow: none;
1508
- }
1515
+ .charcoal-tag-item:disabled,
1516
+ .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
1517
+ opacity: 0.32;
1518
+ cursor: default;
1519
+ }
1520
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
1521
+ .charcoal-tag-item[aria-disabled='false']:focus-visible {
1522
+ outline: none;
1523
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1524
+ }
1525
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
1526
+ .charcoal-tag-item[aria-disabled='false']:focus {
1527
+ outline: none;
1528
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1529
+ }
1530
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(
1531
+ :focus-visible
1532
+ ),
1533
+ .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
1534
+ box-shadow: none;
1509
1535
  }
1510
1536
 
1511
1537
  .charcoal-tag-item__bg {
1512
1538
  background-color: var(--charcoal-tag-item-bg);
1539
+ }
1513
1540
 
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
- }
1541
+ .charcoal-tag-item__bg[data-bg-variant='image'] {
1542
+ background-color: var(--charcoal-surface4);
1543
+ }
1531
1544
 
1532
- &[data-state='inactive'] {
1533
- background-color: var(--charcoal-surface3);
1534
- }
1545
+ .charcoal-tag-item__bg[data-bg-variant='image']::before {
1546
+ content: '';
1547
+ position: absolute;
1548
+ z-index: 1;
1549
+ top: 0;
1550
+ left: 0;
1551
+ width: 100%;
1552
+ height: 100%;
1553
+ background-position: center;
1554
+ background-size: cover;
1555
+ background-image: var(--charcoal-tag-item-bg);
1556
+ mix-blend-mode: overlay;
1557
+ }
1558
+
1559
+ .charcoal-tag-item__bg[data-state='inactive'] {
1560
+ background-color: var(--charcoal-surface3);
1535
1561
  }
1536
1562
 
1537
1563
  .charcoal-tag-item__label {
@@ -1540,20 +1566,18 @@
1540
1566
  flex-direction: column;
1541
1567
  align-items: center;
1542
1568
  justify-content: center;
1543
-
1544
- &[data-has-translate='true'] {
1545
- justify-content: space-between;
1546
- }
1569
+ }
1570
+ .charcoal-tag-item__label[data-has-translate='true'] {
1571
+ justify-content: space-between;
1547
1572
  }
1548
1573
 
1549
1574
  .charcoal-tag-item__label__translated {
1550
1575
  --charcoal-tag-item-text-font-size: 12px;
1551
1576
  --charcoal-tag-item-text-line-height: 20px;
1552
1577
  font-weight: bold;
1553
-
1554
- &::before {
1555
- display: none;
1556
- }
1578
+ }
1579
+ .charcoal-tag-item__label__translated::before {
1580
+ display: none;
1557
1581
  }
1558
1582
 
1559
1583
  .charcoal-tag-item__label__text {
@@ -1567,15 +1591,12 @@
1567
1591
  color: inherit;
1568
1592
  white-space: nowrap;
1569
1593
  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
1594
  }
1577
-
1578
- /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
1595
+ .charcoal-tag-item__label__text[data-has-translate='true'] {
1596
+ --charcoal-tag-item-text-font-size: 10px;
1597
+ --charcoal-tag-item-text-line-height: 14px;
1598
+ font-weight: normal;
1599
+ }
1579
1600
  .charcoal-tag-item__labe__text[data-has-translate='true']::after {
1580
1601
  display: none;
1581
1602
  }
@@ -1586,13 +1607,15 @@
1586
1607
  padding: 12px 16px;
1587
1608
  display: flex;
1588
1609
  align-items: flex-start;
1610
+ }
1589
1611
 
1590
- &[data-context='page'] {
1591
- justify-content: center;
1612
+ .charcoal-hint-text[data-context='page'] {
1613
+ justify-content: center;
1614
+ }
1592
1615
 
1593
- @media (min-width: 744px) {
1594
- padding: 20px 40px;
1595
- }
1616
+ @media (min-width: 744px) {
1617
+ .charcoal-hint-text[data-context='page'] {
1618
+ padding: 20px 40px;
1596
1619
  }
1597
1620
  }
1598
1621
 
@@ -1620,38 +1643,27 @@
1620
1643
  display: -webkit-box;
1621
1644
  -webkit-box-orient: vertical;
1622
1645
  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
1646
+ }
1623
1647
 
1624
- &[data-has-line-height='true'] {
1625
- line-height: var(--charcoal-text-ellipsis-line-height);
1626
- }
1648
+ .charcoal-text-ellipsis[data-has-line-height='true'] {
1649
+ line-height: var(--charcoal-text-ellipsis-line-height);
1650
+ }
1627
1651
 
1628
- &[data-has-line-height='false'] {
1629
- line-height: inherit;
1630
- }
1652
+ .charcoal-text-ellipsis[data-has-line-height='false'] {
1653
+ line-height: inherit;
1654
+ }
1631
1655
 
1632
- &[data-line-limit='1'][data-use-nowrap='true'] {
1633
- text-overflow: ellipsis;
1634
- white-space: nowrap;
1635
- }
1656
+ .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
1657
+ text-overflow: ellipsis;
1658
+ white-space: nowrap;
1636
1659
  }
1637
1660
 
1638
1661
  .charcoal-pagination {
1639
1662
  display: flex;
1640
1663
  justify-content: center;
1641
1664
  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
1665
  }
1653
1666
 
1654
- /* stylelint-disable no-descending-specificity */
1655
1667
  .charcoal-pagination-button {
1656
1668
  cursor: pointer;
1657
1669
  appearance: none;
@@ -1683,81 +1695,93 @@
1683
1695
  transition:
1684
1696
  0.2s background-color,
1685
1697
  0.2s box-shadow;
1698
+ }
1686
1699
 
1687
- &:focus {
1688
- outline: none;
1689
- }
1700
+ .charcoal-pagination-button:focus {
1701
+ outline: none;
1702
+ }
1690
1703
 
1691
- &::-moz-focus-inner {
1692
- border-style: none;
1693
- padding: 0;
1694
- }
1704
+ .charcoal-pagination-button::-moz-focus-inner {
1705
+ border-style: none;
1706
+ padding: 0;
1707
+ }
1695
1708
 
1696
- &[hidden] {
1697
- visibility: hidden;
1698
- display: block;
1699
- }
1709
+ .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
1710
+ min-width: 32px;
1711
+ min-height: 32px;
1712
+ }
1700
1713
 
1701
- &:not(:disabled):not([aria-disabled]):hover,
1702
- &[aria-disabled='false']:hover {
1703
- color: var(--charcoal-text3);
1704
- background-color: var(--charcoal-surface3);
1705
- }
1714
+ .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
1715
+ min-width: 40px;
1716
+ min-height: 40px;
1717
+ }
1706
1718
 
1707
- &:not(:disabled):not([aria-disabled]):active,
1708
- &[aria-disabled='false']:active {
1709
- color: var(--charcoal-text3);
1710
- background-color: var(--charcoal-surface10);
1711
- }
1719
+ .charcoal-pagination-button[hidden] {
1720
+ visibility: hidden;
1721
+ display: block;
1722
+ }
1712
1723
 
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
- }
1724
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
1725
+ .charcoal-pagination-button[aria-disabled='false']:hover {
1726
+ color: var(--charcoal-text3);
1727
+ background-color: var(--charcoal-surface3);
1728
+ }
1718
1729
 
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
- }
1730
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
1731
+ .charcoal-pagination-button[aria-disabled='false']:active {
1732
+ color: var(--charcoal-text3);
1733
+ background-color: var(--charcoal-surface10);
1734
+ }
1723
1735
 
1724
- &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1725
- &[aria-disabled='false']:focus:not(:focus-visible) {
1726
- box-shadow: none;
1727
- }
1736
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
1737
+ .charcoal-pagination-button[aria-disabled='false']:focus {
1738
+ outline: none;
1739
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1740
+ }
1728
1741
 
1729
- &[aria-current] {
1730
- cursor: default;
1731
- background-color: var(--charcoal-surface6);
1732
- color: var(--charcoal-text5);
1742
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
1743
+ .charcoal-pagination-button[aria-disabled='false']:focus-visible {
1744
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1745
+ }
1733
1746
 
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
- }
1747
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(
1748
+ :focus-visible
1749
+ ),
1750
+ .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
1751
+ box-shadow: none;
1752
+ }
1753
+
1754
+ .charcoal-pagination-button[aria-current] {
1755
+ cursor: default;
1756
+ background-color: var(--charcoal-surface6);
1757
+ color: var(--charcoal-text5);
1758
+ }
1759
+
1760
+ .charcoal-pagination-button[aria-current]:not(:disabled):not(
1761
+ [aria-disabled]
1762
+ ):hover,
1763
+ .charcoal-pagination-button[aria-current]:not(:disabled):not(
1764
+ [aria-disabled]
1765
+ ):active {
1766
+ background-color: var(--charcoal-surface6);
1767
+ color: var(--charcoal-text5);
1740
1768
  }
1741
- /* stylelint-enable no-descending-specificity */
1742
1769
 
1743
- /* Kept flat: different root class from .charcoal-pagination-button */
1744
1770
  .charcoal-pagination-nav-button[hidden] {
1745
1771
  visibility: hidden;
1746
1772
  display: block;
1747
1773
  }
1748
1774
 
1749
- .charcoal-pagination-spacer {
1750
- &,
1751
- &:hover,
1752
- &:active {
1753
- cursor: default;
1754
- color: var(--charcoal-text3);
1755
- background: none;
1756
- }
1775
+ .charcoal-pagination-spacer,
1776
+ .charcoal-pagination-spacer:hover,
1777
+ .charcoal-pagination-spacer:active {
1778
+ cursor: default;
1779
+ color: var(--charcoal-text3);
1780
+ background: none;
1781
+ }
1757
1782
 
1758
- &.charcoal-icon-button:disabled {
1759
- opacity: 1;
1760
- }
1783
+ .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1784
+ opacity: 1;
1761
1785
  }
1762
1786
 
1763
1787