@charcoal-ui/react 6.1.0-beta.5 → 6.1.0-beta.6

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 (26) hide show
  1. package/dist/components/Notification/NotificationRegion.cjs +10 -6
  2. package/dist/components/Notification/NotificationRegion.cjs.map +1 -1
  3. package/dist/components/Notification/NotificationRegion.d.ts +2 -1
  4. package/dist/components/Notification/NotificationRegion.d.ts.map +1 -1
  5. package/dist/components/Notification/NotificationRegion.js +11 -7
  6. package/dist/components/Notification/NotificationRegion.js.map +1 -1
  7. package/dist/components/Notification/Snackbar/index.d.ts +1 -0
  8. package/dist/components/Notification/Snackbar/index.d.ts.map +1 -1
  9. package/dist/components/Notification/Snackbar/index2.cjs.map +1 -1
  10. package/dist/components/Notification/Snackbar/index2.js.map +1 -1
  11. package/dist/index.css +1367 -1359
  12. package/dist/layered.css +1367 -1359
  13. package/dist/layered.css.map +1 -1
  14. package/package.json +4 -7
  15. package/src/components/Notification/NotificationRegion.tsx +12 -7
  16. package/src/components/Notification/Snackbar/__snapshots__/index.css.snap +2 -0
  17. package/src/components/Notification/Snackbar/index.css +2 -0
  18. package/src/components/Notification/Snackbar/index.story.tsx +4 -0
  19. package/src/components/Notification/Snackbar/index.test.tsx +5 -2
  20. package/src/components/Notification/Snackbar/index.tsx +1 -0
  21. package/src/components/Notification/Toast/__snapshots__/index.css.snap +2 -0
  22. package/src/components/Notification/Toast/index.css +2 -0
  23. package/src/components/Notification/Toast/index.story.tsx +4 -0
  24. package/src/components/Notification/Toast/index.test.tsx +5 -2
  25. package/src/components/Notification/__snapshots__/layout.css.snap +8 -4
  26. package/src/components/Notification/layout.css +8 -4
package/dist/index.css CHANGED
@@ -6,671 +6,818 @@
6
6
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
7
7
  transition: 0.2s box-shadow;
8
8
  }
9
- .charcoal-checkbox__label {
10
- position: relative;
11
- cursor: pointer;
12
- display: flex;
13
- gap: 4px;
14
- }
15
-
16
- .charcoal-checkbox__label[aria-disabled='true'] {
17
- cursor: default;
18
- opacity: 0.32;
19
- }
20
-
21
- .charcoal-checkbox__label[aria-disabled='true'] > input {
22
- opacity: 1;
23
- }
24
-
25
- .charcoal-checkbox__label_div {
26
- flex: 1;
27
- color: var(--charcoal-color-text-default);
28
- font-size: 14px;
29
- line-height: 20px;
30
- }
31
- .charcoal-segmented-control {
32
- display: inline-flex;
33
- align-items: center;
34
-
35
- background-color: var(--charcoal-color-container-secondary-default-a);
36
- border-radius: 16px;
37
- }
38
-
39
- .charcoal-segmented-control[data-uniform-segment-width='true'],
40
- .charcoal-segmented-control[data-full-width='true'] {
41
- display: inline-grid;
42
- grid-auto-columns: minmax(80px, 1fr);
43
- grid-auto-rows: 32px;
44
- grid-auto-flow: column;
45
- }
46
-
47
- .charcoal-segmented-control[data-full-width='true'] {
48
- width: 100%;
49
- }
50
-
51
- .charcoal-segmented-control-radio__label {
52
- position: relative;
53
- display: flex;
9
+ .charcoal-button {
10
+ -webkit-appearance: none;
11
+ -moz-appearance: none;
12
+ appearance: none;
13
+ background-image: none;
14
+ box-sizing: border-box;
15
+ padding: 0 24px;
16
+ border-style: none;
17
+ outline: none;
18
+ text-rendering: inherit;
19
+ letter-spacing: inherit;
20
+ word-spacing: inherit;
21
+ text-decoration: none;
22
+ font-family: inherit;
23
+ font-style: inherit;
24
+ font-variant: inherit;
25
+ margin: 0;
26
+ overflow: visible;
27
+ text-transform: none;
28
+ width: -moz-min-content;
29
+ width: min-content;
30
+ display: inline-grid;
54
31
  align-items: center;
55
32
  justify-content: center;
56
33
  cursor: pointer;
57
- height: 32px;
58
-
59
- padding-right: 16px;
60
- padding-left: 16px;
61
- border-radius: 16px;
62
- color: var(--charcoal-color-text-secondary-default);
63
-
34
+ -webkit-user-select: none;
35
+ -moz-user-select: none;
36
+ user-select: none;
37
+ white-space: nowrap;
38
+ border-radius: 999999px;
64
39
  font-size: 14px;
65
40
  line-height: 22px;
41
+ font-weight: bold;
42
+ color: var(--charcoal-color-text-default);
43
+ background-color: var(
44
+ --charcoal-color-container-secondary-default-a,
45
+ transparent
46
+ );
47
+ transition:
48
+ 0.2s color,
49
+ 0.2s background-color,
50
+ 0.2s box-shadow;
51
+ height: 40px;
66
52
  }
67
53
 
68
- .charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {
54
+ .charcoal-button:disabled,
55
+ .charcoal-button[aria-disabled]:not([aria-disabled='false']) {
69
56
  cursor: default;
70
57
  opacity: 0.32;
71
58
  }
72
59
 
73
- .charcoal-segmented-control-radio__label[data-checked='true'] {
74
- background-color: var(--charcoal-color-container-primary-default);
75
- color: var(--charcoal-color-text-on-primary-default);
60
+ .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,
61
+ .charcoal-button[aria-disabled='false']:focus-visible {
62
+ outline: none;
63
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
76
64
  }
77
65
 
78
- .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
79
- .charcoal-segmented-control-radio__label[data-full-width='true'] {
80
- justify-content: center;
81
- white-space: nowrap;
66
+ .charcoal-button:not(:disabled):not([aria-disabled]):hover,
67
+ .charcoal-button[aria-disabled='false']:hover {
68
+ color: var(--charcoal-color-text-hover);
69
+ background-color: var(--charcoal-color-container-secondary-hover-a);
82
70
  }
83
71
 
84
- .charcoal-segmented-control-radio__input {
85
- position: absolute;
72
+ .charcoal-button:not(:disabled):not([aria-disabled]):active,
73
+ .charcoal-button[aria-disabled='false']:active,
74
+ .charcoal-button[data-active='true'] {
75
+ color: var(--charcoal-color-text-press);
76
+ background-color: var(--charcoal-color-container-secondary-press-a);
77
+ }
86
78
 
87
- height: 0px;
88
- width: 0px;
89
- padding: 0;
90
- margin: 0;
79
+ .charcoal-button[data-variant='Primary'] {
80
+ color: var(--charcoal-color-text-on-primary-default);
81
+ background-color: var(--charcoal-color-container-primary-default);
82
+ }
91
83
 
92
- -webkit-appearance: none;
84
+ .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),
85
+ .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
86
+ color: var(--charcoal-color-text-on-primary-hover);
87
+ background-color: var(--charcoal-color-container-primary-hover);
88
+ }
93
89
 
94
- -moz-appearance: none;
90
+ .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),
91
+ .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
92
+ .charcoal-button[data-variant='Primary'][data-active='true'] {
93
+ color: var(--charcoal-color-text-on-primary-press);
94
+ background-color: var(--charcoal-color-container-primary-press);
95
+ }
95
96
 
96
- appearance: none;
97
- box-sizing: border-box;
98
- overflow: hidden;
99
- white-space: nowrap;
100
- opacity: 0;
101
- }
102
- .charcoal-menu-item-group {
103
- display: block;
104
- }
97
+ .charcoal-button[data-variant='Overlay'] {
98
+ color: var(--charcoal-color-text-on-on-img-default);
99
+ background-color: var(--charcoal-color-container-on-img-default);
100
+ }
105
101
 
106
- .charcoal-menu-item-group > span {
107
- display: block;
108
- color: var(--charcoal-color-text-tertiary-default);
109
- font-size: 12px;
110
- font-weight: bold;
111
- padding: 12px 0 8px 16px;
112
- }
102
+ .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),
103
+ .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
104
+ color: var(--charcoal-color-text-on-on-img-hover);
105
+ background-color: var(--charcoal-color-container-on-img-hover);
106
+ }
113
107
 
114
- .charcoal-menu-item-group > ul {
115
- padding-left: 0;
116
- margin: 0;
117
- box-sizing: border-box;
118
- list-style: none;
119
- overflow: hidden;
120
- }
121
- .charcoal-hint-text {
122
- background-color: var(--charcoal-color-container-secondary-default);
123
- border-radius: 8px;
124
- padding: 12px 16px;
125
- display: flex;
126
- align-items: flex-start;
127
- }
108
+ .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),
109
+ .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
110
+ .charcoal-button[data-variant='Overlay'][data-active='true'] {
111
+ color: var(--charcoal-color-text-on-on-img-press);
112
+ background-color: var(--charcoal-color-container-on-img-press);
113
+ }
128
114
 
129
- .charcoal-hint-text[data-context='page'] {
130
- justify-content: center;
115
+ .charcoal-button[data-variant='Navigation'] {
116
+ color: var(--charcoal-color-text-on-hud-default);
117
+ background-color: var(--charcoal-color-container-hud-default);
131
118
  }
132
119
 
133
- @media (min-width: 744px) {
120
+ .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),
121
+ .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
122
+ color: var(--charcoal-color-text-on-hud-hover);
123
+ background-color: var(--charcoal-color-container-hud-hover);
124
+ }
134
125
 
135
- .charcoal-hint-text[data-context='page'] {
136
- padding: 20px 40px
126
+ .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),
127
+ .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
128
+ .charcoal-button[data-variant='Navigation'][data-active='true'] {
129
+ color: var(--charcoal-color-text-on-hud-press);
130
+ background-color: var(--charcoal-color-container-hud-press);
131
+ }
132
+
133
+ .charcoal-button[data-variant='Danger'] {
134
+ color: var(--charcoal-color-text-on-negative-default);
135
+ background-color: var(--charcoal-color-container-negative-default);
137
136
  }
137
+
138
+ .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),
139
+ .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
140
+ color: var(--charcoal-color-text-on-negative-hover);
141
+ background-color: var(--charcoal-color-container-negative-hover);
138
142
  }
139
143
 
140
- .charcoal-hint-text-icon {
141
- display: flex;
142
- align-items: center;
143
- color: var(--charcoal-color-icon-tertiary-default);
144
- height: 22px;
145
- margin: 0 4px 0 0;
146
- }
144
+ .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),
145
+ .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
146
+ .charcoal-button[data-variant='Danger'][data-active='true'] {
147
+ color: var(--charcoal-color-text-on-negative-press);
148
+ background-color: var(--charcoal-color-container-negative-press);
149
+ }
147
150
 
148
- .charcoal-hint-text-message {
149
- color: var(--charcoal-color-text-secondary-default);
150
- font-size: 14px;
151
- line-height: 22px;
152
- display: flow-root;
153
- margin: 0;
154
- min-width: 0;
155
- overflow-wrap: break-word;
156
- }
157
- .charcoal-tag-item {
158
- --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
159
- --charcoal-tag-item-size: 40px;
160
- --charcoal-tag-item-padding-left: 24px;
161
- --charcoal-tag-item-padding-right: 24px;
162
- --charcoal-tag-item-bg: ;
151
+ .charcoal-button[data-size='S'] {
152
+ padding: 0 16px;
153
+ height: 32px;
154
+ }
163
155
 
164
- isolation: isolate;
165
- position: relative;
156
+ .charcoal-button[data-full-width='true'] {
157
+ width: 100%;
158
+ }
159
+ .charcoal-clickable {
160
+ cursor: pointer;
166
161
 
162
+ /* Reset button appearance */
167
163
  -webkit-appearance: none;
168
-
169
164
  -moz-appearance: none;
170
-
171
165
  appearance: none;
172
- outline: none;
166
+ background: transparent;
167
+ padding: 0;
173
168
  border-style: none;
174
-
175
- display: inline-flex;
176
- gap: 8px;
177
- align-items: center;
178
- justify-content: center;
179
-
169
+ outline: none;
170
+ color: inherit;
171
+ text-rendering: inherit;
172
+ letter-spacing: inherit;
173
+ word-spacing: inherit;
180
174
  text-decoration: none;
181
- cursor: pointer;
182
- overflow: hidden;
183
175
 
184
- color: var(--charcoal-tag-item-color);
185
- height: var(--charcoal-tag-item-size);
186
- padding-top: 4px;
187
- padding-bottom: 4px;
188
- padding-left: var(--charcoal-tag-item-padding-left);
189
- padding-right: var(--charcoal-tag-item-padding-right);
190
- box-sizing: border-box;
191
- border-radius: 4px;
176
+ /* Change the font styles in all browsers. */
177
+ font: inherit;
192
178
 
193
- transition: 0.2s box-shadow;
179
+ /* Remove the margin in Firefox and Safari. */
180
+ margin: 0;
181
+
182
+ /* Show the overflow in Edge. */
183
+ overflow: visible;
184
+
185
+ /* Remove the inheritance of text transform in Firefox. */
186
+ text-transform: none;
194
187
  }
195
188
 
196
- .charcoal-tag-item[data-size='M'] {
197
- --charcoal-tag-item-size: 40px;
198
- --charcoal-tag-item-padding-left: 24px;
199
- --charcoal-tag-item-padding-right: 24px;
189
+ .charcoal-clickable:disabled,
190
+ .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
191
+ cursor: default;
200
192
  }
201
193
 
202
- .charcoal-tag-item[data-size='S'] {
203
- --charcoal-tag-item-size: 32px;
204
- --charcoal-tag-item-padding-left: 16px;
205
- --charcoal-tag-item-padding-right: 16px;
194
+ .charcoal-clickable:focus {
195
+ outline: none;
206
196
  }
207
197
 
208
- .charcoal-tag-item[data-state='inactive'] {
209
- --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
198
+ .charcoal-clickable::-moz-focus-inner {
199
+ border-style: none;
200
+ padding: 0;
210
201
  }
202
+ .charcoal-icon-button {
203
+ cursor: pointer;
204
+ -webkit-appearance: none;
205
+ -moz-appearance: none;
206
+ appearance: none;
207
+ background: transparent;
208
+ padding: 0;
209
+ border-style: none;
210
+ outline: none;
211
+ color: inherit;
212
+ text-rendering: inherit;
213
+ letter-spacing: inherit;
214
+ word-spacing: inherit;
215
+ text-decoration: none;
216
+ font: inherit;
217
+ margin: 0;
218
+ overflow: visible;
219
+ text-transform: none;
211
220
 
212
- .charcoal-tag-item[data-state='active'] {
213
- --charcoal-tag-item-padding-left: 16px;
214
- --charcoal-tag-item-padding-right: 8px;
215
- }
221
+ -webkit-user-select: none;
216
222
 
217
- .charcoal-tag-item:disabled,
218
- .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
219
- opacity: 0.32;
223
+ -moz-user-select: none;
224
+
225
+ user-select: none;
226
+ display: flex;
227
+ align-items: center;
228
+ justify-content: center;
229
+ border-radius: 999999px;
230
+ transition:
231
+ 0.2s background-color,
232
+ 0.2s box-shadow;
233
+ }
234
+
235
+ .charcoal-icon-button:disabled,
236
+ .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
220
237
  cursor: default;
238
+ opacity: 0.32;
221
239
  }
222
240
 
223
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
224
- .charcoal-tag-item[aria-disabled='false']:focus-visible {
241
+ .charcoal-icon-button:focus {
225
242
  outline: none;
226
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
227
243
  }
228
244
 
229
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
230
- .charcoal-tag-item[aria-disabled='false']:focus {
231
- outline: none;
232
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
245
+ .charcoal-icon-button::-moz-focus-inner {
246
+ border-style: none;
247
+ padding: 0;
233
248
  }
234
249
 
235
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
236
- .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
237
- box-shadow: none;
250
+ .charcoal-icon-button[data-size='XS'] {
251
+ width: 20px;
252
+ height: 20px;
238
253
  }
239
254
 
240
- .charcoal-tag-item__bg {
241
- background-color: var(--charcoal-tag-item-bg);
242
- }
255
+ .charcoal-icon-button[data-size='S'] {
256
+ width: 32px;
257
+ height: 32px;
258
+ }
243
259
 
244
- .charcoal-tag-item__bg[data-bg-variant='image'] {
245
- background-color: var(--charcoal-color-container-on-img-default);
260
+ .charcoal-icon-button[data-size='M'] {
261
+ width: 40px;
262
+ height: 40px;
246
263
  }
247
264
 
248
- .charcoal-tag-item__bg[data-bg-variant='image']::before {
249
- content: '';
250
- position: absolute;
251
- z-index: 1;
252
- top: 0;
253
- left: 0;
254
- width: 100%;
255
- height: 100%;
256
- background-position: center;
257
- background-size: cover;
258
- background-image: var(--charcoal-tag-item-bg);
259
- mix-blend-mode: overlay;
265
+ .charcoal-icon-button[data-variant='Default'] {
266
+ color: var(--charcoal-color-icon-tertiary-default);
267
+ background-color: transparent;
268
+ }
269
+
270
+ .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),
271
+ .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
272
+ color: var(--charcoal-color-icon-tertiary-press);
273
+ background-color: var(--charcoal-color-container-press-a);
260
274
  }
261
275
 
262
- .charcoal-tag-item__bg[data-state='inactive'] {
263
- background-color: var(--charcoal-color-container-secondary-default);
264
- }
276
+ .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
277
+ .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
278
+ color: var(--charcoal-color-icon-tertiary-hover);
279
+ background-color: var(--charcoal-color-container-hover-a);
280
+ }
265
281
 
266
- .charcoal-tag-item__label {
267
- height: 100%;
268
- display: flex;
269
- flex-direction: column;
270
- align-items: center;
271
- justify-content: center;
272
- }
282
+ .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,
283
+ .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
284
+ color: var(--charcoal-color-icon-tertiary-press);
285
+ background-color: var(--charcoal-color-container-press-a);
286
+ }
273
287
 
274
- .charcoal-tag-item__label[data-has-translate='true'] {
275
- justify-content: space-between;
288
+ .charcoal-icon-button[data-variant='Overlay'] {
289
+ color: var(--charcoal-color-icon-on-on-img-default);
290
+ background-color: var(--charcoal-color-container-on-img-default);
276
291
  }
277
292
 
278
- .charcoal-tag-item__label__translated {
279
- --charcoal-tag-item-text-font-size: 12px;
280
- --charcoal-tag-item-text-line-height: 20px;
281
- font-weight: bold;
282
- }
293
+ .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),
294
+ .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
295
+ color: var(--charcoal-color-icon-on-on-img-press);
296
+ background-color: var(--charcoal-color-container-on-img-press);
297
+ }
283
298
 
284
- .charcoal-tag-item__label__translated::before {
285
- display: none;
286
- }
299
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
300
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
301
+ color: var(--charcoal-color-icon-on-on-img-hover);
302
+ background-color: var(--charcoal-color-container-on-img-hover);
303
+ }
287
304
 
288
- .charcoal-tag-item__label__text {
289
- --charcoal-tag-item-text-font-size: 14px;
290
- --charcoal-tag-item-text-line-height: 22px;
305
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,
306
+ .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
307
+ color: var(--charcoal-color-icon-on-on-img-press);
308
+ background-color: var(--charcoal-color-container-on-img-press);
309
+ }
291
310
 
292
- max-width: 152px;
293
- overflow: hidden;
294
- font-weight: bold;
311
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
312
+ .charcoal-icon-button[aria-disabled='false']:focus {
313
+ outline: none;
314
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
315
+ }
295
316
 
296
- color: inherit;
297
- white-space: nowrap;
298
- text-overflow: ellipsis;
317
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
318
+ .charcoal-icon-button[aria-disabled='false']:focus-visible {
319
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
320
+ }
321
+
322
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
323
+ .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {
324
+ box-shadow: none;
325
+ }
326
+ .charcoal-radio__label {
327
+ display: grid;
328
+ grid-template-columns: auto 1fr;
329
+ grid-gap: 4px;
330
+ align-items: center;
331
+ cursor: pointer;
299
332
  }
300
333
 
301
- .charcoal-tag-item__label__text[data-has-translate='true'] {
302
- --charcoal-tag-item-text-font-size: 10px;
303
- --charcoal-tag-item-text-line-height: 14px;
304
- font-weight: normal;
334
+ .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
335
+ opacity: 0.32;
336
+ cursor: default;
305
337
  }
306
338
 
307
- /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
308
- .charcoal-tag-item__labe__text[data-has-translate='true']::after {
309
- display: none;
339
+ .charcoal-radio__label_div {
340
+ font-size: 14px;
341
+ line-height: 22px;
342
+ color: var(--charcoal-color-text-default);
310
343
  }
311
- .charcoal-text-area-root {
344
+ .charcoal-radio-group {
312
345
  display: grid;
313
346
  grid-template-columns: 1fr;
314
- grid-gap: 4px;
347
+ grid-gap: 8px;
348
+ }
349
+ .charcoal-multi-select {
350
+ display: grid;
351
+ grid-template-columns: auto 1fr;
352
+ align-items: center;
353
+ position: relative;
354
+ cursor: pointer;
355
+ gap: 4px;
315
356
  }
316
357
 
317
- .charcoal-text-area-root[aria-disabled='true'] {
358
+ .charcoal-multi-select:disabled,
359
+ .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
318
360
  opacity: 0.32;
361
+ cursor: default;
319
362
  }
320
363
 
321
- .charcoal-text-area-container {
322
- /* Runtime variable overridden by the React component. */
323
- --charcoal-text-area-rows: 4;
324
-
325
- position: relative;
326
- overflow: hidden;
327
-
328
- color: var(--charcoal-color-text-secondary-default);
329
- background-color: var(--charcoal-color-container-secondary-default-a);
330
- border-radius: 4px;
364
+ .charcoal-multi-select-label {
365
+ display: flow-root;
366
+ align-items: center;
367
+ font-size: 14px;
368
+ line-height: 22px;
369
+ color: var(--charcoal-color-text-default);
370
+ }
371
+
372
+ .charcoal-multi-select-label::before {
373
+ display: block;
374
+ width: 0;
375
+ height: 0;
376
+ content: '';
377
+ margin-top: -4px;
378
+ }
379
+
380
+ .charcoal-multi-select-label::after {
381
+ display: block;
382
+ width: 0;
383
+ height: 0;
384
+ content: '';
385
+ margin-bottom: -4px;
386
+ }
387
+
388
+ .charcoal-multi-select-input[type='checkbox'] {
389
+ -webkit-appearance: none;
390
+ -moz-appearance: none;
391
+ appearance: none;
392
+ display: block;
393
+ width: 20px;
394
+ height: 20px;
395
+ margin: 0;
396
+ background-color: var(--charcoal-color-container-neutral-default);
397
+ border-radius: 999999px;
331
398
  transition:
332
399
  0.2s background-color,
333
400
  0.2s box-shadow;
334
- height: calc(22px * var(--charcoal-text-area-rows) + 18px);
335
401
  }
336
402
 
337
- .charcoal-text-area-container[aria-invalid='true'] {
338
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
403
+ .charcoal-multi-select-input[type='checkbox']:checked {
404
+ background-color: var(--charcoal-color-container-primary-default);
339
405
  }
340
406
 
341
- .charcoal-text-area-container:focus-within {
407
+ .charcoal-multi-select-input[type='checkbox']:focus {
342
408
  outline: none;
343
409
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
344
410
  }
345
411
 
346
- .charcoal-text-area-container:has([data-no-bottom-padding='true']) {
347
- height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
412
+ .charcoal-multi-select-input[type='checkbox']:focus-visible {
413
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
348
414
  }
349
415
 
350
- .charcoal-text-area-container:not([aria-disabled='true']):hover {
351
- background-color: var(--charcoal-color-container-secondary-hover-a);
416
+ .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
417
+ box-shadow: none;
352
418
  }
353
419
 
354
- .charcoal-text-area-container[aria-invalid='true']:focus-within {
355
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
420
+ .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
421
+ .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
422
+ background-color: var(--charcoal-color-container-neutral-hover);
356
423
  }
357
424
 
358
- .charcoal-text-area-textarea {
359
- border: none;
360
- outline: none;
361
- resize: none;
362
- font-family: inherit;
363
- color: inherit;
364
- box-sizing: border-box;
365
-
366
- /* Prevent zooming for iOS Safari */
367
- --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
368
- --charcoal-textarea-line-height: calc(
369
- 22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
370
- );
371
- --charcoal-textarea-padding-y: calc(
372
- 8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
373
- );
374
- --charcoal-textarea-padding-x: calc(
375
- 9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
376
- );
377
-
378
- transform-origin: top left;
379
- transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
380
- width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
381
- font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
382
- line-height: var(--charcoal-textarea-line-height);
383
- padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
384
- height: calc(
385
- var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
386
- var(--charcoal-textarea-padding-y) * 2
387
- );
425
+ .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),
426
+ .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
427
+ background-color: var(--charcoal-color-container-neutral-press);
428
+ }
388
429
 
389
- /* Display box-shadow for iOS Safari */
390
- -webkit-appearance: none;
391
- -moz-appearance: none;
392
- appearance: none;
430
+ .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
431
+ .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
432
+ background-color: var(--charcoal-color-container-primary-hover);
433
+ }
393
434
 
394
- background: none;
395
- }
435
+ .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
436
+ .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
437
+ background-color: var(--charcoal-color-container-primary-press);
438
+ }
396
439
 
397
- .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
398
- padding: var(--charcoal-textarea-padding-y)
399
- var(--charcoal-textarea-padding-x) 0;
400
- height: calc(
401
- var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
402
- var(--charcoal-textarea-padding-y)
403
- );
440
+ .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(
441
+ [aria-disabled]
442
+ ) {
443
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
404
444
  }
405
445
 
406
- .charcoal-text-area-textarea::-moz-placeholder {
407
- color: var(--charcoal-color-text-placeholder-default);
446
+ .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
447
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
408
448
  }
409
449
 
410
- .charcoal-text-area-textarea::placeholder {
411
- color: var(--charcoal-color-text-placeholder-default);
450
+ .charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
451
+ background-color: var(--charcoal-color-container-on-img-default);
412
452
  }
413
453
 
414
- .charcoal-text-area-counter {
454
+ .charcoal-multi-select-overlay {
415
455
  position: absolute;
416
- bottom: 9px;
417
- right: 8px;
418
-
419
- line-height: 22px;
420
- font-size: 14px;
421
- color: var(--charcoal-color-text-tertiary-default);
456
+ top: -2px;
457
+ left: -2px;
458
+ box-sizing: border-box;
459
+ display: flex;
460
+ align-items: center;
461
+ justify-content: center;
462
+ width: 24px;
463
+ height: 24px;
464
+ border-radius: 999999px;
465
+ color: var(--charcoal-color-icon-on-primary-default);
466
+ transition: 0.2s box-shadow;
422
467
  }
423
- .charcoal-clickable {
424
- cursor: pointer;
425
-
426
- /* Reset button appearance */
427
- -webkit-appearance: none;
428
- -moz-appearance: none;
429
- appearance: none;
430
- background: transparent;
431
- padding: 0;
432
- border-style: none;
433
- outline: none;
434
- color: inherit;
435
- text-rendering: inherit;
436
- letter-spacing: inherit;
437
- word-spacing: inherit;
438
- text-decoration: none;
439
-
440
- /* Change the font styles in all browsers. */
441
- font: inherit;
442
468
 
443
- /* Remove the margin in Firefox and Safari. */
444
- margin: 0;
469
+ .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
470
+ [aria-disabled]
471
+ ) {
472
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
473
+ }
445
474
 
446
- /* Show the overflow in Edge. */
447
- overflow: visible;
475
+ .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
476
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
477
+ }
448
478
 
449
- /* Remove the inheritance of text transform in Firefox. */
450
- text-transform: none;
479
+ .charcoal-multi-select-overlay[data-overlay='true'] {
480
+ border-color: var(--charcoal-color-border-hud);
481
+ border-width: 2px;
482
+ border-style: solid;
483
+ }
484
+ .charcoal-switch__label {
485
+ display: inline-grid;
486
+ grid-template-columns: auto 1fr;
487
+ align-items: center;
488
+ cursor: pointer;
489
+ outline: 0;
490
+ gap: 4px;
451
491
  }
452
492
 
453
- .charcoal-clickable:disabled,
454
- .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
493
+ .charcoal-switch__label[aria-disabled='true'] {
494
+ opacity: 0.32;
455
495
  cursor: default;
456
496
  }
457
497
 
458
- .charcoal-clickable:focus {
459
- outline: none;
460
- }
498
+ .charcoal-switch__label[aria-disabled='true'] > input {
499
+ opacity: 1;
500
+ }
461
501
 
462
- .charcoal-clickable::-moz-focus-inner {
463
- border-style: none;
464
- padding: 0;
502
+ .charcoal-switch__label_div {
503
+ font-size: 14px;
504
+ line-height: 22px;
505
+ color: var(--charcoal-color-text-default);
506
+ }
507
+ .charcoal-text-field-root {
508
+ display: grid;
509
+ grid-template-columns: 1fr;
510
+ grid-gap: 4px;
511
+ }
512
+
513
+ .charcoal-text-field-root[aria-disabled='true'] {
514
+ opacity: 0.32;
465
515
  }
466
- .charcoal-text-ellipsis {
467
- /* Runtime variables overridden by the React component. */
468
- --charcoal-text-ellipsis-line-limit: 1;
469
- --charcoal-text-ellipsis-line-height: inherit;
470
516
 
471
- overflow: hidden;
472
- overflow-wrap: break-word;
473
- display: -webkit-box;
474
- -webkit-box-orient: vertical;
475
- -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
517
+ .charcoal-text-field-container {
518
+ display: flex;
519
+ height: 40px;
520
+ transition:
521
+ 0.2s background-color,
522
+ 0.2s box-shadow;
523
+ color: var(--charcoal-color-text-secondary-default);
524
+ background-color: var(--charcoal-color-container-secondary-default-a);
525
+ border-radius: 4px;
526
+ padding: 0 8px;
527
+ line-height: 22px;
528
+ font-size: 14px;
476
529
  }
477
530
 
478
- .charcoal-text-ellipsis[data-has-line-height='true'] {
479
- line-height: var(--charcoal-text-ellipsis-line-height);
531
+ .charcoal-text-field-container[data-invalid='true'] {
532
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
480
533
  }
481
534
 
482
- .charcoal-text-ellipsis[data-has-line-height='false'] {
483
- line-height: inherit;
535
+ .charcoal-text-field-container:not([aria-disabled='true']):hover {
536
+ background-color: var(--charcoal-color-container-secondary-hover-a);
484
537
  }
485
538
 
486
- .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
487
- text-overflow: ellipsis;
488
- white-space: nowrap;
539
+ .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
540
+ outline: none;
541
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
489
542
  }
490
- .charcoal-icon-button {
491
- cursor: pointer;
492
- -webkit-appearance: none;
493
- -moz-appearance: none;
494
- appearance: none;
495
- background: transparent;
496
- padding: 0;
497
- border-style: none;
498
- outline: none;
499
- color: inherit;
500
- text-rendering: inherit;
501
- letter-spacing: inherit;
502
- word-spacing: inherit;
503
- text-decoration: none;
504
- font: inherit;
505
- margin: 0;
506
- overflow: visible;
507
- text-transform: none;
508
543
 
509
- -webkit-user-select: none;
544
+ .charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {
545
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
546
+ }
510
547
 
511
- -moz-user-select: none;
548
+ .charcoal-text-field-prefix {
549
+ display: flex;
550
+ align-items: center;
551
+ margin-right: 4px;
552
+ }
512
553
 
513
- user-select: none;
554
+ .charcoal-text-field-suffix {
514
555
  display: flex;
515
556
  align-items: center;
516
- justify-content: center;
517
- border-radius: 999999px;
518
- transition:
519
- 0.2s background-color,
520
- 0.2s box-shadow;
557
+ gap: 8px;
558
+ margin-left: 4px;
521
559
  }
522
560
 
523
- .charcoal-icon-button:disabled,
524
- .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
525
- cursor: default;
526
- opacity: 0.32;
527
- }
561
+ .charcoal-text-field-input-root {
562
+ flex: 1;
563
+ min-width: 0;
564
+ overflow: hidden;
565
+ }
528
566
 
529
- .charcoal-icon-button:focus {
530
- outline: none;
531
- }
567
+ .charcoal-text-field-input {
568
+ border: none;
569
+ box-sizing: border-box;
570
+ outline: none;
571
+ font-family: inherit;
532
572
 
533
- .charcoal-icon-button::-moz-focus-inner {
534
- border-style: none;
535
- padding: 0;
536
- }
573
+ /* Prevent zooming for iOS Safari */
574
+ transform-origin: top left;
575
+ transform: scale(0.875);
576
+ width: calc(100% / 0.875);
577
+ height: calc(100% / 0.875);
578
+ font-size: calc(14px / 0.875);
579
+ line-height: calc(22px / 0.875);
580
+ padding-left: 0;
581
+ padding-right: 0;
582
+ border-radius: calc(4px / 0.875);
537
583
 
538
- .charcoal-icon-button[data-size='XS'] {
539
- width: 20px;
540
- height: 20px;
541
- }
584
+ /* Display box-shadow for iOS Safari */
585
+ -webkit-appearance: none;
586
+ -moz-appearance: none;
587
+ appearance: none;
588
+ background: transparent;
542
589
 
543
- .charcoal-icon-button[data-size='S'] {
544
- width: 32px;
545
- height: 32px;
546
- }
590
+ color: var(--charcoal-color-text-secondary-default);
591
+ }
547
592
 
548
- .charcoal-icon-button[data-size='M'] {
549
- width: 40px;
550
- height: 40px;
593
+ .charcoal-text-field-input::-moz-placeholder {
594
+ color: var(--charcoal-color-text-placeholder-default);
551
595
  }
552
596
 
553
- .charcoal-icon-button[data-variant='Default'] {
554
- color: var(--charcoal-color-icon-tertiary-default);
555
- background-color: transparent;
597
+ .charcoal-text-field-input::placeholder {
598
+ color: var(--charcoal-color-text-placeholder-default);
556
599
  }
557
600
 
558
- .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),
559
- .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
560
- color: var(--charcoal-color-icon-tertiary-press);
561
- background-color: var(--charcoal-color-container-press-a);
562
- }
563
-
564
- .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
565
- .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
566
- color: var(--charcoal-color-icon-tertiary-hover);
567
- background-color: var(--charcoal-color-container-hover-a);
568
- }
569
-
570
- .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,
571
- .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
572
- color: var(--charcoal-color-icon-tertiary-press);
573
- background-color: var(--charcoal-color-container-press-a);
574
- }
601
+ .charcoal-text-field-line-counter {
602
+ line-height: 22px;
603
+ font-size: 14px;
604
+ color: var(--charcoal-color-text-tertiary-default);
605
+ }
606
+ .charcoal-text-area-root {
607
+ display: grid;
608
+ grid-template-columns: 1fr;
609
+ grid-gap: 4px;
610
+ }
575
611
 
576
- .charcoal-icon-button[data-variant='Overlay'] {
577
- color: var(--charcoal-color-icon-on-on-img-default);
578
- background-color: var(--charcoal-color-container-on-img-default);
612
+ .charcoal-text-area-root[aria-disabled='true'] {
613
+ opacity: 0.32;
579
614
  }
580
615
 
581
- .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),
582
- .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
583
- color: var(--charcoal-color-icon-on-on-img-press);
584
- background-color: var(--charcoal-color-container-on-img-press);
585
- }
616
+ .charcoal-text-area-container {
617
+ /* Runtime variable overridden by the React component. */
618
+ --charcoal-text-area-rows: 4;
586
619
 
587
- .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
588
- .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
589
- color: var(--charcoal-color-icon-on-on-img-hover);
590
- background-color: var(--charcoal-color-container-on-img-hover);
591
- }
620
+ position: relative;
621
+ overflow: hidden;
592
622
 
593
- .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,
594
- .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
595
- color: var(--charcoal-color-icon-on-on-img-press);
596
- background-color: var(--charcoal-color-container-on-img-press);
597
- }
623
+ color: var(--charcoal-color-text-secondary-default);
624
+ background-color: var(--charcoal-color-container-secondary-default-a);
625
+ border-radius: 4px;
626
+ transition:
627
+ 0.2s background-color,
628
+ 0.2s box-shadow;
629
+ height: calc(22px * var(--charcoal-text-area-rows) + 18px);
630
+ }
598
631
 
599
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
600
- .charcoal-icon-button[aria-disabled='false']:focus {
601
- outline: none;
602
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
632
+ .charcoal-text-area-container[aria-invalid='true'] {
633
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
603
634
  }
604
635
 
605
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
606
- .charcoal-icon-button[aria-disabled='false']:focus-visible {
636
+ .charcoal-text-area-container:focus-within {
637
+ outline: none;
607
638
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
608
639
  }
609
640
 
610
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
611
- .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {
612
- box-shadow: none;
641
+ .charcoal-text-area-container:has([data-no-bottom-padding='true']) {
642
+ height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
613
643
  }
614
- .charcoal-modal-background {
615
- overflow: auto;
616
- display: flex;
617
- position: fixed;
618
- top: 0;
619
- left: 0;
620
- width: 100%;
621
- height: 100%;
622
- justify-content: center;
623
- padding: 40px 0;
624
- box-sizing: border-box;
625
-
626
- background-color: var(--charcoal-color-background-overlay);
627
- }
628
644
 
629
- @media (max-width: 743px) {
630
- .charcoal-modal-background[data-bottom-sheet='true'],
631
- .charcoal-modal-background[data-bottom-sheet='full'] {
632
- padding: 0;
633
- }
645
+ .charcoal-text-area-container:not([aria-disabled='true']):hover {
646
+ background-color: var(--charcoal-color-container-secondary-hover-a);
634
647
  }
635
648
 
636
- /* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。
637
- transition は entering / exiting に限定し、開いたままテーマ切り替え等で
638
- 色や transform が変わってもアニメーションしないようにする */
639
- .charcoal-modal-background[data-animation] {
640
- overflow: hidden;
641
- }
649
+ .charcoal-text-area-container[aria-invalid='true']:focus-within {
650
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
651
+ }
642
652
 
643
- .charcoal-modal-background[data-animation='entering'],
644
- .charcoal-modal-background[data-animation='exiting'] {
645
- transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);
646
- }
653
+ .charcoal-text-area-textarea {
654
+ border: none;
655
+ outline: none;
656
+ resize: none;
657
+ font-family: inherit;
658
+ color: inherit;
659
+ box-sizing: border-box;
647
660
 
648
- /* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で
649
- 透明なオーバーレイがタップを奪い続けるのも防ぐ） */
650
- .charcoal-modal-background[data-animation='exited'],
651
- .charcoal-modal-background[data-animation='exiting'] {
652
- background-color: transparent;
653
- pointer-events: none;
654
- }
661
+ /* Prevent zooming for iOS Safari */
662
+ --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
663
+ --charcoal-textarea-line-height: calc(
664
+ 22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
665
+ );
666
+ --charcoal-textarea-padding-y: calc(
667
+ 8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
668
+ );
669
+ --charcoal-textarea-padding-x: calc(
670
+ 9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
671
+ );
655
672
 
656
- .charcoal-modal-background[data-animation='entered'] {
657
- overflow: auto;
658
- }
673
+ transform-origin: top left;
674
+ transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
675
+ width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
676
+ font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
677
+ line-height: var(--charcoal-textarea-line-height);
678
+ padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
679
+ height: calc(
680
+ var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
681
+ var(--charcoal-textarea-padding-y) * 2
682
+ );
659
683
 
660
- .charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,
661
- .charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
662
- transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
663
- }
684
+ /* Display box-shadow for iOS Safari */
685
+ -webkit-appearance: none;
686
+ -moz-appearance: none;
687
+ appearance: none;
664
688
 
665
- .charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,
666
- .charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
667
- transform: translateY(100%);
689
+ background: none;
668
690
  }
669
691
 
670
- .charcoal-modal-close-button {
671
- position: absolute;
672
- top: 8px;
673
- right: 8px;
692
+ .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
693
+ padding: var(--charcoal-textarea-padding-y)
694
+ var(--charcoal-textarea-padding-x) 0;
695
+ height: calc(
696
+ var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
697
+ var(--charcoal-textarea-padding-y)
698
+ );
699
+ }
700
+
701
+ .charcoal-text-area-textarea::-moz-placeholder {
702
+ color: var(--charcoal-color-text-placeholder-default);
703
+ }
704
+
705
+ .charcoal-text-area-textarea::placeholder {
706
+ color: var(--charcoal-color-text-placeholder-default);
707
+ }
708
+
709
+ .charcoal-text-area-counter {
710
+ position: absolute;
711
+ bottom: 9px;
712
+ right: 8px;
713
+
714
+ line-height: 22px;
715
+ font-size: 14px;
716
+ color: var(--charcoal-color-text-tertiary-default);
717
+ }
718
+ .charcoal-icon {
719
+ display: inline-flex;
720
+ width: var(--charcoal-icon-size);
721
+ height: var(--charcoal-icon-size);
722
+ }
723
+
724
+ pixiv-icon:not(:defined) {
725
+ --pixiv-icon-base: 24px;
726
+ --pixiv-icon-scale: 1;
727
+ --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
728
+
729
+ display: inline-flex;
730
+ /* --charcoal-icon-size がセットされていればそれを優先、
731
+ なければ name / scale から導出した --pixiv-icon-size をフォールバック */
732
+ width: var(--charcoal-icon-size, var(--pixiv-icon-size));
733
+ height: var(--charcoal-icon-size, var(--pixiv-icon-size));
734
+ }
735
+
736
+ pixiv-icon:not(:defined)[name^='16/'] {
737
+ --pixiv-icon-base: 16px;
738
+ --pixiv-icon-size: 16px;
739
+ }
740
+
741
+ pixiv-icon:not(:defined)[name^='24/'][scale='2'] {
742
+ --pixiv-icon-scale: 2;
743
+ }
744
+
745
+ pixiv-icon:not(:defined)[name^='24/'][scale='3'] {
746
+ --pixiv-icon-scale: 3;
747
+ }
748
+
749
+ pixiv-icon:not(:defined)[name^='32/'] {
750
+ --pixiv-icon-base: 32px;
751
+ --pixiv-icon-size: 32px;
752
+ }
753
+
754
+ pixiv-icon:not(:defined)[name^='Inline/'] {
755
+ --pixiv-icon-base: 16px;
756
+ }
757
+
758
+ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
759
+ --pixiv-icon-scale: 2;
760
+ }
761
+ .charcoal-modal-background {
762
+ overflow: auto;
763
+ display: flex;
764
+ position: fixed;
765
+ top: 0;
766
+ left: 0;
767
+ width: 100%;
768
+ height: 100%;
769
+ justify-content: center;
770
+ padding: 40px 0;
771
+ box-sizing: border-box;
772
+
773
+ background-color: var(--charcoal-color-background-overlay);
774
+ }
775
+
776
+ @media (max-width: 743px) {
777
+ .charcoal-modal-background[data-bottom-sheet='true'],
778
+ .charcoal-modal-background[data-bottom-sheet='full'] {
779
+ padding: 0;
780
+ }
781
+ }
782
+
783
+ /* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。
784
+ transition は entering / exiting に限定し、開いたままテーマ切り替え等で
785
+ 色や transform が変わってもアニメーションしないようにする */
786
+ .charcoal-modal-background[data-animation] {
787
+ overflow: hidden;
788
+ }
789
+
790
+ .charcoal-modal-background[data-animation='entering'],
791
+ .charcoal-modal-background[data-animation='exiting'] {
792
+ transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);
793
+ }
794
+
795
+ /* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で
796
+ 透明なオーバーレイがタップを奪い続けるのも防ぐ） */
797
+ .charcoal-modal-background[data-animation='exited'],
798
+ .charcoal-modal-background[data-animation='exiting'] {
799
+ background-color: transparent;
800
+ pointer-events: none;
801
+ }
802
+
803
+ .charcoal-modal-background[data-animation='entered'] {
804
+ overflow: auto;
805
+ }
806
+
807
+ .charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,
808
+ .charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
809
+ transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
810
+ }
811
+
812
+ .charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,
813
+ .charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {
814
+ transform: translateY(100%);
815
+ }
816
+
817
+ .charcoal-modal-close-button {
818
+ position: absolute;
819
+ top: 8px;
820
+ right: 8px;
674
821
 
675
822
  color: var(--charcoal-color-text-tertiary-default);
676
823
  transition: 0.2s color;
@@ -681,10 +828,45 @@
681
828
  font-weight: inherit;
682
829
  font-size: inherit;
683
830
  }
684
- .charcoal-radio-group {
831
+ .charcoal-modal-header-root {
832
+ height: 64px;
685
833
  display: grid;
686
- grid-template-columns: 1fr;
687
- grid-gap: 8px;
834
+ align-content: center;
835
+ justify-content: center;
836
+ }
837
+
838
+ @media (max-width: 743px) {
839
+ .charcoal-modal-header-root[data-bottom-sheet='true'],
840
+ .charcoal-modal-header-root[data-bottom-sheet='full'] {
841
+ height: 48px;
842
+ }
843
+ }
844
+
845
+ .charcoal-modal-header-title {
846
+ color: var(--charcoal-color-text-default);
847
+ font-size: 16px;
848
+ line-height: 24px;
849
+ font-weight: bold;
850
+ display: flow-root;
851
+ }
852
+
853
+ .charcoal-modal-align {
854
+ padding-left: 16px;
855
+ padding-right: 16px;
856
+ }
857
+
858
+ .charcoal-modal-body {
859
+ padding-bottom: 40px;
860
+ }
861
+
862
+ .charcoal-modal-buttons {
863
+ display: grid;
864
+ grid-auto-flow: row;
865
+ grid-row-gap: 8px;
866
+
867
+ padding-top: 16px;
868
+ padding-left: 16px;
869
+ padding-right: 16px;
688
870
  }
689
871
  .charcoal-loading-spinner {
690
872
  box-sizing: content-box;
@@ -729,571 +911,432 @@
729
911
  .charcoal-loading-spinner-icon[data-once='true'] {
730
912
  animation-iteration-count: 1;
731
913
  }
732
- .charcoal-pagination {
733
- display: flex;
734
- justify-content: center;
735
- align-items: center;
914
+ .charcoal-dropdown-selector-root {
915
+ display: grid;
916
+ grid-template-columns: 1fr;
917
+ grid-gap: 4px;
918
+ width: 100%;
736
919
  }
737
920
 
738
- .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
739
- min-width: 32px;
740
- min-height: 32px;
921
+ .charcoal-dropdown-selector-root[aria-disabled='true'] {
922
+ cursor: default;
923
+ opacity: 0.32;
741
924
  }
742
925
 
743
- .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
744
- min-width: 40px;
745
- min-height: 40px;
746
- }
926
+ .charcoal-dropdown-selector-button {
927
+ display: grid;
928
+ grid-template-columns: 1fr auto;
929
+ justify-content: space-between;
930
+ align-items: center;
747
931
 
748
- /* stylelint-disable no-descending-specificity */
749
- .charcoal-pagination-button {
932
+ height: 40px;
933
+ width: 100%;
934
+ box-sizing: border-box;
935
+ border: none;
750
936
  cursor: pointer;
751
- -webkit-appearance: none;
752
- -moz-appearance: none;
753
- appearance: none;
754
- padding: 0;
755
- border-style: none;
756
- outline: none;
757
- text-decoration: none;
758
- font-family: inherit;
759
- font-style: inherit;
760
- font-variant: inherit;
761
- margin: 0;
762
- -webkit-user-select: none;
763
- -moz-user-select: none;
764
- user-select: none;
765
-
766
- display: flex;
767
- align-items: center;
768
- justify-content: center;
769
- font-size: 14px;
770
- font-weight: 700;
771
- line-height: 22px;
937
+ gap: 4px;
772
938
 
773
- /* HACK:
774
- * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
775
- * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
776
- */
777
- -webkit-transform: translateZ(0);
939
+ padding-right: 8px;
940
+ padding-left: 8px;
941
+ background-color: var(--charcoal-color-container-secondary-default-a);
942
+ border-radius: 4px;
778
943
 
779
- color: var(--charcoal-color-text-tertiary-default);
780
- background-color: transparent;
781
- border-radius: 20px;
782
944
  transition:
783
- 0.2s background-color,
784
- 0.2s box-shadow;
945
+ 0.2s box-shadow,
946
+ 0.2s background-color;
785
947
  }
786
- .charcoal-pagination-button:focus {
787
- outline: none;
788
- }
789
- .charcoal-pagination-button::-moz-focus-inner {
790
- border-style: none;
791
- padding: 0;
792
- }
793
- .charcoal-pagination-button[hidden] {
794
- visibility: hidden;
795
- display: block;
796
- }
797
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
798
- .charcoal-pagination-button[aria-disabled='false']:hover {
799
- color: var(--charcoal-color-text-tertiary-default);
800
- background-color: var(--charcoal-color-container-secondary-default);
801
- }
802
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
803
- .charcoal-pagination-button[aria-disabled='false']:active {
804
- color: var(--charcoal-color-text-tertiary-press);
805
- background-color: var(--charcoal-color-container-tertiary-press);
948
+
949
+ .charcoal-dropdown-selector-button:disabled {
950
+ cursor: default;
806
951
  }
807
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
808
- .charcoal-pagination-button[aria-disabled='false']:focus {
809
- outline: none;
810
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
811
- }
812
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
813
- .charcoal-pagination-button[aria-disabled='false']:focus-visible {
814
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
815
- }
816
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
817
- .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
818
- box-shadow: none;
819
- }
820
- .charcoal-pagination-button[aria-current] {
821
- cursor: default;
822
- background-color: var(--charcoal-color-container-hud-default);
823
- color: var(--charcoal-color-text-on-hud-default);
824
- }
825
- .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,
826
- .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {
827
- background-color: var(--charcoal-color-container-hud-default);
828
- color: var(--charcoal-color-text-on-hud-default);
952
+
953
+ .charcoal-dropdown-selector-button:not(:disabled):focus {
954
+ outline: none;
955
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
829
956
  }
830
- /* stylelint-enable no-descending-specificity */
831
957
 
832
- .charcoal-pagination-nav-button[data-hidden] {
833
- visibility: hidden;
834
- }
958
+ .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
959
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
960
+ }
835
961
 
836
- .charcoal-pagination-spacer,
837
- .charcoal-pagination-spacer:hover,
838
- .charcoal-pagination-spacer:active {
839
- cursor: default;
840
- color: var(--charcoal-color-text-tertiary-default);
841
- background: none;
842
- }
962
+ .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
963
+ .charcoal-dropdown-selector-button:not(:disabled):active {
964
+ background-color: var(--charcoal-color-container-secondary-press-a);
965
+ }
843
966
 
844
- .charcoal-pagination-spacer.charcoal-icon-button:disabled {
845
- opacity: 1;
846
- }
847
- .charcoal-radio__label {
848
- display: grid;
849
- grid-template-columns: auto 1fr;
850
- grid-gap: 4px;
851
- align-items: center;
852
- cursor: pointer;
853
- }
967
+ .charcoal-dropdown-selector-button:not(:disabled):hover {
968
+ background-color: var(--charcoal-color-container-secondary-hover-a);
969
+ }
854
970
 
855
- .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
856
- opacity: 0.32;
857
- cursor: default;
971
+ .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
972
+ box-shadow: none;
973
+ }
974
+
975
+ .charcoal-dropdown-selector-button[aria-invalid='true'],
976
+ .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
977
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
858
978
  }
859
979
 
860
- .charcoal-radio__label_div {
980
+ .charcoal-ui-dropdown-selector-text {
981
+ text-align: left;
861
982
  font-size: 14px;
862
983
  line-height: 22px;
984
+ display: flow-root;
863
985
  color: var(--charcoal-color-text-default);
864
- }
865
- .charcoal-modal-header-root {
866
- height: 64px;
867
- display: grid;
868
- align-content: center;
869
- justify-content: center;
986
+ overflow: hidden;
987
+ text-overflow: ellipsis;
988
+ white-space: nowrap;
870
989
  }
871
990
 
872
- @media (max-width: 743px) {
873
- .charcoal-modal-header-root[data-bottom-sheet='true'],
874
- .charcoal-modal-header-root[data-bottom-sheet='full'] {
875
- height: 48px;
991
+ .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
992
+ color: var(--charcoal-color-text-placeholder-default);
876
993
  }
994
+
995
+ .charcoal-ui-dropdown-selector-icon {
996
+ color: var(--charcoal-color-icon-secondary-default);
877
997
  }
998
+ .charcoal-dropdown-selector-menu-item {
999
+ font-size: 14px;
1000
+ line-height: 22px;
1001
+ color: var(--charcoal-color-text-secondary-default);
1002
+ padding: 9px 0;
878
1003
 
879
- .charcoal-modal-header-title {
880
- color: var(--charcoal-color-text-default);
881
- font-size: 16px;
882
- line-height: 24px;
883
- font-weight: bold;
884
- display: flow-root;
1004
+ display: flex;
1005
+ align-items: center;
1006
+ width: 100%;
1007
+ margin-left: 20px;
885
1008
  }
886
1009
 
887
- .charcoal-modal-align {
888
- padding-left: 16px;
889
- padding-right: 16px;
1010
+ .charcoal-dropdown-selector-menu-item[data-selected='true'] {
1011
+ margin-left: 0px;
890
1012
  }
891
1013
 
892
- .charcoal-modal-body {
893
- padding-bottom: 40px;
1014
+ .charcoal-dropdown-selector-menu-item-icon {
1015
+ color: var(--charcoal-color-text-secondary-default);
1016
+ padding-right: 4px;
894
1017
  }
895
1018
 
896
- .charcoal-modal-buttons {
897
- display: grid;
898
- grid-auto-flow: row;
899
- grid-row-gap: 8px;
1019
+ .charcoal-dropdown-selector-menu-item-container {
1020
+ display: flex;
1021
+ align-items: center;
1022
+ }
900
1023
 
901
- padding-top: 16px;
902
- padding-left: 16px;
903
- padding-right: 16px;
1024
+ .charcoal-dropdown-selector-menu-secondary {
1025
+ font-size: 12px;
1026
+ line-height: 20px;
1027
+ color: var(--charcoal-color-text-tertiary-default);
1028
+ padding-bottom: 9px;
1029
+
1030
+ display: flex;
1031
+ align-items: center;
1032
+ margin-left: 20px;
904
1033
  }
905
- .charcoal-button {
906
- -webkit-appearance: none;
907
- -moz-appearance: none;
908
- appearance: none;
909
- background-image: none;
910
- box-sizing: border-box;
911
- padding: 0 24px;
912
- border-style: none;
913
- outline: none;
914
- text-rendering: inherit;
915
- letter-spacing: inherit;
916
- word-spacing: inherit;
917
- text-decoration: none;
918
- font-family: inherit;
919
- font-style: inherit;
920
- font-variant: inherit;
921
- margin: 0;
922
- overflow: visible;
923
- text-transform: none;
924
- width: -moz-min-content;
925
- width: min-content;
926
- display: inline-grid;
1034
+
1035
+ .charcoal-dropdown-selector-menu-fullwidth {
1036
+ width: 100%;
1037
+ }
1038
+ .charcoal-segmented-control {
1039
+ display: inline-flex;
1040
+ align-items: center;
1041
+
1042
+ background-color: var(--charcoal-color-container-secondary-default-a);
1043
+ border-radius: 16px;
1044
+ }
1045
+
1046
+ .charcoal-segmented-control[data-uniform-segment-width='true'],
1047
+ .charcoal-segmented-control[data-full-width='true'] {
1048
+ display: inline-grid;
1049
+ grid-auto-columns: minmax(80px, 1fr);
1050
+ grid-auto-rows: 32px;
1051
+ grid-auto-flow: column;
1052
+ }
1053
+
1054
+ .charcoal-segmented-control[data-full-width='true'] {
1055
+ width: 100%;
1056
+ }
1057
+
1058
+ .charcoal-segmented-control-radio__label {
1059
+ position: relative;
1060
+ display: flex;
927
1061
  align-items: center;
928
1062
  justify-content: center;
929
1063
  cursor: pointer;
930
- -webkit-user-select: none;
931
- -moz-user-select: none;
932
- user-select: none;
933
- white-space: nowrap;
934
- border-radius: 999999px;
1064
+ height: 32px;
1065
+
1066
+ padding-right: 16px;
1067
+ padding-left: 16px;
1068
+ border-radius: 16px;
1069
+ color: var(--charcoal-color-text-secondary-default);
1070
+
935
1071
  font-size: 14px;
936
1072
  line-height: 22px;
937
- font-weight: bold;
938
- color: var(--charcoal-color-text-default);
939
- background-color: var(
940
- --charcoal-color-container-secondary-default-a,
941
- transparent
942
- );
943
- transition:
944
- 0.2s color,
945
- 0.2s background-color,
946
- 0.2s box-shadow;
947
- height: 40px;
948
1073
  }
949
1074
 
950
- .charcoal-button:disabled,
951
- .charcoal-button[aria-disabled]:not([aria-disabled='false']) {
1075
+ .charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {
952
1076
  cursor: default;
953
1077
  opacity: 0.32;
954
1078
  }
955
1079
 
956
- .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,
957
- .charcoal-button[aria-disabled='false']:focus-visible {
958
- outline: none;
959
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
960
- }
961
-
962
- .charcoal-button:not(:disabled):not([aria-disabled]):hover,
963
- .charcoal-button[aria-disabled='false']:hover {
964
- color: var(--charcoal-color-text-hover);
965
- background-color: var(--charcoal-color-container-secondary-hover-a);
1080
+ .charcoal-segmented-control-radio__label[data-checked='true'] {
1081
+ background-color: var(--charcoal-color-container-primary-default);
1082
+ color: var(--charcoal-color-text-on-primary-default);
966
1083
  }
967
1084
 
968
- .charcoal-button:not(:disabled):not([aria-disabled]):active,
969
- .charcoal-button[aria-disabled='false']:active,
970
- .charcoal-button[data-active='true'] {
971
- color: var(--charcoal-color-text-press);
972
- background-color: var(--charcoal-color-container-secondary-press-a);
1085
+ .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
1086
+ .charcoal-segmented-control-radio__label[data-full-width='true'] {
1087
+ justify-content: center;
1088
+ white-space: nowrap;
973
1089
  }
974
1090
 
975
- .charcoal-button[data-variant='Primary'] {
976
- color: var(--charcoal-color-text-on-primary-default);
977
- background-color: var(--charcoal-color-container-primary-default);
978
- }
1091
+ .charcoal-segmented-control-radio__input {
1092
+ position: absolute;
979
1093
 
980
- .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),
981
- .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
982
- color: var(--charcoal-color-text-on-primary-hover);
983
- background-color: var(--charcoal-color-container-primary-hover);
984
- }
1094
+ height: 0px;
1095
+ width: 0px;
1096
+ padding: 0;
1097
+ margin: 0;
985
1098
 
986
- .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),
987
- .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
988
- .charcoal-button[data-variant='Primary'][data-active='true'] {
989
- color: var(--charcoal-color-text-on-primary-press);
990
- background-color: var(--charcoal-color-container-primary-press);
991
- }
1099
+ -webkit-appearance: none;
992
1100
 
993
- .charcoal-button[data-variant='Overlay'] {
994
- color: var(--charcoal-color-text-on-on-img-default);
995
- background-color: var(--charcoal-color-container-on-img-default);
996
- }
1101
+ -moz-appearance: none;
997
1102
 
998
- .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),
999
- .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
1000
- color: var(--charcoal-color-text-on-on-img-hover);
1001
- background-color: var(--charcoal-color-container-on-img-hover);
1002
- }
1003
-
1004
- .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),
1005
- .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
1006
- .charcoal-button[data-variant='Overlay'][data-active='true'] {
1007
- color: var(--charcoal-color-text-on-on-img-press);
1008
- background-color: var(--charcoal-color-container-on-img-press);
1009
- }
1010
-
1011
- .charcoal-button[data-variant='Navigation'] {
1012
- color: var(--charcoal-color-text-on-hud-default);
1013
- background-color: var(--charcoal-color-container-hud-default);
1014
- }
1015
-
1016
- .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),
1017
- .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
1018
- color: var(--charcoal-color-text-on-hud-hover);
1019
- background-color: var(--charcoal-color-container-hud-hover);
1020
- }
1021
-
1022
- .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),
1023
- .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
1024
- .charcoal-button[data-variant='Navigation'][data-active='true'] {
1025
- color: var(--charcoal-color-text-on-hud-press);
1026
- background-color: var(--charcoal-color-container-hud-press);
1027
- }
1103
+ appearance: none;
1104
+ box-sizing: border-box;
1105
+ overflow: hidden;
1106
+ white-space: nowrap;
1107
+ opacity: 0;
1108
+ }
1109
+ .charcoal-menu-item-group {
1110
+ display: block;
1111
+ }
1028
1112
 
1029
- .charcoal-button[data-variant='Danger'] {
1030
- color: var(--charcoal-color-text-on-negative-default);
1031
- background-color: var(--charcoal-color-container-negative-default);
1032
- }
1113
+ .charcoal-menu-item-group > span {
1114
+ display: block;
1115
+ color: var(--charcoal-color-text-tertiary-default);
1116
+ font-size: 12px;
1117
+ font-weight: bold;
1118
+ padding: 12px 0 8px 16px;
1119
+ }
1033
1120
 
1034
- .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),
1035
- .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
1036
- color: var(--charcoal-color-text-on-negative-hover);
1037
- background-color: var(--charcoal-color-container-negative-hover);
1038
- }
1121
+ .charcoal-menu-item-group > ul {
1122
+ padding-left: 0;
1123
+ margin: 0;
1124
+ box-sizing: border-box;
1125
+ list-style: none;
1126
+ overflow: hidden;
1127
+ }
1128
+ .charcoal-tag-item {
1129
+ --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
1130
+ --charcoal-tag-item-size: 40px;
1131
+ --charcoal-tag-item-padding-left: 24px;
1132
+ --charcoal-tag-item-padding-right: 24px;
1133
+ --charcoal-tag-item-bg: ;
1039
1134
 
1040
- .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),
1041
- .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
1042
- .charcoal-button[data-variant='Danger'][data-active='true'] {
1043
- color: var(--charcoal-color-text-on-negative-press);
1044
- background-color: var(--charcoal-color-container-negative-press);
1045
- }
1135
+ isolation: isolate;
1136
+ position: relative;
1046
1137
 
1047
- .charcoal-button[data-size='S'] {
1048
- padding: 0 16px;
1049
- height: 32px;
1050
- }
1138
+ -webkit-appearance: none;
1051
1139
 
1052
- .charcoal-button[data-full-width='true'] {
1053
- width: 100%;
1054
- }
1055
- .charcoal-dropdown-selector-root {
1056
- display: grid;
1057
- grid-template-columns: 1fr;
1058
- grid-gap: 4px;
1059
- width: 100%;
1060
- }
1140
+ -moz-appearance: none;
1061
1141
 
1062
- .charcoal-dropdown-selector-root[aria-disabled='true'] {
1063
- cursor: default;
1064
- opacity: 0.32;
1065
- }
1142
+ appearance: none;
1143
+ outline: none;
1144
+ border-style: none;
1066
1145
 
1067
- .charcoal-dropdown-selector-button {
1068
- display: grid;
1069
- grid-template-columns: 1fr auto;
1070
- justify-content: space-between;
1146
+ display: inline-flex;
1147
+ gap: 8px;
1071
1148
  align-items: center;
1149
+ justify-content: center;
1072
1150
 
1073
- height: 40px;
1074
- width: 100%;
1075
- box-sizing: border-box;
1076
- border: none;
1151
+ text-decoration: none;
1077
1152
  cursor: pointer;
1078
- gap: 4px;
1153
+ overflow: hidden;
1079
1154
 
1080
- padding-right: 8px;
1081
- padding-left: 8px;
1082
- background-color: var(--charcoal-color-container-secondary-default-a);
1155
+ color: var(--charcoal-tag-item-color);
1156
+ height: var(--charcoal-tag-item-size);
1157
+ padding-top: 4px;
1158
+ padding-bottom: 4px;
1159
+ padding-left: var(--charcoal-tag-item-padding-left);
1160
+ padding-right: var(--charcoal-tag-item-padding-right);
1161
+ box-sizing: border-box;
1083
1162
  border-radius: 4px;
1084
1163
 
1085
- transition:
1086
- 0.2s box-shadow,
1087
- 0.2s background-color;
1164
+ transition: 0.2s box-shadow;
1088
1165
  }
1089
1166
 
1090
- .charcoal-dropdown-selector-button:disabled {
1091
- cursor: default;
1167
+ .charcoal-tag-item[data-size='M'] {
1168
+ --charcoal-tag-item-size: 40px;
1169
+ --charcoal-tag-item-padding-left: 24px;
1170
+ --charcoal-tag-item-padding-right: 24px;
1092
1171
  }
1093
1172
 
1094
- .charcoal-dropdown-selector-button:not(:disabled):focus {
1095
- outline: none;
1096
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1097
- }
1098
-
1099
- .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
1100
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1101
- }
1173
+ .charcoal-tag-item[data-size='S'] {
1174
+ --charcoal-tag-item-size: 32px;
1175
+ --charcoal-tag-item-padding-left: 16px;
1176
+ --charcoal-tag-item-padding-right: 16px;
1177
+ }
1102
1178
 
1103
- .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
1104
- .charcoal-dropdown-selector-button:not(:disabled):active {
1105
- background-color: var(--charcoal-color-container-secondary-press-a);
1106
- }
1179
+ .charcoal-tag-item[data-state='inactive'] {
1180
+ --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
1181
+ }
1107
1182
 
1108
- .charcoal-dropdown-selector-button:not(:disabled):hover {
1109
- background-color: var(--charcoal-color-container-secondary-hover-a);
1110
- }
1183
+ .charcoal-tag-item[data-state='active'] {
1184
+ --charcoal-tag-item-padding-left: 16px;
1185
+ --charcoal-tag-item-padding-right: 8px;
1186
+ }
1111
1187
 
1112
- .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
1113
- box-shadow: none;
1114
- }
1188
+ .charcoal-tag-item:disabled,
1189
+ .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
1190
+ opacity: 0.32;
1191
+ cursor: default;
1192
+ }
1115
1193
 
1116
- .charcoal-dropdown-selector-button[aria-invalid='true'],
1117
- .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
1118
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1194
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
1195
+ .charcoal-tag-item[aria-disabled='false']:focus-visible {
1196
+ outline: none;
1197
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1119
1198
  }
1120
1199
 
1121
- .charcoal-ui-dropdown-selector-text {
1122
- text-align: left;
1123
- font-size: 14px;
1124
- line-height: 22px;
1125
- display: flow-root;
1126
- color: var(--charcoal-color-text-default);
1127
- overflow: hidden;
1128
- text-overflow: ellipsis;
1129
- white-space: nowrap;
1130
- }
1200
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
1201
+ .charcoal-tag-item[aria-disabled='false']:focus {
1202
+ outline: none;
1203
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1204
+ }
1131
1205
 
1132
- .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
1133
- color: var(--charcoal-color-text-placeholder-default);
1206
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1207
+ .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
1208
+ box-shadow: none;
1134
1209
  }
1135
1210
 
1136
- .charcoal-ui-dropdown-selector-icon {
1137
- color: var(--charcoal-color-icon-secondary-default);
1138
- }
1139
- .charcoal-switch__label {
1140
- display: inline-grid;
1141
- grid-template-columns: auto 1fr;
1142
- align-items: center;
1143
- cursor: pointer;
1144
- outline: 0;
1145
- gap: 4px;
1211
+ .charcoal-tag-item__bg {
1212
+ background-color: var(--charcoal-tag-item-bg);
1146
1213
  }
1147
1214
 
1148
- .charcoal-switch__label[aria-disabled='true'] {
1149
- opacity: 0.32;
1150
- cursor: default;
1215
+ .charcoal-tag-item__bg[data-bg-variant='image'] {
1216
+ background-color: var(--charcoal-color-container-on-img-default);
1151
1217
  }
1152
1218
 
1153
- .charcoal-switch__label[aria-disabled='true'] > input {
1154
- opacity: 1;
1219
+ .charcoal-tag-item__bg[data-bg-variant='image']::before {
1220
+ content: '';
1221
+ position: absolute;
1222
+ z-index: 1;
1223
+ top: 0;
1224
+ left: 0;
1225
+ width: 100%;
1226
+ height: 100%;
1227
+ background-position: center;
1228
+ background-size: cover;
1229
+ background-image: var(--charcoal-tag-item-bg);
1230
+ mix-blend-mode: overlay;
1155
1231
  }
1156
1232
 
1157
- .charcoal-switch__label_div {
1158
- font-size: 14px;
1159
- line-height: 22px;
1160
- color: var(--charcoal-color-text-default);
1161
- }
1162
- .charcoal-multi-select {
1163
- display: grid;
1164
- grid-template-columns: auto 1fr;
1165
- align-items: center;
1166
- position: relative;
1167
- cursor: pointer;
1168
- gap: 4px;
1169
- }
1170
-
1171
- .charcoal-multi-select:disabled,
1172
- .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
1173
- opacity: 0.32;
1174
- cursor: default;
1233
+ .charcoal-tag-item__bg[data-state='inactive'] {
1234
+ background-color: var(--charcoal-color-container-secondary-default);
1175
1235
  }
1176
1236
 
1177
- .charcoal-multi-select-label {
1178
- display: flow-root;
1237
+ .charcoal-tag-item__label {
1238
+ height: 100%;
1239
+ display: flex;
1240
+ flex-direction: column;
1179
1241
  align-items: center;
1180
- font-size: 14px;
1181
- line-height: 22px;
1182
- color: var(--charcoal-color-text-default);
1242
+ justify-content: center;
1183
1243
  }
1184
1244
 
1185
- .charcoal-multi-select-label::before {
1186
- display: block;
1187
- width: 0;
1188
- height: 0;
1189
- content: '';
1190
- margin-top: -4px;
1191
- }
1192
-
1193
- .charcoal-multi-select-label::after {
1194
- display: block;
1195
- width: 0;
1196
- height: 0;
1197
- content: '';
1198
- margin-bottom: -4px;
1245
+ .charcoal-tag-item__label[data-has-translate='true'] {
1246
+ justify-content: space-between;
1199
1247
  }
1200
1248
 
1201
- .charcoal-multi-select-input[type='checkbox'] {
1202
- -webkit-appearance: none;
1203
- -moz-appearance: none;
1204
- appearance: none;
1205
- display: block;
1206
- width: 20px;
1207
- height: 20px;
1208
- margin: 0;
1209
- background-color: var(--charcoal-color-container-neutral-default);
1210
- border-radius: 999999px;
1211
- transition:
1212
- 0.2s background-color,
1213
- 0.2s box-shadow;
1249
+ .charcoal-tag-item__label__translated {
1250
+ --charcoal-tag-item-text-font-size: 12px;
1251
+ --charcoal-tag-item-text-line-height: 20px;
1252
+ font-weight: bold;
1214
1253
  }
1215
1254
 
1216
- .charcoal-multi-select-input[type='checkbox']:checked {
1217
- background-color: var(--charcoal-color-container-primary-default);
1218
- }
1219
-
1220
- .charcoal-multi-select-input[type='checkbox']:focus {
1221
- outline: none;
1222
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1223
- }
1224
-
1225
- .charcoal-multi-select-input[type='checkbox']:focus-visible {
1226
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1255
+ .charcoal-tag-item__label__translated::before {
1256
+ display: none;
1227
1257
  }
1228
1258
 
1229
- .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
1230
- box-shadow: none;
1231
- }
1259
+ .charcoal-tag-item__label__text {
1260
+ --charcoal-tag-item-text-font-size: 14px;
1261
+ --charcoal-tag-item-text-line-height: 22px;
1232
1262
 
1233
- .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
1234
- .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
1235
- background-color: var(--charcoal-color-container-neutral-hover);
1236
- }
1263
+ max-width: 152px;
1264
+ overflow: hidden;
1265
+ font-weight: bold;
1237
1266
 
1238
- .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),
1239
- .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
1240
- background-color: var(--charcoal-color-container-neutral-press);
1241
- }
1267
+ color: inherit;
1268
+ white-space: nowrap;
1269
+ text-overflow: ellipsis;
1270
+ }
1242
1271
 
1243
- .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
1244
- .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
1245
- background-color: var(--charcoal-color-container-primary-hover);
1272
+ .charcoal-tag-item__label__text[data-has-translate='true'] {
1273
+ --charcoal-tag-item-text-font-size: 10px;
1274
+ --charcoal-tag-item-text-line-height: 14px;
1275
+ font-weight: normal;
1246
1276
  }
1247
1277
 
1248
- .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
1249
- .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
1250
- background-color: var(--charcoal-color-container-primary-press);
1251
- }
1278
+ /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
1279
+ .charcoal-tag-item__labe__text[data-has-translate='true']::after {
1280
+ display: none;
1281
+ }
1282
+ .charcoal-hint-text {
1283
+ background-color: var(--charcoal-color-container-secondary-default);
1284
+ border-radius: 8px;
1285
+ padding: 12px 16px;
1286
+ display: flex;
1287
+ align-items: flex-start;
1288
+ }
1252
1289
 
1253
- .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(
1254
- [aria-disabled]
1255
- ) {
1256
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1290
+ .charcoal-hint-text[data-context='page'] {
1291
+ justify-content: center;
1257
1292
  }
1258
1293
 
1259
- .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
1260
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1261
- }
1294
+ @media (min-width: 744px) {
1262
1295
 
1263
- .charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
1264
- background-color: var(--charcoal-color-container-on-img-default);
1296
+ .charcoal-hint-text[data-context='page'] {
1297
+ padding: 20px 40px
1265
1298
  }
1299
+ }
1266
1300
 
1267
- .charcoal-multi-select-overlay {
1268
- position: absolute;
1269
- top: -2px;
1270
- left: -2px;
1271
- box-sizing: border-box;
1301
+ .charcoal-hint-text-icon {
1272
1302
  display: flex;
1273
1303
  align-items: center;
1274
- justify-content: center;
1275
- width: 24px;
1276
- height: 24px;
1277
- border-radius: 999999px;
1278
- color: var(--charcoal-color-icon-on-primary-default);
1279
- transition: 0.2s box-shadow;
1304
+ color: var(--charcoal-color-icon-tertiary-default);
1305
+ height: 22px;
1306
+ margin: 0 4px 0 0;
1280
1307
  }
1281
1308
 
1282
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
1283
- [aria-disabled]
1284
- ) {
1285
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1286
- }
1309
+ .charcoal-hint-text-message {
1310
+ color: var(--charcoal-color-text-secondary-default);
1311
+ font-size: 14px;
1312
+ line-height: 22px;
1313
+ display: flow-root;
1314
+ margin: 0;
1315
+ min-width: 0;
1316
+ overflow-wrap: break-word;
1317
+ }
1318
+ .charcoal-checkbox__label {
1319
+ position: relative;
1320
+ cursor: pointer;
1321
+ display: flex;
1322
+ gap: 4px;
1323
+ }
1287
1324
 
1288
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
1289
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1325
+ .charcoal-checkbox__label[aria-disabled='true'] {
1326
+ cursor: default;
1327
+ opacity: 0.32;
1290
1328
  }
1291
1329
 
1292
- .charcoal-multi-select-overlay[data-overlay='true'] {
1293
- border-color: var(--charcoal-color-border-hud);
1294
- border-width: 2px;
1295
- border-style: solid;
1296
- }
1330
+ .charcoal-checkbox__label[aria-disabled='true'] > input {
1331
+ opacity: 1;
1332
+ }
1333
+
1334
+ .charcoal-checkbox__label_div {
1335
+ flex: 1;
1336
+ color: var(--charcoal-color-text-default);
1337
+ font-size: 14px;
1338
+ line-height: 20px;
1339
+ }
1297
1340
  .charcoal-carousel {
1298
1341
  --charcoal-carousel-gap: 0px;
1299
1342
 
@@ -1613,54 +1656,18 @@
1613
1656
  }
1614
1657
  }
1615
1658
  /* stylelint-enable selector-pseudo-class-no-unknown */
1616
- .charcoal-dropdown-selector-menu-item {
1617
- font-size: 14px;
1618
- line-height: 22px;
1619
- color: var(--charcoal-color-text-secondary-default);
1620
- padding: 9px 0;
1621
-
1622
- display: flex;
1623
- align-items: center;
1624
- width: 100%;
1625
- margin-left: 20px;
1626
- }
1627
-
1628
- .charcoal-dropdown-selector-menu-item[data-selected='true'] {
1629
- margin-left: 0px;
1630
- }
1631
-
1632
- .charcoal-dropdown-selector-menu-item-icon {
1633
- color: var(--charcoal-color-text-secondary-default);
1634
- padding-right: 4px;
1635
- }
1636
-
1637
- .charcoal-dropdown-selector-menu-item-container {
1638
- display: flex;
1639
- align-items: center;
1640
- }
1641
-
1642
- .charcoal-dropdown-selector-menu-secondary {
1643
- font-size: 12px;
1644
- line-height: 20px;
1645
- color: var(--charcoal-color-text-tertiary-default);
1646
- padding-bottom: 9px;
1647
-
1648
- display: flex;
1649
- align-items: center;
1650
- margin-left: 20px;
1651
- }
1652
-
1653
- .charcoal-dropdown-selector-menu-fullwidth {
1654
- width: 100%;
1655
- }
1656
1659
  .charcoal-notification-region {
1657
- position: fixed;
1658
1660
  left: 0;
1659
1661
  right: 0;
1660
- display: grid;
1661
- justify-content: center;
1662
- pointer-events: none;
1663
1662
  box-sizing: border-box;
1663
+ position: absolute;
1664
+ width: 100%;
1665
+ height: 100%;
1666
+ display: flex;
1667
+ flex-direction: column;
1668
+ align-items: center;
1669
+ pointer-events: none;
1670
+ top: 0;
1664
1671
  }
1665
1672
 
1666
1673
  .charcoal-notification {
@@ -1707,6 +1714,7 @@
1707
1714
  .charcoal-snackbar-region[data-position='top'] {
1708
1715
  --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
1709
1716
 
1717
+ position: sticky;
1710
1718
  top: calc(
1711
1719
  env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
1712
1720
  );
@@ -1715,6 +1723,7 @@
1715
1723
  .charcoal-snackbar-region[data-position='bottom'] {
1716
1724
  --charcoal-snackbar-enter-offset: var(--charcoal-space-30);
1717
1725
 
1726
+ position: fixed;
1718
1727
  bottom: calc(
1719
1728
  env(safe-area-inset-bottom, 0px) +
1720
1729
  max(var(--charcoal-snackbar-offset), 16px)
@@ -1768,178 +1777,38 @@
1768
1777
  opacity: 0;
1769
1778
  }
1770
1779
  }
1771
- .charcoal-text-field-root {
1772
- display: grid;
1773
- grid-template-columns: 1fr;
1774
- grid-gap: 4px;
1780
+ .charcoal-toast-region {
1781
+ --charcoal-toast-offset: 16px;
1775
1782
  }
1776
1783
 
1777
- .charcoal-text-field-root[aria-disabled='true'] {
1778
- opacity: 0.32;
1784
+ .charcoal-toast-region[data-position='top'] {
1785
+ position: sticky;
1786
+ --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
1787
+
1788
+ top: calc(
1789
+ env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
1790
+ );
1779
1791
  }
1780
1792
 
1781
- .charcoal-text-field-container {
1782
- display: flex;
1783
- height: 40px;
1784
- transition:
1785
- 0.2s background-color,
1786
- 0.2s box-shadow;
1787
- color: var(--charcoal-color-text-secondary-default);
1788
- background-color: var(--charcoal-color-container-secondary-default-a);
1789
- border-radius: 4px;
1790
- padding: 0 8px;
1791
- line-height: 22px;
1792
- font-size: 14px;
1793
- }
1793
+ .charcoal-toast-region[data-position='bottom'] {
1794
+ position: fixed;
1795
+ --charcoal-toast-enter-offset: var(--charcoal-space-30);
1794
1796
 
1795
- .charcoal-text-field-container[data-invalid='true'] {
1796
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1797
+ bottom: calc(
1798
+ env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
1799
+ );
1797
1800
  }
1798
1801
 
1799
- .charcoal-text-field-container:not([aria-disabled='true']):hover {
1800
- background-color: var(--charcoal-color-container-secondary-hover-a);
1801
- }
1802
-
1803
- .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
1804
- outline: none;
1805
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1806
- }
1807
-
1808
- .charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {
1809
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1810
- }
1811
-
1812
- .charcoal-text-field-prefix {
1813
- display: flex;
1814
- align-items: center;
1815
- margin-right: 4px;
1816
- }
1817
-
1818
- .charcoal-text-field-suffix {
1819
- display: flex;
1820
- align-items: center;
1821
- gap: 8px;
1822
- margin-left: 4px;
1823
- }
1824
-
1825
- .charcoal-text-field-input-root {
1826
- flex: 1;
1827
- min-width: 0;
1828
- overflow: hidden;
1829
- }
1830
-
1831
- .charcoal-text-field-input {
1832
- border: none;
1833
- box-sizing: border-box;
1834
- outline: none;
1835
- font-family: inherit;
1836
-
1837
- /* Prevent zooming for iOS Safari */
1838
- transform-origin: top left;
1839
- transform: scale(0.875);
1840
- width: calc(100% / 0.875);
1841
- height: calc(100% / 0.875);
1842
- font-size: calc(14px / 0.875);
1843
- line-height: calc(22px / 0.875);
1844
- padding-left: 0;
1845
- padding-right: 0;
1846
- border-radius: calc(4px / 0.875);
1847
-
1848
- /* Display box-shadow for iOS Safari */
1849
- -webkit-appearance: none;
1850
- -moz-appearance: none;
1851
- appearance: none;
1852
- background: transparent;
1853
-
1854
- color: var(--charcoal-color-text-secondary-default);
1855
- }
1856
-
1857
- .charcoal-text-field-input::-moz-placeholder {
1858
- color: var(--charcoal-color-text-placeholder-default);
1859
- }
1860
-
1861
- .charcoal-text-field-input::placeholder {
1862
- color: var(--charcoal-color-text-placeholder-default);
1863
- }
1864
-
1865
- .charcoal-text-field-line-counter {
1866
- line-height: 22px;
1867
- font-size: 14px;
1868
- color: var(--charcoal-color-text-tertiary-default);
1869
- }
1870
- .charcoal-icon {
1871
- display: inline-flex;
1872
- width: var(--charcoal-icon-size);
1873
- height: var(--charcoal-icon-size);
1874
- }
1875
-
1876
- pixiv-icon:not(:defined) {
1877
- --pixiv-icon-base: 24px;
1878
- --pixiv-icon-scale: 1;
1879
- --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
1880
-
1881
- display: inline-flex;
1882
- /* --charcoal-icon-size がセットされていればそれを優先、
1883
- なければ name / scale から導出した --pixiv-icon-size をフォールバック */
1884
- width: var(--charcoal-icon-size, var(--pixiv-icon-size));
1885
- height: var(--charcoal-icon-size, var(--pixiv-icon-size));
1886
- }
1887
-
1888
- pixiv-icon:not(:defined)[name^='16/'] {
1889
- --pixiv-icon-base: 16px;
1890
- --pixiv-icon-size: 16px;
1891
- }
1892
-
1893
- pixiv-icon:not(:defined)[name^='24/'][scale='2'] {
1894
- --pixiv-icon-scale: 2;
1895
- }
1896
-
1897
- pixiv-icon:not(:defined)[name^='24/'][scale='3'] {
1898
- --pixiv-icon-scale: 3;
1899
- }
1900
-
1901
- pixiv-icon:not(:defined)[name^='32/'] {
1902
- --pixiv-icon-base: 32px;
1903
- --pixiv-icon-size: 32px;
1904
- }
1905
-
1906
- pixiv-icon:not(:defined)[name^='Inline/'] {
1907
- --pixiv-icon-base: 16px;
1908
- }
1909
-
1910
- pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1911
- --pixiv-icon-scale: 2;
1912
- }
1913
- .charcoal-toast-region {
1914
- --charcoal-toast-offset: 16px;
1915
- }
1916
-
1917
- .charcoal-toast-region[data-position='top'] {
1918
- --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
1919
-
1920
- top: calc(
1921
- env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
1922
- );
1923
- }
1924
-
1925
- .charcoal-toast-region[data-position='bottom'] {
1926
- --charcoal-toast-enter-offset: var(--charcoal-space-30);
1927
-
1928
- bottom: calc(
1929
- env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
1930
- );
1931
- }
1932
-
1933
- .charcoal-toast {
1934
- min-height: 40px;
1935
- padding: var(--charcoal-space-20) var(--charcoal-space-40);
1936
- color: var(--charcoal-color-text-on-positive-default);
1937
- border: var(--charcoal-border-width-m) solid var(--charcoal-color-border-hud);
1938
- animation: charcoal-toast-enter 0.3s ease-out both;
1939
- }
1940
-
1941
- .charcoal-toast[data-exiting='true'] {
1942
- animation: charcoal-toast-exit 0.3s ease-out both;
1802
+ .charcoal-toast {
1803
+ min-height: 40px;
1804
+ padding: var(--charcoal-space-20) var(--charcoal-space-40);
1805
+ color: var(--charcoal-color-text-on-positive-default);
1806
+ border: var(--charcoal-border-width-m) solid var(--charcoal-color-border-hud);
1807
+ animation: charcoal-toast-enter 0.3s ease-out both;
1808
+ }
1809
+
1810
+ .charcoal-toast[data-exiting='true'] {
1811
+ animation: charcoal-toast-exit 0.3s ease-out both;
1943
1812
  }
1944
1813
 
1945
1814
  .charcoal-toast[data-type='success'] {
@@ -1971,235 +1840,154 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1971
1840
  opacity: 0;
1972
1841
  }
1973
1842
  }
1974
- .charcoal-text-field-assistive-text {
1975
- font-size: 14px;
1976
- line-height: 22px;
1977
- margin: 0;
1978
- color: var(--charcoal-color-text-secondary-default);
1843
+ .charcoal-pagination {
1844
+ display: flex;
1845
+ justify-content: center;
1846
+ align-items: center;
1979
1847
  }
1980
1848
 
1981
- .charcoal-text-field-assistive-text[data-invalid='true'] {
1982
- color: var(--charcoal-color-text-negative-default);
1983
- }
1984
- .charcoal-checkbox-input {
1849
+ .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
1850
+ min-width: 32px;
1851
+ min-height: 32px;
1852
+ }
1853
+
1854
+ .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
1855
+ min-width: 40px;
1856
+ min-height: 40px;
1857
+ }
1858
+
1859
+ /* stylelint-disable no-descending-specificity */
1860
+ .charcoal-pagination-button {
1861
+ cursor: pointer;
1985
1862
  -webkit-appearance: none;
1986
1863
  -moz-appearance: none;
1987
1864
  appearance: none;
1988
- display: flex;
1989
- cursor: pointer;
1865
+ padding: 0;
1866
+ border-style: none;
1867
+ outline: none;
1868
+ text-decoration: none;
1869
+ font-family: inherit;
1870
+ font-style: inherit;
1871
+ font-variant: inherit;
1990
1872
  margin: 0;
1991
- width: 20px;
1992
- height: 20px;
1993
- border-radius: 4px;
1994
- transition:
1995
- 0.2s box-shadow,
1996
- 0.2s background-color;
1997
- position: relative;
1998
- box-sizing: border-box;
1999
- }
2000
-
2001
- .charcoal-checkbox-input:disabled,
2002
- .charcoal-checkbox-input[readonly] {
2003
- opacity: 0.32;
2004
- cursor: default;
2005
- }
2006
-
2007
- .charcoal-checkbox-input:checked {
2008
- background-color: var(--charcoal-color-container-primary-default);
2009
- }
1873
+ -webkit-user-select: none;
1874
+ -moz-user-select: none;
1875
+ user-select: none;
2010
1876
 
2011
- .charcoal-checkbox-input:checked::after {
2012
- content: '';
2013
- background-color: white;
2014
1877
  display: flex;
2015
- margin: auto;
2016
- width: 16px;
2017
- height: 16px;
2018
- clip-path: path(
2019
- 'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'
2020
- );
2021
- }
2022
-
2023
- .charcoal-checkbox-input:not(:checked) {
2024
- border-width: 2px;
2025
- border-style: solid;
2026
- border-color: var(--charcoal-color-border-default);
2027
- }
2028
-
2029
- .charcoal-checkbox-input:not(:disabled):focus {
2030
- outline: none;
2031
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
2032
- }
2033
- .charcoal-checkbox-input:not(:disabled):focus-visible {
2034
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
2035
- }
2036
- .charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {
2037
- box-shadow: none;
2038
- }
2039
-
2040
- .charcoal-checkbox-input:checked:not(:disabled):hover {
2041
- background-color: var(--charcoal-color-container-primary-hover);
2042
- }
2043
- .charcoal-checkbox-input:checked:not(:disabled):active {
2044
- background-color: var(--charcoal-color-container-primary-press);
2045
- }
2046
-
2047
- .charcoal-checkbox-input[aria-invalid='true'],
2048
- .charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {
2049
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
2050
- }
2051
-
2052
- .charcoal-checkbox-input[data-rounded='true'] {
2053
- border-radius: 10px;
2054
- background-color: var(--charcoal-color-container-secondary-default);
2055
- border: 2px solid transparent;
2056
- }
2057
-
2058
- .charcoal-checkbox-input[data-rounded='true']:checked {
2059
- background-color: var(--charcoal-color-container-primary-default);
2060
- }
2061
-
2062
- .charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {
2063
- background-color: var(--charcoal-color-container-secondary-hover);
2064
- }
2065
- .charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {
2066
- background-color: var(--charcoal-color-container-secondary-press);
2067
- }
2068
-
2069
- .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {
2070
- box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);
2071
- }
2072
-
2073
- .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {
2074
- background-color: var(--charcoal-color-container-primary-hover);
2075
- }
2076
- .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {
2077
- background-color: var(--charcoal-color-container-primary-press);
2078
- }
2079
-
2080
- .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],
2081
- .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(
2082
- :disabled
2083
- ):focus {
2084
- box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);
2085
- }
2086
-
2087
- .charcoal-checkbox-input[data-rounded='true']::before {
2088
- content: '';
2089
- width: 24px;
2090
- height: 24px;
2091
- position: absolute;
2092
- top: -4px;
2093
- left: -4px;
2094
- border-radius: 12px;
2095
- border: 2px solid #fff;
2096
- box-sizing: border-box;
2097
- }
2098
- .charcoal-field-label {
1878
+ align-items: center;
1879
+ justify-content: center;
2099
1880
  font-size: 14px;
1881
+ font-weight: 700;
2100
1882
  line-height: 22px;
2101
- font-weight: bold;
2102
- display: flow-root;
2103
- color: var(--charcoal-color-text-default-text1);
2104
- }
2105
1883
 
2106
- .charcoal-field-label-required-text {
2107
- font-size: 14px;
2108
- line-height: 22px;
2109
- display: flow-root;
2110
- color: var(--charcoal-color-text-secondary-default);
2111
- }
1884
+ /* HACK:
1885
+ * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
1886
+ * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
1887
+ */
1888
+ -webkit-transform: translateZ(0);
2112
1889
 
2113
- .charcoal-field-label-sub-label {
2114
- font-size: 14px;
2115
- line-height: 22px;
2116
- display: flow-root;
2117
1890
  color: var(--charcoal-color-text-tertiary-default);
1891
+ background-color: transparent;
1892
+ border-radius: 20px;
2118
1893
  transition:
2119
- 0.2s color,
1894
+ 0.2s background-color,
2120
1895
  0.2s box-shadow;
2121
1896
  }
2122
-
2123
- .charcoal-field-label-root {
2124
- display: inline-flex;
2125
- align-items: center;
2126
- }
2127
-
2128
- .charcoal-field-label-root > .charcoal-field-label-required-text {
2129
- margin-left: 4px;
1897
+ .charcoal-pagination-button:focus {
1898
+ outline: none;
2130
1899
  }
2131
-
2132
- .charcoal-field-label-root > .charcoal-field-label-sub-label {
2133
- margin-left: auto;
1900
+ .charcoal-pagination-button::-moz-focus-inner {
1901
+ border-style: none;
1902
+ padding: 0;
2134
1903
  }
2135
- .charcoal-list-item {
2136
- list-style: none;
2137
- display: flex;
2138
- align-items: center;
2139
- min-height: 40px;
2140
- cursor: pointer;
2141
- outline: none;
2142
-
2143
- padding-right: 16px;
2144
- padding-left: 16px;
2145
-
2146
- transition: background-color 0.2s;
2147
- }
2148
-
2149
- .charcoal-list-item:not([aria-disabled='true']):hover,
2150
- .charcoal-list-item:not([aria-disabled='true']):focus,
2151
- .charcoal-list-item:not([aria-disabled='true']):focus-within {
2152
- background-color: var(--charcoal-color-container-secondary-default);
2153
- }
2154
-
2155
- .charcoal-list-item[aria-disabled='true'] {
2156
- opacity: 0.32;
2157
- cursor: default;
2158
- }
2159
- .charcoal-modal-dialog {
2160
- margin: auto;
2161
- position: relative;
2162
- height: -moz-fit-content;
2163
- height: fit-content;
2164
- width: 440px;
1904
+ .charcoal-pagination-button[hidden] {
1905
+ visibility: hidden;
1906
+ display: block;
1907
+ }
1908
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
1909
+ .charcoal-pagination-button[aria-disabled='false']:hover {
1910
+ color: var(--charcoal-color-text-tertiary-default);
1911
+ background-color: var(--charcoal-color-container-secondary-default);
1912
+ }
1913
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
1914
+ .charcoal-pagination-button[aria-disabled='false']:active {
1915
+ color: var(--charcoal-color-text-tertiary-press);
1916
+ background-color: var(--charcoal-color-container-tertiary-press);
1917
+ }
1918
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
1919
+ .charcoal-pagination-button[aria-disabled='false']:focus {
1920
+ outline: none;
1921
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1922
+ }
1923
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
1924
+ .charcoal-pagination-button[aria-disabled='false']:focus-visible {
1925
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1926
+ }
1927
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1928
+ .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
1929
+ box-shadow: none;
1930
+ }
1931
+ .charcoal-pagination-button[aria-current] {
1932
+ cursor: default;
1933
+ background-color: var(--charcoal-color-container-hud-default);
1934
+ color: var(--charcoal-color-text-on-hud-default);
1935
+ }
1936
+ .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,
1937
+ .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {
1938
+ background-color: var(--charcoal-color-container-hud-default);
1939
+ color: var(--charcoal-color-text-on-hud-default);
1940
+ }
1941
+ /* stylelint-enable no-descending-specificity */
2165
1942
 
2166
- background-color: var(--charcoal-color-container-default);
2167
- border-radius: 24px;
1943
+ .charcoal-pagination-nav-button[data-hidden] {
1944
+ visibility: hidden;
2168
1945
  }
2169
1946
 
2170
- .charcoal-modal-dialog[data-size='S'] {
2171
- width: 336px;
2172
- }
1947
+ .charcoal-pagination-spacer,
1948
+ .charcoal-pagination-spacer:hover,
1949
+ .charcoal-pagination-spacer:active {
1950
+ cursor: default;
1951
+ color: var(--charcoal-color-text-tertiary-default);
1952
+ background: none;
1953
+ }
2173
1954
 
2174
- .charcoal-modal-dialog[data-size='M'] {
2175
- width: 440px;
2176
- }
1955
+ .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1956
+ opacity: 1;
1957
+ }
1958
+ .charcoal-text-ellipsis {
1959
+ /* Runtime variables overridden by the React component. */
1960
+ --charcoal-text-ellipsis-line-limit: 1;
1961
+ --charcoal-text-ellipsis-line-height: inherit;
2177
1962
 
2178
- .charcoal-modal-dialog[data-size='L'] {
2179
- width: 648px;
1963
+ overflow: hidden;
1964
+ overflow-wrap: break-word;
1965
+ display: -webkit-box;
1966
+ -webkit-box-orient: vertical;
1967
+ -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
2180
1968
  }
2181
1969
 
2182
- @media (max-width: 743px) {
2183
- .charcoal-modal-dialog {
2184
- max-width: 440px;
2185
- width: calc(100% - 48px);
1970
+ .charcoal-text-ellipsis[data-has-line-height='true'] {
1971
+ line-height: var(--charcoal-text-ellipsis-line-height);
2186
1972
  }
2187
1973
 
2188
- .charcoal-modal-dialog[data-bottom-sheet='true'],
2189
- .charcoal-modal-dialog[data-bottom-sheet='full'] {
2190
- max-width: unset;
2191
- width: 100%;
2192
- border-radius: 0;
2193
- margin: auto 0 0 0;
1974
+ .charcoal-text-ellipsis[data-has-line-height='false'] {
1975
+ line-height: inherit;
2194
1976
  }
2195
1977
 
2196
- .charcoal-modal-dialog[data-bottom-sheet='full'] {
2197
- min-height: 100%;
1978
+ .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
1979
+ text-overflow: ellipsis;
1980
+ white-space: nowrap;
2198
1981
  }
1982
+ .charcoal-text-field-assistive-text {
1983
+ font-size: 14px;
1984
+ line-height: 22px;
1985
+ margin: 0;
1986
+ color: var(--charcoal-color-text-secondary-default);
2199
1987
  }
2200
1988
 
2201
- .charcoal-modal-dialog:focus {
2202
- outline: none;
1989
+ .charcoal-text-field-assistive-text[data-invalid='true'] {
1990
+ color: var(--charcoal-color-text-negative-default);
2203
1991
  }
2204
1992
  .charcoal-radio-input {
2205
1993
  -webkit-appearance: none;
@@ -2289,6 +2077,43 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
2289
2077
  .charcoal-radio-input:checked:not(:disabled):active::after {
2290
2078
  background-color: var(--charcoal-color-icon-on-primary-press);
2291
2079
  }
2080
+ .charcoal-field-label {
2081
+ font-size: 14px;
2082
+ line-height: 22px;
2083
+ font-weight: bold;
2084
+ display: flow-root;
2085
+ color: var(--charcoal-color-text-default-text1);
2086
+ }
2087
+
2088
+ .charcoal-field-label-required-text {
2089
+ font-size: 14px;
2090
+ line-height: 22px;
2091
+ display: flow-root;
2092
+ color: var(--charcoal-color-text-secondary-default);
2093
+ }
2094
+
2095
+ .charcoal-field-label-sub-label {
2096
+ font-size: 14px;
2097
+ line-height: 22px;
2098
+ display: flow-root;
2099
+ color: var(--charcoal-color-text-tertiary-default);
2100
+ transition:
2101
+ 0.2s color,
2102
+ 0.2s box-shadow;
2103
+ }
2104
+
2105
+ .charcoal-field-label-root {
2106
+ display: inline-flex;
2107
+ align-items: center;
2108
+ }
2109
+
2110
+ .charcoal-field-label-root > .charcoal-field-label-required-text {
2111
+ margin-left: 4px;
2112
+ }
2113
+
2114
+ .charcoal-field-label-root > .charcoal-field-label-sub-label {
2115
+ margin-left: auto;
2116
+ }
2292
2117
  .charcoal-switch-input {
2293
2118
  cursor: pointer;
2294
2119
  -webkit-appearance: none;
@@ -2373,10 +2198,193 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
2373
2198
  .charcoal-switch-input:not(:disabled):checked:active {
2374
2199
  background-color: var(--charcoal-color-container-primary-press);
2375
2200
  }
2201
+ .charcoal-modal-dialog {
2202
+ margin: auto;
2203
+ position: relative;
2204
+ height: -moz-fit-content;
2205
+ height: fit-content;
2206
+ width: 440px;
2207
+
2208
+ background-color: var(--charcoal-color-container-default);
2209
+ border-radius: 24px;
2210
+ }
2211
+
2212
+ .charcoal-modal-dialog[data-size='S'] {
2213
+ width: 336px;
2214
+ }
2215
+
2216
+ .charcoal-modal-dialog[data-size='M'] {
2217
+ width: 440px;
2218
+ }
2219
+
2220
+ .charcoal-modal-dialog[data-size='L'] {
2221
+ width: 648px;
2222
+ }
2223
+
2224
+ @media (max-width: 743px) {
2225
+ .charcoal-modal-dialog {
2226
+ max-width: 440px;
2227
+ width: calc(100% - 48px);
2228
+ }
2229
+
2230
+ .charcoal-modal-dialog[data-bottom-sheet='true'],
2231
+ .charcoal-modal-dialog[data-bottom-sheet='full'] {
2232
+ max-width: unset;
2233
+ width: 100%;
2234
+ border-radius: 0;
2235
+ margin: auto 0 0 0;
2236
+ }
2237
+
2238
+ .charcoal-modal-dialog[data-bottom-sheet='full'] {
2239
+ min-height: 100%;
2240
+ }
2241
+ }
2242
+
2243
+ .charcoal-modal-dialog:focus {
2244
+ outline: none;
2245
+ }
2246
+ .charcoal-list-item {
2247
+ list-style: none;
2248
+ display: flex;
2249
+ align-items: center;
2250
+ min-height: 40px;
2251
+ cursor: pointer;
2252
+ outline: none;
2253
+
2254
+ padding-right: 16px;
2255
+ padding-left: 16px;
2256
+
2257
+ transition: background-color 0.2s;
2258
+ }
2259
+
2260
+ .charcoal-list-item:not([aria-disabled='true']):hover,
2261
+ .charcoal-list-item:not([aria-disabled='true']):focus,
2262
+ .charcoal-list-item:not([aria-disabled='true']):focus-within {
2263
+ background-color: var(--charcoal-color-container-secondary-default);
2264
+ }
2265
+
2266
+ .charcoal-list-item[aria-disabled='true'] {
2267
+ opacity: 0.32;
2268
+ cursor: default;
2269
+ }
2376
2270
  .charcoal-menu-list {
2377
2271
  padding: 0;
2378
2272
  margin: 0;
2379
2273
  }
2274
+ .charcoal-checkbox-input {
2275
+ -webkit-appearance: none;
2276
+ -moz-appearance: none;
2277
+ appearance: none;
2278
+ display: flex;
2279
+ cursor: pointer;
2280
+ margin: 0;
2281
+ width: 20px;
2282
+ height: 20px;
2283
+ border-radius: 4px;
2284
+ transition:
2285
+ 0.2s box-shadow,
2286
+ 0.2s background-color;
2287
+ position: relative;
2288
+ box-sizing: border-box;
2289
+ }
2290
+
2291
+ .charcoal-checkbox-input:disabled,
2292
+ .charcoal-checkbox-input[readonly] {
2293
+ opacity: 0.32;
2294
+ cursor: default;
2295
+ }
2296
+
2297
+ .charcoal-checkbox-input:checked {
2298
+ background-color: var(--charcoal-color-container-primary-default);
2299
+ }
2300
+
2301
+ .charcoal-checkbox-input:checked::after {
2302
+ content: '';
2303
+ background-color: white;
2304
+ display: flex;
2305
+ margin: auto;
2306
+ width: 16px;
2307
+ height: 16px;
2308
+ clip-path: path(
2309
+ 'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'
2310
+ );
2311
+ }
2312
+
2313
+ .charcoal-checkbox-input:not(:checked) {
2314
+ border-width: 2px;
2315
+ border-style: solid;
2316
+ border-color: var(--charcoal-color-border-default);
2317
+ }
2318
+
2319
+ .charcoal-checkbox-input:not(:disabled):focus {
2320
+ outline: none;
2321
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
2322
+ }
2323
+ .charcoal-checkbox-input:not(:disabled):focus-visible {
2324
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
2325
+ }
2326
+ .charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {
2327
+ box-shadow: none;
2328
+ }
2329
+
2330
+ .charcoal-checkbox-input:checked:not(:disabled):hover {
2331
+ background-color: var(--charcoal-color-container-primary-hover);
2332
+ }
2333
+ .charcoal-checkbox-input:checked:not(:disabled):active {
2334
+ background-color: var(--charcoal-color-container-primary-press);
2335
+ }
2336
+
2337
+ .charcoal-checkbox-input[aria-invalid='true'],
2338
+ .charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {
2339
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
2340
+ }
2341
+
2342
+ .charcoal-checkbox-input[data-rounded='true'] {
2343
+ border-radius: 10px;
2344
+ background-color: var(--charcoal-color-container-secondary-default);
2345
+ border: 2px solid transparent;
2346
+ }
2347
+
2348
+ .charcoal-checkbox-input[data-rounded='true']:checked {
2349
+ background-color: var(--charcoal-color-container-primary-default);
2350
+ }
2351
+
2352
+ .charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {
2353
+ background-color: var(--charcoal-color-container-secondary-hover);
2354
+ }
2355
+ .charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {
2356
+ background-color: var(--charcoal-color-container-secondary-press);
2357
+ }
2358
+
2359
+ .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {
2360
+ box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);
2361
+ }
2362
+
2363
+ .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {
2364
+ background-color: var(--charcoal-color-container-primary-hover);
2365
+ }
2366
+ .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {
2367
+ background-color: var(--charcoal-color-container-primary-press);
2368
+ }
2369
+
2370
+ .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],
2371
+ .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(
2372
+ :disabled
2373
+ ):focus {
2374
+ box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);
2375
+ }
2376
+
2377
+ .charcoal-checkbox-input[data-rounded='true']::before {
2378
+ content: '';
2379
+ width: 24px;
2380
+ height: 24px;
2381
+ position: absolute;
2382
+ top: -4px;
2383
+ left: -4px;
2384
+ border-radius: 12px;
2385
+ border: 2px solid #fff;
2386
+ box-sizing: border-box;
2387
+ }
2380
2388
  .charcoal-popover {
2381
2389
  margin: 4px 0;
2382
2390
  list-style: none;