@charcoal-ui/react 6.0.1 → 6.1.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/components/Pagination/index2.js +52 -60
  2. package/dist/components/Pagination/index2.js.map +1 -1
  3. package/dist/components/Snackbar/index.d.ts +52 -0
  4. package/dist/components/Snackbar/index.d.ts.map +1 -0
  5. package/dist/components/Snackbar/index2.cjs +268 -0
  6. package/dist/components/Snackbar/index2.cjs.map +1 -0
  7. package/dist/components/Snackbar/index2.js +263 -0
  8. package/dist/components/Snackbar/index2.js.map +1 -0
  9. package/dist/index.cjs +3 -0
  10. package/dist/index.css +1487 -1376
  11. package/dist/index.d.ts +1 -0
  12. package/dist/index.d.ts.map +1 -1
  13. package/dist/index.js +2 -1
  14. package/dist/layered.css +1487 -1376
  15. package/dist/layered.css.map +1 -1
  16. package/package.json +5 -5
  17. package/src/components/Snackbar/__snapshots__/index.css.snap +110 -0
  18. package/src/components/Snackbar/index.css +110 -0
  19. package/src/components/Snackbar/index.story.tsx +184 -0
  20. package/src/components/Snackbar/index.test.tsx +294 -0
  21. package/src/components/Snackbar/index.tsx +455 -0
  22. package/src/index.ts +7 -0
package/dist/layered.css CHANGED
@@ -6,235 +6,350 @@
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-tag-item {
10
- --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
11
- --charcoal-tag-item-size: 40px;
12
- --charcoal-tag-item-padding-left: 24px;
13
- --charcoal-tag-item-padding-right: 24px;
14
- --charcoal-tag-item-bg: ;
15
-
16
- isolation: isolate;
17
- position: relative;
18
-
9
+ .charcoal-button {
19
10
  -webkit-appearance: none;
20
-
21
11
  -moz-appearance: none;
22
-
23
12
  appearance: none;
24
- outline: none;
13
+ background-image: none;
14
+ box-sizing: border-box;
15
+ padding: 0 24px;
25
16
  border-style: none;
26
-
27
- display: inline-flex;
28
- gap: 8px;
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;
29
31
  align-items: center;
30
32
  justify-content: center;
31
-
32
- text-decoration: none;
33
33
  cursor: pointer;
34
- overflow: hidden;
35
-
36
- color: var(--charcoal-tag-item-color);
37
- height: var(--charcoal-tag-item-size);
38
- padding-top: 4px;
39
- padding-bottom: 4px;
40
- padding-left: var(--charcoal-tag-item-padding-left);
41
- padding-right: var(--charcoal-tag-item-padding-right);
42
- box-sizing: border-box;
43
- border-radius: 4px;
44
-
45
- transition: 0.2s box-shadow;
34
+ -webkit-user-select: none;
35
+ -moz-user-select: none;
36
+ user-select: none;
37
+ white-space: nowrap;
38
+ border-radius: 999999px;
39
+ font-size: 14px;
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;
46
52
  }
47
53
 
48
- .charcoal-tag-item[data-size='M'] {
49
- --charcoal-tag-item-size: 40px;
50
- --charcoal-tag-item-padding-left: 24px;
51
- --charcoal-tag-item-padding-right: 24px;
54
+ .charcoal-button:disabled,
55
+ .charcoal-button[aria-disabled]:not([aria-disabled='false']) {
56
+ cursor: default;
57
+ opacity: 0.32;
52
58
  }
53
59
 
54
- .charcoal-tag-item[data-size='S'] {
55
- --charcoal-tag-item-size: 32px;
56
- --charcoal-tag-item-padding-left: 16px;
57
- --charcoal-tag-item-padding-right: 16px;
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);
58
64
  }
59
65
 
60
- .charcoal-tag-item[data-state='inactive'] {
61
- --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
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);
62
70
  }
63
71
 
64
- .charcoal-tag-item[data-state='active'] {
65
- --charcoal-tag-item-padding-left: 16px;
66
- --charcoal-tag-item-padding-right: 8px;
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);
67
77
  }
68
78
 
69
- .charcoal-tag-item:disabled,
70
- .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
71
- opacity: 0.32;
72
- cursor: default;
79
+ .charcoal-button[data-variant='Primary'] {
80
+ color: var(--charcoal-color-text-on-primary-default);
81
+ background-color: var(--charcoal-color-container-primary-default);
73
82
  }
74
83
 
75
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
76
- .charcoal-tag-item[aria-disabled='false']:focus-visible {
77
- outline: none;
78
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
79
- }
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
+ }
80
89
 
81
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
82
- .charcoal-tag-item[aria-disabled='false']:focus {
83
- outline: none;
84
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
85
- }
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
+ }
86
96
 
87
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
88
- .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
89
- box-shadow: none;
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);
90
100
  }
91
101
 
92
- .charcoal-tag-item__bg {
93
- background-color: var(--charcoal-tag-item-bg);
94
- }
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
+ }
95
107
 
96
- .charcoal-tag-item__bg[data-bg-variant='image'] {
97
- background-color: var(--charcoal-color-container-on-img-default);
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
+ }
114
+
115
+ .charcoal-button[data-variant='Navigation'] {
116
+ color: var(--charcoal-color-text-on-hud-default);
117
+ background-color: var(--charcoal-color-container-hud-default);
98
118
  }
99
119
 
100
- .charcoal-tag-item__bg[data-bg-variant='image']::before {
101
- content: '';
102
- position: absolute;
103
- z-index: 1;
104
- top: 0;
105
- left: 0;
106
- width: 100%;
107
- height: 100%;
108
- background-position: center;
109
- background-size: cover;
110
- background-image: var(--charcoal-tag-item-bg);
111
- mix-blend-mode: overlay;
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);
112
124
  }
113
125
 
114
- .charcoal-tag-item__bg[data-state='inactive'] {
115
- background-color: var(--charcoal-color-container-secondary-default);
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);
116
136
  }
117
137
 
118
- .charcoal-tag-item__label {
119
- height: 100%;
120
- display: flex;
121
- flex-direction: column;
122
- align-items: center;
123
- justify-content: center;
124
- }
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);
142
+ }
125
143
 
126
- .charcoal-tag-item__label[data-has-translate='true'] {
127
- justify-content: space-between;
128
- }
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
+ }
129
150
 
130
- .charcoal-tag-item__label__translated {
131
- --charcoal-tag-item-text-font-size: 12px;
132
- --charcoal-tag-item-text-line-height: 20px;
133
- font-weight: bold;
134
- }
151
+ .charcoal-button[data-size='S'] {
152
+ padding: 0 16px;
153
+ height: 32px;
154
+ }
135
155
 
136
- .charcoal-tag-item__label__translated::before {
137
- display: none;
156
+ .charcoal-button[data-full-width='true'] {
157
+ width: 100%;
138
158
  }
159
+ .charcoal-clickable {
160
+ cursor: pointer;
139
161
 
140
- .charcoal-tag-item__label__text {
141
- --charcoal-tag-item-text-font-size: 14px;
142
- --charcoal-tag-item-text-line-height: 22px;
162
+ /* Reset button appearance */
163
+ -webkit-appearance: none;
164
+ -moz-appearance: none;
165
+ appearance: none;
166
+ background: transparent;
167
+ padding: 0;
168
+ border-style: none;
169
+ outline: none;
170
+ color: inherit;
171
+ text-rendering: inherit;
172
+ letter-spacing: inherit;
173
+ word-spacing: inherit;
174
+ text-decoration: none;
143
175
 
144
- max-width: 152px;
145
- overflow: hidden;
146
- font-weight: bold;
176
+ /* Change the font styles in all browsers. */
177
+ font: inherit;
147
178
 
148
- color: inherit;
149
- white-space: nowrap;
150
- text-overflow: ellipsis;
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;
151
187
  }
152
188
 
153
- .charcoal-tag-item__label__text[data-has-translate='true'] {
154
- --charcoal-tag-item-text-font-size: 10px;
155
- --charcoal-tag-item-text-line-height: 14px;
156
- font-weight: normal;
189
+ .charcoal-clickable:disabled,
190
+ .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
191
+ cursor: default;
157
192
  }
158
193
 
159
- /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
160
- .charcoal-tag-item__labe__text[data-has-translate='true']::after {
161
- display: none;
162
- }
163
- .charcoal-modal-header-root {
164
- height: 64px;
165
- display: grid;
166
- align-content: center;
194
+ .charcoal-clickable:focus {
195
+ outline: none;
196
+ }
197
+
198
+ .charcoal-clickable::-moz-focus-inner {
199
+ border-style: none;
200
+ padding: 0;
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;
220
+
221
+ -webkit-user-select: none;
222
+
223
+ -moz-user-select: none;
224
+
225
+ user-select: none;
226
+ display: flex;
227
+ align-items: center;
167
228
  justify-content: center;
229
+ border-radius: 999999px;
230
+ transition:
231
+ 0.2s background-color,
232
+ 0.2s box-shadow;
168
233
  }
169
234
 
170
- @media (max-width: 743px) {
171
- .charcoal-modal-header-root[data-bottom-sheet='true'],
172
- .charcoal-modal-header-root[data-bottom-sheet='full'] {
173
- height: 48px;
235
+ .charcoal-icon-button:disabled,
236
+ .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
237
+ cursor: default;
238
+ opacity: 0.32;
174
239
  }
175
- }
176
240
 
177
- .charcoal-modal-header-title {
178
- color: var(--charcoal-color-text-default);
179
- font-size: 16px;
180
- line-height: 24px;
181
- font-weight: bold;
182
- display: flow-root;
183
- }
241
+ .charcoal-icon-button:focus {
242
+ outline: none;
243
+ }
184
244
 
185
- .charcoal-modal-align {
186
- padding-left: 16px;
187
- padding-right: 16px;
188
- }
245
+ .charcoal-icon-button::-moz-focus-inner {
246
+ border-style: none;
247
+ padding: 0;
248
+ }
189
249
 
190
- .charcoal-modal-body {
191
- padding-bottom: 40px;
192
- }
250
+ .charcoal-icon-button[data-size='XS'] {
251
+ width: 20px;
252
+ height: 20px;
253
+ }
193
254
 
194
- .charcoal-modal-buttons {
195
- display: grid;
196
- grid-auto-flow: row;
197
- grid-row-gap: 8px;
255
+ .charcoal-icon-button[data-size='S'] {
256
+ width: 32px;
257
+ height: 32px;
258
+ }
198
259
 
199
- padding-top: 16px;
200
- padding-left: 16px;
201
- padding-right: 16px;
202
- }
203
- .charcoal-hint-text {
204
- background-color: var(--charcoal-color-container-secondary-default);
205
- border-radius: 8px;
206
- padding: 12px 16px;
207
- display: flex;
208
- align-items: flex-start;
209
- }
260
+ .charcoal-icon-button[data-size='M'] {
261
+ width: 40px;
262
+ height: 40px;
263
+ }
210
264
 
211
- .charcoal-hint-text[data-context='page'] {
212
- justify-content: center;
265
+ .charcoal-icon-button[data-variant='Default'] {
266
+ color: var(--charcoal-color-icon-tertiary-default);
267
+ background-color: transparent;
213
268
  }
214
269
 
215
- @media (min-width: 744px) {
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);
274
+ }
216
275
 
217
- .charcoal-hint-text[data-context='page'] {
218
- padding: 20px 40px
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
+ }
281
+
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
+ }
287
+
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);
219
291
  }
292
+
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);
220
297
  }
221
298
 
222
- .charcoal-hint-text-icon {
223
- display: flex;
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
+ }
304
+
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
+ }
310
+
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
+ }
316
+
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-switch__label {
327
+ display: inline-grid;
328
+ grid-template-columns: auto 1fr;
224
329
  align-items: center;
225
- color: var(--charcoal-color-icon-tertiary-default);
226
- height: 22px;
227
- margin: 0 4px 0 0;
330
+ cursor: pointer;
331
+ outline: 0;
332
+ gap: 4px;
228
333
  }
229
334
 
230
- .charcoal-hint-text-message {
231
- color: var(--charcoal-color-text-secondary-default);
335
+ .charcoal-switch__label[aria-disabled='true'] {
336
+ opacity: 0.32;
337
+ cursor: default;
338
+ }
339
+
340
+ .charcoal-switch__label[aria-disabled='true'] > input {
341
+ opacity: 1;
342
+ }
343
+
344
+ .charcoal-switch__label_div {
232
345
  font-size: 14px;
233
346
  line-height: 22px;
234
- display: flow-root;
235
- margin: 0;
236
- min-width: 0;
237
- overflow-wrap: break-word;
347
+ color: var(--charcoal-color-text-default);
348
+ }
349
+ .charcoal-radio-group {
350
+ display: grid;
351
+ grid-template-columns: 1fr;
352
+ grid-gap: 8px;
238
353
  }
239
354
  .charcoal-loading-spinner {
240
355
  box-sizing: content-box;
@@ -279,1411 +394,1349 @@
279
394
  .charcoal-loading-spinner-icon[data-once='true'] {
280
395
  animation-iteration-count: 1;
281
396
  }
282
- .charcoal-carousel {
283
- --charcoal-carousel-gap: 0px;
284
-
285
- position: relative;
286
- display: block;
397
+ .charcoal-radio__label {
398
+ display: grid;
399
+ grid-template-columns: auto 1fr;
400
+ grid-gap: 4px;
401
+ align-items: center;
402
+ cursor: pointer;
287
403
  }
288
404
 
289
- .charcoal-carousel[data-full-width='true'] {
290
- width: 100vw;
291
- margin-inline: calc(50% - 50vw);
405
+ .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
406
+ opacity: 0.32;
407
+ cursor: default;
292
408
  }
293
409
 
294
- .charcoal-carousel__viewport {
410
+ .charcoal-radio__label_div {
411
+ font-size: 14px;
412
+ line-height: 22px;
413
+ color: var(--charcoal-color-text-default);
414
+ }
415
+ .charcoal-multi-select {
416
+ display: grid;
417
+ grid-template-columns: auto 1fr;
418
+ align-items: center;
295
419
  position: relative;
420
+ cursor: pointer;
421
+ gap: 4px;
296
422
  }
297
423
 
298
- /* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと
299
- hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */
300
-
301
- .charcoal-carousel__viewport[data-focus-visible] {
302
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
424
+ .charcoal-multi-select:disabled,
425
+ .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
426
+ opacity: 0.32;
427
+ cursor: default;
303
428
  }
304
429
 
305
- /* スライド間隔は gap prop（--charcoal-carousel-gap）で注入する。
306
- スライド寸法は sandbox 同様、利用者が children 側で持つ。 */
307
- .charcoal-carousel__scroller {
308
- position: relative;
309
- display: flex;
310
- gap: var(--charcoal-carousel-gap);
311
- overflow-x: auto;
312
- overflow-y: hidden;
313
- overscroll-behavior-x: contain;
314
- scroll-behavior: smooth;
315
- scrollbar-width: none;
316
- outline: none;
430
+ .charcoal-multi-select-label {
431
+ display: flow-root;
432
+ align-items: center;
433
+ font-size: 14px;
434
+ line-height: 22px;
435
+ color: var(--charcoal-color-text-default);
317
436
  }
318
- .charcoal-carousel__scroller::-webkit-scrollbar {
319
- display: none;
320
- }
321
437
 
322
- /* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。
323
- align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。
324
- 未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */
325
- .charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {
326
- scroll-snap-type: none;
327
- }
438
+ .charcoal-multi-select-label::before {
439
+ display: block;
440
+ width: 0;
441
+ height: 0;
442
+ content: '';
443
+ margin-top: -4px;
444
+ }
328
445
 
329
- .charcoal-carousel[data-scroll-snap-type='proximity']
330
- .charcoal-carousel__scroller {
331
- scroll-snap-type: x proximity;
332
- }
446
+ .charcoal-multi-select-label::after {
447
+ display: block;
448
+ width: 0;
449
+ height: 0;
450
+ content: '';
451
+ margin-bottom: -4px;
452
+ }
333
453
 
334
- .charcoal-carousel[data-scroll-snap-type='mandatory']
335
- .charcoal-carousel__scroller {
336
- scroll-snap-type: x mandatory;
454
+ .charcoal-multi-select-input[type='checkbox'] {
455
+ -webkit-appearance: none;
456
+ -moz-appearance: none;
457
+ appearance: none;
458
+ display: block;
459
+ width: 20px;
460
+ height: 20px;
461
+ margin: 0;
462
+ background-color: var(--charcoal-color-container-neutral-default);
463
+ border-radius: 999999px;
464
+ transition:
465
+ 0.2s background-color,
466
+ 0.2s box-shadow;
337
467
  }
338
468
 
339
- /* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を
340
- 問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。
341
- 左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して
342
- スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。
343
- 無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い
344
- mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */
345
- .charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {
346
- -webkit-mask-image:
347
- linear-gradient(to right, transparent, #000 72px),
348
- linear-gradient(to left, transparent, #000 72px);
349
- mask-image:
350
- linear-gradient(to right, transparent, #000 72px),
351
- linear-gradient(to left, transparent, #000 72px);
352
- /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */
353
- -webkit-mask-size: calc(100% + 72px) 100%;
354
- mask-size: calc(100% + 72px) 100%;
355
- -webkit-mask-repeat: no-repeat;
356
- mask-repeat: no-repeat;
357
- -webkit-mask-composite: source-in, xor;
358
- mask-composite: intersect;
359
- -webkit-mask-position:
360
- -72px 0,
361
- 0 0;
362
- mask-position:
363
- -72px 0,
364
- 0 0;
365
- /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */
366
- transition: 0.2s ease-in mask-position;
367
- }
469
+ .charcoal-multi-select-input[type='checkbox']:checked {
470
+ background-color: var(--charcoal-color-container-primary-default);
471
+ }
368
472
 
369
- .charcoal-carousel[data-has-gradient='true'][data-can-prev='true']
370
- .charcoal-carousel__scroller {
371
- -webkit-mask-position:
372
- 0 0,
373
- 0 0;
374
- mask-position:
375
- 0 0,
376
- 0 0;
377
- }
473
+ .charcoal-multi-select-input[type='checkbox']:focus {
474
+ outline: none;
475
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
476
+ }
378
477
 
379
- .charcoal-carousel[data-has-gradient='true'][data-can-next='true']
380
- .charcoal-carousel__scroller {
381
- -webkit-mask-position:
382
- -72px 0,
383
- -72px 0;
384
- mask-position:
385
- -72px 0,
386
- -72px 0;
387
- }
478
+ .charcoal-multi-select-input[type='checkbox']:focus-visible {
479
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
480
+ }
388
481
 
389
- .charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']
390
- .charcoal-carousel__scroller {
391
- -webkit-mask-position:
392
- 0 0,
393
- -72px 0;
394
- mask-position:
395
- 0 0,
396
- -72px 0;
397
- }
482
+ .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
483
+ box-shadow: none;
484
+ }
398
485
 
399
- .charcoal-carousel__item {
400
- flex: 0 0 auto;
401
- min-width: 0;
402
- }
486
+ .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
487
+ .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
488
+ background-color: var(--charcoal-color-container-neutral-hover);
489
+ }
403
490
 
404
- .charcoal-carousel[data-size='S'] .charcoal-carousel__item {
405
- flex: 0 0 100%;
406
- }
491
+ .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),
492
+ .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
493
+ background-color: var(--charcoal-color-container-neutral-press);
494
+ }
407
495
 
408
- /* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item
409
- より後に置くことで no-descending-specificity を回避する。 */
410
- .charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {
411
- scroll-snap-align: center;
412
- }
496
+ .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
497
+ .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
498
+ background-color: var(--charcoal-color-container-primary-hover);
499
+ }
413
500
 
414
- .charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {
415
- scroll-snap-align: start;
416
- }
501
+ .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
502
+ .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
503
+ background-color: var(--charcoal-color-container-primary-press);
504
+ }
417
505
 
418
- /* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
506
+ .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(
507
+ [aria-disabled]
508
+ ) {
509
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
510
+ }
419
511
 
420
- /* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
421
- .charcoal-carousel__navigation {
512
+ .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
513
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
514
+ }
515
+
516
+ .charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
517
+ background-color: var(--charcoal-color-container-on-img-default);
518
+ }
519
+
520
+ .charcoal-multi-select-overlay {
422
521
  position: absolute;
423
- inset: 0;
424
- pointer-events: none;
425
- display: grid;
426
- grid-template-columns: 72px 1fr 72px;
522
+ top: -2px;
523
+ left: -2px;
524
+ box-sizing: border-box;
525
+ display: flex;
427
526
  align-items: center;
428
- /* アイテム内のコンテンツより上にボタンを表示する */
429
- z-index: 1;
430
- /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
431
- opacity: 0;
432
- transition: 0.4s opacity;
527
+ justify-content: center;
528
+ width: 24px;
529
+ height: 24px;
530
+ border-radius: 999999px;
531
+ color: var(--charcoal-color-icon-on-primary-default);
532
+ transition: 0.2s box-shadow;
433
533
  }
434
- .charcoal-carousel__navigation[data-visible='false'] {
435
- display: none;
534
+
535
+ .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
536
+ [aria-disabled]
537
+ ) {
538
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
436
539
  }
437
540
 
438
- /* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
439
- カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
440
- 表示され続けるため、react-aria が付与する data 属性で判定する）。 */
441
- .charcoal-carousel:hover .charcoal-carousel__navigation,
442
- .charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
443
- opacity: 1;
541
+ .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
542
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
543
+ }
544
+
545
+ .charcoal-multi-select-overlay[data-overlay='true'] {
546
+ border-color: var(--charcoal-color-border-hud);
547
+ border-width: 2px;
548
+ border-style: solid;
549
+ }
550
+ .charcoal-modal-header-root {
551
+ height: 64px;
552
+ display: grid;
553
+ align-content: center;
554
+ justify-content: center;
444
555
  }
445
556
 
446
- .charcoal-carousel__navigation__item {
447
- pointer-events: auto;
557
+ @media (max-width: 743px) {
558
+ .charcoal-modal-header-root[data-bottom-sheet='true'],
559
+ .charcoal-modal-header-root[data-bottom-sheet='full'] {
560
+ height: 48px;
561
+ }
448
562
  }
449
563
 
450
- /* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
451
- 擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
452
- position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
564
+ .charcoal-modal-header-title {
565
+ color: var(--charcoal-color-text-default);
566
+ font-size: 16px;
567
+ line-height: 24px;
568
+ font-weight: bold;
569
+ display: flow-root;
570
+ }
453
571
 
454
- .charcoal-carousel__navigation__item::after {
455
- content: '';
456
- position: absolute;
457
- top: 0;
458
- bottom: 0;
459
- width: 72px;
460
- }
572
+ .charcoal-modal-align {
573
+ padding-left: 16px;
574
+ padding-right: 16px;
575
+ }
461
576
 
462
- .charcoal-carousel__navigation__item[data-direction='prev'] {
463
- grid-column: 1;
464
- justify-self: center;
465
- }
577
+ .charcoal-modal-body {
578
+ padding-bottom: 40px;
579
+ }
466
580
 
467
- .charcoal-carousel__navigation__item[data-direction='prev']::after {
468
- left: 0;
469
- }
581
+ .charcoal-modal-buttons {
582
+ display: grid;
583
+ grid-auto-flow: row;
584
+ grid-row-gap: 8px;
470
585
 
471
- .charcoal-carousel__navigation__item[data-direction='next'] {
472
- grid-column: 3;
473
- justify-self: center;
474
- }
586
+ padding-top: 16px;
587
+ padding-left: 16px;
588
+ padding-right: 16px;
589
+ }
590
+ .charcoal-dropdown-selector-menu-item {
591
+ font-size: 14px;
592
+ line-height: 22px;
593
+ color: var(--charcoal-color-text-secondary-default);
594
+ padding: 9px 0;
595
+
596
+ display: flex;
597
+ align-items: center;
598
+ width: 100%;
599
+ margin-left: 20px;
600
+ }
475
601
 
476
- .charcoal-carousel__navigation__item[data-direction='next']::after {
477
- right: 0;
478
- }
602
+ .charcoal-dropdown-selector-menu-item[data-selected='true'] {
603
+ margin-left: 0px;
604
+ }
479
605
 
480
- /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
481
- 高い詳細度で打ち消すため、ルートを前置する。 */
482
- .charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {
483
- opacity: 0;
484
- pointer-events: none;
606
+ .charcoal-dropdown-selector-menu-item-icon {
607
+ color: var(--charcoal-color-text-secondary-default);
608
+ padding-right: 4px;
485
609
  }
486
610
 
487
- /* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */
488
- @media (hover: none) and (pointer: coarse) {
489
- .charcoal-carousel__navigation {
490
- display: none;
491
- }
611
+ .charcoal-dropdown-selector-menu-item-container {
612
+ display: flex;
613
+ align-items: center;
492
614
  }
493
615
 
494
- /* ── Indicator: JS Fallback ── */
616
+ .charcoal-dropdown-selector-menu-secondary {
617
+ font-size: 12px;
618
+ line-height: 20px;
619
+ color: var(--charcoal-color-text-tertiary-default);
620
+ padding-bottom: 9px;
495
621
 
496
- .charcoal-carousel__indicator {
497
622
  display: flex;
498
- justify-content: center;
499
623
  align-items: center;
500
- height: 40px;
501
- gap: 8px;
624
+ margin-left: 20px;
502
625
  }
503
626
 
504
- .charcoal-carousel__indicator[data-visible='false'] {
505
- display: none;
506
- }
507
-
508
- .charcoal-carousel__indicator__item {
509
- -webkit-appearance: none;
510
- -moz-appearance: none;
511
- appearance: none;
512
- box-sizing: border-box;
513
- width: 8px;
514
- height: 8px;
515
- padding: 0;
516
- border: 0;
517
- border-radius: 50%;
518
- background-color: var(--charcoal-color-text-tertiary-default);
519
- cursor: pointer;
520
- transition: 0.2s background-color;
627
+ .charcoal-dropdown-selector-menu-fullwidth {
628
+ width: 100%;
629
+ }
630
+ .charcoal-dropdown-selector-root {
631
+ display: grid;
632
+ grid-template-columns: 1fr;
633
+ grid-gap: 4px;
634
+ width: 100%;
521
635
  }
522
636
 
523
- .charcoal-carousel__indicator__item:hover {
524
- background-color: var(--charcoal-color-text-secondary-default);
637
+ .charcoal-dropdown-selector-root[aria-disabled='true'] {
638
+ cursor: default;
639
+ opacity: 0.32;
525
640
  }
526
641
 
527
- .charcoal-carousel__indicator__item:focus-visible {
528
- outline: 2px solid rgba(0, 150, 250, 0.56);
529
- outline-offset: 2px;
530
- }
642
+ .charcoal-dropdown-selector-button {
643
+ display: grid;
644
+ grid-template-columns: 1fr auto;
645
+ justify-content: space-between;
646
+ align-items: center;
531
647
 
532
- .charcoal-carousel__indicator__item[data-active='true'] {
533
- background-color: var(--charcoal-color-text-default);
534
- }
648
+ height: 40px;
649
+ width: 100%;
650
+ box-sizing: border-box;
651
+ border: none;
652
+ cursor: pointer;
653
+ gap: 4px;
535
654
 
536
- /* ── CSS Scroll Markers (progressive enhancement) ── */
655
+ padding-right: 8px;
656
+ padding-left: 8px;
657
+ background-color: var(--charcoal-color-container-secondary-default-a);
658
+ border-radius: 4px;
537
659
 
538
- /* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・
539
- 擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */
540
- /* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
541
- @supports (scroll-marker-group: after) {
542
- .charcoal-carousel[data-indicator='true'] {
543
- padding-bottom: 40px;
544
- }
660
+ transition:
661
+ 0.2s box-shadow,
662
+ 0.2s background-color;
663
+ }
545
664
 
546
- .charcoal-carousel__scroller {
547
- anchor-name: --charcoal-carousel;
548
- scroll-marker-group: after;
665
+ .charcoal-dropdown-selector-button:disabled {
666
+ cursor: default;
549
667
  }
550
668
 
551
- .charcoal-carousel__scroller::scroll-button(*) {
552
- content: none;
669
+ .charcoal-dropdown-selector-button:not(:disabled):focus {
670
+ outline: none;
671
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
553
672
  }
554
673
 
555
- .charcoal-carousel__scroller::scroll-marker-group {
556
- display: flex;
557
- justify-content: center;
558
- align-items: center;
559
- height: 40px;
560
- gap: 8px;
561
-
562
- position: absolute;
563
- position-anchor: --charcoal-carousel;
564
- top: anchor(bottom);
565
- justify-self: anchor-center;
674
+ .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
675
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
566
676
  }
567
677
 
568
- .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {
569
- scroll-marker-group: none;
570
- }
571
-
572
- .charcoal-carousel__item::scroll-marker {
573
- content: '';
574
- width: 8px;
575
- height: 8px;
576
- border: 0;
577
- border-radius: 50%;
578
- background-color: var(--charcoal-color-text-tertiary-default);
579
- cursor: pointer;
580
- transition: 0.2s background-color;
581
- }
582
-
583
- .charcoal-carousel__item::scroll-marker:hover {
584
- background-color: var(--charcoal-color-text-secondary-default);
678
+ .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
679
+ .charcoal-dropdown-selector-button:not(:disabled):active {
680
+ background-color: var(--charcoal-color-container-secondary-press-a);
585
681
  }
586
682
 
587
- .charcoal-carousel__item::scroll-marker:focus {
588
- outline: 2px solid rgba(0, 150, 250, 0.56);
589
- outline-offset: 2px;
683
+ .charcoal-dropdown-selector-button:not(:disabled):hover {
684
+ background-color: var(--charcoal-color-container-secondary-hover-a);
590
685
  }
591
686
 
592
- .charcoal-carousel__item::scroll-marker:target-current {
593
- background-color: var(--charcoal-color-text-default);
687
+ .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
688
+ box-shadow: none;
594
689
  }
595
690
 
596
- .charcoal-carousel__indicator {
597
- display: none;
598
- }
599
- }
600
- /* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
601
- .charcoal-pagination {
602
- display: flex;
603
- justify-content: center;
604
- align-items: center;
605
- }
606
-
607
- .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
608
- min-width: 32px;
609
- min-height: 32px;
610
- }
611
-
612
- .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
613
- min-width: 40px;
614
- min-height: 40px;
615
- }
616
-
617
- /* stylelint-disable no-descending-specificity */
618
- .charcoal-pagination-button {
619
- cursor: pointer;
620
- -webkit-appearance: none;
621
- -moz-appearance: none;
622
- appearance: none;
623
- padding: 0;
624
- border-style: none;
625
- outline: none;
626
- text-decoration: none;
627
- font-family: inherit;
628
- font-style: inherit;
629
- font-variant: inherit;
630
- margin: 0;
631
- -webkit-user-select: none;
632
- -moz-user-select: none;
633
- user-select: none;
634
-
635
- display: flex;
636
- align-items: center;
637
- justify-content: center;
638
- font-size: 14px;
639
- font-weight: 700;
640
- line-height: 22px;
641
-
642
- /* HACK:
643
- * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
644
- * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
645
- */
646
- /* stylelint-disable-next-line property-no-vendor-prefix */
647
- -webkit-transform: translateZ(0);
648
-
649
- color: var(--charcoal-color-text-tertiary-default);
650
- background-color: transparent;
651
- border-radius: 20px;
652
- transition:
653
- 0.2s background-color,
654
- 0.2s box-shadow;
655
- }
656
- .charcoal-pagination-button:focus {
657
- outline: none;
658
- }
659
- .charcoal-pagination-button::-moz-focus-inner {
660
- border-style: none;
661
- padding: 0;
662
- }
663
- .charcoal-pagination-button[hidden] {
664
- visibility: hidden;
665
- display: block;
666
- }
667
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
668
- .charcoal-pagination-button[aria-disabled='false']:hover {
669
- color: var(--charcoal-color-text-tertiary-default);
670
- background-color: var(--charcoal-color-container-secondary-default);
671
- }
672
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
673
- .charcoal-pagination-button[aria-disabled='false']:active {
674
- color: var(--charcoal-color-text-tertiary-press);
675
- background-color: var(--charcoal-color-container-tertiary-press);
676
- }
677
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
678
- .charcoal-pagination-button[aria-disabled='false']:focus {
679
- outline: none;
680
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
681
- }
682
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
683
- .charcoal-pagination-button[aria-disabled='false']:focus-visible {
684
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
685
- }
686
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
687
- .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
688
- box-shadow: none;
689
- }
690
- .charcoal-pagination-button[aria-current] {
691
- cursor: default;
692
- background-color: var(--charcoal-color-container-hud-default);
693
- color: var(--charcoal-color-text-on-hud-default);
694
- }
695
- .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,
696
- .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {
697
- background-color: var(--charcoal-color-container-hud-default);
698
- color: var(--charcoal-color-text-on-hud-default);
699
- }
700
- /* stylelint-enable no-descending-specificity */
691
+ .charcoal-dropdown-selector-button[aria-invalid='true'],
692
+ .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
693
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
694
+ }
701
695
 
702
- .charcoal-pagination-nav-button[data-hidden] {
703
- visibility: hidden;
696
+ .charcoal-ui-dropdown-selector-text {
697
+ text-align: left;
698
+ font-size: 14px;
699
+ line-height: 22px;
700
+ display: flow-root;
701
+ color: var(--charcoal-color-text-default);
702
+ overflow: hidden;
703
+ text-overflow: ellipsis;
704
+ white-space: nowrap;
704
705
  }
705
706
 
706
- .charcoal-pagination-spacer,
707
- .charcoal-pagination-spacer:hover,
708
- .charcoal-pagination-spacer:active {
709
- cursor: default;
710
- color: var(--charcoal-color-text-tertiary-default);
711
- background: none;
707
+ .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
708
+ color: var(--charcoal-color-text-placeholder-default);
712
709
  }
713
710
 
714
- .charcoal-pagination-spacer.charcoal-icon-button:disabled {
715
- opacity: 1;
716
- }
717
- .charcoal-text-ellipsis {
718
- /* Runtime variables overridden by the React component. */
719
- --charcoal-text-ellipsis-line-limit: 1;
720
- --charcoal-text-ellipsis-line-height: inherit;
711
+ .charcoal-ui-dropdown-selector-icon {
712
+ color: var(--charcoal-color-icon-secondary-default);
713
+ }
714
+ .charcoal-menu-item-group {
715
+ display: block;
716
+ }
717
+
718
+ .charcoal-menu-item-group > span {
719
+ display: block;
720
+ color: var(--charcoal-color-text-tertiary-default);
721
+ font-size: 12px;
722
+ font-weight: bold;
723
+ padding: 12px 0 8px 16px;
724
+ }
721
725
 
726
+ .charcoal-menu-item-group > ul {
727
+ padding-left: 0;
728
+ margin: 0;
729
+ box-sizing: border-box;
730
+ list-style: none;
722
731
  overflow: hidden;
723
- overflow-wrap: break-word;
724
- display: -webkit-box;
725
- -webkit-box-orient: vertical;
726
- -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
727
732
  }
733
+ .charcoal-segmented-control {
734
+ display: inline-flex;
735
+ align-items: center;
728
736
 
729
- .charcoal-text-ellipsis[data-has-line-height='true'] {
730
- line-height: var(--charcoal-text-ellipsis-line-height);
731
- }
737
+ background-color: var(--charcoal-color-container-secondary-default-a);
738
+ border-radius: 16px;
739
+ }
732
740
 
733
- .charcoal-text-ellipsis[data-has-line-height='false'] {
734
- line-height: inherit;
741
+ .charcoal-segmented-control[data-uniform-segment-width='true'],
742
+ .charcoal-segmented-control[data-full-width='true'] {
743
+ display: inline-grid;
744
+ grid-auto-columns: minmax(80px, 1fr);
745
+ grid-auto-rows: 32px;
746
+ grid-auto-flow: column;
735
747
  }
736
748
 
737
- .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
738
- text-overflow: ellipsis;
739
- white-space: nowrap;
749
+ .charcoal-segmented-control[data-full-width='true'] {
750
+ width: 100%;
740
751
  }
741
- .charcoal-button {
742
- -webkit-appearance: none;
743
- -moz-appearance: none;
744
- appearance: none;
745
- background-image: none;
746
- box-sizing: border-box;
747
- padding: 0 24px;
748
- border-style: none;
749
- outline: none;
750
- text-rendering: inherit;
751
- letter-spacing: inherit;
752
- word-spacing: inherit;
753
- text-decoration: none;
754
- font-family: inherit;
755
- font-style: inherit;
756
- font-variant: inherit;
757
- margin: 0;
758
- overflow: visible;
759
- text-transform: none;
760
- width: -moz-min-content;
761
- width: min-content;
762
- display: inline-grid;
752
+
753
+ .charcoal-segmented-control-radio__label {
754
+ position: relative;
755
+ display: flex;
763
756
  align-items: center;
764
757
  justify-content: center;
765
758
  cursor: pointer;
766
- -webkit-user-select: none;
767
- -moz-user-select: none;
768
- user-select: none;
769
- white-space: nowrap;
770
- border-radius: 999999px;
759
+ height: 32px;
760
+
761
+ padding-right: 16px;
762
+ padding-left: 16px;
763
+ border-radius: 16px;
764
+ color: var(--charcoal-color-text-secondary-default);
765
+
771
766
  font-size: 14px;
772
767
  line-height: 22px;
773
- font-weight: bold;
774
- color: var(--charcoal-color-text-default);
775
- background-color: var(
776
- --charcoal-color-container-secondary-default-a,
777
- transparent
778
- );
779
- transition:
780
- 0.2s color,
781
- 0.2s background-color,
782
- 0.2s box-shadow;
783
- height: 40px;
784
768
  }
785
769
 
786
- .charcoal-button:disabled,
787
- .charcoal-button[aria-disabled]:not([aria-disabled='false']) {
770
+ .charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {
788
771
  cursor: default;
789
772
  opacity: 0.32;
790
773
  }
791
774
 
792
- .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,
793
- .charcoal-button[aria-disabled='false']:focus-visible {
794
- outline: none;
795
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
796
- }
797
-
798
- .charcoal-button:not(:disabled):not([aria-disabled]):hover,
799
- .charcoal-button[aria-disabled='false']:hover {
800
- color: var(--charcoal-color-text-hover);
801
- background-color: var(--charcoal-color-container-secondary-hover-a);
802
- }
803
-
804
- .charcoal-button:not(:disabled):not([aria-disabled]):active,
805
- .charcoal-button[aria-disabled='false']:active,
806
- .charcoal-button[data-active='true'] {
807
- color: var(--charcoal-color-text-press);
808
- background-color: var(--charcoal-color-container-secondary-press-a);
809
- }
810
-
811
- .charcoal-button[data-variant='Primary'] {
812
- color: var(--charcoal-color-text-on-primary-default);
775
+ .charcoal-segmented-control-radio__label[data-checked='true'] {
813
776
  background-color: var(--charcoal-color-container-primary-default);
777
+ color: var(--charcoal-color-text-on-primary-default);
814
778
  }
815
779
 
816
- .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),
817
- .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
818
- color: var(--charcoal-color-text-on-primary-hover);
819
- background-color: var(--charcoal-color-container-primary-hover);
820
- }
821
-
822
- .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),
823
- .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
824
- .charcoal-button[data-variant='Primary'][data-active='true'] {
825
- color: var(--charcoal-color-text-on-primary-press);
826
- background-color: var(--charcoal-color-container-primary-press);
827
- }
828
-
829
- .charcoal-button[data-variant='Overlay'] {
830
- color: var(--charcoal-color-text-on-on-img-default);
831
- background-color: var(--charcoal-color-container-on-img-default);
780
+ .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
781
+ .charcoal-segmented-control-radio__label[data-full-width='true'] {
782
+ justify-content: center;
783
+ white-space: nowrap;
832
784
  }
833
785
 
834
- .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),
835
- .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
836
- color: var(--charcoal-color-text-on-on-img-hover);
837
- background-color: var(--charcoal-color-container-on-img-hover);
838
- }
786
+ .charcoal-segmented-control-radio__input {
787
+ position: absolute;
839
788
 
840
- .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),
841
- .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
842
- .charcoal-button[data-variant='Overlay'][data-active='true'] {
843
- color: var(--charcoal-color-text-on-on-img-press);
844
- background-color: var(--charcoal-color-container-on-img-press);
845
- }
789
+ height: 0px;
790
+ width: 0px;
791
+ padding: 0;
792
+ margin: 0;
846
793
 
847
- .charcoal-button[data-variant='Navigation'] {
848
- color: var(--charcoal-color-text-on-hud-default);
849
- background-color: var(--charcoal-color-container-hud-default);
850
- }
794
+ -webkit-appearance: none;
851
795
 
852
- .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),
853
- .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
854
- color: var(--charcoal-color-text-on-hud-hover);
855
- background-color: var(--charcoal-color-container-hud-hover);
856
- }
796
+ -moz-appearance: none;
857
797
 
858
- .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),
859
- .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
860
- .charcoal-button[data-variant='Navigation'][data-active='true'] {
861
- color: var(--charcoal-color-text-on-hud-press);
862
- background-color: var(--charcoal-color-container-hud-press);
863
- }
798
+ appearance: none;
799
+ box-sizing: border-box;
800
+ overflow: hidden;
801
+ white-space: nowrap;
802
+ opacity: 0;
803
+ }
804
+ .charcoal-checkbox__label {
805
+ position: relative;
806
+ cursor: pointer;
807
+ display: flex;
808
+ gap: 4px;
809
+ }
864
810
 
865
- .charcoal-button[data-variant='Danger'] {
866
- color: var(--charcoal-color-text-on-negative-default);
867
- background-color: var(--charcoal-color-container-negative-default);
811
+ .charcoal-checkbox__label[aria-disabled='true'] {
812
+ cursor: default;
813
+ opacity: 0.32;
868
814
  }
869
815
 
870
- .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),
871
- .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
872
- color: var(--charcoal-color-text-on-negative-hover);
873
- background-color: var(--charcoal-color-container-negative-hover);
816
+ .charcoal-checkbox__label[aria-disabled='true'] > input {
817
+ opacity: 1;
874
818
  }
875
819
 
876
- .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),
877
- .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
878
- .charcoal-button[data-variant='Danger'][data-active='true'] {
879
- color: var(--charcoal-color-text-on-negative-press);
880
- background-color: var(--charcoal-color-container-negative-press);
881
- }
820
+ .charcoal-checkbox__label_div {
821
+ flex: 1;
822
+ color: var(--charcoal-color-text-default);
823
+ font-size: 14px;
824
+ line-height: 20px;
825
+ }
826
+ .charcoal-tag-item {
827
+ --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);
828
+ --charcoal-tag-item-size: 40px;
829
+ --charcoal-tag-item-padding-left: 24px;
830
+ --charcoal-tag-item-padding-right: 24px;
831
+ --charcoal-tag-item-bg: ;
882
832
 
883
- .charcoal-button[data-size='S'] {
884
- padding: 0 16px;
885
- height: 32px;
886
- }
833
+ isolation: isolate;
834
+ position: relative;
887
835
 
888
- .charcoal-button[data-full-width='true'] {
889
- width: 100%;
890
- }
891
- .charcoal-icon-button {
892
- cursor: pointer;
893
836
  -webkit-appearance: none;
837
+
894
838
  -moz-appearance: none;
839
+
895
840
  appearance: none;
896
- background: transparent;
897
- padding: 0;
898
- border-style: none;
899
841
  outline: none;
900
- color: inherit;
901
- text-rendering: inherit;
902
- letter-spacing: inherit;
903
- word-spacing: inherit;
904
- text-decoration: none;
905
- font: inherit;
906
- margin: 0;
907
- overflow: visible;
908
- text-transform: none;
909
-
910
- -webkit-user-select: none;
911
-
912
- -moz-user-select: none;
842
+ border-style: none;
913
843
 
914
- user-select: none;
915
- display: flex;
844
+ display: inline-flex;
845
+ gap: 8px;
916
846
  align-items: center;
917
847
  justify-content: center;
918
- border-radius: 999999px;
919
- transition:
920
- 0.2s background-color,
921
- 0.2s box-shadow;
848
+
849
+ text-decoration: none;
850
+ cursor: pointer;
851
+ overflow: hidden;
852
+
853
+ color: var(--charcoal-tag-item-color);
854
+ height: var(--charcoal-tag-item-size);
855
+ padding-top: 4px;
856
+ padding-bottom: 4px;
857
+ padding-left: var(--charcoal-tag-item-padding-left);
858
+ padding-right: var(--charcoal-tag-item-padding-right);
859
+ box-sizing: border-box;
860
+ border-radius: 4px;
861
+
862
+ transition: 0.2s box-shadow;
922
863
  }
923
864
 
924
- .charcoal-icon-button:disabled,
925
- .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
926
- cursor: default;
927
- opacity: 0.32;
865
+ .charcoal-tag-item[data-size='M'] {
866
+ --charcoal-tag-item-size: 40px;
867
+ --charcoal-tag-item-padding-left: 24px;
868
+ --charcoal-tag-item-padding-right: 24px;
928
869
  }
929
870
 
930
- .charcoal-icon-button:focus {
931
- outline: none;
871
+ .charcoal-tag-item[data-size='S'] {
872
+ --charcoal-tag-item-size: 32px;
873
+ --charcoal-tag-item-padding-left: 16px;
874
+ --charcoal-tag-item-padding-right: 16px;
932
875
  }
933
876
 
934
- .charcoal-icon-button::-moz-focus-inner {
935
- border-style: none;
936
- padding: 0;
877
+ .charcoal-tag-item[data-state='inactive'] {
878
+ --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);
937
879
  }
938
880
 
939
- .charcoal-icon-button[data-size='XS'] {
940
- width: 20px;
941
- height: 20px;
881
+ .charcoal-tag-item[data-state='active'] {
882
+ --charcoal-tag-item-padding-left: 16px;
883
+ --charcoal-tag-item-padding-right: 8px;
942
884
  }
943
885
 
944
- .charcoal-icon-button[data-size='S'] {
945
- width: 32px;
946
- height: 32px;
886
+ .charcoal-tag-item:disabled,
887
+ .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
888
+ opacity: 0.32;
889
+ cursor: default;
947
890
  }
948
891
 
949
- .charcoal-icon-button[data-size='M'] {
950
- width: 40px;
951
- height: 40px;
892
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
893
+ .charcoal-tag-item[aria-disabled='false']:focus-visible {
894
+ outline: none;
895
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
952
896
  }
953
897
 
954
- .charcoal-icon-button[data-variant='Default'] {
955
- color: var(--charcoal-color-icon-tertiary-default);
956
- background-color: transparent;
898
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
899
+ .charcoal-tag-item[aria-disabled='false']:focus {
900
+ outline: none;
901
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
957
902
  }
958
903
 
959
- .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),
960
- .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
961
- color: var(--charcoal-color-icon-tertiary-press);
962
- background-color: var(--charcoal-color-container-press-a);
963
- }
964
-
965
- .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
966
- .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
967
- color: var(--charcoal-color-icon-tertiary-hover);
968
- background-color: var(--charcoal-color-container-hover-a);
969
- }
904
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
905
+ .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
906
+ box-shadow: none;
907
+ }
970
908
 
971
- .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,
972
- .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
973
- color: var(--charcoal-color-icon-tertiary-press);
974
- background-color: var(--charcoal-color-container-press-a);
975
- }
909
+ .charcoal-tag-item__bg {
910
+ background-color: var(--charcoal-tag-item-bg);
911
+ }
976
912
 
977
- .charcoal-icon-button[data-variant='Overlay'] {
978
- color: var(--charcoal-color-icon-on-on-img-default);
913
+ .charcoal-tag-item__bg[data-bg-variant='image'] {
979
914
  background-color: var(--charcoal-color-container-on-img-default);
980
915
  }
981
916
 
982
- .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),
983
- .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
984
- color: var(--charcoal-color-icon-on-on-img-press);
985
- background-color: var(--charcoal-color-container-on-img-press);
917
+ .charcoal-tag-item__bg[data-bg-variant='image']::before {
918
+ content: '';
919
+ position: absolute;
920
+ z-index: 1;
921
+ top: 0;
922
+ left: 0;
923
+ width: 100%;
924
+ height: 100%;
925
+ background-position: center;
926
+ background-size: cover;
927
+ background-image: var(--charcoal-tag-item-bg);
928
+ mix-blend-mode: overlay;
986
929
  }
987
930
 
988
- .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,
989
- .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
990
- color: var(--charcoal-color-icon-on-on-img-hover);
991
- background-color: var(--charcoal-color-container-on-img-hover);
992
- }
931
+ .charcoal-tag-item__bg[data-state='inactive'] {
932
+ background-color: var(--charcoal-color-container-secondary-default);
933
+ }
993
934
 
994
- .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,
995
- .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
996
- color: var(--charcoal-color-icon-on-on-img-press);
997
- background-color: var(--charcoal-color-container-on-img-press);
998
- }
935
+ .charcoal-tag-item__label {
936
+ height: 100%;
937
+ display: flex;
938
+ flex-direction: column;
939
+ align-items: center;
940
+ justify-content: center;
941
+ }
999
942
 
1000
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
1001
- .charcoal-icon-button[aria-disabled='false']:focus {
1002
- outline: none;
1003
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
943
+ .charcoal-tag-item__label[data-has-translate='true'] {
944
+ justify-content: space-between;
1004
945
  }
1005
946
 
1006
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
1007
- .charcoal-icon-button[aria-disabled='false']:focus-visible {
1008
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1009
- }
947
+ .charcoal-tag-item__label__translated {
948
+ --charcoal-tag-item-text-font-size: 12px;
949
+ --charcoal-tag-item-text-line-height: 20px;
950
+ font-weight: bold;
951
+ }
1010
952
 
1011
- .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1012
- .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {
1013
- box-shadow: none;
953
+ .charcoal-tag-item__label__translated::before {
954
+ display: none;
1014
955
  }
1015
- .charcoal-radio__label {
1016
- display: grid;
1017
- grid-template-columns: auto 1fr;
1018
- grid-gap: 4px;
1019
- align-items: center;
1020
- cursor: pointer;
956
+
957
+ .charcoal-tag-item__label__text {
958
+ --charcoal-tag-item-text-font-size: 14px;
959
+ --charcoal-tag-item-text-line-height: 22px;
960
+
961
+ max-width: 152px;
962
+ overflow: hidden;
963
+ font-weight: bold;
964
+
965
+ color: inherit;
966
+ white-space: nowrap;
967
+ text-overflow: ellipsis;
1021
968
  }
1022
969
 
1023
- .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
1024
- opacity: 0.32;
1025
- cursor: default;
970
+ .charcoal-tag-item__label__text[data-has-translate='true'] {
971
+ --charcoal-tag-item-text-font-size: 10px;
972
+ --charcoal-tag-item-text-line-height: 14px;
973
+ font-weight: normal;
1026
974
  }
1027
975
 
1028
- .charcoal-radio__label_div {
1029
- font-size: 14px;
1030
- line-height: 22px;
1031
- color: var(--charcoal-color-text-default);
1032
- }
1033
- .charcoal-radio-group {
1034
- display: grid;
1035
- grid-template-columns: 1fr;
1036
- grid-gap: 8px;
976
+ /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
977
+ .charcoal-tag-item__labe__text[data-has-translate='true']::after {
978
+ display: none;
1037
979
  }
1038
- .charcoal-switch__label {
1039
- display: inline-grid;
1040
- grid-template-columns: auto 1fr;
1041
- align-items: center;
1042
- cursor: pointer;
1043
- outline: 0;
1044
- gap: 4px;
980
+ .charcoal-hint-text {
981
+ background-color: var(--charcoal-color-container-secondary-default);
982
+ border-radius: 8px;
983
+ padding: 12px 16px;
984
+ display: flex;
985
+ align-items: flex-start;
1045
986
  }
1046
987
 
1047
- .charcoal-switch__label[aria-disabled='true'] {
1048
- opacity: 0.32;
1049
- cursor: default;
988
+ .charcoal-hint-text[data-context='page'] {
989
+ justify-content: center;
1050
990
  }
1051
991
 
1052
- .charcoal-switch__label[aria-disabled='true'] > input {
1053
- opacity: 1;
992
+ @media (min-width: 744px) {
993
+
994
+ .charcoal-hint-text[data-context='page'] {
995
+ padding: 20px 40px
996
+ }
1054
997
  }
1055
998
 
1056
- .charcoal-switch__label_div {
1057
- font-size: 14px;
1058
- line-height: 22px;
1059
- color: var(--charcoal-color-text-default);
1060
- }
1061
- .charcoal-multi-select {
1062
- display: grid;
1063
- grid-template-columns: auto 1fr;
999
+ .charcoal-hint-text-icon {
1000
+ display: flex;
1064
1001
  align-items: center;
1065
- position: relative;
1066
- cursor: pointer;
1067
- gap: 4px;
1002
+ color: var(--charcoal-color-icon-tertiary-default);
1003
+ height: 22px;
1004
+ margin: 0 4px 0 0;
1068
1005
  }
1069
1006
 
1070
- .charcoal-multi-select:disabled,
1071
- .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
1072
- opacity: 0.32;
1073
- cursor: default;
1074
- }
1075
-
1076
- .charcoal-multi-select-label {
1077
- display: flow-root;
1078
- align-items: center;
1007
+ .charcoal-hint-text-message {
1008
+ color: var(--charcoal-color-text-secondary-default);
1079
1009
  font-size: 14px;
1080
1010
  line-height: 22px;
1081
- color: var(--charcoal-color-text-default);
1011
+ display: flow-root;
1012
+ margin: 0;
1013
+ min-width: 0;
1014
+ overflow-wrap: break-word;
1015
+ }
1016
+ .charcoal-text-area-root {
1017
+ display: grid;
1018
+ grid-template-columns: 1fr;
1019
+ grid-gap: 4px;
1082
1020
  }
1083
1021
 
1084
- .charcoal-multi-select-label::before {
1085
- display: block;
1086
- width: 0;
1087
- height: 0;
1088
- content: '';
1089
- margin-top: -4px;
1022
+ .charcoal-text-area-root[aria-disabled='true'] {
1023
+ opacity: 0.32;
1090
1024
  }
1091
1025
 
1092
- .charcoal-multi-select-label::after {
1093
- display: block;
1094
- width: 0;
1095
- height: 0;
1096
- content: '';
1097
- margin-bottom: -4px;
1098
- }
1026
+ .charcoal-text-area-container {
1027
+ /* Runtime variable overridden by the React component. */
1028
+ --charcoal-text-area-rows: 4;
1099
1029
 
1100
- .charcoal-multi-select-input[type='checkbox'] {
1101
- -webkit-appearance: none;
1102
- -moz-appearance: none;
1103
- appearance: none;
1104
- display: block;
1105
- width: 20px;
1106
- height: 20px;
1107
- margin: 0;
1108
- background-color: var(--charcoal-color-container-neutral-default);
1109
- border-radius: 999999px;
1030
+ position: relative;
1031
+ overflow: hidden;
1032
+
1033
+ color: var(--charcoal-color-text-secondary-default);
1034
+ background-color: var(--charcoal-color-container-secondary-default-a);
1035
+ border-radius: 4px;
1110
1036
  transition:
1111
1037
  0.2s background-color,
1112
1038
  0.2s box-shadow;
1039
+ height: calc(22px * var(--charcoal-text-area-rows) + 18px);
1113
1040
  }
1114
1041
 
1115
- .charcoal-multi-select-input[type='checkbox']:checked {
1116
- background-color: var(--charcoal-color-container-primary-default);
1042
+ .charcoal-text-area-container[aria-invalid='true'] {
1043
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1117
1044
  }
1118
1045
 
1119
- .charcoal-multi-select-input[type='checkbox']:focus {
1046
+ .charcoal-text-area-container:focus-within {
1120
1047
  outline: none;
1121
1048
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1122
1049
  }
1123
1050
 
1124
- .charcoal-multi-select-input[type='checkbox']:focus-visible {
1125
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1126
- }
1127
-
1128
- .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
1129
- box-shadow: none;
1130
- }
1131
-
1132
- .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
1133
- .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
1134
- background-color: var(--charcoal-color-container-neutral-hover);
1051
+ .charcoal-text-area-container:has([data-no-bottom-padding='true']) {
1052
+ height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
1135
1053
  }
1136
1054
 
1137
- .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),
1138
- .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
1139
- background-color: var(--charcoal-color-container-neutral-press);
1055
+ .charcoal-text-area-container:not([aria-disabled='true']):hover {
1056
+ background-color: var(--charcoal-color-container-secondary-hover-a);
1140
1057
  }
1141
1058
 
1142
- .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
1143
- .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
1144
- background-color: var(--charcoal-color-container-primary-hover);
1059
+ .charcoal-text-area-container[aria-invalid='true']:focus-within {
1060
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1145
1061
  }
1146
1062
 
1147
- .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
1148
- .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
1149
- background-color: var(--charcoal-color-container-primary-press);
1150
- }
1063
+ .charcoal-text-area-textarea {
1064
+ border: none;
1065
+ outline: none;
1066
+ resize: none;
1067
+ font-family: inherit;
1068
+ color: inherit;
1069
+ box-sizing: border-box;
1151
1070
 
1152
- .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(
1153
- [aria-disabled]
1154
- ) {
1155
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1156
- }
1071
+ /* Prevent zooming for iOS Safari */
1072
+ --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
1073
+ --charcoal-textarea-line-height: calc(
1074
+ 22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
1075
+ );
1076
+ --charcoal-textarea-padding-y: calc(
1077
+ 8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
1078
+ );
1079
+ --charcoal-textarea-padding-x: calc(
1080
+ 9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
1081
+ );
1157
1082
 
1158
- .charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
1159
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1160
- }
1083
+ transform-origin: top left;
1084
+ transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
1085
+ width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
1086
+ font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
1087
+ line-height: var(--charcoal-textarea-line-height);
1088
+ padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
1089
+ height: calc(
1090
+ var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
1091
+ var(--charcoal-textarea-padding-y) * 2
1092
+ );
1161
1093
 
1162
- .charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
1163
- background-color: var(--charcoal-color-container-on-img-default);
1164
- }
1094
+ /* Display box-shadow for iOS Safari */
1095
+ -webkit-appearance: none;
1096
+ -moz-appearance: none;
1097
+ appearance: none;
1165
1098
 
1166
- .charcoal-multi-select-overlay {
1167
- position: absolute;
1168
- top: -2px;
1169
- left: -2px;
1170
- box-sizing: border-box;
1171
- display: flex;
1172
- align-items: center;
1173
- justify-content: center;
1174
- width: 24px;
1175
- height: 24px;
1176
- border-radius: 999999px;
1177
- color: var(--charcoal-color-icon-on-primary-default);
1178
- transition: 0.2s box-shadow;
1099
+ background: none;
1179
1100
  }
1180
1101
 
1181
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
1182
- [aria-disabled]
1183
- ) {
1184
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1102
+ .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
1103
+ padding: var(--charcoal-textarea-padding-y)
1104
+ var(--charcoal-textarea-padding-x) 0;
1105
+ height: calc(
1106
+ var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
1107
+ var(--charcoal-textarea-padding-y)
1108
+ );
1185
1109
  }
1186
1110
 
1187
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
1188
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1111
+ .charcoal-text-area-textarea::-moz-placeholder {
1112
+ color: var(--charcoal-color-text-placeholder-default);
1189
1113
  }
1190
1114
 
1191
- .charcoal-multi-select-overlay[data-overlay='true'] {
1192
- border-color: var(--charcoal-color-border-hud);
1193
- border-width: 2px;
1194
- border-style: solid;
1115
+ .charcoal-text-area-textarea::placeholder {
1116
+ color: var(--charcoal-color-text-placeholder-default);
1195
1117
  }
1196
- .charcoal-clickable {
1197
- cursor: pointer;
1198
1118
 
1199
- /* Reset button appearance */
1200
- -webkit-appearance: none;
1201
- -moz-appearance: none;
1202
- appearance: none;
1203
- background: transparent;
1204
- padding: 0;
1205
- border-style: none;
1206
- outline: none;
1207
- color: inherit;
1208
- text-rendering: inherit;
1209
- letter-spacing: inherit;
1210
- word-spacing: inherit;
1211
- text-decoration: none;
1212
-
1213
- /* Change the font styles in all browsers. */
1214
- font: inherit;
1215
-
1216
- /* Remove the margin in Firefox and Safari. */
1217
- margin: 0;
1119
+ .charcoal-text-area-counter {
1120
+ position: absolute;
1121
+ bottom: 9px;
1122
+ right: 8px;
1218
1123
 
1219
- /* Show the overflow in Edge. */
1220
- overflow: visible;
1124
+ line-height: 22px;
1125
+ font-size: 14px;
1126
+ color: var(--charcoal-color-text-tertiary-default);
1127
+ }
1128
+ .charcoal-text-ellipsis {
1129
+ /* Runtime variables overridden by the React component. */
1130
+ --charcoal-text-ellipsis-line-limit: 1;
1131
+ --charcoal-text-ellipsis-line-height: inherit;
1221
1132
 
1222
- /* Remove the inheritance of text transform in Firefox. */
1223
- text-transform: none;
1133
+ overflow: hidden;
1134
+ overflow-wrap: break-word;
1135
+ display: -webkit-box;
1136
+ -webkit-box-orient: vertical;
1137
+ -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
1224
1138
  }
1225
1139
 
1226
- .charcoal-clickable:disabled,
1227
- .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
1228
- cursor: default;
1140
+ .charcoal-text-ellipsis[data-has-line-height='true'] {
1141
+ line-height: var(--charcoal-text-ellipsis-line-height);
1229
1142
  }
1230
1143
 
1231
- .charcoal-clickable:focus {
1232
- outline: none;
1144
+ .charcoal-text-ellipsis[data-has-line-height='false'] {
1145
+ line-height: inherit;
1233
1146
  }
1234
1147
 
1235
- .charcoal-clickable::-moz-focus-inner {
1236
- border-style: none;
1237
- padding: 0;
1148
+ .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
1149
+ text-overflow: ellipsis;
1150
+ white-space: nowrap;
1238
1151
  }
1239
- .charcoal-text-field-root {
1240
- display: grid;
1241
- grid-template-columns: 1fr;
1242
- grid-gap: 4px;
1152
+ .charcoal-icon {
1153
+ display: inline-flex;
1154
+ width: var(--charcoal-icon-size);
1155
+ height: var(--charcoal-icon-size);
1243
1156
  }
1244
1157
 
1245
- .charcoal-text-field-root[aria-disabled='true'] {
1246
- opacity: 0.32;
1247
- }
1158
+ pixiv-icon:not(:defined) {
1159
+ --pixiv-icon-base: 24px;
1160
+ --pixiv-icon-scale: 1;
1161
+ --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
1248
1162
 
1249
- .charcoal-text-field-container {
1250
- display: flex;
1251
- height: 40px;
1252
- transition:
1253
- 0.2s background-color,
1254
- 0.2s box-shadow;
1255
- color: var(--charcoal-color-text-secondary-default);
1256
- background-color: var(--charcoal-color-container-secondary-default-a);
1257
- border-radius: 4px;
1258
- padding: 0 8px;
1259
- line-height: 22px;
1260
- font-size: 14px;
1163
+ display: inline-flex;
1164
+ /* --charcoal-icon-size がセットされていればそれを優先、
1165
+ なければ name / scale から導出した --pixiv-icon-size をフォールバック */
1166
+ width: var(--charcoal-icon-size, var(--pixiv-icon-size));
1167
+ height: var(--charcoal-icon-size, var(--pixiv-icon-size));
1261
1168
  }
1262
1169
 
1263
- .charcoal-text-field-container[data-invalid='true'] {
1264
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1265
- }
1266
-
1267
- .charcoal-text-field-container:not([aria-disabled='true']):hover {
1268
- background-color: var(--charcoal-color-container-secondary-hover-a);
1170
+ pixiv-icon:not(:defined)[name^='16/'] {
1171
+ --pixiv-icon-base: 16px;
1172
+ --pixiv-icon-size: 16px;
1269
1173
  }
1270
1174
 
1271
- .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
1272
- outline: none;
1273
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1175
+ pixiv-icon:not(:defined)[name^='24/'][scale='2'] {
1176
+ --pixiv-icon-scale: 2;
1177
+ }
1178
+
1179
+ pixiv-icon:not(:defined)[name^='24/'][scale='3'] {
1180
+ --pixiv-icon-scale: 3;
1181
+ }
1182
+
1183
+ pixiv-icon:not(:defined)[name^='32/'] {
1184
+ --pixiv-icon-base: 32px;
1185
+ --pixiv-icon-size: 32px;
1274
1186
  }
1275
1187
 
1276
- .charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {
1277
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1188
+ pixiv-icon:not(:defined)[name^='Inline/'] {
1189
+ --pixiv-icon-base: 16px;
1278
1190
  }
1279
1191
 
1280
- .charcoal-text-field-prefix {
1192
+ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1193
+ --pixiv-icon-scale: 2;
1194
+ }
1195
+ .charcoal-pagination {
1281
1196
  display: flex;
1197
+ justify-content: center;
1282
1198
  align-items: center;
1283
- margin-right: 4px;
1284
1199
  }
1285
1200
 
1286
- .charcoal-text-field-suffix {
1287
- display: flex;
1288
- align-items: center;
1289
- gap: 8px;
1290
- margin-left: 4px;
1291
- }
1201
+ .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
1202
+ min-width: 32px;
1203
+ min-height: 32px;
1204
+ }
1292
1205
 
1293
- .charcoal-text-field-input-root {
1294
- flex: 1;
1295
- min-width: 0;
1296
- overflow: hidden;
1297
- }
1206
+ .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
1207
+ min-width: 40px;
1208
+ min-height: 40px;
1209
+ }
1298
1210
 
1299
- .charcoal-text-field-input {
1300
- border: none;
1301
- box-sizing: border-box;
1211
+ /* stylelint-disable no-descending-specificity */
1212
+ .charcoal-pagination-button {
1213
+ cursor: pointer;
1214
+ -webkit-appearance: none;
1215
+ -moz-appearance: none;
1216
+ appearance: none;
1217
+ padding: 0;
1218
+ border-style: none;
1302
1219
  outline: none;
1220
+ text-decoration: none;
1303
1221
  font-family: inherit;
1222
+ font-style: inherit;
1223
+ font-variant: inherit;
1224
+ margin: 0;
1225
+ -webkit-user-select: none;
1226
+ -moz-user-select: none;
1227
+ user-select: none;
1304
1228
 
1305
- /* Prevent zooming for iOS Safari */
1306
- transform-origin: top left;
1307
- transform: scale(0.875);
1308
- width: calc(100% / 0.875);
1309
- height: calc(100% / 0.875);
1310
- font-size: calc(14px / 0.875);
1311
- line-height: calc(22px / 0.875);
1312
- padding-left: 0;
1313
- padding-right: 0;
1314
- border-radius: calc(4px / 0.875);
1229
+ display: flex;
1230
+ align-items: center;
1231
+ justify-content: center;
1232
+ font-size: 14px;
1233
+ font-weight: 700;
1234
+ line-height: 22px;
1315
1235
 
1316
- /* Display box-shadow for iOS Safari */
1317
- -webkit-appearance: none;
1318
- -moz-appearance: none;
1319
- appearance: none;
1320
- background: transparent;
1236
+ /* HACK:
1237
+ * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
1238
+ * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
1239
+ */
1240
+ /* stylelint-disable-next-line property-no-vendor-prefix */
1241
+ -webkit-transform: translateZ(0);
1321
1242
 
1322
- color: var(--charcoal-color-text-secondary-default);
1243
+ color: var(--charcoal-color-text-tertiary-default);
1244
+ background-color: transparent;
1245
+ border-radius: 20px;
1246
+ transition:
1247
+ 0.2s background-color,
1248
+ 0.2s box-shadow;
1323
1249
  }
1324
-
1325
- .charcoal-text-field-input::-moz-placeholder {
1326
- color: var(--charcoal-color-text-placeholder-default);
1250
+ .charcoal-pagination-button:focus {
1251
+ outline: none;
1327
1252
  }
1328
-
1329
- .charcoal-text-field-input::placeholder {
1330
- color: var(--charcoal-color-text-placeholder-default);
1253
+ .charcoal-pagination-button::-moz-focus-inner {
1254
+ border-style: none;
1255
+ padding: 0;
1256
+ }
1257
+ .charcoal-pagination-button[hidden] {
1258
+ visibility: hidden;
1259
+ display: block;
1260
+ }
1261
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
1262
+ .charcoal-pagination-button[aria-disabled='false']:hover {
1263
+ color: var(--charcoal-color-text-tertiary-default);
1264
+ background-color: var(--charcoal-color-container-secondary-default);
1265
+ }
1266
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
1267
+ .charcoal-pagination-button[aria-disabled='false']:active {
1268
+ color: var(--charcoal-color-text-tertiary-press);
1269
+ background-color: var(--charcoal-color-container-tertiary-press);
1270
+ }
1271
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
1272
+ .charcoal-pagination-button[aria-disabled='false']:focus {
1273
+ outline: none;
1274
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1275
+ }
1276
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
1277
+ .charcoal-pagination-button[aria-disabled='false']:focus-visible {
1278
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1279
+ }
1280
+ .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1281
+ .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
1282
+ box-shadow: none;
1283
+ }
1284
+ .charcoal-pagination-button[aria-current] {
1285
+ cursor: default;
1286
+ background-color: var(--charcoal-color-container-hud-default);
1287
+ color: var(--charcoal-color-text-on-hud-default);
1331
1288
  }
1289
+ .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,
1290
+ .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {
1291
+ background-color: var(--charcoal-color-container-hud-default);
1292
+ color: var(--charcoal-color-text-on-hud-default);
1293
+ }
1294
+ /* stylelint-enable no-descending-specificity */
1332
1295
 
1333
- .charcoal-text-field-line-counter {
1334
- line-height: 22px;
1335
- font-size: 14px;
1336
- color: var(--charcoal-color-text-tertiary-default);
1337
- }
1338
- .charcoal-text-area-root {
1339
- display: grid;
1340
- grid-template-columns: 1fr;
1341
- grid-gap: 4px;
1296
+ .charcoal-pagination-nav-button[data-hidden] {
1297
+ visibility: hidden;
1342
1298
  }
1343
1299
 
1344
- .charcoal-text-area-root[aria-disabled='true'] {
1345
- opacity: 0.32;
1300
+ .charcoal-pagination-spacer,
1301
+ .charcoal-pagination-spacer:hover,
1302
+ .charcoal-pagination-spacer:active {
1303
+ cursor: default;
1304
+ color: var(--charcoal-color-text-tertiary-default);
1305
+ background: none;
1346
1306
  }
1347
1307
 
1348
- .charcoal-text-area-container {
1349
- /* Runtime variable overridden by the React component. */
1350
- --charcoal-text-area-rows: 4;
1308
+ .charcoal-pagination-spacer.charcoal-icon-button:disabled {
1309
+ opacity: 1;
1310
+ }
1311
+ .charcoal-carousel {
1312
+ --charcoal-carousel-gap: 0px;
1351
1313
 
1352
1314
  position: relative;
1353
- overflow: hidden;
1354
-
1355
- color: var(--charcoal-color-text-secondary-default);
1356
- background-color: var(--charcoal-color-container-secondary-default-a);
1357
- border-radius: 4px;
1358
- transition:
1359
- 0.2s background-color,
1360
- 0.2s box-shadow;
1361
- height: calc(22px * var(--charcoal-text-area-rows) + 18px);
1315
+ display: block;
1362
1316
  }
1363
1317
 
1364
- .charcoal-text-area-container[aria-invalid='true'] {
1365
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1366
- }
1367
-
1368
- .charcoal-text-area-container:focus-within {
1369
- outline: none;
1370
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1318
+ .charcoal-carousel[data-full-width='true'] {
1319
+ width: 100vw;
1320
+ margin-inline: calc(50% - 50vw);
1371
1321
  }
1372
1322
 
1373
- .charcoal-text-area-container:has([data-no-bottom-padding='true']) {
1374
- height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
1375
- }
1323
+ .charcoal-carousel__viewport {
1324
+ position: relative;
1325
+ }
1376
1326
 
1377
- .charcoal-text-area-container:not([aria-disabled='true']):hover {
1378
- background-color: var(--charcoal-color-container-secondary-hover-a);
1379
- }
1327
+ /* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと
1328
+ hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */
1380
1329
 
1381
- .charcoal-text-area-container[aria-invalid='true']:focus-within {
1382
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1330
+ .charcoal-carousel__viewport[data-focus-visible] {
1331
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1383
1332
  }
1384
1333
 
1385
- .charcoal-text-area-textarea {
1386
- border: none;
1334
+ /* スライド間隔は gap prop（--charcoal-carousel-gap）で注入する。
1335
+ スライド寸法は sandbox 同様、利用者が children 側で持つ。 */
1336
+ .charcoal-carousel__scroller {
1337
+ position: relative;
1338
+ display: flex;
1339
+ gap: var(--charcoal-carousel-gap);
1340
+ overflow-x: auto;
1341
+ overflow-y: hidden;
1342
+ overscroll-behavior-x: contain;
1343
+ scroll-behavior: smooth;
1344
+ scrollbar-width: none;
1387
1345
  outline: none;
1388
- resize: none;
1389
- font-family: inherit;
1390
- color: inherit;
1391
- box-sizing: border-box;
1346
+ }
1347
+ .charcoal-carousel__scroller::-webkit-scrollbar {
1348
+ display: none;
1349
+ }
1392
1350
 
1393
- /* Prevent zooming for iOS Safari */
1394
- --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
1395
- --charcoal-textarea-line-height: calc(
1396
- 22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
1397
- );
1398
- --charcoal-textarea-padding-y: calc(
1399
- 8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
1400
- );
1401
- --charcoal-textarea-padding-x: calc(
1402
- 9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
1403
- );
1351
+ /* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。
1352
+ align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。
1353
+ 未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */
1354
+ .charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {
1355
+ scroll-snap-type: none;
1356
+ }
1404
1357
 
1405
- transform-origin: top left;
1406
- transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
1407
- width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
1408
- font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
1409
- line-height: var(--charcoal-textarea-line-height);
1410
- padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
1411
- height: calc(
1412
- var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
1413
- var(--charcoal-textarea-padding-y) * 2
1414
- );
1358
+ .charcoal-carousel[data-scroll-snap-type='proximity']
1359
+ .charcoal-carousel__scroller {
1360
+ scroll-snap-type: x proximity;
1361
+ }
1415
1362
 
1416
- /* Display box-shadow for iOS Safari */
1417
- -webkit-appearance: none;
1418
- -moz-appearance: none;
1419
- appearance: none;
1363
+ .charcoal-carousel[data-scroll-snap-type='mandatory']
1364
+ .charcoal-carousel__scroller {
1365
+ scroll-snap-type: x mandatory;
1366
+ }
1420
1367
 
1421
- background: none;
1368
+ /* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を
1369
+ 問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。
1370
+ 左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して
1371
+ スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。
1372
+ 無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い
1373
+ mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */
1374
+ .charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {
1375
+ -webkit-mask-image:
1376
+ linear-gradient(to right, transparent, #000 72px),
1377
+ linear-gradient(to left, transparent, #000 72px);
1378
+ mask-image:
1379
+ linear-gradient(to right, transparent, #000 72px),
1380
+ linear-gradient(to left, transparent, #000 72px);
1381
+ /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */
1382
+ -webkit-mask-size: calc(100% + 72px) 100%;
1383
+ mask-size: calc(100% + 72px) 100%;
1384
+ -webkit-mask-repeat: no-repeat;
1385
+ mask-repeat: no-repeat;
1386
+ -webkit-mask-composite: source-in, xor;
1387
+ mask-composite: intersect;
1388
+ -webkit-mask-position:
1389
+ -72px 0,
1390
+ 0 0;
1391
+ mask-position:
1392
+ -72px 0,
1393
+ 0 0;
1394
+ /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */
1395
+ transition: 0.2s ease-in mask-position;
1422
1396
  }
1423
1397
 
1424
- .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
1425
- padding: var(--charcoal-textarea-padding-y)
1426
- var(--charcoal-textarea-padding-x) 0;
1427
- height: calc(
1428
- var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
1429
- var(--charcoal-textarea-padding-y)
1430
- );
1431
- }
1398
+ .charcoal-carousel[data-has-gradient='true'][data-can-prev='true']
1399
+ .charcoal-carousel__scroller {
1400
+ -webkit-mask-position:
1401
+ 0 0,
1402
+ 0 0;
1403
+ mask-position:
1404
+ 0 0,
1405
+ 0 0;
1406
+ }
1432
1407
 
1433
- .charcoal-text-area-textarea::-moz-placeholder {
1434
- color: var(--charcoal-color-text-placeholder-default);
1435
- }
1408
+ .charcoal-carousel[data-has-gradient='true'][data-can-next='true']
1409
+ .charcoal-carousel__scroller {
1410
+ -webkit-mask-position:
1411
+ -72px 0,
1412
+ -72px 0;
1413
+ mask-position:
1414
+ -72px 0,
1415
+ -72px 0;
1416
+ }
1436
1417
 
1437
- .charcoal-text-area-textarea::placeholder {
1438
- color: var(--charcoal-color-text-placeholder-default);
1439
- }
1418
+ .charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']
1419
+ .charcoal-carousel__scroller {
1420
+ -webkit-mask-position:
1421
+ 0 0,
1422
+ -72px 0;
1423
+ mask-position:
1424
+ 0 0,
1425
+ -72px 0;
1426
+ }
1440
1427
 
1441
- .charcoal-text-area-counter {
1442
- position: absolute;
1443
- bottom: 9px;
1444
- right: 8px;
1428
+ .charcoal-carousel__item {
1429
+ flex: 0 0 auto;
1430
+ min-width: 0;
1431
+ }
1445
1432
 
1446
- line-height: 22px;
1447
- font-size: 14px;
1448
- color: var(--charcoal-color-text-tertiary-default);
1433
+ .charcoal-carousel[data-size='S'] .charcoal-carousel__item {
1434
+ flex: 0 0 100%;
1449
1435
  }
1450
- .charcoal-dropdown-selector-root {
1451
- display: grid;
1452
- grid-template-columns: 1fr;
1453
- grid-gap: 4px;
1454
- width: 100%;
1436
+
1437
+ /* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item
1438
+ より後に置くことで no-descending-specificity を回避する。 */
1439
+ .charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {
1440
+ scroll-snap-align: center;
1455
1441
  }
1456
1442
 
1457
- .charcoal-dropdown-selector-root[aria-disabled='true'] {
1458
- cursor: default;
1459
- opacity: 0.32;
1460
- }
1443
+ .charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {
1444
+ scroll-snap-align: start;
1445
+ }
1461
1446
 
1462
- .charcoal-dropdown-selector-button {
1447
+ /* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
1448
+
1449
+ /* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
1450
+ .charcoal-carousel__navigation {
1451
+ position: absolute;
1452
+ inset: 0;
1453
+ pointer-events: none;
1463
1454
  display: grid;
1464
- grid-template-columns: 1fr auto;
1465
- justify-content: space-between;
1455
+ grid-template-columns: 72px 1fr 72px;
1466
1456
  align-items: center;
1457
+ /* アイテム内のコンテンツより上にボタンを表示する */
1458
+ z-index: 1;
1459
+ /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
1460
+ opacity: 0;
1461
+ transition: 0.4s opacity;
1462
+ }
1463
+ .charcoal-carousel__navigation[data-visible='false'] {
1464
+ display: none;
1465
+ }
1467
1466
 
1468
- height: 40px;
1469
- width: 100%;
1470
- box-sizing: border-box;
1471
- border: none;
1472
- cursor: pointer;
1473
- gap: 4px;
1474
-
1475
- padding-right: 8px;
1476
- padding-left: 8px;
1477
- background-color: var(--charcoal-color-container-secondary-default-a);
1478
- border-radius: 4px;
1467
+ /* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
1468
+ カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
1469
+ 表示され続けるため、react-aria が付与する data 属性で判定する）。 */
1470
+ .charcoal-carousel:hover .charcoal-carousel__navigation,
1471
+ .charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
1472
+ opacity: 1;
1473
+ }
1479
1474
 
1480
- transition:
1481
- 0.2s box-shadow,
1482
- 0.2s background-color;
1475
+ .charcoal-carousel__navigation__item {
1476
+ pointer-events: auto;
1483
1477
  }
1484
1478
 
1485
- .charcoal-dropdown-selector-button:disabled {
1486
- cursor: default;
1479
+ /* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
1480
+ 擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
1481
+ position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
1482
+
1483
+ .charcoal-carousel__navigation__item::after {
1484
+ content: '';
1485
+ position: absolute;
1486
+ top: 0;
1487
+ bottom: 0;
1488
+ width: 72px;
1487
1489
  }
1488
1490
 
1489
- .charcoal-dropdown-selector-button:not(:disabled):focus {
1490
- outline: none;
1491
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1492
- }
1491
+ .charcoal-carousel__navigation__item[data-direction='prev'] {
1492
+ grid-column: 1;
1493
+ justify-self: center;
1494
+ }
1493
1495
 
1494
- .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
1495
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1496
+ .charcoal-carousel__navigation__item[data-direction='prev']::after {
1497
+ left: 0;
1496
1498
  }
1497
1499
 
1498
- .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
1499
- .charcoal-dropdown-selector-button:not(:disabled):active {
1500
- background-color: var(--charcoal-color-container-secondary-press-a);
1501
- }
1500
+ .charcoal-carousel__navigation__item[data-direction='next'] {
1501
+ grid-column: 3;
1502
+ justify-self: center;
1503
+ }
1502
1504
 
1503
- .charcoal-dropdown-selector-button:not(:disabled):hover {
1504
- background-color: var(--charcoal-color-container-secondary-hover-a);
1505
+ .charcoal-carousel__navigation__item[data-direction='next']::after {
1506
+ right: 0;
1505
1507
  }
1506
1508
 
1507
- .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
1508
- box-shadow: none;
1509
- }
1509
+ /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
1510
+ 高い詳細度で打ち消すため、ルートを前置する。 */
1511
+ .charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {
1512
+ opacity: 0;
1513
+ pointer-events: none;
1514
+ }
1510
1515
 
1511
- .charcoal-dropdown-selector-button[aria-invalid='true'],
1512
- .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
1513
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1516
+ /* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */
1517
+ @media (hover: none) and (pointer: coarse) {
1518
+ .charcoal-carousel__navigation {
1519
+ display: none;
1514
1520
  }
1515
-
1516
- .charcoal-ui-dropdown-selector-text {
1517
- text-align: left;
1518
- font-size: 14px;
1519
- line-height: 22px;
1520
- display: flow-root;
1521
- color: var(--charcoal-color-text-default);
1522
- overflow: hidden;
1523
- text-overflow: ellipsis;
1524
- white-space: nowrap;
1525
1521
  }
1526
1522
 
1527
- .charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
1528
- color: var(--charcoal-color-text-placeholder-default);
1529
- }
1523
+ /* ── Indicator: JS Fallback ── */
1530
1524
 
1531
- .charcoal-ui-dropdown-selector-icon {
1532
- color: var(--charcoal-color-icon-secondary-default);
1533
- }
1534
- .charcoal-segmented-control {
1535
- display: inline-flex;
1525
+ .charcoal-carousel__indicator {
1526
+ display: flex;
1527
+ justify-content: center;
1536
1528
  align-items: center;
1537
-
1538
- background-color: var(--charcoal-color-container-secondary-default-a);
1539
- border-radius: 16px;
1529
+ height: 40px;
1530
+ gap: 8px;
1540
1531
  }
1541
1532
 
1542
- .charcoal-segmented-control[data-uniform-segment-width='true'],
1543
- .charcoal-segmented-control[data-full-width='true'] {
1544
- display: inline-grid;
1545
- grid-auto-columns: minmax(80px, 1fr);
1546
- grid-auto-rows: 32px;
1547
- grid-auto-flow: column;
1533
+ .charcoal-carousel__indicator[data-visible='false'] {
1534
+ display: none;
1535
+ }
1536
+
1537
+ .charcoal-carousel__indicator__item {
1538
+ -webkit-appearance: none;
1539
+ -moz-appearance: none;
1540
+ appearance: none;
1541
+ box-sizing: border-box;
1542
+ width: 8px;
1543
+ height: 8px;
1544
+ padding: 0;
1545
+ border: 0;
1546
+ border-radius: 50%;
1547
+ background-color: var(--charcoal-color-text-tertiary-default);
1548
+ cursor: pointer;
1549
+ transition: 0.2s background-color;
1550
+ }
1551
+
1552
+ .charcoal-carousel__indicator__item:hover {
1553
+ background-color: var(--charcoal-color-text-secondary-default);
1548
1554
  }
1549
1555
 
1550
- .charcoal-segmented-control[data-full-width='true'] {
1551
- width: 100%;
1556
+ .charcoal-carousel__indicator__item:focus-visible {
1557
+ outline: 2px solid rgba(0, 150, 250, 0.56);
1558
+ outline-offset: 2px;
1552
1559
  }
1553
1560
 
1554
- .charcoal-segmented-control-radio__label {
1555
- position: relative;
1556
- display: flex;
1557
- align-items: center;
1558
- justify-content: center;
1559
- cursor: pointer;
1560
- height: 32px;
1561
+ .charcoal-carousel__indicator__item[data-active='true'] {
1562
+ background-color: var(--charcoal-color-text-default);
1563
+ }
1561
1564
 
1562
- padding-right: 16px;
1563
- padding-left: 16px;
1564
- border-radius: 16px;
1565
- color: var(--charcoal-color-text-secondary-default);
1565
+ /* ── CSS Scroll Markers (progressive enhancement) ── */
1566
1566
 
1567
- font-size: 14px;
1568
- line-height: 22px;
1569
- }
1567
+ /* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・
1568
+ 擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */
1569
+ /* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
1570
+ @supports (scroll-marker-group: after) {
1571
+ .charcoal-carousel[data-indicator='true'] {
1572
+ padding-bottom: 40px;
1573
+ }
1570
1574
 
1571
- .charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {
1572
- cursor: default;
1573
- opacity: 0.32;
1575
+ .charcoal-carousel__scroller {
1576
+ anchor-name: --charcoal-carousel;
1577
+ scroll-marker-group: after;
1574
1578
  }
1575
1579
 
1576
- .charcoal-segmented-control-radio__label[data-checked='true'] {
1577
- background-color: var(--charcoal-color-container-primary-default);
1578
- color: var(--charcoal-color-text-on-primary-default);
1580
+ .charcoal-carousel__scroller::scroll-button(*) {
1581
+ content: none;
1582
+ }
1583
+
1584
+ .charcoal-carousel__scroller::scroll-marker-group {
1585
+ display: flex;
1586
+ justify-content: center;
1587
+ align-items: center;
1588
+ height: 40px;
1589
+ gap: 8px;
1590
+
1591
+ position: absolute;
1592
+ position-anchor: --charcoal-carousel;
1593
+ top: anchor(bottom);
1594
+ justify-self: anchor-center;
1595
+ }
1596
+
1597
+ .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {
1598
+ scroll-marker-group: none;
1579
1599
  }
1580
1600
 
1581
- .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
1582
- .charcoal-segmented-control-radio__label[data-full-width='true'] {
1583
- justify-content: center;
1584
- white-space: nowrap;
1601
+ .charcoal-carousel__item::scroll-marker {
1602
+ content: '';
1603
+ width: 8px;
1604
+ height: 8px;
1605
+ border: 0;
1606
+ border-radius: 50%;
1607
+ background-color: var(--charcoal-color-text-tertiary-default);
1608
+ cursor: pointer;
1609
+ transition: 0.2s background-color;
1585
1610
  }
1586
1611
 
1587
- .charcoal-segmented-control-radio__input {
1588
- position: absolute;
1612
+ .charcoal-carousel__item::scroll-marker:hover {
1613
+ background-color: var(--charcoal-color-text-secondary-default);
1614
+ }
1589
1615
 
1590
- height: 0px;
1591
- width: 0px;
1592
- padding: 0;
1593
- margin: 0;
1616
+ .charcoal-carousel__item::scroll-marker:focus {
1617
+ outline: 2px solid rgba(0, 150, 250, 0.56);
1618
+ outline-offset: 2px;
1619
+ }
1594
1620
 
1595
- -webkit-appearance: none;
1621
+ .charcoal-carousel__item::scroll-marker:target-current {
1622
+ background-color: var(--charcoal-color-text-default);
1623
+ }
1596
1624
 
1597
- -moz-appearance: none;
1625
+ .charcoal-carousel__indicator {
1626
+ display: none;
1627
+ }
1628
+ }
1629
+ /* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
1630
+ .charcoal-snackbar-region {
1631
+ --charcoal-snackbar-offset: 16px;
1598
1632
 
1599
- appearance: none;
1633
+ position: fixed;
1634
+ left: 0;
1635
+ right: 0;
1636
+ display: grid;
1637
+ justify-content: center;
1638
+ pointer-events: none;
1600
1639
  box-sizing: border-box;
1601
- overflow: hidden;
1602
- white-space: nowrap;
1603
- opacity: 0;
1604
- }
1605
- .charcoal-icon {
1606
- display: inline-flex;
1607
- width: var(--charcoal-icon-size);
1608
- height: var(--charcoal-icon-size);
1609
1640
  }
1610
1641
 
1611
- pixiv-icon:not(:defined) {
1612
- --pixiv-icon-base: 24px;
1613
- --pixiv-icon-scale: 1;
1614
- --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
1615
-
1616
- display: inline-flex;
1617
- /* --charcoal-icon-size がセットされていればそれを優先、
1618
- なければ name / scale から導出した --pixiv-icon-size をフォールバック */
1619
- width: var(--charcoal-icon-size, var(--pixiv-icon-size));
1620
- height: var(--charcoal-icon-size, var(--pixiv-icon-size));
1621
- }
1642
+ .charcoal-snackbar-region[data-position='top'] {
1643
+ --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
1622
1644
 
1623
- pixiv-icon:not(:defined)[name^='16/'] {
1624
- --pixiv-icon-base: 16px;
1625
- --pixiv-icon-size: 16px;
1645
+ top: calc(
1646
+ env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
1647
+ );
1626
1648
  }
1627
1649
 
1628
- pixiv-icon:not(:defined)[name^='24/'][scale='2'] {
1629
- --pixiv-icon-scale: 2;
1630
- }
1650
+ .charcoal-snackbar-region[data-position='bottom'] {
1651
+ --charcoal-snackbar-enter-offset: var(--charcoal-space-30);
1631
1652
 
1632
- pixiv-icon:not(:defined)[name^='24/'][scale='3'] {
1633
- --pixiv-icon-scale: 3;
1634
- }
1653
+ bottom: calc(
1654
+ env(safe-area-inset-bottom, 0px) +
1655
+ max(var(--charcoal-snackbar-offset), 16px)
1656
+ );
1657
+ }
1635
1658
 
1636
- pixiv-icon:not(:defined)[name^='32/'] {
1637
- --pixiv-icon-base: 32px;
1638
- --pixiv-icon-size: 32px;
1659
+ .charcoal-snackbar {
1660
+ box-sizing: border-box;
1661
+ border-radius: var(--charcoal-radius-oval);
1662
+ width: -moz-fit-content;
1663
+ width: fit-content;
1664
+ max-width: calc(100vw - var(--charcoal-space-46));
1665
+ min-height: 44px;
1666
+ padding: var(--charcoal-space-25) var(--charcoal-space-40);
1667
+ display: flex;
1668
+ align-items: center;
1669
+ justify-content: center;
1670
+ gap: var(--charcoal-space-20);
1671
+ pointer-events: auto;
1672
+ background-color: var(--charcoal-color-container-default);
1673
+ color: var(--charcoal-color-text-default);
1674
+ border: var(--charcoal-border-width-m) solid
1675
+ var(--charcoal-color-border-secondary);
1676
+ animation: charcoal-snackbar-enter 0.3s ease-out both;
1677
+ }
1678
+
1679
+ .charcoal-snackbar[data-exiting='true'] {
1680
+ animation: charcoal-snackbar-exit 0.3s ease-out both;
1639
1681
  }
1640
1682
 
1641
- pixiv-icon:not(:defined)[name^='Inline/'] {
1642
- --pixiv-icon-base: 16px;
1683
+ .charcoal-snackbar[data-with-button='true'] {
1684
+ min-height: 56px;
1685
+ padding: var(--charcoal-space-25) var(--charcoal-space-30)
1686
+ var(--charcoal-space-25) var(--charcoal-space-40);
1643
1687
  }
1644
1688
 
1645
- pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1646
- --pixiv-icon-scale: 2;
1647
- }
1648
- .charcoal-dropdown-selector-menu-item {
1649
- font-size: 14px;
1650
- line-height: 22px;
1651
- color: var(--charcoal-color-text-secondary-default);
1652
- padding: 9px 0;
1689
+ .charcoal-snackbar[data-dim='true'] {
1690
+ background-color: var(--charcoal-color-container-hud-default);
1691
+ color: var(--charcoal-color-text-on-hud-default);
1692
+ border-color: var(--charcoal-color-border-hud);
1693
+ }
1653
1694
 
1695
+ .charcoal-snackbar-content {
1654
1696
  display: flex;
1655
1697
  align-items: center;
1656
- width: 100%;
1657
- margin-left: 20px;
1698
+ min-width: 0;
1658
1699
  }
1659
1700
 
1660
- .charcoal-dropdown-selector-menu-item[data-selected='true'] {
1661
- margin-left: 0px;
1701
+ .charcoal-snackbar-label {
1702
+ min-width: 0;
1703
+ overflow: hidden;
1704
+ overflow-wrap: break-word;
1705
+ display: -webkit-box;
1706
+ -webkit-box-orient: vertical;
1707
+ -webkit-line-clamp: 2;
1708
+ font-size: var(--charcoal-text-font-size-caption-m);
1709
+ font-weight: var(--charcoal-text-font-weight-bold);
1710
+ line-height: var(--charcoal-text-line-height-caption-m);
1662
1711
  }
1663
1712
 
1664
- .charcoal-dropdown-selector-menu-item-icon {
1665
- color: var(--charcoal-color-text-secondary-default);
1666
- padding-right: 4px;
1667
- }
1713
+ @keyframes charcoal-snackbar-enter {
1714
+ from {
1715
+ opacity: 0;
1716
+ transform: translateY(var(--charcoal-snackbar-enter-offset));
1717
+ }
1668
1718
 
1669
- .charcoal-dropdown-selector-menu-item-container {
1670
- display: flex;
1671
- align-items: center;
1719
+ to {
1720
+ opacity: 1;
1721
+ transform: translateY(0);
1722
+ }
1672
1723
  }
1673
1724
 
1674
- .charcoal-dropdown-selector-menu-secondary {
1675
- font-size: 12px;
1676
- line-height: 20px;
1677
- color: var(--charcoal-color-text-tertiary-default);
1678
- padding-bottom: 9px;
1725
+ @keyframes charcoal-snackbar-exit {
1726
+ from {
1727
+ opacity: 1;
1728
+ }
1679
1729
 
1680
- display: flex;
1681
- align-items: center;
1682
- margin-left: 20px;
1730
+ to {
1731
+ opacity: 0;
1732
+ }
1683
1733
  }
1684
1734
 
1685
- .charcoal-dropdown-selector-menu-fullwidth {
1686
- width: 100%;
1735
+ @media (prefers-reduced-motion: reduce) {
1736
+ .charcoal-snackbar,
1737
+ .charcoal-snackbar[data-exiting='true'] {
1738
+ animation: none;
1739
+ }
1687
1740
  }
1688
1741
  .charcoal-modal-background {
1689
1742
  overflow: auto;
@@ -1755,46 +1808,104 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1755
1808
  font-weight: inherit;
1756
1809
  font-size: inherit;
1757
1810
  }
1758
- .charcoal-menu-item-group {
1759
- display: block;
1811
+ .charcoal-text-field-root {
1812
+ display: grid;
1813
+ grid-template-columns: 1fr;
1814
+ grid-gap: 4px;
1815
+ }
1816
+
1817
+ .charcoal-text-field-root[aria-disabled='true'] {
1818
+ opacity: 0.32;
1819
+ }
1820
+
1821
+ .charcoal-text-field-container {
1822
+ display: flex;
1823
+ height: 40px;
1824
+ transition:
1825
+ 0.2s background-color,
1826
+ 0.2s box-shadow;
1827
+ color: var(--charcoal-color-text-secondary-default);
1828
+ background-color: var(--charcoal-color-container-secondary-default-a);
1829
+ border-radius: 4px;
1830
+ padding: 0 8px;
1831
+ line-height: 22px;
1832
+ font-size: 14px;
1833
+ }
1834
+
1835
+ .charcoal-text-field-container[data-invalid='true'] {
1836
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1837
+ }
1838
+
1839
+ .charcoal-text-field-container:not([aria-disabled='true']):hover {
1840
+ background-color: var(--charcoal-color-container-secondary-hover-a);
1841
+ }
1842
+
1843
+ .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
1844
+ outline: none;
1845
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1846
+ }
1847
+
1848
+ .charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {
1849
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1850
+ }
1851
+
1852
+ .charcoal-text-field-prefix {
1853
+ display: flex;
1854
+ align-items: center;
1855
+ margin-right: 4px;
1856
+ }
1857
+
1858
+ .charcoal-text-field-suffix {
1859
+ display: flex;
1860
+ align-items: center;
1861
+ gap: 8px;
1862
+ margin-left: 4px;
1760
1863
  }
1761
1864
 
1762
- .charcoal-menu-item-group > span {
1763
- display: block;
1764
- color: var(--charcoal-color-text-tertiary-default);
1765
- font-size: 12px;
1766
- font-weight: bold;
1767
- padding: 12px 0 8px 16px;
1865
+ .charcoal-text-field-input-root {
1866
+ flex: 1;
1867
+ min-width: 0;
1868
+ overflow: hidden;
1768
1869
  }
1769
1870
 
1770
- .charcoal-menu-item-group > ul {
1771
- padding-left: 0;
1772
- margin: 0;
1871
+ .charcoal-text-field-input {
1872
+ border: none;
1773
1873
  box-sizing: border-box;
1774
- list-style: none;
1775
- overflow: hidden;
1776
- }
1777
- .charcoal-checkbox__label {
1778
- position: relative;
1779
- cursor: pointer;
1780
- display: flex;
1781
- gap: 4px;
1874
+ outline: none;
1875
+ font-family: inherit;
1876
+
1877
+ /* Prevent zooming for iOS Safari */
1878
+ transform-origin: top left;
1879
+ transform: scale(0.875);
1880
+ width: calc(100% / 0.875);
1881
+ height: calc(100% / 0.875);
1882
+ font-size: calc(14px / 0.875);
1883
+ line-height: calc(22px / 0.875);
1884
+ padding-left: 0;
1885
+ padding-right: 0;
1886
+ border-radius: calc(4px / 0.875);
1887
+
1888
+ /* Display box-shadow for iOS Safari */
1889
+ -webkit-appearance: none;
1890
+ -moz-appearance: none;
1891
+ appearance: none;
1892
+ background: transparent;
1893
+
1894
+ color: var(--charcoal-color-text-secondary-default);
1782
1895
  }
1783
1896
 
1784
- .charcoal-checkbox__label[aria-disabled='true'] {
1785
- cursor: default;
1786
- opacity: 0.32;
1897
+ .charcoal-text-field-input::-moz-placeholder {
1898
+ color: var(--charcoal-color-text-placeholder-default);
1787
1899
  }
1788
1900
 
1789
- .charcoal-checkbox__label[aria-disabled='true'] > input {
1790
- opacity: 1;
1791
- }
1901
+ .charcoal-text-field-input::placeholder {
1902
+ color: var(--charcoal-color-text-placeholder-default);
1903
+ }
1792
1904
 
1793
- .charcoal-checkbox__label_div {
1794
- flex: 1;
1795
- color: var(--charcoal-color-text-default);
1905
+ .charcoal-text-field-line-counter {
1906
+ line-height: 22px;
1796
1907
  font-size: 14px;
1797
- line-height: 20px;
1908
+ color: var(--charcoal-color-text-tertiary-default);
1798
1909
  }
1799
1910
  .charcoal-text-field-assistive-text {
1800
1911
  font-size: 14px;
@@ -1806,94 +1917,90 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1806
1917
  .charcoal-text-field-assistive-text[data-invalid='true'] {
1807
1918
  color: var(--charcoal-color-text-negative-default);
1808
1919
  }
1809
- .charcoal-radio-input {
1920
+ .charcoal-switch-input {
1921
+ cursor: pointer;
1810
1922
  -webkit-appearance: none;
1811
1923
  -moz-appearance: none;
1812
1924
  appearance: none;
1813
- display: block;
1925
+ display: inline-flex;
1926
+ position: relative;
1814
1927
  box-sizing: border-box;
1928
+ width: 28px;
1929
+ border: 2px solid transparent;
1815
1930
 
1816
- margin: 0;
1817
- padding: 6px;
1931
+ transition-property: background-color, box-shadow;
1932
+ transition-duration: 0.2s;
1818
1933
 
1819
- width: 20px;
1820
- height: 20px;
1821
- cursor: pointer;
1822
- border-radius: 999999px;
1823
- background-color: var(--charcoal-color-container-default);
1824
- transition:
1825
- 0.2s background-color,
1826
- 0.2s box-shadow;
1934
+ outline: none;
1935
+ border-radius: 16px;
1936
+ height: 16px;
1937
+ margin: 0;
1938
+ background-color: var(--charcoal-color-container-neutral-default);
1827
1939
  }
1828
1940
 
1829
- .charcoal-radio-input:checked {
1830
- background-color: var(--charcoal-color-container-primary-default);
1941
+ .charcoal-switch-input:disabled,
1942
+ .charcoal-switch-input[readonly] {
1943
+ opacity: 0.32;
1944
+ cursor: default;
1831
1945
  }
1832
1946
 
1833
- .charcoal-radio-input:checked::after {
1947
+ .charcoal-switch-input::after {
1834
1948
  content: '';
1949
+ position: absolute;
1835
1950
  display: block;
1836
- width: 8px;
1837
- height: 8px;
1838
- pointer-events: none;
1951
+ top: 0;
1952
+ left: 0;
1953
+ width: 12px;
1954
+ height: 12px;
1955
+ transform: translateX(0);
1956
+ transition: transform 0.2s;
1957
+ border-radius: 1024px;
1839
1958
  background-color: var(--charcoal-color-icon-on-primary-default);
1840
- border-radius: 999999px;
1841
- transition:
1842
- 0.2s background-color,
1843
- 0.2s box-shadow;
1844
1959
  }
1845
1960
 
1846
- .charcoal-radio-input:not(:checked) {
1847
- border-width: 2px;
1848
- border-style: solid;
1849
- border-color: var(--charcoal-color-border-default);
1961
+ .charcoal-switch-input:checked::after {
1962
+ transform: translateX(12px);
1963
+ transition: transform 0.2s;
1850
1964
  }
1851
1965
 
1852
- .charcoal-radio-input:disabled {
1853
- cursor: default;
1966
+ .charcoal-switch-input:checked {
1967
+ background-color: var(--charcoal-color-container-primary-default);
1854
1968
  }
1855
1969
 
1856
- .charcoal-radio-input:not(:disabled):hover {
1857
- background-color: var(--charcoal-color-container-hover);
1970
+ .charcoal-switch-input:not(:disabled):hover {
1971
+ background-color: var(--charcoal-color-container-neutral-hover);
1858
1972
  }
1859
1973
 
1860
- .charcoal-radio-input:not(:disabled):active {
1861
- background-color: var(--charcoal-color-container-press);
1974
+ .charcoal-switch-input:not(:disabled):active {
1975
+ background-color: var(--charcoal-color-container-neutral-press);
1862
1976
  }
1863
1977
 
1864
- .charcoal-radio-input:not(:disabled):focus {
1978
+ .charcoal-switch-input:not(:disabled):focus {
1865
1979
  outline: none;
1866
1980
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1867
1981
  }
1868
-
1869
- .charcoal-radio-input:not(:disabled):focus-visible {
1982
+ .charcoal-switch-input:not(:disabled):focus-visible {
1870
1983
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1871
1984
  }
1872
-
1873
- .charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {
1985
+ .charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {
1874
1986
  box-shadow: none;
1875
1987
  }
1876
1988
 
1877
- .charcoal-radio-input:not(:disabled)[aria-invalid='true'],
1878
- .charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {
1879
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1989
+ .charcoal-switch-input:not(:disabled)::after:hover {
1990
+ background-color: var(--charcoal-color-icon-on-primary-hover);
1880
1991
  }
1881
1992
 
1882
- .charcoal-radio-input:checked:not(:disabled):hover {
1883
- background-color: var(--charcoal-color-container-primary-hover);
1993
+ .charcoal-switch-input:not(:disabled)::after:active {
1994
+ background-color: var(--charcoal-color-icon-on-primary-press);
1884
1995
  }
1885
1996
 
1886
- .charcoal-radio-input:checked:not(:disabled):hover::after {
1887
- background-color: var(--charcoal-color-icon-on-primary-hover);
1997
+ .charcoal-switch-input:not(:disabled):checked:hover {
1998
+ background-color: var(--charcoal-color-container-primary-hover);
1888
1999
  }
1889
2000
 
1890
- .charcoal-radio-input:checked:not(:disabled):active {
2001
+ .charcoal-switch-input:not(:disabled):checked:active {
1891
2002
  background-color: var(--charcoal-color-container-primary-press);
1892
2003
  }
1893
-
1894
- .charcoal-radio-input:checked:not(:disabled):active::after {
1895
- background-color: var(--charcoal-color-icon-on-primary-press);
1896
- }
1897
2004
  .charcoal-field-label {
1898
2005
  font-size: 14px;
1899
2006
  line-height: 22px;
@@ -1931,93 +2038,93 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
1931
2038
  .charcoal-field-label-root > .charcoal-field-label-sub-label {
1932
2039
  margin-left: auto;
1933
2040
  }
1934
- .charcoal-switch-input {
1935
- cursor: pointer;
2041
+ .charcoal-radio-input {
1936
2042
  -webkit-appearance: none;
1937
2043
  -moz-appearance: none;
1938
2044
  appearance: none;
1939
- display: inline-flex;
1940
- position: relative;
2045
+ display: block;
1941
2046
  box-sizing: border-box;
1942
- width: 28px;
1943
- border: 2px solid transparent;
1944
2047
 
1945
- transition-property: background-color, box-shadow;
1946
- transition-duration: 0.2s;
1947
-
1948
- outline: none;
1949
- border-radius: 16px;
1950
- height: 16px;
1951
2048
  margin: 0;
1952
- background-color: var(--charcoal-color-container-neutral-default);
2049
+ padding: 6px;
2050
+
2051
+ width: 20px;
2052
+ height: 20px;
2053
+ cursor: pointer;
2054
+ border-radius: 999999px;
2055
+ background-color: var(--charcoal-color-container-default);
2056
+ transition:
2057
+ 0.2s background-color,
2058
+ 0.2s box-shadow;
1953
2059
  }
1954
2060
 
1955
- .charcoal-switch-input:disabled,
1956
- .charcoal-switch-input[readonly] {
1957
- opacity: 0.32;
1958
- cursor: default;
2061
+ .charcoal-radio-input:checked {
2062
+ background-color: var(--charcoal-color-container-primary-default);
1959
2063
  }
1960
2064
 
1961
- .charcoal-switch-input::after {
2065
+ .charcoal-radio-input:checked::after {
1962
2066
  content: '';
1963
- position: absolute;
1964
2067
  display: block;
1965
- top: 0;
1966
- left: 0;
1967
- width: 12px;
1968
- height: 12px;
1969
- transform: translateX(0);
1970
- transition: transform 0.2s;
1971
- border-radius: 1024px;
2068
+ width: 8px;
2069
+ height: 8px;
2070
+ pointer-events: none;
1972
2071
  background-color: var(--charcoal-color-icon-on-primary-default);
2072
+ border-radius: 999999px;
2073
+ transition:
2074
+ 0.2s background-color,
2075
+ 0.2s box-shadow;
1973
2076
  }
1974
2077
 
1975
- .charcoal-switch-input:checked::after {
1976
- transform: translateX(12px);
1977
- transition: transform 0.2s;
2078
+ .charcoal-radio-input:not(:checked) {
2079
+ border-width: 2px;
2080
+ border-style: solid;
2081
+ border-color: var(--charcoal-color-border-default);
1978
2082
  }
1979
2083
 
1980
- .charcoal-switch-input:checked {
1981
- background-color: var(--charcoal-color-container-primary-default);
2084
+ .charcoal-radio-input:disabled {
2085
+ cursor: default;
1982
2086
  }
1983
2087
 
1984
- .charcoal-switch-input:not(:disabled):hover {
1985
- background-color: var(--charcoal-color-container-neutral-hover);
2088
+ .charcoal-radio-input:not(:disabled):hover {
2089
+ background-color: var(--charcoal-color-container-hover);
1986
2090
  }
1987
2091
 
1988
- .charcoal-switch-input:not(:disabled):active {
1989
- background-color: var(--charcoal-color-container-neutral-press);
2092
+ .charcoal-radio-input:not(:disabled):active {
2093
+ background-color: var(--charcoal-color-container-press);
1990
2094
  }
1991
2095
 
1992
- .charcoal-switch-input:not(:disabled):focus {
2096
+ .charcoal-radio-input:not(:disabled):focus {
1993
2097
  outline: none;
1994
2098
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1995
2099
  }
1996
- .charcoal-switch-input:not(:disabled):focus-visible {
2100
+
2101
+ .charcoal-radio-input:not(:disabled):focus-visible {
1997
2102
  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1998
2103
  }
1999
- .charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {
2104
+
2105
+ .charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {
2000
2106
  box-shadow: none;
2001
2107
  }
2002
2108
 
2003
- .charcoal-switch-input:not(:disabled)::after:hover {
2004
- background-color: var(--charcoal-color-icon-on-primary-hover);
2109
+ .charcoal-radio-input:not(:disabled)[aria-invalid='true'],
2110
+ .charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {
2111
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
2005
2112
  }
2006
2113
 
2007
- .charcoal-switch-input:not(:disabled)::after:active {
2008
- background-color: var(--charcoal-color-icon-on-primary-press);
2114
+ .charcoal-radio-input:checked:not(:disabled):hover {
2115
+ background-color: var(--charcoal-color-container-primary-hover);
2009
2116
  }
2010
2117
 
2011
- .charcoal-switch-input:not(:disabled):checked:hover {
2012
- background-color: var(--charcoal-color-container-primary-hover);
2118
+ .charcoal-radio-input:checked:not(:disabled):hover::after {
2119
+ background-color: var(--charcoal-color-icon-on-primary-hover);
2013
2120
  }
2014
2121
 
2015
- .charcoal-switch-input:not(:disabled):checked:active {
2122
+ .charcoal-radio-input:checked:not(:disabled):active {
2016
2123
  background-color: var(--charcoal-color-container-primary-press);
2017
2124
  }
2018
- .charcoal-menu-list {
2019
- padding: 0;
2020
- margin: 0;
2125
+
2126
+ .charcoal-radio-input:checked:not(:disabled):active::after {
2127
+ background-color: var(--charcoal-color-icon-on-primary-press);
2021
2128
  }
2022
2129
  .charcoal-list-item {
2023
2130
  list-style: none;
@@ -2043,6 +2150,10 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
2043
2150
  opacity: 0.32;
2044
2151
  cursor: default;
2045
2152
  }
2153
+ .charcoal-menu-list {
2154
+ padding: 0;
2155
+ margin: 0;
2156
+ }
2046
2157
  .charcoal-checkbox-input {
2047
2158
  -webkit-appearance: none;
2048
2159
  -moz-appearance: none;