@mond-design-system/react 1.0.0-alpha.2 → 1.0.0-alpha.4

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 (9) hide show
  1. package/dist/index.cjs +454 -534
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +618 -350
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +193 -61
  6. package/dist/index.d.ts +193 -61
  7. package/dist/index.js +454 -535
  8. package/dist/index.js.map +1 -1
  9. package/package.json +5 -3
package/dist/index.css CHANGED
@@ -1,103 +1,103 @@
1
- /* src/components/Text/Text.module.css */
2
- .Text_text {
1
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Text/Text.module.css?mds-scoped */
2
+ .mds-Text__text {
3
3
  margin: 0;
4
4
  }
5
- .Text_variant-body {
5
+ .mds-Text__variant-body {
6
6
  font: var(--mds-type-body);
7
7
  }
8
- .Text_variant-label {
8
+ .mds-Text__variant-label {
9
9
  font: var(--mds-type-label);
10
10
  }
11
- .Text_variant-note {
11
+ .mds-Text__variant-note {
12
12
  font: var(--mds-type-note);
13
13
  }
14
- .Text_variant-meta {
14
+ .mds-Text__variant-meta {
15
15
  font: var(--mds-type-meta);
16
16
  }
17
- .Text_variant-eyebrow {
17
+ .mds-Text__variant-eyebrow {
18
18
  font: var(--mds-type-eyebrow);
19
19
  letter-spacing: var(--mds-tracking-eyebrow);
20
20
  text-transform: uppercase;
21
21
  }
22
- .Text_tone-primary {
22
+ .mds-Text__tone-primary {
23
23
  color: var(--mds-text-primary);
24
24
  }
25
- .Text_tone-secondary {
25
+ .mds-Text__tone-secondary {
26
26
  color: var(--mds-text-secondary);
27
27
  }
28
- .Text_tone-muted {
28
+ .mds-Text__tone-muted {
29
29
  color: var(--mds-text-muted);
30
30
  }
31
- .Text_tone-inverse {
31
+ .mds-Text__tone-inverse {
32
32
  color: var(--mds-text-inverse);
33
33
  }
34
- .Text_tone-accent {
34
+ .mds-Text__tone-accent {
35
35
  color: var(--mds-text-accent);
36
36
  }
37
- .Text_tone-on-media {
37
+ .mds-Text__tone-on-media {
38
38
  color: var(--mds-text-on-media);
39
39
  }
40
- .Text_tone-danger {
40
+ .mds-Text__tone-danger {
41
41
  color: var(--mds-status-danger);
42
42
  }
43
- .Text_tone-warning {
43
+ .mds-Text__tone-warning {
44
44
  color: var(--mds-status-warning);
45
45
  }
46
- .Text_tone-success {
46
+ .mds-Text__tone-success {
47
47
  color: var(--mds-status-success);
48
48
  }
49
- .Text_align-left {
49
+ .mds-Text__align-left {
50
50
  text-align: left;
51
51
  }
52
- .Text_align-center {
52
+ .mds-Text__align-center {
53
53
  text-align: center;
54
54
  }
55
- .Text_align-right {
55
+ .mds-Text__align-right {
56
56
  text-align: right;
57
57
  }
58
- .Text_truncate {
58
+ .mds-Text__truncate {
59
59
  overflow: hidden;
60
60
  white-space: nowrap;
61
61
  text-overflow: ellipsis;
62
62
  }
63
63
 
64
- /* src/components/Heading/Heading.module.css */
65
- .Heading_heading {
64
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Heading/Heading.module.css?mds-scoped */
65
+ .mds-Heading__heading {
66
66
  margin: 0;
67
67
  }
68
- .Heading_variant-display {
68
+ .mds-Heading__variant-display {
69
69
  font: var(--mds-type-display);
70
70
  letter-spacing: var(--mds-tracking-display);
71
71
  }
72
- .Heading_variant-title {
72
+ .mds-Heading__variant-title {
73
73
  font: var(--mds-type-title);
74
74
  }
75
- .Heading_variant-subtitle {
75
+ .mds-Heading__variant-subtitle {
76
76
  font: var(--mds-type-subtitle);
77
77
  }
78
- .Heading_tone-primary {
78
+ .mds-Heading__tone-primary {
79
79
  color: var(--mds-text-primary);
80
80
  }
81
- .Heading_tone-secondary {
81
+ .mds-Heading__tone-secondary {
82
82
  color: var(--mds-text-secondary);
83
83
  }
84
- .Heading_tone-inverse {
84
+ .mds-Heading__tone-inverse {
85
85
  color: var(--mds-text-inverse);
86
86
  }
87
- .Heading_tone-accent {
87
+ .mds-Heading__tone-accent {
88
88
  color: var(--mds-text-accent);
89
89
  }
90
- .Heading_tone-on-media {
90
+ .mds-Heading__tone-on-media {
91
91
  color: var(--mds-text-on-media);
92
92
  }
93
93
 
94
- /* src/components/Spinner/Spinner.module.css */
95
- @keyframes Spinner_spin {
94
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Spinner/Spinner.module.css?mds-scoped */
95
+ @keyframes mds-Spinner__spin {
96
96
  to {
97
97
  transform: rotate(360deg);
98
98
  }
99
99
  }
100
- .Spinner_spinner {
100
+ .mds-Spinner__spinner {
101
101
  display: inline-block;
102
102
  flex: none;
103
103
  width: var(--spinner-size);
@@ -105,32 +105,32 @@
105
105
  border: var(--spinner-border) solid var(--mds-border-strong);
106
106
  border-top-color: currentcolor;
107
107
  border-radius: var(--mds-radius-pill);
108
- animation: Spinner_spin 0.7s linear infinite;
108
+ animation: mds-Spinner__spin 0.7s linear infinite;
109
109
  }
110
110
 
111
- /* src/components/Icon/Icon.module.css */
112
- .Icon_icon {
111
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Icon/Icon.module.css?mds-scoped */
112
+ .mds-Icon__icon {
113
113
  display: inline-flex;
114
114
  align-items: center;
115
115
  justify-content: center;
116
116
  flex: none;
117
117
  color: inherit;
118
118
  }
119
- .Icon_size-sm {
119
+ .mds-Icon__size-sm {
120
120
  width: var(--mds-icon-sm);
121
121
  height: var(--mds-icon-sm);
122
122
  }
123
- .Icon_size-md {
123
+ .mds-Icon__size-md {
124
124
  width: var(--mds-icon-md);
125
125
  height: var(--mds-icon-md);
126
126
  }
127
- .Icon_size-lg {
127
+ .mds-Icon__size-lg {
128
128
  width: var(--mds-icon-lg);
129
129
  height: var(--mds-icon-lg);
130
130
  }
131
131
 
132
- /* src/components/Button/Button.module.css */
133
- .Button_button {
132
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped */
133
+ .mds-Button__button {
134
134
  display: inline-flex;
135
135
  align-items: center;
136
136
  justify-content: center;
@@ -145,94 +145,140 @@
145
145
  text-decoration: none;
146
146
  transition: background-color var(--mds-transition-control), color var(--mds-transition-control);
147
147
  }
148
- .Button_size-sm {
148
+ .mds-Button__size-sm {
149
149
  height: var(--mds-control-h-sm);
150
150
  padding: 0 var(--mds-space-3);
151
151
  font-size: var(--mds-text-sm);
152
152
  }
153
- .Button_size-md {
153
+ .mds-Button__size-md {
154
154
  height: var(--mds-control-h-md);
155
155
  padding: 0 var(--mds-space-4);
156
156
  font-size: var(--mds-text-base);
157
157
  }
158
- .Button_size-lg {
158
+ .mds-Button__size-lg {
159
159
  height: var(--mds-control-h-lg);
160
160
  padding: 0 var(--mds-space-5);
161
161
  font-size: var(--mds-text-lg);
162
162
  }
163
- .Button_variant-primary {
163
+ .mds-Button__variant-primary {
164
164
  background: var(--mds-action-bg);
165
165
  color: var(--mds-action-fg);
166
166
  }
167
- .Button_variant-primary:hover:not(:disabled) {
167
+ .mds-Button__variant-primary:hover:not(:disabled) {
168
168
  background: var(--mds-action-bg-hover);
169
169
  }
170
- .Button_variant-primary:active:not(:disabled) {
170
+ .mds-Button__variant-primary:active:not(:disabled) {
171
171
  background: var(--mds-action-bg-active);
172
172
  }
173
- .Button_variant-secondary {
173
+ .mds-Button__variant-secondary {
174
174
  background: transparent;
175
175
  color: var(--mds-text-primary);
176
176
  border-color: var(--mds-control-border);
177
177
  }
178
- .Button_variant-ghost {
178
+ .mds-Button__variant-ghost {
179
179
  background: transparent;
180
180
  color: var(--mds-text-primary);
181
181
  }
182
- .Button_variant-secondary:hover:not(:disabled),
183
- .Button_variant-ghost:hover:not(:disabled) {
182
+ .mds-Button__variant-secondary:hover:not(:disabled),
183
+ .mds-Button__variant-ghost:hover:not(:disabled) {
184
184
  background: var(--mds-surface-sunken);
185
185
  }
186
- .Button_variant-danger {
186
+ .mds-Button__variant-highlight {
187
+ background: var(--mds-highlight);
188
+ color: var(--mds-highlight-contrast);
189
+ }
190
+ .mds-Button__variant-highlight:hover:not(:disabled) {
191
+ background: var(--mds-highlight-hover);
192
+ }
193
+ .mds-Button__variant-danger {
187
194
  background: var(--mds-status-danger);
188
195
  color: var(--mds-status-danger-contrast);
189
196
  }
190
- .Button_variant-danger:hover:not(:disabled) {
197
+ .mds-Button__variant-danger:hover:not(:disabled) {
198
+ filter: brightness(0.94);
199
+ }
200
+ .mds-Button__variant-warning {
201
+ background: var(--mds-status-warning);
202
+ color: var(--mds-status-warning-contrast);
203
+ }
204
+ .mds-Button__variant-warning:hover:not(:disabled) {
191
205
  filter: brightness(0.94);
192
206
  }
193
- .Button_button:disabled {
207
+ .mds-Button__button:disabled {
194
208
  background: var(--mds-action-disabled-bg);
195
209
  color: var(--mds-action-disabled-fg);
196
210
  border-color: transparent;
197
211
  cursor: not-allowed;
198
212
  }
199
- .Button_fullWidth {
213
+ .mds-Button__fullWidth {
200
214
  width: 100%;
201
215
  }
202
- .Button_icon-only {
216
+ .mds-Button__icon-only {
203
217
  padding: 0;
204
218
  border-radius: var(--mds-radius-pill);
205
219
  }
206
- .Button_icon-only.Button_size-sm {
220
+ .mds-Button__icon-only.mds-Button__size-sm {
207
221
  width: var(--mds-control-h-sm);
208
222
  }
209
- .Button_icon-only.Button_size-md {
223
+ .mds-Button__icon-only.mds-Button__size-md {
210
224
  width: var(--mds-control-h-md);
211
225
  }
212
- .Button_icon-only.Button_size-lg {
226
+ .mds-Button__icon-only.mds-Button__size-lg {
213
227
  width: var(--mds-control-h-lg);
214
228
  }
215
229
 
216
- /* src/components/Link/Link.module.css */
217
- .Link_link {
230
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Link/Link.module.css?mds-scoped */
231
+ .mds-Link__link {
218
232
  color: var(--mds-text-accent);
219
233
  border-radius: var(--mds-radius-1);
220
234
  transition: color var(--mds-transition-control);
221
235
  }
222
- .Link_variant-inline {
236
+ button.mds-Link__link {
237
+ border: none;
238
+ background: none;
239
+ padding: 0;
240
+ font: inherit;
241
+ cursor: pointer;
242
+ }
243
+ .mds-Link__variant-inline {
223
244
  text-decoration: underline;
224
245
  text-underline-offset: 0.15em;
225
246
  }
226
- .Link_variant-standalone {
247
+ .mds-Link__variant-standalone {
227
248
  text-decoration: none;
228
249
  font-weight: var(--mds-weight-medium);
229
250
  }
230
- .Link_link:hover {
251
+ .mds-Link__link:hover {
231
252
  color: var(--mds-accent-hover);
232
253
  }
254
+ .mds-Link__variant-plain {
255
+ color: inherit;
256
+ font-weight: inherit;
257
+ text-decoration: none;
258
+ }
259
+ .mds-Link__variant-plain:hover {
260
+ color: inherit;
261
+ text-decoration: underline;
262
+ text-underline-offset: 0.15em;
263
+ }
264
+ .mds-Link__size-xs {
265
+ font-size: var(--mds-text-xs);
266
+ }
267
+ .mds-Link__size-sm {
268
+ font-size: var(--mds-text-sm);
269
+ }
270
+ .mds-Link__size-base {
271
+ font-size: var(--mds-text-base);
272
+ }
273
+ .mds-Link__size-lg {
274
+ font-size: var(--mds-text-lg);
275
+ }
276
+ .mds-Link__size-xl {
277
+ font-size: var(--mds-text-xl);
278
+ }
233
279
 
234
- /* src/components/Avatar/Avatar.module.css */
235
- .Avatar_avatar {
280
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Avatar/Avatar.module.css?mds-scoped */
281
+ .mds-Avatar__avatar {
236
282
  display: inline-flex;
237
283
  align-items: center;
238
284
  justify-content: center;
@@ -245,44 +291,74 @@
245
291
  font-weight: var(--mds-weight-semibold);
246
292
  user-select: none;
247
293
  }
248
- .Avatar_size-sm {
294
+ .mds-Avatar__size-xs {
295
+ width: var(--mds-avatar-xs);
296
+ height: var(--mds-avatar-xs);
297
+ font-size: var(--mds-text-xs);
298
+ }
299
+ .mds-Avatar__size-sm {
249
300
  width: var(--mds-avatar-sm);
250
301
  height: var(--mds-avatar-sm);
251
302
  font-size: var(--mds-text-xs);
252
303
  }
253
- .Avatar_size-md {
304
+ .mds-Avatar__size-md {
254
305
  width: var(--mds-avatar-md);
255
306
  height: var(--mds-avatar-md);
256
307
  font-size: var(--mds-text-sm);
257
308
  }
258
- .Avatar_size-lg {
309
+ .mds-Avatar__size-lg {
259
310
  width: var(--mds-avatar-lg);
260
311
  height: var(--mds-avatar-lg);
261
312
  font-size: var(--mds-text-xl);
262
313
  }
263
- .Avatar_image {
314
+ .mds-Avatar__size-xl {
315
+ width: var(--mds-avatar-xl);
316
+ height: var(--mds-avatar-xl);
317
+ font-size: var(--mds-text-2xl);
318
+ }
319
+ .mds-Avatar__tone-1 {
320
+ background: var(--mds-avatar-tone-1);
321
+ color: var(--mds-text-primary);
322
+ }
323
+ .mds-Avatar__tone-2 {
324
+ background: var(--mds-avatar-tone-2);
325
+ color: var(--mds-text-primary);
326
+ }
327
+ .mds-Avatar__tone-3 {
328
+ background: var(--mds-avatar-tone-3);
329
+ color: var(--mds-text-primary);
330
+ }
331
+ .mds-Avatar__tone-4 {
332
+ background: var(--mds-avatar-tone-4);
333
+ color: var(--mds-text-primary);
334
+ }
335
+ .mds-Avatar__tone-5 {
336
+ background: var(--mds-avatar-tone-5);
337
+ color: var(--mds-text-primary);
338
+ }
339
+ .mds-Avatar__image {
264
340
  width: 100%;
265
341
  height: 100%;
266
342
  object-fit: cover;
267
343
  }
268
- .Avatar_initials {
344
+ .mds-Avatar__initials {
269
345
  line-height: 1;
270
346
  }
271
347
 
272
- /* src/components/AvatarGroup/AvatarGroup.module.css */
273
- .AvatarGroup_group {
348
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AvatarGroup/AvatarGroup.module.css?mds-scoped */
349
+ .mds-AvatarGroup__group {
274
350
  display: inline-flex;
275
351
  align-items: center;
276
352
  }
277
- .AvatarGroup_item {
353
+ .mds-AvatarGroup__item {
278
354
  display: inline-flex;
279
355
  border-radius: var(--mds-radius-avatar);
280
356
  box-shadow: 0 0 0 var(--mds-focus-width) var(--mds-surface-card);
281
357
  }
282
- .AvatarGroup_item + .AvatarGroup_item {
358
+ .mds-AvatarGroup__item + .mds-AvatarGroup__item {
283
359
  margin-left: calc(-1 * var(--mds-space-2));
284
360
  }
285
- .AvatarGroup_overflow {
361
+ .mds-AvatarGroup__overflow {
286
362
  align-items: center;
287
363
  justify-content: center;
288
364
  flex: none;
@@ -292,24 +368,34 @@
292
368
  font-weight: var(--mds-weight-semibold);
293
369
  user-select: none;
294
370
  }
295
- .AvatarGroup_size-sm {
371
+ .mds-AvatarGroup__size-xs {
372
+ width: var(--mds-avatar-xs);
373
+ height: var(--mds-avatar-xs);
374
+ font-size: var(--mds-text-xs);
375
+ }
376
+ .mds-AvatarGroup__size-sm {
296
377
  width: var(--mds-avatar-sm);
297
378
  height: var(--mds-avatar-sm);
298
379
  font-size: var(--mds-text-xs);
299
380
  }
300
- .AvatarGroup_size-md {
381
+ .mds-AvatarGroup__size-md {
301
382
  width: var(--mds-avatar-md);
302
383
  height: var(--mds-avatar-md);
303
384
  font-size: var(--mds-text-sm);
304
385
  }
305
- .AvatarGroup_size-lg {
386
+ .mds-AvatarGroup__size-lg {
306
387
  width: var(--mds-avatar-lg);
307
388
  height: var(--mds-avatar-lg);
308
389
  font-size: var(--mds-text-xl);
309
390
  }
391
+ .mds-AvatarGroup__size-xl {
392
+ width: var(--mds-avatar-xl);
393
+ height: var(--mds-avatar-xl);
394
+ font-size: var(--mds-text-2xl);
395
+ }
310
396
 
311
- /* src/components/Badge/Badge.module.css */
312
- .Badge_badge {
397
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Badge/Badge.module.css?mds-scoped */
398
+ .mds-Badge__badge {
313
399
  display: inline-flex;
314
400
  align-items: center;
315
401
  justify-content: center;
@@ -321,29 +407,33 @@
321
407
  font-weight: var(--mds-weight-semibold);
322
408
  white-space: nowrap;
323
409
  }
324
- .Badge_tone-neutral {
410
+ .mds-Badge__tone-neutral {
325
411
  background: var(--mds-surface-sunken);
326
412
  color: var(--mds-text-primary);
327
413
  }
328
- .Badge_tone-accent {
414
+ .mds-Badge__tone-accent {
329
415
  background: var(--mds-accent-soft);
330
416
  color: var(--mds-text-primary);
331
417
  }
332
- .Badge_tone-danger {
418
+ .mds-Badge__tone-highlight {
419
+ background: var(--mds-highlight);
420
+ color: var(--mds-highlight-contrast);
421
+ }
422
+ .mds-Badge__tone-danger {
333
423
  background: var(--mds-status-danger-soft);
334
424
  color: var(--mds-text-primary);
335
425
  }
336
- .Badge_tone-warning {
426
+ .mds-Badge__tone-warning {
337
427
  background: var(--mds-status-warning-soft);
338
428
  color: var(--mds-text-primary);
339
429
  }
340
- .Badge_tone-success {
430
+ .mds-Badge__tone-success {
341
431
  background: var(--mds-status-success-soft);
342
432
  color: var(--mds-text-primary);
343
433
  }
344
434
 
345
- /* src/components/Chip/Chip.module.css */
346
- .Chip_chip {
435
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/Chip.module.css?mds-scoped */
436
+ .mds-Chip__chip {
347
437
  display: inline-flex;
348
438
  align-items: center;
349
439
  gap: var(--mds-gap-hairline);
@@ -354,84 +444,89 @@
354
444
  cursor: default;
355
445
  transition: var(--mds-transition-control);
356
446
  }
357
- .Chip_variant-soft {
447
+ .mds-Chip__variant-soft {
358
448
  background: var(--mds-accent-soft);
359
449
  border: var(--mds-border-width) solid transparent;
360
450
  color: var(--mds-text-accent);
361
451
  }
362
- .Chip_variant-outline {
452
+ .mds-Chip__variant-outline {
363
453
  background: transparent;
364
454
  border: var(--mds-border-width) solid var(--mds-border-subtle);
365
455
  color: var(--mds-text-secondary);
366
456
  }
367
- .Chip_selected {
457
+ .mds-Chip__variant-highlight {
458
+ background: var(--mds-highlight);
459
+ border: var(--mds-border-width) solid transparent;
460
+ color: var(--mds-highlight-contrast);
461
+ }
462
+ .mds-Chip__selected {
368
463
  background: var(--mds-accent);
369
464
  border-color: transparent;
370
465
  color: var(--mds-accent-contrast);
371
466
  }
372
- .Chip_interactive {
467
+ .mds-Chip__interactive {
373
468
  cursor: pointer;
374
469
  }
375
- .Chip_interactive:not(.Chip_selected):hover {
470
+ .mds-Chip__interactive:not(.mds-Chip__selected):hover {
376
471
  filter: brightness(0.97);
377
472
  }
378
- .Chip_disabled {
473
+ .mds-Chip__disabled {
379
474
  opacity: 0.5;
380
475
  }
381
476
 
382
- /* src/components/Chip/ChipGroup.module.css */
383
- .ChipGroup_group {
477
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipGroup.module.css?mds-scoped */
478
+ .mds-ChipGroup__group {
384
479
  display: flex;
385
480
  flex-wrap: wrap;
386
481
  align-items: center;
387
482
  }
388
- .ChipGroup_gap-hairline {
483
+ .mds-ChipGroup__gap-hairline {
389
484
  gap: var(--mds-gap-hairline);
390
485
  }
391
- .ChipGroup_gap-tight {
486
+ .mds-ChipGroup__gap-tight {
392
487
  gap: var(--mds-gap-tight);
393
488
  }
394
- .ChipGroup_gap-base {
489
+ .mds-ChipGroup__gap-base {
395
490
  gap: var(--mds-gap);
396
491
  }
397
492
 
398
- /* src/components/Chip/ChipBar.module.css */
399
- .ChipBar_bar {
493
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipBar.module.css?mds-scoped */
494
+ .mds-ChipBar__bar {
400
495
  display: flex;
401
496
  align-items: center;
402
497
  overflow-x: auto;
403
498
  scrollbar-width: none;
404
499
  min-width: 0;
405
500
  }
406
- .ChipBar_gap-hairline {
501
+ .mds-ChipBar__gap-hairline {
407
502
  gap: var(--mds-gap-hairline);
408
503
  }
409
- .ChipBar_gap-tight {
504
+ .mds-ChipBar__gap-tight {
410
505
  gap: var(--mds-gap-tight);
411
506
  }
412
- .ChipBar_gap-base {
507
+ .mds-ChipBar__gap-base {
413
508
  gap: var(--mds-gap);
414
509
  }
415
- .ChipBar_bordered {
510
+ .mds-ChipBar__bordered {
416
511
  padding: var(--mds-space-1) var(--mds-space-3);
417
512
  border-radius: var(--mds-radius-pill);
418
513
  border: var(--mds-border-width) solid var(--mds-border-subtle);
419
514
  background: var(--mds-surface-sunken);
420
515
  }
421
- .ChipBar_fade {
516
+ .mds-ChipBar__fade {
422
517
  mask-image:
423
518
  linear-gradient(
424
519
  to right,
425
520
  black calc(100% - var(--mds-space-6)),
426
521
  transparent);
427
522
  }
428
- .ChipBar_item {
523
+ .mds-ChipBar__item {
429
524
  flex: none;
430
525
  display: flex;
431
526
  }
432
527
 
433
- /* src/components/CountButton/CountButton.module.css */
434
- .CountButton_button {
528
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped */
529
+ .mds-CountButton__button {
435
530
  display: inline-flex;
436
531
  align-items: center;
437
532
  gap: var(--mds-gap-hairline);
@@ -445,56 +540,56 @@
445
540
  cursor: pointer;
446
541
  transition: var(--mds-transition-control);
447
542
  }
448
- .CountButton_button:hover:not(:disabled) {
543
+ .mds-CountButton__button:hover:not(:disabled) {
449
544
  background: var(--mds-surface-sunken);
450
545
  }
451
- .CountButton_button:active:not(:disabled) {
546
+ .mds-CountButton__button:active:not(:disabled) {
452
547
  background: var(--mds-surface-selected);
453
548
  }
454
- .CountButton_button:disabled {
549
+ .mds-CountButton__button:disabled {
455
550
  cursor: default;
456
551
  opacity: 0.6;
457
552
  }
458
- .CountButton_tone-accent {
553
+ .mds-CountButton__tone-accent {
459
554
  color: var(--mds-accent);
460
555
  }
461
- .CountButton_tone-danger {
556
+ .mds-CountButton__tone-danger {
462
557
  color: var(--mds-status-danger);
463
558
  }
464
- .CountButton_glyph {
559
+ .mds-CountButton__glyph {
465
560
  display: inline-flex;
466
561
  align-items: center;
467
562
  }
468
563
 
469
- /* src/components/Field/Field.module.css */
470
- .Field_field {
564
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Field/Field.module.css?mds-scoped */
565
+ .mds-Field__field {
471
566
  display: flex;
472
567
  flex-direction: column;
473
568
  gap: var(--mds-gap-hairline);
474
569
  }
475
- .Field_label {
570
+ .mds-Field__label {
476
571
  font: var(--mds-type-label);
477
572
  color: var(--mds-text-primary);
478
573
  }
479
- .Field_required {
574
+ .mds-Field__required {
480
575
  color: var(--mds-status-danger);
481
576
  margin-left: var(--mds-space-1);
482
577
  }
483
- .Field_message {
578
+ .mds-Field__message {
484
579
  font: var(--mds-type-note);
485
580
  color: var(--mds-text-secondary);
486
581
  }
487
- .Field_error {
582
+ .mds-Field__error {
488
583
  color: var(--mds-status-danger);
489
584
  }
490
585
 
491
- /* src/components/Select/Select.module.css */
492
- .Select_wrap {
586
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Select/Select.module.css?mds-scoped */
587
+ .mds-Select__wrap {
493
588
  position: relative;
494
589
  display: inline-flex;
495
590
  width: 100%;
496
591
  }
497
- .Select_select {
592
+ .mds-Select__select {
498
593
  appearance: none;
499
594
  width: 100%;
500
595
  border: var(--mds-border-width) solid var(--mds-control-border);
@@ -505,30 +600,30 @@
505
600
  cursor: pointer;
506
601
  transition: border-color var(--mds-transition-control);
507
602
  }
508
- .Select_select:disabled {
603
+ .mds-Select__select:disabled {
509
604
  background: var(--mds-action-disabled-bg);
510
605
  color: var(--mds-action-disabled-fg);
511
606
  cursor: not-allowed;
512
607
  }
513
- .Select_select[aria-invalid=true] {
608
+ .mds-Select__select[aria-invalid=true] {
514
609
  border-color: var(--mds-status-danger);
515
610
  }
516
- .Select_size-sm {
611
+ .mds-Select__size-sm {
517
612
  height: var(--mds-control-h-sm);
518
613
  padding: 0 var(--mds-space-7) 0 var(--mds-space-2);
519
614
  font-size: var(--mds-text-sm);
520
615
  }
521
- .Select_size-md {
616
+ .mds-Select__size-md {
522
617
  height: var(--mds-control-h-md);
523
618
  padding: 0 var(--mds-space-8) 0 var(--mds-space-3);
524
619
  font-size: var(--mds-text-base);
525
620
  }
526
- .Select_size-lg {
621
+ .mds-Select__size-lg {
527
622
  height: var(--mds-control-h-lg);
528
623
  padding: 0 var(--mds-space-8) 0 var(--mds-space-4);
529
624
  font-size: var(--mds-text-base);
530
625
  }
531
- .Select_chevron {
626
+ .mds-Select__chevron {
532
627
  position: absolute;
533
628
  right: var(--mds-space-2);
534
629
  top: 50%;
@@ -539,45 +634,47 @@
539
634
  pointer-events: none;
540
635
  }
541
636
 
542
- /* src/components/Overlay/Overlay.module.css */
543
- .Overlay_scrim {
637
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped */
638
+ .mds-Overlay__scrim {
544
639
  position: fixed;
545
640
  inset: 0;
641
+ height: var(--mds-vvh, 100dvh);
546
642
  display: flex;
547
643
  background: var(--mds-scrim);
548
644
  opacity: 0;
549
645
  transition: opacity var(--mds-dur-base) var(--mds-ease-standard);
550
646
  }
551
- .Overlay_scrim[data-open] {
647
+ .mds-Overlay__scrim[data-open] {
552
648
  opacity: 1;
553
649
  }
554
- .Overlay_variant-modal {
650
+ .mds-Overlay__variant-modal {
555
651
  z-index: var(--mds-z-modal);
556
652
  align-items: center;
557
653
  justify-content: center;
558
654
  padding: var(--mds-pad-page-x);
559
655
  }
560
- .Overlay_variant-sheet {
656
+ .mds-Overlay__variant-sheet {
561
657
  z-index: var(--mds-z-sheet);
562
658
  align-items: flex-end;
563
659
  }
564
660
 
565
- /* src/components/Sheet/Sheet.module.css */
566
- .Sheet_panel {
661
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Sheet/Sheet.module.css?mds-scoped */
662
+ .mds-Sheet__panel {
567
663
  display: flex;
568
664
  flex-direction: column;
569
665
  width: 100%;
570
- max-height: 85dvh;
666
+ max-height: 85%;
667
+ padding-bottom: var(--mds-safe-bottom);
571
668
  background: var(--mds-surface-raised);
572
669
  border-radius: var(--mds-radius-sheet) var(--mds-radius-sheet) 0 0;
573
670
  box-shadow: var(--mds-elevation-sheet);
574
671
  transform: translateY(100%);
575
672
  transition: var(--mds-transition-sheet);
576
673
  }
577
- .Sheet_panel[data-open] {
674
+ .mds-Sheet__panel[data-open] {
578
675
  transform: none;
579
676
  }
580
- .Sheet_header {
677
+ .mds-Sheet__header {
581
678
  display: flex;
582
679
  align-items: center;
583
680
  gap: var(--mds-gap);
@@ -585,21 +682,44 @@
585
682
  font: var(--mds-type-subtitle);
586
683
  color: var(--mds-text-primary);
587
684
  }
588
- .Sheet_body {
685
+ .mds-Sheet__body {
589
686
  flex: 1;
590
687
  overflow-y: auto;
591
688
  padding: var(--mds-pad-card);
592
689
  }
593
- .Sheet_footer {
690
+ .mds-Sheet__footer {
594
691
  display: flex;
595
692
  align-items: center;
596
693
  justify-content: flex-end;
597
694
  gap: var(--mds-gap);
598
695
  padding: 0 var(--mds-pad-card) var(--mds-pad-card);
599
696
  }
697
+ .mds-Sheet__headerTitle {
698
+ flex: 1;
699
+ min-width: 0;
700
+ }
701
+ .mds-Sheet__close {
702
+ display: inline-flex;
703
+ align-items: center;
704
+ justify-content: center;
705
+ flex: none;
706
+ width: var(--mds-tap-min);
707
+ height: var(--mds-tap-min);
708
+ margin: calc((var(--mds-tap-min) - var(--mds-icon-lg)) / -2);
709
+ margin-left: 0;
710
+ border: none;
711
+ border-radius: var(--mds-radius-pill);
712
+ background: transparent;
713
+ color: var(--mds-text-secondary);
714
+ cursor: pointer;
715
+ }
716
+ .mds-Sheet__closeGlyph {
717
+ width: var(--mds-icon-sm);
718
+ height: var(--mds-icon-sm);
719
+ }
600
720
 
601
- /* src/components/DateTimePicker/DateTimePicker.module.css */
602
- .DateTimePicker_trigger {
721
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DateTimePicker/DateTimePicker.module.css?mds-scoped */
722
+ .mds-DateTimePicker__trigger {
603
723
  display: flex;
604
724
  align-items: center;
605
725
  gap: var(--mds-gap-tight);
@@ -615,67 +735,67 @@
615
735
  cursor: pointer;
616
736
  transition: var(--mds-transition-control);
617
737
  }
618
- .DateTimePicker_trigger:disabled {
738
+ .mds-DateTimePicker__trigger:disabled {
619
739
  cursor: default;
620
740
  opacity: 0.5;
621
741
  }
622
- .DateTimePicker_hasValue {
742
+ .mds-DateTimePicker__hasValue {
623
743
  color: var(--mds-text-primary);
624
744
  }
625
- .DateTimePicker_triggerLabel {
745
+ .mds-DateTimePicker__triggerLabel {
626
746
  overflow: hidden;
627
747
  text-overflow: ellipsis;
628
748
  white-space: nowrap;
629
749
  }
630
- .DateTimePicker_glyph {
750
+ .mds-DateTimePicker__glyph {
631
751
  flex: none;
632
752
  width: var(--mds-icon-sm);
633
753
  height: var(--mds-icon-sm);
634
754
  }
635
- .DateTimePicker_timeRow {
755
+ .mds-DateTimePicker__timeRow {
636
756
  display: flex;
637
757
  align-items: center;
638
758
  gap: var(--mds-gap-tight);
639
759
  margin-bottom: var(--mds-stack-group);
640
760
  color: var(--mds-text-secondary);
641
761
  }
642
- .DateTimePicker_grow {
762
+ .mds-DateTimePicker__grow {
643
763
  flex: 1;
644
764
  }
645
- .DateTimePicker_meridiem {
765
+ .mds-DateTimePicker__meridiem {
646
766
  flex: none;
647
767
  }
648
- .DateTimePicker_colon {
768
+ .mds-DateTimePicker__colon {
649
769
  color: var(--mds-text-muted);
650
770
  }
651
- .DateTimePicker_calendarHeader {
771
+ .mds-DateTimePicker__calendarHeader {
652
772
  display: flex;
653
773
  align-items: center;
654
774
  justify-content: space-between;
655
775
  margin-bottom: var(--mds-gap-tight);
656
776
  }
657
- .DateTimePicker_monthLabel {
777
+ .mds-DateTimePicker__monthLabel {
658
778
  font: var(--mds-type-subtitle);
659
779
  color: var(--mds-text-primary);
660
780
  }
661
- .DateTimePicker_weekdays {
781
+ .mds-DateTimePicker__weekdays {
662
782
  display: grid;
663
783
  grid-template-columns: repeat(7, 1fr);
664
784
  margin-bottom: var(--mds-space-1);
665
785
  }
666
- .DateTimePicker_weekday {
786
+ .mds-DateTimePicker__weekday {
667
787
  text-align: center;
668
788
  font: var(--mds-type-meta);
669
789
  color: var(--mds-text-muted);
670
790
  }
671
- .DateTimePicker_grid {
791
+ .mds-DateTimePicker__grid {
672
792
  display: grid;
673
793
  grid-template-columns: repeat(7, 1fr);
674
794
  grid-auto-rows: var(--mds-tap-min);
675
795
  min-height: calc(6 * var(--mds-tap-min));
676
796
  align-items: stretch;
677
797
  }
678
- .DateTimePicker_day {
798
+ .mds-DateTimePicker__day {
679
799
  border: none;
680
800
  background: transparent;
681
801
  border-radius: var(--mds-radius-control);
@@ -684,31 +804,31 @@
684
804
  cursor: pointer;
685
805
  transition: var(--mds-transition-control);
686
806
  }
687
- .DateTimePicker_day:hover:not(:disabled) {
807
+ .mds-DateTimePicker__day:hover:not(:disabled) {
688
808
  background: var(--mds-surface-sunken);
689
809
  }
690
- .DateTimePicker_day:disabled {
810
+ .mds-DateTimePicker__day:disabled {
691
811
  color: var(--mds-text-muted);
692
812
  opacity: 0.5;
693
813
  cursor: default;
694
814
  }
695
- .DateTimePicker_today {
815
+ .mds-DateTimePicker__today {
696
816
  font-weight: var(--mds-weight-semibold);
697
817
  color: var(--mds-text-accent);
698
818
  }
699
- .DateTimePicker_selected {
819
+ .mds-DateTimePicker__selected {
700
820
  background: var(--mds-accent);
701
821
  color: var(--mds-accent-contrast);
702
822
  }
703
- .DateTimePicker_selected:hover:not(:disabled) {
823
+ .mds-DateTimePicker__selected:hover:not(:disabled) {
704
824
  background: var(--mds-accent-hover);
705
825
  }
706
- .DateTimePicker_outside {
826
+ .mds-DateTimePicker__outside {
707
827
  visibility: hidden;
708
828
  }
709
829
 
710
- /* src/components/Tag/Tag.module.css */
711
- .Tag_tag {
830
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tag/Tag.module.css?mds-scoped */
831
+ .mds-Tag__tag {
712
832
  display: inline-flex;
713
833
  align-items: center;
714
834
  gap: var(--mds-gap-hairline);
@@ -720,12 +840,12 @@
720
840
  font: var(--mds-type-label);
721
841
  white-space: nowrap;
722
842
  }
723
- .Tag_tone-accent {
843
+ .mds-Tag__tone-accent {
724
844
  background: var(--mds-accent-soft);
725
845
  border-color: transparent;
726
846
  color: var(--mds-text-primary);
727
847
  }
728
- .Tag_remove {
848
+ .mds-Tag__remove {
729
849
  display: inline-flex;
730
850
  align-items: center;
731
851
  justify-content: center;
@@ -739,49 +859,49 @@
739
859
  color: inherit;
740
860
  cursor: pointer;
741
861
  }
742
- .Tag_remove:hover {
862
+ .mds-Tag__remove:hover {
743
863
  background: var(--mds-surface-sunken);
744
864
  }
745
- .Tag_removeGlyph {
865
+ .mds-Tag__removeGlyph {
746
866
  width: var(--mds-icon-sm);
747
867
  height: var(--mds-icon-sm);
748
868
  }
749
869
 
750
- /* src/components/Divider/Divider.module.css */
751
- .Divider_divider {
870
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Divider/Divider.module.css?mds-scoped */
871
+ .mds-Divider__divider {
752
872
  background: var(--mds-border-subtle);
753
873
  flex: none;
754
874
  }
755
- .Divider_horizontal {
875
+ .mds-Divider__horizontal {
756
876
  height: var(--mds-border-width);
757
877
  width: 100%;
758
878
  }
759
- .Divider_vertical {
879
+ .mds-Divider__vertical {
760
880
  width: var(--mds-border-width);
761
881
  align-self: stretch;
762
882
  }
763
883
 
764
- /* src/components/Skeleton/Skeleton.module.css */
765
- .Skeleton_skeleton {
884
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped */
885
+ .mds-Skeleton__skeleton {
766
886
  display: block;
767
887
  background: var(--mds-surface-sunken);
768
- animation: Skeleton_pulse var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
888
+ animation: mds-Skeleton__pulse var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
769
889
  width: var(--skeleton-w, 100%);
770
890
  }
771
- .Skeleton_variant-text {
891
+ .mds-Skeleton__variant-text {
772
892
  height: var(--skeleton-h, 1em);
773
893
  border-radius: var(--mds-radius-1);
774
894
  }
775
- .Skeleton_variant-rect {
895
+ .mds-Skeleton__variant-rect {
776
896
  height: var(--skeleton-h, var(--mds-space-10));
777
897
  border-radius: var(--mds-radius-media);
778
898
  }
779
- .Skeleton_variant-circle {
899
+ .mds-Skeleton__variant-circle {
780
900
  width: var(--skeleton-w, var(--mds-avatar-md));
781
901
  height: var(--skeleton-h, var(--mds-avatar-md));
782
902
  border-radius: var(--mds-radius-pill);
783
903
  }
784
- @keyframes Skeleton_pulse {
904
+ @keyframes mds-Skeleton__pulse {
785
905
  0%, 100% {
786
906
  opacity: 1;
787
907
  }
@@ -790,8 +910,8 @@
790
910
  }
791
911
  }
792
912
 
793
- /* src/components/ProgressBar/ProgressBar.module.css */
794
- .ProgressBar_track {
913
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ProgressBar/ProgressBar.module.css?mds-scoped */
914
+ .mds-ProgressBar__track {
795
915
  display: block;
796
916
  width: 100%;
797
917
  height: var(--mds-space-2);
@@ -799,7 +919,7 @@
799
919
  background: var(--mds-surface-sunken);
800
920
  overflow: hidden;
801
921
  }
802
- .ProgressBar_fill {
922
+ .mds-ProgressBar__fill {
803
923
  display: block;
804
924
  height: 100%;
805
925
  width: var(--progress, 0%);
@@ -807,11 +927,11 @@
807
927
  background: var(--mds-accent);
808
928
  transition: width var(--mds-transition-control);
809
929
  }
810
- .ProgressBar_indeterminate .ProgressBar_fill {
930
+ .mds-ProgressBar__indeterminate .mds-ProgressBar__fill {
811
931
  width: 40%;
812
- animation: ProgressBar_slide var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
932
+ animation: mds-ProgressBar__slide var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
813
933
  }
814
- @keyframes ProgressBar_slide {
934
+ @keyframes mds-ProgressBar__slide {
815
935
  from {
816
936
  transform: translateX(-100%);
817
937
  }
@@ -820,8 +940,8 @@
820
940
  }
821
941
  }
822
942
 
823
- /* src/components/Input/Input.module.css */
824
- .Input_input {
943
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped */
944
+ .mds-Input__input {
825
945
  width: 100%;
826
946
  border: var(--mds-border-width) solid var(--mds-control-border);
827
947
  border-radius: var(--mds-radius-control);
@@ -830,43 +950,68 @@
830
950
  font-family: var(--mds-font-body);
831
951
  transition: border-color var(--mds-transition-control);
832
952
  }
833
- .Input_input::placeholder {
953
+ .mds-Input__input::placeholder {
834
954
  color: var(--mds-text-muted);
835
955
  }
836
- .Input_input:disabled {
956
+ .mds-Input__input:disabled {
837
957
  background: var(--mds-action-disabled-bg);
838
958
  color: var(--mds-action-disabled-fg);
839
959
  cursor: not-allowed;
840
960
  }
841
- .Input_input[aria-invalid=true] {
961
+ .mds-Input__input[aria-invalid=true] {
842
962
  border-color: var(--mds-status-danger);
843
963
  }
844
- .Input_size-sm {
964
+ .mds-Input__size-sm {
845
965
  height: var(--mds-control-h-sm);
846
966
  padding: 0 var(--mds-space-2);
847
967
  font-size: var(--mds-text-sm);
848
968
  }
849
- .Input_size-md {
969
+ .mds-Input__size-md {
850
970
  height: var(--mds-control-h-md);
851
971
  padding: 0 var(--mds-space-3);
852
972
  font-size: var(--mds-text-base);
853
973
  }
854
- .Input_size-lg {
974
+ .mds-Input__size-lg {
855
975
  height: var(--mds-control-h-lg);
856
976
  padding: 0 var(--mds-space-4);
857
977
  font-size: var(--mds-text-base);
858
978
  }
979
+ .mds-Input__iconWrap {
980
+ position: relative;
981
+ display: block;
982
+ width: 100%;
983
+ }
984
+ .mds-Input__icon {
985
+ position: absolute;
986
+ top: 50%;
987
+ transform: translateY(-50%);
988
+ display: inline-flex;
989
+ color: var(--mds-text-muted);
990
+ pointer-events: none;
991
+ }
992
+ .mds-Input__iconLeft {
993
+ left: var(--mds-space-3);
994
+ }
995
+ .mds-Input__iconRight {
996
+ right: var(--mds-space-3);
997
+ }
998
+ .mds-Input__with-icon-left {
999
+ padding-left: calc(var(--mds-space-3) + var(--mds-icon-md) + var(--mds-space-2));
1000
+ }
1001
+ .mds-Input__with-icon-right {
1002
+ padding-right: calc(var(--mds-space-3) + var(--mds-icon-md) + var(--mds-space-2));
1003
+ }
859
1004
 
860
- /* src/components/PasswordInput/PasswordInput.module.css */
861
- .PasswordInput_wrap {
1005
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/PasswordInput/PasswordInput.module.css?mds-scoped */
1006
+ .mds-PasswordInput__wrap {
862
1007
  position: relative;
863
1008
  display: block;
864
1009
  }
865
- .PasswordInput_input {
1010
+ .mds-PasswordInput__input {
866
1011
  width: 100%;
867
1012
  padding-right: calc(var(--mds-control-h-md) + var(--mds-space-1));
868
1013
  }
869
- .PasswordInput_toggle {
1014
+ .mds-PasswordInput__toggle {
870
1015
  position: absolute;
871
1016
  top: 0;
872
1017
  right: 0;
@@ -884,12 +1029,12 @@
884
1029
  cursor: pointer;
885
1030
  transition: color var(--mds-transition-control);
886
1031
  }
887
- .PasswordInput_toggle:hover {
1032
+ .mds-PasswordInput__toggle:hover {
888
1033
  color: var(--mds-text-primary);
889
1034
  }
890
1035
 
891
- /* src/components/Textarea/Textarea.module.css */
892
- .Textarea_textarea {
1036
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Textarea/Textarea.module.css?mds-scoped */
1037
+ .mds-Textarea__textarea {
893
1038
  width: 100%;
894
1039
  padding: var(--mds-space-2) var(--mds-space-3);
895
1040
  border: var(--mds-border-width) solid var(--mds-control-border);
@@ -902,41 +1047,41 @@
902
1047
  resize: vertical;
903
1048
  transition: border-color var(--mds-transition-control);
904
1049
  }
905
- .Textarea_textarea::placeholder {
1050
+ .mds-Textarea__textarea::placeholder {
906
1051
  color: var(--mds-text-muted);
907
1052
  }
908
- .Textarea_textarea:disabled {
1053
+ .mds-Textarea__textarea:disabled {
909
1054
  background: var(--mds-action-disabled-bg);
910
1055
  color: var(--mds-action-disabled-fg);
911
1056
  cursor: not-allowed;
912
1057
  resize: none;
913
1058
  }
914
- .Textarea_textarea[aria-invalid=true] {
1059
+ .mds-Textarea__textarea[aria-invalid=true] {
915
1060
  border-color: var(--mds-status-danger);
916
1061
  }
917
- .Textarea_wrap {
1062
+ .mds-Textarea__wrap {
918
1063
  display: flex;
919
1064
  flex-direction: column;
920
1065
  align-items: flex-end;
921
1066
  gap: var(--mds-gap-hairline);
922
1067
  }
923
- .Textarea_count {
1068
+ .mds-Textarea__count {
924
1069
  font: var(--mds-type-meta);
925
1070
  color: var(--mds-text-muted);
926
1071
  }
927
1072
 
928
- /* src/components/Checkbox/Checkbox.module.css */
929
- .Checkbox_root {
1073
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped */
1074
+ .mds-Checkbox__root {
930
1075
  display: inline-flex;
931
1076
  align-items: center;
932
1077
  gap: var(--mds-gap-tight);
933
1078
  cursor: pointer;
934
1079
  min-height: var(--mds-tap-min);
935
1080
  }
936
- .Checkbox_root:has(.Checkbox_box:disabled) {
1081
+ .mds-Checkbox__root:has(.mds-Checkbox__box:disabled) {
937
1082
  cursor: not-allowed;
938
1083
  }
939
- .Checkbox_box {
1084
+ .mds-Checkbox__box {
940
1085
  appearance: none;
941
1086
  flex: none;
942
1087
  margin: 0;
@@ -951,11 +1096,11 @@
951
1096
  cursor: inherit;
952
1097
  transition: var(--mds-transition-control);
953
1098
  }
954
- .Checkbox_box:checked {
1099
+ .mds-Checkbox__box:checked {
955
1100
  background: var(--mds-action-bg);
956
1101
  border-color: var(--mds-action-bg);
957
1102
  }
958
- .Checkbox_box:checked::after {
1103
+ .mds-Checkbox__box:checked::after {
959
1104
  content: "";
960
1105
  width: 0.32em;
961
1106
  height: 0.6em;
@@ -964,33 +1109,33 @@
964
1109
  border-width: 0 calc(var(--mds-border-width) * 2) calc(var(--mds-border-width) * 2) 0;
965
1110
  transform: rotate(45deg);
966
1111
  }
967
- .Checkbox_box:disabled {
1112
+ .mds-Checkbox__box:disabled {
968
1113
  background: var(--mds-action-disabled-bg);
969
1114
  border-color: var(--mds-border-strong);
970
1115
  }
971
- .Checkbox_box:disabled:checked::after {
1116
+ .mds-Checkbox__box:disabled:checked::after {
972
1117
  border-color: var(--mds-action-disabled-fg);
973
1118
  }
974
- .Checkbox_label {
1119
+ .mds-Checkbox__label {
975
1120
  font: var(--mds-type-label);
976
1121
  color: var(--mds-text-primary);
977
1122
  }
978
- .Checkbox_box:disabled ~ .Checkbox_label {
1123
+ .mds-Checkbox__box:disabled ~ .mds-Checkbox__label {
979
1124
  color: var(--mds-action-disabled-fg);
980
1125
  }
981
1126
 
982
- /* src/components/Radio/Radio.module.css */
983
- .Radio_root {
1127
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped */
1128
+ .mds-Radio__root {
984
1129
  display: inline-flex;
985
1130
  align-items: center;
986
1131
  gap: var(--mds-gap-tight);
987
1132
  cursor: pointer;
988
1133
  min-height: var(--mds-tap-min);
989
1134
  }
990
- .Radio_root:has(.Radio_dot:disabled) {
1135
+ .mds-Radio__root:has(.mds-Radio__dot:disabled) {
991
1136
  cursor: not-allowed;
992
1137
  }
993
- .Radio_dot {
1138
+ .mds-Radio__dot {
994
1139
  appearance: none;
995
1140
  flex: none;
996
1141
  margin: 0;
@@ -1004,43 +1149,43 @@
1004
1149
  cursor: inherit;
1005
1150
  transition: var(--mds-transition-control);
1006
1151
  }
1007
- .Radio_dot:checked {
1152
+ .mds-Radio__dot:checked {
1008
1153
  border-color: var(--mds-action-bg);
1009
1154
  }
1010
- .Radio_dot:checked::after {
1155
+ .mds-Radio__dot:checked::after {
1011
1156
  content: "";
1012
1157
  width: 50%;
1013
1158
  height: 50%;
1014
1159
  border-radius: var(--mds-radius-pill);
1015
1160
  background: var(--mds-action-bg);
1016
1161
  }
1017
- .Radio_dot:disabled {
1162
+ .mds-Radio__dot:disabled {
1018
1163
  background: var(--mds-action-disabled-bg);
1019
1164
  border-color: var(--mds-border-strong);
1020
1165
  }
1021
- .Radio_dot:disabled:checked::after {
1166
+ .mds-Radio__dot:disabled:checked::after {
1022
1167
  background: var(--mds-action-disabled-fg);
1023
1168
  }
1024
- .Radio_label {
1169
+ .mds-Radio__label {
1025
1170
  font: var(--mds-type-label);
1026
1171
  color: var(--mds-text-primary);
1027
1172
  }
1028
- .Radio_dot:disabled ~ .Radio_label {
1173
+ .mds-Radio__dot:disabled ~ .mds-Radio__label {
1029
1174
  color: var(--mds-action-disabled-fg);
1030
1175
  }
1031
1176
 
1032
- /* src/components/Switch/Switch.module.css */
1033
- .Switch_root {
1177
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped */
1178
+ .mds-Switch__root {
1034
1179
  display: inline-flex;
1035
1180
  align-items: center;
1036
1181
  gap: var(--mds-gap-tight);
1037
1182
  cursor: pointer;
1038
1183
  min-height: var(--mds-tap-min);
1039
1184
  }
1040
- .Switch_root:has(.Switch_track:disabled) {
1185
+ .mds-Switch__root:has(.mds-Switch__track:disabled) {
1041
1186
  cursor: not-allowed;
1042
1187
  }
1043
- .Switch_track {
1188
+ .mds-Switch__track {
1044
1189
  appearance: none;
1045
1190
  flex: none;
1046
1191
  margin: 0;
@@ -1052,7 +1197,7 @@
1052
1197
  cursor: inherit;
1053
1198
  transition: background-color var(--mds-transition-control);
1054
1199
  }
1055
- .Switch_track::after {
1200
+ .mds-Switch__track::after {
1056
1201
  content: "";
1057
1202
  position: absolute;
1058
1203
  top: 50%;
@@ -1064,40 +1209,53 @@
1064
1209
  background: var(--mds-surface-card);
1065
1210
  transition: transform var(--mds-transition-control);
1066
1211
  }
1067
- .Switch_track:checked {
1212
+ .mds-Switch__track:checked {
1068
1213
  background: var(--mds-action-bg);
1069
1214
  }
1070
- .Switch_track:checked::after {
1215
+ .mds-Switch__track:checked::after {
1071
1216
  transform: translateY(-50%) translateX(calc(var(--mds-switch-w) - var(--mds-switch-knob) - 2 * var(--mds-space-1)));
1072
1217
  }
1073
- .Switch_track:disabled {
1218
+ .mds-Switch__track:disabled {
1074
1219
  background: var(--mds-action-disabled-bg);
1075
1220
  }
1076
- .Switch_track:disabled::after {
1221
+ .mds-Switch__track:disabled::after {
1077
1222
  background: var(--mds-action-disabled-fg);
1078
1223
  }
1079
- .Switch_label {
1224
+ .mds-Switch__trackWrap {
1225
+ position: relative;
1226
+ display: inline-flex;
1227
+ flex: none;
1228
+ }
1229
+ .mds-Switch__spinner {
1230
+ position: absolute;
1231
+ top: 50%;
1232
+ left: 50%;
1233
+ transform: translate(-50%, -50%);
1234
+ color: var(--mds-text-secondary);
1235
+ pointer-events: none;
1236
+ }
1237
+ .mds-Switch__label {
1080
1238
  font: var(--mds-type-label);
1081
1239
  color: var(--mds-text-primary);
1082
1240
  }
1083
- .Switch_track:disabled ~ .Switch_label {
1241
+ .mds-Switch__root:has(.mds-Switch__track:disabled) .mds-Switch__label {
1084
1242
  color: var(--mds-action-disabled-fg);
1085
1243
  }
1086
1244
 
1087
- /* src/components/SegmentedControl/SegmentedControl.module.css */
1088
- .SegmentedControl_group {
1245
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped */
1246
+ .mds-SegmentedControl__group {
1089
1247
  display: inline-flex;
1090
1248
  padding: var(--mds-space-1);
1091
1249
  gap: var(--mds-space-1);
1092
1250
  background: var(--mds-surface-sunken);
1093
1251
  border-radius: var(--mds-radius-control);
1094
1252
  }
1095
- .SegmentedControl_segment {
1253
+ .mds-SegmentedControl__segment {
1096
1254
  display: inline-flex;
1097
1255
  position: relative;
1098
1256
  cursor: pointer;
1099
1257
  }
1100
- .SegmentedControl_input {
1258
+ .mds-SegmentedControl__input {
1101
1259
  appearance: none;
1102
1260
  margin: 0;
1103
1261
  position: absolute;
@@ -1107,7 +1265,7 @@
1107
1265
  opacity: 0;
1108
1266
  cursor: inherit;
1109
1267
  }
1110
- .SegmentedControl_face {
1268
+ .mds-SegmentedControl__face {
1111
1269
  display: inline-flex;
1112
1270
  align-items: center;
1113
1271
  justify-content: center;
@@ -1119,24 +1277,35 @@
1119
1277
  white-space: nowrap;
1120
1278
  transition: var(--mds-transition-control);
1121
1279
  }
1122
- .SegmentedControl_input:checked + .SegmentedControl_face {
1280
+ .mds-SegmentedControl__input:checked + .mds-SegmentedControl__face {
1123
1281
  background: var(--mds-surface-card);
1124
1282
  color: var(--mds-text-primary);
1125
1283
  box-shadow: var(--mds-elevation-card);
1126
1284
  }
1127
- .SegmentedControl_input:focus-visible + .SegmentedControl_face {
1285
+ .mds-SegmentedControl__input:disabled + .mds-SegmentedControl__face {
1286
+ color: var(--mds-action-disabled-fg);
1287
+ cursor: not-allowed;
1288
+ }
1289
+ .mds-SegmentedControl__input:disabled:checked + .mds-SegmentedControl__face {
1290
+ background: var(--mds-action-disabled-bg);
1291
+ box-shadow: none;
1292
+ }
1293
+ .mds-SegmentedControl__segment:has(.mds-SegmentedControl__input:disabled) {
1294
+ cursor: not-allowed;
1295
+ }
1296
+ .mds-SegmentedControl__input:focus-visible + .mds-SegmentedControl__face {
1128
1297
  outline: var(--mds-focus-width) solid var(--mds-focus-ring-color);
1129
1298
  outline-offset: var(--mds-focus-offset);
1130
1299
  }
1131
1300
 
1132
- /* src/components/SearchField/SearchField.module.css */
1133
- .SearchField_wrap {
1301
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped */
1302
+ .mds-SearchField__wrap {
1134
1303
  position: relative;
1135
1304
  display: inline-flex;
1136
1305
  align-items: center;
1137
1306
  width: 100%;
1138
1307
  }
1139
- .SearchField_glass {
1308
+ .mds-SearchField__glass {
1140
1309
  position: absolute;
1141
1310
  left: var(--mds-space-3);
1142
1311
  width: var(--mds-icon-sm);
@@ -1144,7 +1313,7 @@
1144
1313
  color: var(--mds-text-muted);
1145
1314
  pointer-events: none;
1146
1315
  }
1147
- .SearchField_input {
1316
+ .mds-SearchField__input {
1148
1317
  width: 100%;
1149
1318
  height: var(--mds-control-h-md);
1150
1319
  padding: 0 var(--mds-space-9) 0 var(--mds-space-8);
@@ -1156,13 +1325,13 @@
1156
1325
  font-size: var(--mds-text-base);
1157
1326
  transition: border-color var(--mds-transition-control);
1158
1327
  }
1159
- .SearchField_input::placeholder {
1328
+ .mds-SearchField__input::placeholder {
1160
1329
  color: var(--mds-text-muted);
1161
1330
  }
1162
- .SearchField_input::-webkit-search-cancel-button {
1331
+ .mds-SearchField__input::-webkit-search-cancel-button {
1163
1332
  display: none;
1164
1333
  }
1165
- .SearchField_clear {
1334
+ .mds-SearchField__clear {
1166
1335
  position: absolute;
1167
1336
  right: var(--mds-space-2);
1168
1337
  display: inline-flex;
@@ -1176,16 +1345,16 @@
1176
1345
  color: var(--mds-text-secondary);
1177
1346
  cursor: pointer;
1178
1347
  }
1179
- .SearchField_clear:hover {
1348
+ .mds-SearchField__clear:hover {
1180
1349
  background: var(--mds-surface-sunken);
1181
1350
  }
1182
- .SearchField_clearGlyph {
1351
+ .mds-SearchField__clearGlyph {
1183
1352
  width: var(--mds-icon-sm);
1184
1353
  height: var(--mds-icon-sm);
1185
1354
  }
1186
1355
 
1187
- /* src/components/List/List.module.css */
1188
- .List_group {
1356
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped */
1357
+ .mds-List__group {
1189
1358
  list-style: none;
1190
1359
  margin: 0;
1191
1360
  padding: 0;
@@ -1194,10 +1363,45 @@
1194
1363
  border-radius: var(--mds-radius-card);
1195
1364
  overflow: hidden;
1196
1365
  }
1197
- .List_item + .List_item {
1366
+ .mds-List__labelledGroup {
1367
+ display: flex;
1368
+ flex-direction: column;
1369
+ gap: var(--mds-space-2);
1370
+ }
1371
+ .mds-List__label {
1372
+ padding-inline: var(--mds-pad-card);
1373
+ font-weight: var(--mds-weight-semibold);
1374
+ font-size: var(--mds-text-xs);
1375
+ text-transform: uppercase;
1376
+ letter-spacing: 0.06em;
1377
+ color: var(--mds-text-secondary);
1378
+ }
1379
+ .mds-List__group > .mds-List__item + .mds-List__item {
1198
1380
  border-top: var(--mds-border-width) solid var(--mds-border-subtle);
1199
1381
  }
1200
- .List_row {
1382
+ .mds-List__surface-card,
1383
+ .mds-List__surface-sunken,
1384
+ .mds-List__surface-accent {
1385
+ border: var(--mds-border-width) solid var(--mds-border-subtle);
1386
+ border-radius: var(--mds-radius-card);
1387
+ }
1388
+ .mds-List__surface-card {
1389
+ background: var(--mds-surface-card);
1390
+ }
1391
+ .mds-List__surface-sunken {
1392
+ background: var(--mds-surface-sunken);
1393
+ }
1394
+ .mds-List__surface-accent {
1395
+ border-left-width: var(--mds-edge-width);
1396
+ border-left-color: var(--mds-accent);
1397
+ background: var(--mds-accent-soft);
1398
+ }
1399
+ .mds-List__surface-plain {
1400
+ background: transparent;
1401
+ border: 0;
1402
+ border-radius: 0;
1403
+ }
1404
+ .mds-List__row {
1201
1405
  display: flex;
1202
1406
  align-items: center;
1203
1407
  gap: var(--mds-gap);
@@ -1208,40 +1412,40 @@
1208
1412
  color: inherit;
1209
1413
  text-decoration: none;
1210
1414
  }
1211
- .List_interactive {
1415
+ .mds-List__interactive {
1212
1416
  border: none;
1213
1417
  background: transparent;
1214
1418
  font: inherit;
1215
1419
  cursor: pointer;
1216
1420
  transition: background-color var(--mds-transition-control);
1217
1421
  }
1218
- .List_interactive:hover {
1422
+ .mds-List__interactive:hover {
1219
1423
  background: var(--mds-surface-sunken);
1220
1424
  }
1221
- .List_leading,
1222
- .List_trailing {
1425
+ .mds-List__leading,
1426
+ .mds-List__trailing {
1223
1427
  display: inline-flex;
1224
1428
  flex: none;
1225
1429
  align-items: center;
1226
1430
  }
1227
- .List_text {
1431
+ .mds-List__text {
1228
1432
  display: flex;
1229
1433
  flex-direction: column;
1230
1434
  gap: var(--mds-gap-hairline);
1231
1435
  min-width: 0;
1232
1436
  flex: 1;
1233
1437
  }
1234
- .List_title {
1438
+ .mds-List__title {
1235
1439
  font: var(--mds-type-label);
1236
1440
  color: var(--mds-text-primary);
1237
1441
  }
1238
- .List_description {
1442
+ .mds-List__description {
1239
1443
  font: var(--mds-type-note);
1240
1444
  color: var(--mds-text-secondary);
1241
1445
  }
1242
1446
 
1243
- /* src/components/EmptyState/EmptyState.module.css */
1244
- .EmptyState_root {
1447
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped */
1448
+ .mds-EmptyState__root {
1245
1449
  display: flex;
1246
1450
  flex-direction: column;
1247
1451
  align-items: center;
@@ -1249,21 +1453,21 @@
1249
1453
  gap: var(--mds-stack-item);
1250
1454
  padding: var(--mds-space-10) var(--mds-pad-card);
1251
1455
  }
1252
- .EmptyState_icon {
1456
+ .mds-EmptyState__icon {
1253
1457
  display: inline-flex;
1254
1458
  color: var(--mds-text-muted);
1255
1459
  }
1256
- .EmptyState_action {
1460
+ .mds-EmptyState__action {
1257
1461
  margin-top: var(--mds-space-2);
1258
1462
  }
1259
1463
 
1260
- /* src/components/Tabs/Tabs.module.css */
1261
- .Tabs_list {
1464
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tabs/Tabs.module.css?mds-scoped */
1465
+ .mds-Tabs__list {
1262
1466
  display: flex;
1263
1467
  gap: var(--mds-space-1);
1264
1468
  border-bottom: var(--mds-border-width) solid var(--mds-border-subtle);
1265
1469
  }
1266
- .Tabs_tab {
1470
+ .mds-Tabs__tab {
1267
1471
  border: none;
1268
1472
  background: transparent;
1269
1473
  padding: var(--mds-space-2) var(--mds-space-3);
@@ -1275,21 +1479,21 @@
1275
1479
  white-space: nowrap;
1276
1480
  transition: color var(--mds-transition-control);
1277
1481
  }
1278
- .Tabs_tab:hover {
1482
+ .mds-Tabs__tab:hover {
1279
1483
  color: var(--mds-text-primary);
1280
1484
  }
1281
- .Tabs_selected {
1485
+ .mds-Tabs__selected {
1282
1486
  color: var(--mds-text-primary);
1283
1487
  border-bottom-color: var(--mds-accent);
1284
1488
  }
1285
- .Tabs_panel {
1489
+ .mds-Tabs__panel {
1286
1490
  padding-top: var(--mds-stack-item);
1287
1491
  }
1288
1492
 
1289
- /* src/components/Toast/Toast.module.css */
1290
- .Toast_viewport {
1493
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.module.css?mds-scoped */
1494
+ .mds-Toast__viewport {
1291
1495
  position: fixed;
1292
- bottom: var(--mds-space-4);
1496
+ bottom: calc(var(--mds-space-4) + var(--mds-safe-bottom));
1293
1497
  left: 50%;
1294
1498
  transform: translateX(-50%);
1295
1499
  z-index: var(--mds-z-toast);
@@ -1299,7 +1503,7 @@
1299
1503
  width: min(var(--mds-modal-w), calc(100vw - 2 * var(--mds-space-4)));
1300
1504
  pointer-events: none;
1301
1505
  }
1302
- .Toast_toast {
1506
+ .mds-Toast__toast {
1303
1507
  display: flex;
1304
1508
  align-items: flex-start;
1305
1509
  gap: var(--mds-gap);
@@ -1310,28 +1514,28 @@
1310
1514
  box-shadow: var(--mds-elevation-modal);
1311
1515
  pointer-events: auto;
1312
1516
  }
1313
- .Toast_tone-success {
1517
+ .mds-Toast__tone-success {
1314
1518
  border-left-color: var(--mds-status-success);
1315
1519
  }
1316
- .Toast_tone-danger {
1520
+ .mds-Toast__tone-danger {
1317
1521
  border-left-color: var(--mds-status-danger);
1318
1522
  }
1319
- .Toast_body {
1523
+ .mds-Toast__body {
1320
1524
  display: flex;
1321
1525
  flex-direction: column;
1322
1526
  gap: var(--mds-gap-hairline);
1323
1527
  flex: 1;
1324
1528
  min-width: 0;
1325
1529
  }
1326
- .Toast_title {
1530
+ .mds-Toast__title {
1327
1531
  font: var(--mds-type-label);
1328
1532
  color: var(--mds-text-primary);
1329
1533
  }
1330
- .Toast_description {
1534
+ .mds-Toast__description {
1331
1535
  font: var(--mds-type-note);
1332
1536
  color: var(--mds-text-secondary);
1333
1537
  }
1334
- .Toast_close {
1538
+ .mds-Toast__close {
1335
1539
  display: inline-flex;
1336
1540
  align-items: center;
1337
1541
  justify-content: center;
@@ -1344,107 +1548,107 @@
1344
1548
  color: var(--mds-text-secondary);
1345
1549
  cursor: pointer;
1346
1550
  }
1347
- .Toast_close:hover {
1551
+ .mds-Toast__close:hover {
1348
1552
  background: var(--mds-surface-sunken);
1349
1553
  }
1350
- .Toast_closeGlyph {
1554
+ .mds-Toast__closeGlyph {
1351
1555
  width: var(--mds-icon-sm);
1352
1556
  height: var(--mds-icon-sm);
1353
1557
  }
1354
1558
 
1355
- /* src/components/Stack/Stack.module.css */
1356
- .Stack_stack {
1559
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Stack/Stack.module.css?mds-scoped */
1560
+ .mds-Stack__stack {
1357
1561
  display: flex;
1358
1562
  flex-direction: column;
1359
1563
  }
1360
- .Stack_gap-hairline {
1564
+ .mds-Stack__gap-hairline {
1361
1565
  gap: var(--mds-gap-hairline);
1362
1566
  }
1363
- .Stack_gap-tight {
1567
+ .mds-Stack__gap-tight {
1364
1568
  gap: var(--mds-gap-tight);
1365
1569
  }
1366
- .Stack_gap-base {
1570
+ .mds-Stack__gap-base {
1367
1571
  gap: var(--mds-gap);
1368
1572
  }
1369
- .Stack_gap-loose {
1573
+ .mds-Stack__gap-loose {
1370
1574
  gap: var(--mds-gap-loose);
1371
1575
  }
1372
- .Stack_gap-section {
1576
+ .mds-Stack__gap-section {
1373
1577
  gap: var(--mds-stack-section);
1374
1578
  }
1375
- .Stack_align-start {
1579
+ .mds-Stack__align-start {
1376
1580
  align-items: flex-start;
1377
1581
  }
1378
- .Stack_align-center {
1582
+ .mds-Stack__align-center {
1379
1583
  align-items: center;
1380
1584
  }
1381
- .Stack_align-end {
1585
+ .mds-Stack__align-end {
1382
1586
  align-items: flex-end;
1383
1587
  }
1384
- .Stack_align-stretch {
1588
+ .mds-Stack__align-stretch {
1385
1589
  align-items: stretch;
1386
1590
  }
1387
1591
 
1388
- /* src/components/Inline/Inline.module.css */
1389
- .Inline_inline {
1592
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Inline/Inline.module.css?mds-scoped */
1593
+ .mds-Inline__inline {
1390
1594
  display: flex;
1391
1595
  flex-direction: row;
1392
1596
  }
1393
- .Inline_gap-hairline {
1597
+ .mds-Inline__gap-hairline {
1394
1598
  gap: var(--mds-gap-hairline);
1395
1599
  }
1396
- .Inline_gap-tight {
1600
+ .mds-Inline__gap-tight {
1397
1601
  gap: var(--mds-gap-tight);
1398
1602
  }
1399
- .Inline_gap-base {
1603
+ .mds-Inline__gap-base {
1400
1604
  gap: var(--mds-gap);
1401
1605
  }
1402
- .Inline_gap-loose {
1606
+ .mds-Inline__gap-loose {
1403
1607
  gap: var(--mds-gap-loose);
1404
1608
  }
1405
- .Inline_align-start {
1609
+ .mds-Inline__align-start {
1406
1610
  align-items: flex-start;
1407
1611
  }
1408
- .Inline_align-center {
1612
+ .mds-Inline__align-center {
1409
1613
  align-items: center;
1410
1614
  }
1411
- .Inline_align-end {
1615
+ .mds-Inline__align-end {
1412
1616
  align-items: flex-end;
1413
1617
  }
1414
- .Inline_align-baseline {
1618
+ .mds-Inline__align-baseline {
1415
1619
  align-items: baseline;
1416
1620
  }
1417
- .Inline_justify-start {
1621
+ .mds-Inline__justify-start {
1418
1622
  justify-content: flex-start;
1419
1623
  }
1420
- .Inline_justify-center {
1624
+ .mds-Inline__justify-center {
1421
1625
  justify-content: center;
1422
1626
  }
1423
- .Inline_justify-end {
1627
+ .mds-Inline__justify-end {
1424
1628
  justify-content: flex-end;
1425
1629
  }
1426
- .Inline_justify-between {
1630
+ .mds-Inline__justify-between {
1427
1631
  justify-content: space-between;
1428
1632
  }
1429
- .Inline_wrap {
1633
+ .mds-Inline__wrap {
1430
1634
  flex-wrap: wrap;
1431
1635
  }
1432
1636
 
1433
- /* src/components/Container/Container.module.css */
1434
- .Container_container {
1637
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Container/Container.module.css?mds-scoped */
1638
+ .mds-Container__container {
1435
1639
  width: 100%;
1436
1640
  margin-inline: auto;
1437
1641
  padding-inline: var(--mds-pad-page-x);
1438
1642
  }
1439
- .Container_width-content {
1643
+ .mds-Container__width-content {
1440
1644
  max-width: var(--mds-content-max);
1441
1645
  }
1442
- .Container_width-wide {
1646
+ .mds-Container__width-wide {
1443
1647
  max-width: var(--mds-content-max-wide);
1444
1648
  }
1445
1649
 
1446
- /* src/components/Card/Card.module.css */
1447
- .Card_card {
1650
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Card/Card.module.css?mds-scoped */
1651
+ .mds-Card__card {
1448
1652
  display: flex;
1449
1653
  flex-direction: column;
1450
1654
  background: var(--mds-surface-card);
@@ -1454,12 +1658,18 @@
1454
1658
  color: inherit;
1455
1659
  text-decoration: none;
1456
1660
  }
1457
- .Card_variant-raised {
1661
+ .mds-Card__variant-raised {
1458
1662
  border-color: transparent;
1459
1663
  background: var(--mds-surface-raised);
1460
1664
  box-shadow: var(--mds-elevation-raised);
1461
1665
  }
1462
- .Card_interactive {
1666
+ .mds-Card__variant-sunken {
1667
+ background: var(--mds-surface-sunken);
1668
+ }
1669
+ .mds-Card__emphasis {
1670
+ border: var(--mds-border-emphasis) solid var(--mds-accent);
1671
+ }
1672
+ .mds-Card__interactive {
1463
1673
  padding: 0;
1464
1674
  margin: 0;
1465
1675
  font: inherit;
@@ -1467,10 +1677,10 @@
1467
1677
  cursor: pointer;
1468
1678
  transition: box-shadow var(--mds-transition-surface), background-color var(--mds-transition-surface);
1469
1679
  }
1470
- .Card_interactive:hover {
1680
+ .mds-Card__interactive:hover {
1471
1681
  box-shadow: var(--mds-elevation-hover);
1472
1682
  }
1473
- .Card_header {
1683
+ .mds-Card__header {
1474
1684
  display: flex;
1475
1685
  align-items: center;
1476
1686
  gap: var(--mds-gap);
@@ -1478,19 +1688,19 @@
1478
1688
  font: var(--mds-type-subtitle);
1479
1689
  color: var(--mds-text-primary);
1480
1690
  }
1481
- .Card_body {
1691
+ .mds-Card__body {
1482
1692
  flex: 1;
1483
1693
  padding: var(--mds-pad-card);
1484
1694
  }
1485
- .Card_footer {
1695
+ .mds-Card__footer {
1486
1696
  display: flex;
1487
1697
  align-items: center;
1488
1698
  gap: var(--mds-gap);
1489
1699
  padding: 0 var(--mds-pad-card) var(--mds-pad-card);
1490
1700
  }
1491
1701
 
1492
- /* src/components/Modal/Modal.module.css */
1493
- .Modal_panel {
1702
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Modal/Modal.module.css?mds-scoped */
1703
+ .mds-Modal__panel {
1494
1704
  display: flex;
1495
1705
  flex-direction: column;
1496
1706
  width: 100%;
@@ -1503,11 +1713,11 @@
1503
1713
  transform: scale(0.96);
1504
1714
  transition: opacity var(--mds-dur-base) var(--mds-ease-standard), transform var(--mds-dur-base) var(--mds-ease-standard);
1505
1715
  }
1506
- .Modal_panel[data-open] {
1716
+ .mds-Modal__panel[data-open] {
1507
1717
  opacity: 1;
1508
1718
  transform: none;
1509
1719
  }
1510
- .Modal_header {
1720
+ .mds-Modal__header {
1511
1721
  display: flex;
1512
1722
  align-items: center;
1513
1723
  gap: var(--mds-gap);
@@ -1515,12 +1725,12 @@
1515
1725
  font: var(--mds-type-subtitle);
1516
1726
  color: var(--mds-text-primary);
1517
1727
  }
1518
- .Modal_body {
1728
+ .mds-Modal__body {
1519
1729
  flex: 1;
1520
1730
  overflow-y: auto;
1521
1731
  padding: var(--mds-pad-card);
1522
1732
  }
1523
- .Modal_footer {
1733
+ .mds-Modal__footer {
1524
1734
  display: flex;
1525
1735
  align-items: center;
1526
1736
  justify-content: flex-end;
@@ -1528,28 +1738,38 @@
1528
1738
  padding: 0 var(--mds-pad-card) var(--mds-pad-card);
1529
1739
  }
1530
1740
 
1531
- /* src/components/ConfirmDialog/ConfirmDialog.module.css */
1532
- .ConfirmDialog_description {
1741
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ConfirmDialog/ConfirmDialog.module.css?mds-scoped */
1742
+ .mds-ConfirmDialog__description {
1533
1743
  margin: 0;
1534
1744
  font: var(--mds-type-body);
1535
1745
  color: var(--mds-text-secondary);
1536
1746
  }
1747
+ .mds-ConfirmDialog__error {
1748
+ margin: 0;
1749
+ font: var(--mds-type-body);
1750
+ color: var(--mds-status-danger);
1751
+ }
1537
1752
 
1538
- /* src/components/Screen/Screen.module.css */
1539
- .Screen_screen {
1753
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Screen/Screen.module.css?mds-scoped */
1754
+ .mds-Screen__screen {
1540
1755
  display: flex;
1541
1756
  flex-direction: column;
1542
- min-height: 100dvh;
1757
+ height: 100%;
1758
+ min-height: 0;
1543
1759
  background: var(--mds-surface-page);
1544
1760
  }
1545
- .Screen_content {
1761
+ .mds-Screen__content {
1546
1762
  flex: 1;
1763
+ min-height: 0;
1547
1764
  overflow-y: auto;
1548
1765
  padding: var(--mds-pad-page-y) var(--mds-pad-page-x);
1549
1766
  }
1767
+ .mds-Screen__content.mds-Screen__flush {
1768
+ padding: 0;
1769
+ }
1550
1770
 
1551
- /* src/components/AppBar/AppBar.module.css */
1552
- .AppBar_bar {
1771
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AppBar/AppBar.module.css?mds-scoped */
1772
+ .mds-AppBar__bar {
1553
1773
  position: sticky;
1554
1774
  top: 0;
1555
1775
  z-index: var(--mds-z-header);
@@ -1561,7 +1781,7 @@
1561
1781
  background: var(--mds-surface-page);
1562
1782
  border-bottom: var(--mds-border-width) solid var(--mds-border-subtle);
1563
1783
  }
1564
- .AppBar_title {
1784
+ .mds-AppBar__title {
1565
1785
  flex: 1;
1566
1786
  min-width: 0;
1567
1787
  overflow: hidden;
@@ -1571,14 +1791,31 @@
1571
1791
  white-space: nowrap;
1572
1792
  text-overflow: ellipsis;
1573
1793
  }
1574
- .AppBar_slot {
1794
+ .mds-AppBar__text {
1795
+ flex: 1;
1796
+ min-width: 0;
1797
+ display: flex;
1798
+ flex-direction: column;
1799
+ }
1800
+ .mds-AppBar__text .mds-AppBar__title {
1801
+ flex: none;
1802
+ }
1803
+ .mds-AppBar__subtitle {
1804
+ min-width: 0;
1805
+ overflow: hidden;
1806
+ font: var(--mds-type-note);
1807
+ color: var(--mds-text-secondary);
1808
+ white-space: nowrap;
1809
+ text-overflow: ellipsis;
1810
+ }
1811
+ .mds-AppBar__slot {
1575
1812
  display: flex;
1576
1813
  align-items: center;
1577
1814
  gap: var(--mds-gap-hairline);
1578
1815
  }
1579
1816
 
1580
- /* src/components/TabBar/TabBar.module.css */
1581
- .TabBar_bar {
1817
+ /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/TabBar/TabBar.module.css?mds-scoped */
1818
+ .mds-TabBar__bar {
1582
1819
  position: sticky;
1583
1820
  bottom: 0;
1584
1821
  z-index: var(--mds-z-tabbar);
@@ -1587,9 +1824,9 @@
1587
1824
  height: var(--mds-tabbar-h);
1588
1825
  background: var(--mds-surface-page);
1589
1826
  border-top: var(--mds-border-width) solid var(--mds-border-subtle);
1590
- padding-bottom: env(safe-area-inset-bottom);
1827
+ padding-bottom: var(--mds-safe-bottom);
1591
1828
  }
1592
- .TabBar_item {
1829
+ .mds-TabBar__item {
1593
1830
  flex: 1;
1594
1831
  display: flex;
1595
1832
  flex-direction: column;
@@ -1606,17 +1843,48 @@
1606
1843
  text-decoration: none;
1607
1844
  transition: color var(--mds-transition-control);
1608
1845
  }
1609
- .TabBar_item:hover {
1846
+ .mds-TabBar__item:hover {
1610
1847
  color: var(--mds-text-secondary);
1611
1848
  }
1612
- .TabBar_active,
1613
- .TabBar_active:hover {
1849
+ .mds-TabBar__active,
1850
+ .mds-TabBar__active:hover {
1614
1851
  color: var(--mds-text-accent);
1615
1852
  }
1616
- .TabBar_icon {
1853
+ .mds-TabBar__icon {
1854
+ position: relative;
1617
1855
  display: inline-flex;
1618
1856
  }
1619
- .TabBar_label {
1857
+ .mds-TabBar__badge {
1858
+ position: absolute;
1859
+ top: var(--mds-dot-offset-y);
1860
+ right: var(--mds-dot-offset-x);
1861
+ width: var(--mds-dot);
1862
+ height: var(--mds-dot);
1863
+ border-radius: var(--mds-radius-pill);
1864
+ background: var(--mds-status-danger);
1865
+ box-shadow: 0 0 0 var(--mds-dot-ring) var(--mds-surface-page);
1866
+ }
1867
+ .mds-TabBar__label {
1620
1868
  line-height: 1;
1621
1869
  }
1870
+ .mds-TabBar__action {
1871
+ flex: none;
1872
+ align-self: flex-start;
1873
+ width: var(--mds-tabbar-action);
1874
+ height: var(--mds-tabbar-action);
1875
+ margin-top: calc(-1 * var(--mds-tabbar-action-lift));
1876
+ border: none;
1877
+ border-radius: var(--mds-radius-pill);
1878
+ background: var(--mds-accent);
1879
+ color: var(--mds-accent-contrast);
1880
+ display: inline-flex;
1881
+ align-items: center;
1882
+ justify-content: center;
1883
+ box-shadow: var(--mds-elevation-raised);
1884
+ cursor: pointer;
1885
+ transition: background-color var(--mds-transition-control);
1886
+ }
1887
+ .mds-TabBar__action:hover {
1888
+ background: var(--mds-accent-hover);
1889
+ }
1622
1890
  /*# sourceMappingURL=index.css.map */