@charcoal-ui/react 6.0.0 → 6.0.1

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